Technical overview - Gantt control in Dynamics 365 for operations
Views (2090)
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.
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:
This was originally posted here.
*This post is locked for comments