Technical overview - Gantt control in Dynamics 365 for operations

In Microsoft Dynamics 365 for operations, form controls are split into logical and physical parts. The physical presentation is HTML, JavaScript and CSS within the browser and the logical state always runs on server which is controlled by X++.
 
ActiveX, ManagedHost and WPF controls were used in AX2012  to add new custom controls, these  are incompatible with HTML based platform and cannot be used in D3FO.

A new extensible control framework is introduced in D3FO which lets you add custom controls by using HTML5, Javascript and CSS3. The new Gantt control in D3FO is implemented by using extensible control framework.It comes with an advantage that you don’t  have to pay an additional license fee to use the control in your own forms or to extend the control.

In this post let's do a quick technical walkthrough on the various elements of the Gantt control and how to use it on your forms.

 The below diagram shows the basic elements of a Gantt control.

 

 

 

 

In a Gantt chart we can identify as per below sample diagram:

 

 

 

Lets go through brief summary of each Gantt element:

 

Activity : This is most important element is a Gantt control. Each activity is allocated its own row in the chart. Activities can form a hierarchy, like a tree, by referencing a parent activity. Two activities can be connected to each other through links. A Gantt activity can be further classified into a Milestone activity, task activity or a summary activity. Technical base is provided  a base enum which holds the type of Gantt control activity 

 

 

Below classes which are used to initialise and hold data for the activities for a Gantt control.

 

 

Links : Links are used to connect two activities on a Gantt control. The Link information is stored as a data contract in the class GanttControlLink.

 

 

The link types are stored in GanttLinkType enumeration:

FF : End to end link

FS : End to start link

SF : Start to End Link

SS : Start to start link

 

Vertical Markers: This represents a vertical marker on a Gantt control . This information is stored as a data contract in the ganttControlVerticalMarker class. The date time method stores the information of the date/time where the marker should be shown on the control. The text is text which is shown next to the marker.  We can add more than 1 markers on the control.

 

 

Calendar and working time intervals : Calendar holds the calendar ID and the working time intervals holds a set of working time information. These are controlled by GanttControlCalendar and GanttControlWorkingTimeInterval classes. This information is stored in below contract classes:

 

 

 

 

The list of working times in the GanttControlClendar is generated based on the GanttControlWorkingTimeInterval contract as shown in the below contract method

 

 

 

 

Columns: These are the column on a Gantt chart grid and are stored in the class GanttControlColumn as a contract. The below parm methods store the Columns information. The alignment is controlle d by SysAlignment base enum 

 

 

 

Configurations : Gantt configurations refer to configuration of view and edit behaviour of the Gantt control. There are configuration settings which are stored as a data contract. Use calendars method determines if calendars should be used in the Gantt chart. Switching calendars off have a huge performance benefit. Some configurations for Gantt control are :

•  Show all links determines if all links should be shown; otherwise only links for the currently selected chain will be shown.
• Use theme colours Determines if standard AX theme colours should be used for the elements of the chart.
• Allow move activities Determines if activities are allowed to be moved using drag/drop.
• Allow resize activities Determines if activities are allowed to be resized using drag/drop.
• Allow completion change Determines if activities can have the completion percentage set using drag/drop.
• Vertical move mode Determines if/how activities are allowed to be moved vertically.

 

Below list of methods show the configurations which can be defined when initialising the Gantt configuration.  

 

 

  

Gantt control timescales : Represents settings for a time scale on a Gantt chart. These are stored in the GanttControlConfiguration contract. The below methods are used in the contract

 

 

 

Gantt Control : This is the Gantt control class which stores the information of all the Gantt elements. The class name is GanttControl and it has methods to store the Gantt elements information. If you look at this class then you will see that this stores most of the Gantt elements information as a List. 

Activities:

 

 

Links

 

 

Calendars

 

 

Columns

 

 

Vertical markers

 

 

How it all works together: We can add a new Gantt control on the form by selecting it from the list of control available when we add a new control

 

 

We need to define auto declaration as true

 

 

 We can now set/populate to the GanttControl class methods using this control and load the gantt elements. A very good example is shown on the tutorial_Gantt form shipped in application foundation

 

 

All the activities are added to a list and

 

 

And then the list is assigned in the GanttControl class

 

 

 

 

To load the GanttControl we have to write the X++ code to create and populate the contracts, lists and initliaze the Gantt classes. The complete code sample can be referenced in tutorial_gantt form which shows the Gantt control as below:

 

There is much more to what we can do with the Gantt control classes and with the power of extensible control framework. It provides a great platform for vendors and ISV's to build amazing Gantt extensions and advanced controls.

 

References:

https://ax.help.dynamics.com/en/wiki/gantt-development-guide/