Service Portal Widgets and Demo Data

[darrin_achtman]

Widgets are a great tool for creating reusable content. Creating widgets can be done by almost any developer and the widget editor makes this easy to do. One of the lesser documented tools within the widget editor is the "Demo Data" panel. This panel is great for creating reusable widgets as it allows for dummy data to be injected into your widget. The data is only used when working on the widget through the widget editor and will be displayed on the viewing panel.

So why use the demo data instead of using a rest api or a server script include. The easy answer is that you know what data to expect, along with this you don't have to go reset your data source after every data manipulation.   Another great reason to use demo data is that you get a example of source data that can be used in documentation, along with that there is no unnecessary cleanup of data that needs to be done once you are complete with development.

Creating demo data is very easy, all you need is a understanding of JSON and some idea of what data you are expecting to display within your widget.

A good example of demo data

{
   "data":[["Jan",31],
         ["Feb",28],
         ["Mar",31],
         ["Apr",30],
         ["May",31],
         ["Jun",30],
         ["Jul",31],
         ["Aug",31],
         ["Sep",30],
         ["Oct",31],
         ["Nov",30],
         ["Dec",31]]
}

To access the demo data all that needs to be done is to call $scope.data. The data can be treated like a normal JSON object, which means there is the ability to dot walk to any specific key or value. This also means that there is the ability to create complicated demo data objects that allow for more then just dummy data but allow for more complex items. A good example is as follows.{

{   
     "data":{
             "demo_data":[["Jan",31],
                             ["Feb",28],
                             ["Mar",31],
                             ["Apr",30],
                             ["May",31],
                             ["Jun",30],
                             ["Jul",31],
                             ["Aug",31],
                             ["Sep",30],
                             ["Oct",31],
                             ["Nov",30],
                             ["Dec",31]],
             "hello":"world",
             "more_data":{
                       "foo":"bar"
               }
       }
}

So when defining the demo data object, remember that only the data key will be read. This means that if a more complex object is needed, everything must be nested under the data key. Everything underneath that key can be dot walked like any other JSON Object.

With the setup of the demo data done, the next step is to use it in the widget that is being created. As described previously all that needs to be done to access the data inside the dummy data is $scope.data. The challenging part comes when the widget goes live and is no longer able to access the demo data. This can actually be done relatively easy the follow example demonstrates this.

var data = $scope.data || $scope.getRealData(); //this does not have to be a function but can be a simple variable or another javascript object
//if not familiar with javascripts ternary operations the above example can also be seen done with if statements
var data = $scope.data;
if(!data){
         data = $scope.getRealData();
}

Since javascript sees undefined as false this can be used to check for demo data and use that data if its there, or when the widget is being used on a service portal page use the real dynamic data from webservice calls or server calls.

[jpierce_cerna]

Good article Darrin. Though, I would mention that the last examples of javascript you share belong in the client script as a opposed to the server script. Also, one will need to inject $scope into their client function, or instead of injecting $scope you can do:

var c = this;

var data = c.data || c.getRealData();