[WSO2 IS] Adding gadget to end user dashboard
WSO2 Identity server has dashboard app which contains several gadgets for end users to perform certain tasks. In this post we are going to see how to create a new gadget and add it to the dashboard app.
Creating a gadget
- Navigate to the <IS_HOME>/repository/deployment/server/jaggeryapps/portal/gadgets directory
- Create a folder based on the name of the gadget e.g sso-apps
3. Define gadget xml
Gadgets are defined using an XML file, which can be later rendered using Shindig to HTML document. Create this XML file within the <IS_HOME>/repository/deployment/server/jaggeryapps/portal/gadgets /<GADGET_NAME> directory, and use any name to name the gadget XML file. E.g gadget.xml
The basic structure of the gadget XML file is as follows:
<Module>
<ModulePrefs></ModulePrefs>
<Content></Content>
</Module>
- Module — This is the root element of the XML structure.
- ModulePrefs — This is a gadget configuration element. This can contain attributes and child elements. For example,
<ModulePrefs title=”Population History” height=”350" description=”Subscribe to the state channel” tags=”drilldown”>
<Require feature=”dynamic-height” />
<Require feature=”pubsub-2" />
</ModulePrefs>
The Require element is used to define features that are used in the gadget. In this sample, the pubsub-2 and dynamic-height features have been added.
- Content — This contains the data that needs to be rendered. In the following example, it contains HTML. When defining the content element, you need to also define the type of the content.
<Content type=”html”>
<![CDATA[html content goes here]]>
</Content>
If you wish to learn more on creating gadget XMLs, go to https://developers.google.com/gadgets/docs/gs
4. Add any other required folders
The gadget that is being created may need supporting files such as images,apis etc. These files too need to be added in the <IS_HOME>/repository/deployment/server/jaggeryapps/portal/gadgets/<GADGET_NAME> directory
Adding a gadget to dashboard
- Open the file gadget.json and register the newly created gadget in dashboard app.
<IS_HOME>/repository/deployment/server/jaggeryapps/dashboard/apis/gadget.json
+------------+-----------------------------------------------------
|wid | Unique id | x | X coordinate of gadget in the dashboard |
| y | Y coordinate of gadget in the dashboard |
| width | Width of the gadget in the dashboard |
| height | Height of the gadget in the dashboard |
| url | Url of the gadget xml |
| permission | Users with this permission can accessthe gadget | authorized | If need authorization set it true |
| id | Unique id |
+------------+------------------------------------------------------
2. Open the index.jag of dashboard app and add new list block to display the gadget in the Dashboard. Add all the properties defined in gadget.json to list element tag (<li >)(e.g data-col,data-row,data-url etc)
<IS_HOME>/repository/deployment/server/jaggeryapps/dashboard/index.jag
3. View added gadget in Dashboard by accessing the dashboard (https://<ip>:<port>/dashboard)
