How to embed an app within an external stream object

Version 9

     

    Summary

     

    You can embed an app view within an external stream object. This can be a powerful solution if you want to provide an external stream that, when clicked, opens a rich app view highlighting information about the external service. You can also send context information from the Jive stream back to your app.

    activity.png

    How To

     

    STEP 1. Create a Jive App. For instructions on creating an app, refer to Getting Started > Creating an App with the Jive Node SDK. If you want to create a Jive-hosted app, refer to Creating Jive-hosted Apps.


    STEP 2. Create a content element containing a view attribute within the app.xml file of the app. This will be the view shown from within your activity stream. Alternatively, you can use an existing view for your app — the Jive Node SDK creates a "canvas" view by default. Refer to App Action Contribution Reference for information about the view attribute. For example:

    <Content type="html" view="activityview" href="view.html" />
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    


    STEP 3. Create the HTML content for your app view using the view name specified in the href attribute.

     

    STEP 4. Create a UUID for the app within the app's definition.json file. For example:

    {
        "id": "APP_UUID_GOES_HERE",
        "name" : "My App"
    }
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    


    STEP 5. Create an activity stream. You can use the Jive Node SDK command "jive-sdk create activity-stream" to create an activity stream example. (Refer to Getting Started > Creating an External Activity Stream for a tutorial.)


    STEP 6. Add the following JSON object within the JSON of the activity stream data push (located in tiles/ACTIVITY_NAME/backend/datapusher.js of the Jive Node SDK):

    "jive": {
        "app": {
            "appUUID": "APP_UUID_GOES_HERE",
            "view": "VIEW_ATTRIBUTE_FROM_STEP_2_GOES_HERE",
            "context": {
                PROPERTY_GOES_HERE: "VALUE_GOES_HERE"
            }
        }
    }
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    

    Fill in the specified values. The "appUUID" and "view" elements must be filled. The "context" object is optional, but can be useful in order to send some context info into your app. Add as many context properties as you need.


    STEP 7. (Optional) Your app's JavaScript code can grab context information (specified by the "context" object above) using the following Jive Open Social call:

    osapi.jive.core.container.getLaunchContext(function (context) {
      // Grab context info here...
    });
    
    
    
    
    
    
    
    
    
    
    

     

    Sample Content


    definition.json


    Sample definition.json content containing the app's UUID:

    {
      "integrationUser": {
          "systemAdmin": false
      },
      "osapps": [
          {
              "name": "Simple App Skeleton",
              "id": "4dc31c23-dd00-5899-b5da-5cdd452eddd2",
              "appPath": "4dc31c23dd005899b5da5cdd452eddd2",
              "url": "/public/apps/simpleapp/app.xml"
          }
      ]
    }
    
    
    
    
    
    
    


    app.xml

     

    Sample app.xml excerpt containing the view to be used by the activity object:

    <Content type="html" view="canvas" href="canvas.html" />


    HTML for app view

     

    Sample canvas.html page containing the actual app view (which was specified in app.xml):

    <html>
    <head>
        <link rel="stylesheet" href="stylesheets/main.css" type="text/css" media="screen" />
        <script type="text/javascript" charset="utf-8" src="javascripts/main.js"></script>
    </head>
    <body>
    <div>
        <h1>Welcome to my app!</h1>
        <p>Here is some context: <span id="context"></span>.</p>
    </div>
    </body>
    </html>
    
    
    
    
    
    
    


    JavaScript for app view

     

    Sample main.js code (used by canvas.html above) that extracts context information:

    gadgets.util.registerOnLoadHandler(function() {
    
        // grab context information from the activity object
        osapi.jive.core.container.getLaunchContext(function (context) {
            $("#context").html(context.jive.context.myKey);
        });
    
        // resize app window to fit content
        gadgets.window.adjustHeight();
        gadgets.window.adjustWidth();
    });
    
    
    
    
    
    
    


    JSON payload for activity

     

    Sample JSON payload for an activity containing the app:

    {
        "activity": {
            "action": {
                "name": "posted"
            },
            "object": {
                "type": "website",
                "image": "http://bit.ly/1wYwajm",
                "title": "My New Activity",
                "url": "https://developer.jivesoftware.com",
                "description": "This is the informative description to my new activity."
            },
            "jive": {
                "app": {
                    "appUUID": "4dc31c23-dd00-5899-b5da-5cdd452eddd2",
                    "view": "canvas",
                    "context" : {
                        "myKey" : "this came from my activity data push"
                    }
                }
            }
        }
    }
    
    
    
    
    
    
    
    
    
    
    
    

     

    screenshot of activity

     

    Resulting activity page containing the app inside the external activity object:

    Screen Shot 2015-04-27 at 11.18.15 AM.png