Quickstart

Create a variable

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

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.

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 :

https://compute20190425045435.azurewebsites.net/ComputeService.asmx/Surface

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.

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).

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};

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.

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.

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

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

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.

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