Getting Started > Creating a Carousel Tile with the Jive Node SDK

Version 7

    In this Getting Started tutorial, we will use the Jive Node SDK to create a simple carousel tile. A carousel tile (available with the Summer 2014 Jive Cloud release) is a Jive tile that can be used in a Place to display a series of images.

    carousel-0.png

    The instructions below should take under 15 minutes.




    Prerequisites


    Before running this tutorial:

    1. Install the Jive Node SDK on your development system. Installation instructions are described at Getting Started > Installing the Jive Node SDK.
    2. You need to be able to install add-ons on the Jive server being used for this tutorial. This will require you to be an administrator, a community manager, or have the sandbox property turned on to enable the installation of add-ons for personal use (property name: jive.extension.sandbox.enabled). Registered developers can use the Jive Developer Sandbox, which has the sandbox property turned on.
    3. Your development system must be accessible to the Jive server. If your system is not accessible to the Jive server (e.g. behind a firewall), consider using a cloud-based IDE for this tutorial. See Using Nitrous.IO with the Jive Node SDK for one type of cloud-based solution.

     

    Instructions

     

    To create an carousel tile:

    1. Browse to an empty directory where you want your code for this tutorial to reside.
    2. Create a tile sample using the Jive Node SDK:

      jive-sdk create tile-carousel

      This creates a project with all the code necessary to build a simple carousel tile.The Jive Node SDK uses built-in OAuth 2.0 authentication for tile registration.
    3. Update all node package dependencies.

      npm update

    4. To test what is provided out of the box, follow instructions for deploying your project at Getting Started > Deploying a Jive Node SDK Project as an Add-On.
    5. Once you've deployed a tile, you can test it out by going to a Place and creating a tile.
      1. Browse to a Place (i.e. a Space, Project, or Group).
      2. Select Settings from the Manage submenu.
        install-tile-1.png
      3. On the right panel, click "Add a tile".
        install-tile-2.png
      4. Select "sample-carousel" (or whatever you named your tile) from the "Other" tile category.
        tile-carousel.png
      5. This tile has a sample configuration page. Enter a number on the configuration page to configure the tile. Click Submit.
        carousel-2.png
      6. Click Save at the bottom of the Place.
        install-tile-5.png
      7. Wait ten seconds for the counter to update.

     

    The tile should now update with the tile carousel.

    carousel-3.png

     

    For details about how the code is organized in this example, refer to the Code Organization section of the List Tile Tutorial.

     

    One way you can extend the example is to change the content that gets pushed to the tile, which is found in the getFormattedData function of /tiles/sampetile-carousel/backend/services.js.

     

    function getFormattedData(count) {
            return {
                data: {
                     "title": "sampletile-carousel :"+count,
                     "contents": [
                     {
                        "titleText": "Jive Software - Carousel 1",
                        "titleLink": "http://developer.jivesoftware.com",
                        "image": "http://www.easternct.edu/ctreview/connections/stories/images/carousel_1.jpg",
                        "imageURI": "http://www.easternct.edu/ctreview/connections/stories/images/carousel_1.jpg",
                        "description": "Carousel Horse"
                     },
                     {
                         "titleText": "Jive Software - Carousel 2",
                         "titleLink": "https://community.jivesoftware.com/community/developer",
                         "image": "http://thispublicaddress.com/tPA4/images/06_06/carousel.jpg",
                         "imageURI": "http://thispublicaddress.com/tPA4/images/06_06/carousel.jpg",
                         "description": "Old School Carousel"
                     },
                     {
                         "titleText": "Jive Software - Carousel 3",
                         "titleLink": "https://community.jivesoftware.com/community/developer",
                         "image": "http://upload.wikimedia.org/wikipedia/en/9/9e/Carousel_1945_Bdwy.jpg",
                         "imageURI": "http://upload.wikimedia.org/wikipedia/en/9/9e/Carousel_1945_Bdwy.jpg",
                         "description": "On Broadway"
                     }
                     ],
                     "config": {
                        "autoplay": true,
                        "speed": "medium",
                        "previewPane": true,
                        "transition": "fade"
                     }
                    }
            };
        }
    
    
    
    
    

     

    The JSON schema for this tile style is specified at Carousel Tile: Design and JSON Schema.

     

    You can also create a unique configuration page by updating the configuration HTML content in tiles/sampetile-carousel/public/configuration.html and the JavaScript configuration content in tiles/sampetile-carousel/backend/configure/get.js.

     

    For More Information