Pertaining the State of a Gadget Within a Page

This is extremely useful when there is a use case for sharing a dashboard. For example, if there is a dashboard with lots of interconnected gadgets and if  you want to share it with some other party after you have drilled down the dashboard into a customized state. In this scenario, you can pertain the gadget state in the URL hash and thereafter share the entire URL with the others. When the gadget loads initially it will restore the state of the gadget by retrieving the exact gadget state from the URL. 

Follow the instructions below to pertain the state of a gadget within a page when Manually creating the gadget.

Step 1 - Create a folder structure for the new gadget

You need to create the gadget related configurations within a tenant directory as follows:

1. Navigate to the respective tenant directory. 
   This folder gets automatically created when a tenant is created via the DAS Management Console.
   <DAS_HOME>/repository/deployment/server/jaggeryapps/portal/store/<TENANT_DOMAIN> 
   
   Example:
   <DAS_HOME>/repository/deployment/server/jaggeryapps/portal/store/test.com
2. Create a folder based on the name of the gadget in the newly created tenant directory.
   <DAS_HOME>/repository/deployment/server/jaggeryapps/portal/store/<TENANT_DOMAIN>/fs/gadget/<GADGET_NAME> 
   
   Example:
   <DAS_HOME>/repository/deployment/server/jaggeryapps/portal/store/test.com/fs/gadget/TestGadget

Step 2 - Define the gadget XML

1. Create a gadget XML file in the  <DAS_HOME>/repository/deployment/server/jaggeryapps /portal/store/<TENANT_DOMAIN>/fs/gadget/<GADGET_NAME> directory. The XML file name can be anything. However, for standardization purposes, the gadget XML files for all gadgets that are shipped with WSO2 DAS are named as index.xml files.

2. Import the wso2-gadget-state feature in the gadget that needs to pertain the state. Add the following code in the gadget XML file under the ModulePrefs element.

   <Require feature=”wso2-gadgets-state” />

3. Call the following method in order to store the state of the gadget. Add the following code in the gadget XML file under the Content element.
   wso2.gadgets.state.setGadgetState(State, Callback);

   Example

   wso2.gadgets.state.setGadgetState({
           chartType: ‘Line’, 
           year: 2016
       }, function() {
           // define details of the function
       });

4. Call the following method in order to retrieve the state of the gadget from the URL. Add the following code in the gadget XML file under the Content element.
   wso2.gadgets.state.getGadgetState(Callback);

   Example

   wso2.gadgets.state.getGadgetState(function(state) {
       // define details of the function
   });