Page Comparison

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

...

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

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

Code Block

language	xml

<?xml version="1.0" encoding="UTF-8" ?>
<Module>
    <ModulePrefs title="Text Box" description="Text Box Gadget">
        <Require feature="dynamic-height"/>
    </ModulePrefs>
    <UserPref name="content"
              display_name="Content"
              default_value="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."/>
    <Content type="html">
        <![CDATA[
        <head>
            <meta charset="utf-8">
            <title>Text Box</title>
            <link rel="stylesheet" href="/portal/css/bootstrap.min.css" type="text/css"/>
            <style>
                .textbox {
                    padding-left: 0;
                    padding-right: 0;
                    padding-top: 0;
                }
            </style>
            <script src="/portal/js/jquery-1.10.2.js"></script>
            <script src="/portal/js/bootstrap.min.js"></script>
            <script>
                gadgets.util.registerOnLoadHandler(function() {
                    var prefs = new gadgets.Prefs();
                    var content = prefs.getString('content');
                    $('.textbox').html(gadgets.util.unescapeString(content));
                });
            </script>
        </head>
        <body>
            <div class="container-fluid">
                <div class="row">
                    <div class="col-md-12 textbox"></div>
                </div>
            </div>
        </body>
        ]]>
    </Content>
</Module>

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

Code Block

language	js

{
    "id": "textbox",
    "title": "Text Box",
    "type": "gadget",
    "thumbnail": "store://gadget/usa-business-revenue/index.png",
    "data": {
        "url": "store://widget/textbox/index.xml"
    },
    "options": {
        "content": {
            "type": "text"
        }
    },
    "styles": {
        "borders": false,
        "title": false
    }
}

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 new widget you created added to the list of available gadgets widgets as shown in the below example.
Image RemovedImage Added
You can add this custom gadget widget to a layout.

Versions Compared

Old Version 5

New Version 6

Key