List Tile: Design and JSON Schema

Document created by marnie Employee on Sep 30, 2013Last modified by yuval.z on Jul 11, 2014
Version 12Show Document
  • View in full screen mode

 

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. }

Attachments

    Outcomes