List Tile: Design and JSON Schema

Version 12

     

    This document assumes you understand the basics about tiles. For an overview on tiles — what they are and how they work — refer to Tiles and Tile Styles.

     

    Overview

     

    The List tile is one of the most powerful tile types you can add to a Jive place (Group, Space, Project).  This tile type was designed to be flexible, while still being able to display content useful to users: people, places, external information.  With this tile, you can list out content that your users will find helpful.  There can be 5 items per list, and each can be linked to additional data.  Each item be either a single line or have a second line with a description. Furthermore, you can include a link in the bottom section of the tile to point to more information.


    At Jive, we rely heavily on this view style for a large number of the out-of-the-box tiles: Popular Content, Featured Content, Top Participants, Featured People, Similar Places, and Helpful Links.  Additionally, all of the Structured Outcomes tiles leverage this view style: Finalized Content, Recent Decisions, and Needs Action.

     

    List Tile Examples

     

    Screen Shot 2013-09-30 at 11.42.24 AM.pngScreen Shot 2013-09-30 at 11.53.33 AM.png

    Screen Shot 2013-09-30 at 11.49.50 AM.png

    Tutorial

     

    Refer to Getting Started > Creating a List Tile with the Jive Node SDK for an introductory tutorial.


    Tile Style Name


    The tile style must be defined in the tile's definition.json file:


    "style" : "LIST"

     

    JSON Sample Content

     

    tile-example.png

     

    The snippet below contains sample JSON for producing the list tile above.

     

    1. {
    2.     "title": "My Great List",
    3.     "contents": [
    4.         {
    5.             "text": "A cat",
    6.             "icon": "http://localhost:8090/images/cat.png",
    7.             "linkDescription": "A cat."
    8.         },
    9.         {
    10.             "text": "A dog",
    11.             "icon": "http://localhost:8090/images/dog.png",
    12.             "linkDescription": "A dog."
    13.         },
    14.         {
    15.             "text": "A counter: "+count,
    16.             "icon": "http://localhost:8090/images/count.png",
    17.             "linkDescription": "A counter."
    18.         },
    19.         {
    20.             "text": "A link to other content",
    21.             "icon": "http://localhost:8090/images/link.png",
    22.             "action": {
    23.                 "text": "This is a link!",
    24.                 "url": "http://www.jivesoftware.com"
    25.             },
    26.             "linkDescription": "A link."
    27.         }
    28.     ],
    29.     "config": {
    30.         "listStyle": "contentList"
    31.     }
    32. }

     

    JSON Schema

     

    The JSON schema for the tile list view is below.

     

    1. {   
    2.     "$schema": "http://json-schema.org/draft-03/schema#",   
    3.     "title": "List",   
    4.     "description": "The schema for data provided to a tile that uses the List view style",   
    5.     "type": "object",   
    6.     "properties": {   
    7.         "title": {   
    8.             "required": true,   
    9.             "type" : "string",   
    10.             "maxLength" : 50   
    11.         },   
    12.         "contents": {   
    13.             "required": true,   
    14.             "description" : "The list data, or a string error message",   
    15.             "type" : [ "array", "string"],   
    16.             "maxLength" : 200,   
    17.             "maxItems" : 10,   
    18.             "items" : {   
    19.                 "description" : "A list item",   
    20.                 "type" : ["object","string"],   
    21.                 "properties" : {   
    22.                     "icon" : {   
    23.                         "description" : "The URL for an image, or a URL and offset for a sprited image",   
    24.                         "type" : ["string","object"],   
    25.                         "format": "uri",   
    26.                         "properties" : {   
    27.                             "backgroundUrl" : {"type":"string", "format": "uri"},   
    28.                             "backgroundOffset" : {"type":"string"}   
    29.                         },   
    30.                         "dropAdditionalProperties": true   
    31.                     },   
    32.                     "text" : {   
    33.                         "required": true,   
    34.                         "type": "string",   
    35.                         "maxLength" : 40   
    36.                     },   
    37.                     "action":{   
    38.                         "required":false,   
    39.                         "description":"Object specifying embedded experience context data and/or a fallback URL",   
    40.                         "type":"object",   
    41.                         "properties":{   
    42.                             "text":{   
    43.                                 "required":false,   
    44.                                 "description":"Text of the action link for a calendar entry",   
    45.                                 "type":"string",   
    46.                                 "maxLength":50   
    47.                             },   
    48.                             "url":{   
    49.                                 "required":false,   
    50.                                 "description": "URL of an alternate (non-embedded) experience",   
    51.                                 "type":"string",   
    52.                                 "format":"uri"   
    53.                             },   
    54.                             "context":{   
    55.                                 "required":false,   
    56.                                 "description":"Context to pass to embedded experience",   
    57.                                 "type":"object"   
    58.                             }   
    59.                         },   
    60.                         "dropAdditionalProperties": true   
    61.                     },   
    62.                     "userID" : {   
    63.                         "required": false,   
    64.                         "description": "Jive user ID to link to",   
    65.                         "type": [ "string", "integer" ],   
    66.                         "pattern": "[1-9]\\d*"   
    67.                     },   
    68.                     "userIsPartner" : {   
    69.                         "required": false,   
    70.                         "description": "Indicates that the Jive user is an external partner"   
    71.                     },   
    72.                     "containerID" : {   
    73.                         "required": false,   
    74.                         "description": "Jive container ID to link to, used in conjunction with containerType",   
    75.                         "type": [ "string", "integer" ],   
    76.                         "pattern": "[1-9]\\d*"   
    77.                     },   
    78.                     "containerType" : {   
    79.                         "required": false,   
    80.                         "description": "Jive container type to link to, used in conjunction with containerID",   
    81.                         "type": [ "string", "integer" ],   
    82.                         "pattern": "-?[1-9]\\d*"   
    83.                     },   
    84.                     "linkDescription" : {   
    85.                         "required": false,   
    86.                         "description": "First line of descriptive text for this list item",   
    87.                         "type": "string",   
    88.                         "maxLength" : 40   
    89.                     },   
    90.                     "linkMoreDescription" : {   
    91.                         "required": false,   
    92.                         "description": "Second line of descriptive text for this list item",   
    93.                         "type": "string",   
    94.                         "maxLength" : 40   
    95.                     }   
    96.                 },   
    97.                 "dropAdditionalProperties": true   
    98.             }   
    99.         },   
    100.         "action":{   
    101.             "required":false,   
    102.             "description":"Object specifying embedded experience context data and/or a fallback URL",   
    103.             "type":"object",   
    104.             "properties":{   
    105.                 "text":{   
    106.                     "required":false,   
    107.                     "description":"Text of the action link",   
    108.                     "type":"string",   
    109.                     "maxLength":50   
    110.                 },   
    111.                 "url":{   
    112.                     "required":false,   
    113.                     "description": "URL of an alternate (non-embedded) experience",   
    114.                     "type":"string",   
    115.                     "format":"uri"   
    116.                 },   
    117.                 "context":{   
    118.                     "required":false,   
    119.                     "description":"Context to pass to embedded experience",   
    120.                     "type":"object"   
    121.                 }   
    122.             },   
    123.             "dropAdditionalProperties": true   
    124.         },   
    125.         "config": {   
    126.             "required": false,   
    127.             "description" : "Options to control the rendered view",   
    128.             "type" : "object",   
    129.             "properties" : {   
    130.                 "listStyle":{   
    131.                     "required": true,   
    132.                     "enum" : ["peopleList", "contentList"]   
    133.                 }   
    134.             },   
    135.             "dropAdditionalProperties": true   
    136.         }   
    137.     },   
    138.     "dropAdditionalProperties": true   
    139. }