Configuring Customized User Preference Settings

Some gadgets need to allow users (viewers and editors) to provide user-specific information in the dashboard view mode, without needing to go into the edit mode. In WSO2 DS, the required user preference values are loaded at runtime enabling users to provide the corresponding input. Changes done by dashboard viewers are saved in that respective user's space in the registry. Thereby, enabling viewers who have entered user preferences to view a customized version of the original dashboard. Changes done by dashboard editors are saved in the original registry space of the dashboard. If you want the user preferences to appear in the standard view, the user preferences need to be added in the <UserPref> tag under the <Module> section. For more information, click here. The following steps describe how you can define the user preferences of a specific gadget, in a customized settings view:

The following steps can be carried out when creating a gadget or updating a gadget.

Navigate to the respective gadget folder within the tenant directory.
<DS_HOME>/repository/deployment/server/jaggeryapps/portal/store/<TENANT_NAME>/<GADGET_NAME>

Example:
<DS_HOME>/repository/deployment/server/jaggeryapps/portal/store/kim/age_group

Define the customized user preferences view as view="settings" in the <Content> tag together with the corresponding customizations.
Example:

<Module>
<Content type="html" view="settings">
       <![CDATA[
		Define the settings here
  	]]>
</Content>
</Module>

Click here to view a complete gadget XML...

<Module>
   <ModulePrefs title="USA Map" description="USA clickable map">
      <Require feature="dynamic-height" />
      <Require feature="setprefs" />
      <Require feature="pubsub-2" />
   </ModulePrefs>
   <UserPref name="username" default_value="ruchira@wso2.com" />
   <Content type="html" view="home"><![CDATA[<html>
<head>
<style>
    #map {
        height: 100%;
        width: 100%;
    }
	.state{
		fill: none;
		stroke: #a9a9a9;
		stroke-width: 1;
	}
	.state:hover{
		fill-opacity:0.5;
	}
</style>
</head>
<body>
<div>
<label id="defaultViewLabel">USA MAP (This is default view)</label>
<svg id="map" viewBox="0 0 1000 800" preserveAspectRatio="xMidYMid"></svg>
<script src="../../../js/jquery-1.10.2.js"></script>
<script src="js/uStates.js"></script>
<script src="js/d3.v3.min.js"></script>
<script>
	var click = function(state) {
	    var address = { country: 'US', state: state.id };
	    var prefs = new gadgets.Prefs();
	    prefs.set('username1', 'ruchirawageesha@gmail.com');
        var name = prefs.getString('username');
        console.log(name);
        var lang = prefs.getLang();
        console.log(lang);
        gadgets.Hub.publish('state', address);
	};
	var data ={};
	["HI", "AK", "FL", "SC", "GA", "AL", "NC", "TN", "RI", "CT", "MA",
	"ME", "NH", "VT", "NY", "NJ", "PA", "DE", "MD", "WV", "KY", "OH",
	"MI", "WY", "MT", "ID", "WA", "DC", "TX", "CA", "AZ", "NV", "UT",
	"CO", "NM", "OR", "ND", "SD", "NE", "IA", "MS", "IN", "IL", "MN",
	"WI", "MO", "AR", "OK", "KS", "LS", "VA"]
		.forEach(function(d){
			var low=Math.round(100*Math.random());
			data[d]={color:d3.interpolate("#ffffcc", "#800026")(low/100)};
		});
	uStates.draw("#map", data, click);
	//gadgets.util.registerOnLoadHandler(function() {
	    //gadgets.window.adjustHeight();
	//});
</script>
</div>
</body>
</html>]]></Content>
   <Content type="html" view="full"><![CDATA[<html>
<head>
<style>
    #map {
        height: 100%;
        width: 100%;
    }
	.state{
		fill: none;
		stroke: #a9a9a9;
		stroke-width: 1;
	}
	.state:hover{
		fill-opacity:0.5;
	}
</style>
</head>
<body>
<div>
<label id="fullViewLabel">USA MAP(this is full screen view)</label>
<svg id="map" viewBox="0 0 1000 800" preserveAspectRatio="xMidYMid"></svg>
<script src="../../../js/jquery-1.10.2.js"></script>
<script src="js/uStates.js"></script>
<script src="js/d3.v3.min.js"></script>
<script>
	var click = function(state) {
	    var address = { country: 'US', state: state.id };
	    var prefs = new gadgets.Prefs();
	    prefs.set('username1', 'ruchirawageesha@gmail.com');
        var name = prefs.getString('username');
        console.log(name);
        var lang = prefs.getLang();
        console.log(lang);
        gadgets.Hub.publish('state', address);
	};
	var data ={};
	["HI", "AK", "FL", "SC", "GA", "AL", "NC", "TN", "RI", "CT", "MA",
	"ME", "NH", "VT", "NY", "NJ", "PA", "DE", "MD", "WV", "KY", "OH",
	"MI", "WY", "MT", "ID", "WA", "DC", "TX", "CA", "AZ", "NV", "UT",
	"CO", "NM", "OR", "ND", "SD", "NE", "IA", "MS", "IN", "IL", "MN",
	"WI", "MO", "AR", "OK", "KS", "LS", "VA"]
		.forEach(function(d){
			var low=Math.round(100*Math.random());
			data[d]={color:d3.interpolate("#ffffcc", "#800026")(low/100)};
		});
	uStates.draw("#map", data, click);
	//gadgets.util.registerOnLoadHandler(function() {
	    //gadgets.window.adjustHeight();
	//});
</script>
</div>
</body>
</html>]]></Content>
   <Content type="html" view="settings"><![CDATA[This is settings]]></Content>
</Module>

When a customized user preference view is defined, WSO2 DS overrides the default user preferences view, and renders the customized user preferences settings view into the gadget.

After a user clicks on the settings toggle button, enters the required user preference details, and clicks the toggle button for the second time, those changes will be saved to userPrefs of that particular gadget, and the gadget view will be updated.