Setting up D3 Gantt Chart 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 Gantt Chart, 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 D3GanttChart for the Screen Name and select NHLScheduleData.Games from the Screen Data dropdown listbox, then choose OK. The D3GanttChart.lsml is added to the Screens folder.
In the D3GanttChart.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, Home Team, Away Team, Title, Network and Properties.
Reorder the properties according to the properties expected by the control.
- First property = task start (DateTime)
- Second property = task end (DateTime)
- Third property = task label (string)
- Remaining properties are ignored.
On the D3GanttChart.lsml page, click the link, Edit Query.
Expand the Filter node and click Add Filter, then set the filter so that it appears as follows.
Click the Back to D3GanttChart link.
On the D3GanttChart.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 Gantt Chart.
Click Edit Render Code in the Properties window to automatically create the following required JavaScript code.

In the Solution Explorer, right-click the D3GanttChart.lsml file and select Set as Home Screen.

If you get an error while running the project,try Editing the Screen Navigation in the Solution Explorer.

Run the project and see how the Gantt Chart screen looks like.