Setting up D3 Heatmap Screen

In this topic, you first need to Create a LightSwitch for HTML Project and then Connect to an External OData Service.

In order to instantiate a screen template for the D3 Heatmap, you need to add a new Browse screen to your project by implementing the following steps.

In Solution Explorer, expand your HTMLClient project, right-click on the Screens folder and select Add Screen. The Add New Screen dialog box appears.
In the Add New Screen dialog box select Browse Data Screen and enter D3Heatmap for the Screen Name and select DemoServiceData.GDPItems from the Screen Data dropdown listbox, then choose OK. The D3Heatmap.lsml is added to the Screens folder.
In the D3HeatMap.lsml click on the dropdown arrow next to the List control and choose D3 Collection Control.
Under the Columns Layout delete the following properties: Id, FIPS, Industry ID, and Industry Name.
On the D3Heatmap.lsml page click on the link, Edit Query.
Expand the Filter node and click Add Filter, then set the filter so it appears similar to the image below.
Click the link Back to D3Heatmap.
On the D3Heatmap.lsml page select the D3 Collection Control and expand the General node in the Properties window, then scroll down to the Widget property and set it to Heatmap.
Click Edit Render Code in the Properties window to automatically create the following required JavaScript code.
In the Solution Explorer right click on the D3Heatmap.lsml file and select Set as Home Screen.
Run the project and see how the Heatmap looks like.