Page Comparison

A gadget is a component of a dashboard. You can place gadgets to the pre-defined grids of the layout of a page as described below.

...

Use the sample gadget configuration structures in the <DAS_HOME>/repository/deployemnt/server/jaggeryapps/portal/store/carbon.super/gadget/ directory to create a custom gadget Add the following resources and create the configuration parent directory of your custom gadget.

Add the gadget structure as shown in the example ( index.xml file) below.

Code Block

language	xml

<?xml version="1.0" encoding="UTF-8" ?>
<Module>
    <ModulePrefs title="USA Mobile Stats" height="250" description="USA Mobile Stats">
        <Require feature="pubsub-2"/>
        <Require feature="dynamic-height"/>
    </ModulePrefs>
    <Content type="html">
        <![CDATA[
        <head>
            <style type="text/css">
                .log {
                    width: 400px;
                    height: 400px;
                    background-color: #415b76;
                    color: #fff;
                }
            </style>
            <script language="javascript" type="text/javascript" src="/portal/js/jquery-1.10.2.js"></script>
            <script>
                gadgets.HubSettings.onConnect = function() {
                    var id = 0;
                    setInterval(function() {
                        $('.log').append('<div>publishing message from g1, id : ' + (++id) + '</div>');
                        gadgets.Hub.publish('select', {
                            msg : 'A message from g1',
                            id: id
                        });
                    }, 5000);
                };
            </script>
        <head>
        <body>
            <div class="log"></div>
        </body>
        ]]>
    </Content>
</Module>

Add the gadget definition as shown in the example (gadget.json file) below.

Code Block

language	js

{
    "id": "USA Mobile Stats",
    "title": "USA Mobile Stats",
    "type": "gadget",
    "thumbnail": "local://store/gadget/my-gadget/index.png",
    "data": {
        "url": "local://store/gadget/my-gadget/index.xml"
    },
    "notify": {
        "select": {
            "type": "address",
            "description": "This generates mobile stats."
        },
        "cancel": {
            "type": "boolean",
            "description": "This generates disconnected mobile stats."
        }
    }
}

Add a thumbnail image ( index.png ) to display in the list of gadgets in the analytics dashboard as the below example .
Refresh the analytics dashboard application.
Now, you view the new gadget you created added to the list of available gadgets as shown in the below example.
Image RemovedImage Added
You can add this custom gadget to a layout.

Versions Compared

Old Version 23

New Version 24

Key