2 Replies Latest reply on Jan 18, 2015 7:05 PM by yingjieg

    Create multiple actions for Tile-list

    yingjieg

      I create a tile-list like below: there are five list items, now I want to implement the function that when I click different item , different action pages will be loaded by Jive(The below json include several actions pages, action1.html, action2.html...). Please give me some suggestions.

      Capture.PNG

       

       

       

      {

          "title":"Simple Tile Action",

          "contents":[

              {

                  "text":"Tile Action Test1",

                  "icon":"https://community.jivesoftware.com/servlet/JiveServlet/showImage/102-99994-1-1023036/j.png",

                  "action":{

                      "text":"Action",

                      "url":jive.service.options['clientUrl'] + '/simpletile-list/action1.html',

                      "context":{

                          "data":count

                      }

                  }

              },

              {

                  "text":"Tile Action Test2",

                  "icon":"https://community.jivesoftware.com/servlet/JiveServlet/showImage/102-99994-1-1023036/j.png",

                  "action":{

                      "text":"Action",

                      "url":jive.service.options['clientUrl'] + '/simpletile-list/action2.html',

                      "context":{

                          "data":count

                      }

                  }

              },

              {

                  "text":"Tile Action Test3",

                  "icon":"https://community.jivesoftware.com/servlet/JiveServlet/showImage/102-99994-1-1023036/j.png",

                  "action":{

                      "text":"Action",

                      "url":jive.service.options['clientUrl'] + '/simpletile-list/action3.html',

                      "context":{

                          "data":count

                      }

                  }

              }

          ],

          "config":{

              "listStyle":"contentList"

          },

          "action":{

              "text":"Visit Tutorial",

              "url":"https://community.jivesoftware.com/docs/DOC-129789"

          }

      }

        • Re: Create multiple actions for Tile-list
          spyman

          Hello Yingjie,

           

          if you have multiple pages like :

           

          jive.service.options['clientUrl'] + '/simpletile-list/action2.html'

           

          jive.service.options['clientUrl'] + '/simpletile-list/action3.html'


          Your tile will try to perform a GET for this route, when an action is performed, in your case when it's clicked. This is called a tile action. Your backend will then tell the client, what to with this action (in your case, it will tell the client to render a specific HTML).


          Routes are created in your backend of your Tile-Service. (for more information, look at the screenshot below).

           

          If you look in your tile, it will probably and only have a route for action (simpletile-list/backend/action) and a route for configuration (simpletile-list/backend/configure).

           

          You need to understand, that your node.js provides these URLs, you can even open it in your own browser and perform a get. For example (when your node.js is running)

           

          Open your browser and call :

           

          http://localhost:3000/simpletile-list/action

           

           

          (switch localhost with your node.js url and :3000 with the correct port)

           

          If you do this, your service will provide the action.html to your client. It sends a RESPONSE to your REQUEST.

           

           

          Below you find a screenshot of a Tile from me, as you can see I have the routes for action and configure. When the client performs a GET for these routes, my backend will tell the client what to do (it's always a REQUEST and a RESPONSE).

           

          routes.PNG

           

          So go ahead and create a folder in routes and name it action2, for example and place a get.js in it !

           

          The content of the get.js is :

           

           

           

          var jive = require("jive-sdk");

           

           

          exports.route = function(req, res){

              var conf = jive.service.options;

              res.render('action2.html', { host: jive.service.serviceURL()  });

          };

           

           

          Now we created the route and only need to create the corresponding html, so it can be rendered. Because it is rendered for the client, we go into the public folder !

           

          If you look into your public folder, there is probably already an action.html and an configuration.html, so go ahead and create your action2.html file there !

           

           

          If everything worked correctly, the client is now sending a GET to your node.js, requesting the action2.html and the response will be the action2.html to render for the client in the browser.

           

          I hope you could understand everything and I didn't forget anything, just tell me, if it worked or if you need any additional help.

           

           

           

           

           

           


          1 person found this helpful