Tiles and Tile Styles

Version 28

     

    Overview

    Tiles display useful information about a place, such as the place's Popular Content or Featured People. You can use a tile as is or customize it to display information specific to your place. If you own the place, you can choose not to show default tiles, and instead select different tiles for your place.

    08-docs-place-tile.png

    Although many tiles are provided out of the box, you can also create your own tiles programmatically using one of several available tile styles.

     


     

    Tile Styles

    When creating your own tile, there are several different styles you can leverage: list, table, calendar, carousel, gallery, gauge.

    tile-collage-with-carousel.png

    You can even provide your own HTML to describe the look of your tile (using the Custom View tile).

     

    The style of your tile is defined within a JSON-based definition file that you send to Jive during installation.

     


     

    Tile Communication

     

    Creating your own tile involves building a service that responds to the registration process and then pushes data to Jive when the tile content changes:

    tile-sequence.png

    For detailed information about each step in this process, refer to Tile Registration and Data Push Sequence.

     

    One exception to this requirement that you provide an integration service is when you build a Jive-hosted Custom View Tile. This special tile requires no service.

     


     

    Tile Definition

    Before you can use a tile in Jive place, you must first install an add-on package to the Jive server containing your tile (instructions, sequence diagram). The definition of a tile is stored in the definition.json file, which is part of the add-on package that you upload to your Jive server. Below is the default definition.json when you create a list tile with the Jive Node SDK:

     

    1. {
    2.    "sampleData" : {
    3.        "title" : "List Title",
    4.        "contents" : [ {
    5.            "text" : "Initial text to be replaced"
    6.        } ],
    7.        "config" : {
    8.               "listStyle" : "contentList"
    9.        }
    10.    },
    11.    "displayName" : "My Great List Tile",
    12.    "name" : "sampletile-list",
    13.    "description" : "This is the description for my great list tile.",
    14.    "style" : "LIST",
    15.    "icons" : {
    16.        "16" : "https://community.jivesoftware.com/servlet/JiveServlet/showImage/102-99994-1-1023036/j.png",
    17.        "48" : "https://community.jivesoftware.com/servlet/JiveServlet/showImage/102-99994-1-1023036/j.png",
    18.        "128" : "https://community.jivesoftware.com/servlet/JiveServlet/showImage/102-99994-1-1023036/j.png"
    19.    },
    20.    "action": "/sampletile-list/action"
    21. }

     

    Styles Property—Type of Tiles Available

    Note that the "style" property defines the tile style. In the above example, you can see this is a "LIST" tile. The complete list of tile styles include:

     

    DisplayWidth Property—Wide Tiles and Narrow Tiles

    Some tiles (such as the list tile) can also be converted into "wide" tiles. These are tiles that reside on the wide pane in the center, rather than the narrow pane on the right. In order to convert a tile into a wide tile, add the displaywidth property with the value WIDE, NARROW, HERO or ALL in the definition.json file. If given the value of ALL, it can display in wide, hero and narrow. A HERO is only available for installation in the News Page.

     

    displayWidth : "WIDE"  or

    displayWidth : "ALL"

    displayWidth : "NARROW"  or

    displayWidth : "ALL"

    Wide List Tile.pngNarrow List Tile.png

     

    PageTypes PropertySet Tile Installation Location(s)

    By default, tiles are only available from pages within a Jive Place and tiles will not show on mobile devices. However, you can make tiles available from the News page, the Your View page, and you can have your tile visible on mobile devices. To add this availability, you simply add a pageTypes field to your definition.json. For example:

     

    "pageTypes" : ["PLACE", "USER", "NEWS", "MOBILE"]
    

     

    For additional information on tile availability, refer to Make Tiles Available to Different Page Types (PageTypes property).

     


     

    Tile Data

    The content of a tile is driven by JSON data that you push to the Jive server whenever the content changes. The following JSON example provides content for a list tile:

     

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

     

    The above JSON results in the following list tile:

    tile-example.png

    Refer to these documents describing the JSON schema for each tile style in more detail:

     


     

    Tile Actions

    Tile actions are a powerful way to provide users with the ability to act on the information shown in a tile. A tile action is a link in a tile that, when clicked, can provide a user with an embedded experience hosted by your own service. You can alternatively use a tile action to send the user to a URL outside of the Jive community. A tile action can be associated with specific elements within a tile (like for a line item within a list or a table), or it can be associated with a general action link at the bottom of a tile.

    tile-action-2.png

    For more information about tile actions, refer to Getting Started > Using Tile Actions with the Jive Node SDK.

     


     

    Creating Your Own Tile

    For a simple tile tutorial, refer to Getting Started > Creating a List Tile with the Jive Node SDK. This example uses the Jive Node SDK to build a tile. The Jive Node SDK has additional examples for each type of tile (i.e. "tile-list", "tile-table", "tile-calendar", "tile-gallery", "tile-gauge"). Try those examples once you complete the list tile tutorial.