Adding Widgets to a Layout

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.

Adding a default widget

Follow the steps below to add a widget which is available by default in the analytics dashboard of WSO2 DAS.

Access the analytics dashboard application using the following URL: https://<HOST_NAME>:<PORT>/portal/dashboards.
Log in to the dashboard using Carbon login credentials.
Click the corresponding Design button of the dashboard to which you want to add a gadget as shown below.
Click the following widget browser icon in the side menu bar.
You view all available widgets as shown below.
Drag the widget out which you want to add, and drop it to place it in the preferred grid of the selected layout in the dashboard editor as shown below.

Editing a widget

You can use the following options provided in the dashboard editor to edit a widget as described below.

Click the following icon to view information about the widget in a tooltip.
Click the following icon to move the widget (drag-and-drop) from one grid to another in the layout.
Click the following icon to view the settings of the widget.
You can change the default settings of the widget as preferred as shown in the below example.
Click the following icon to remove the widget from the layout.

Creating a custom widget

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 as shown in the example ( index.xml file) below.

<?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 definition as shown in the example (widget.json file) below.

{
    "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 created added to the list of available gadgets as shown in the below example.

You can add this custom gadget to a layout.