Skip to content


Create a variable

On the "1. Add data" tab, click on the "+" icon to create your first dataNode.

create new JavaScript variable

Once the popup is displayed, select "Variable" in the TYPE combobox, under the JavaScript category and type jsvar in the NAME field, as shown in he illustration below.

Copy and paste the following text to the variable field.

{ "Length": 3, "Width": 4 }

Then click Save.

fill dataNode dialog

The value of the dataNode is previewed in the workspace.


Define a "rectangle surface" computation web-service

Click on the "+" button to create a new dataNode, select "REST Web-service" in the TYPE combobox, type "surface" in the NAME field, and then copy paste the following URL to the URL field :

fill dataNode dialog

Select "POST" in the METHOD combobox and copy paste the following JavaScript code to the BODY field :

return {"X": 1.25, "Y": 4.0};

Click Save.

fill dataNode dialog completed

Finally, execute it by clicking on the dataNode update button, framed in yellow in the following illustration. You should get execution notification success (displayed as OK).

fill dataNode dialog executed

Please note that the result is 5, because it has been computed from the X and Y parameters specified in the surface dataNode.

Connect two dataNodes together

The idea now is to use jsvar.Length and jsvar.Width as arguments for the surface web-service. For that purpose, edit the surface dataNode, then click on the "JS Editor" button (framed in yellow).


Then, replace the existing code by the following one.

return {"X": dataNodes.jsvar.Length, "Y": dataNodes.jsvar.Width};

new input

The expression dataNodes.jsvar.Length indicates xDash to read the Length value from the jsvar dataNode. It also establishes data and execution flow dependency between jsvar and surface.

Again, execute the surface dataNode using the update button. Msg output should be now equal to 12.

surface called with arguments

Add widgets

Switch now to tab "2. Add & Connect widgets". Expand the "Basic" widgets category below the Toolbox. Drag then drop two horizontal sliders and one value display.

widgets on edition dashboard

Double-click on the first slider to display its configuration popup. Connect it to jsvar.Length (as illustrated below).

widgets on edition dashboard

Proceed with the two other widgets. Connect the second slider to jsvar.Width and the value display to surface.Msg.

You can customize the label of the value display. Double-click on the label widget to open the configuration popup. Then, select the Graphical properties sub-menu.

Uncheck inheritLabelFromData option and replace the Msg label by Surface. Click Save

Graphical config

Preview the app

Now switch to tab "3. Play". Your rectangle surface computation app should be running.


Change the values of Length and Width using the sliders and observe the web-service output.

Save your first project

Click on the project title to rename it to first-example.

rename project

Click the Save icon, then the On local and save buttons, to successfully save your first xDash project.


You will be able to load it later (after leaving xDash) for edition.

Share the app

Finally, click the export button located in the tab "3. Play" as indicated below and follow the wizard.


You will be able to generate a standalone html page, that you can locally download