Sunday, February 21, 2016

[Analytics Dashboards]How to Create a custom gadget in WSO2 Dashboard Designer .



We can host our own gadgets which are implemented using specific requirements in analytics dashboard. This blog post guide you to create and deploy a custom gadget in analytics dashboard.
To do this you need to run the WSO2 Data Analytic Server in your machine.

Step 1 : Create index.xml

You need to create a folder for your custom gadget inside 
<DAS_HOME>/repository/deployment/server/jaggeryapps/portal/store/carbon.super/gadget/
Here I created a folder called hello-world.
Add the following index.xml file inside your custom gadget folder(in my case inside hello-world folder). 
There is a specific format is available for index.xml file. You can get an idea about this format by reading[1].

index.xml

<?xml version="1.0" encoding="UTF-8" ?>
<Module>
  <ModulePrefs title="Demo Hello World gadget"
     author="LCG"
     height="230"
     scrolling="true">
  </ModulePrefs>
<Content type="html">
  <![CDATA[
     <html>
       <head>
       </head>
       <body>
            <a>Hello World</a>
       </body>
     </html>
   ]]>
</Content>
</Module>

 
Step 2 : Create Gadget.json

This file keeps the gadget definition.

{
    "id":"hello-world",
    "title":"HelloWorldGadget",
    "type":"gadget",
    "thumbnail":"store://gadget/hello-world/index.png",
    "data":{
             "url":"store://gadget/hello-world/index.xml"
      }

}

 
You need to give the proper id title for your gadget. You need to give the location of your gadget image in “thumbnail” and location of the index.xml file for the “url”.

Index.png
 
Folder structure of the gadget.


  
Now the custom gadget is created. Now you can add this gadget to your dashboard.To add this Click on “design” button in your dashboard.
Then click on following button.






Then you can see your created gadget as shown below. Click on gadget and Drag and drop to the grid to add the gadget to your dashboard. 



Click on “view” button in your dashboard to view your gadget. The view of the hello world gadget is as shown below.

Like wise you can add separate gadgets to one dashboard.
If you want you can edit the gadget. The dashboard designer provides following options.

Click on following icon we can drag and drop the gadget from one grid to another grid in layout.
 
 
Click on following icon we can  maximize the size of the grid.


 
Click on following icon  we can delete the gadget from dashboard.

Click on following icon we can change the setting of the gadget. If you click on this you can change the default settings of the gadget as shown in below figure.




 
Posted by at

1 comment:

Subscribe to: Post Comments (Atom)