Step 3: Add and Modify Browse Screen

In order to instantiate a screen template for any of the D3 Controls, you need to add a new Browse screen to your project as follows

In the 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 D3BubbleChart for the Screen Name and select DemoServiceData.GDPItems from the Screen Data dropdown listbox, then choose OK. The D3BubbleChart.lsml is added to the Screens folder.
In the D3BubbleChart.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, Industry Name, and Year.
Reorder the properties according to the properties expected by the control.
- First property = data points (labels)
- Second property = data points (numeric values)
- Remaining properties are ignored.
On the D3BubbleChart.lsml page click on the link, Edit Query.
Expand the Filter node and click Add Filter, then set the filter so it apppears like the following.
Click the link Back to D3BubbleChart.