getting-started-with-model-driven-form.md

Getting Started with Syncfusion PowerApps Gantt Code Component in Model-Driven Application (Form)

This article provides a step-by-step guide for setting up a PowerApps model-driven application with Dataverse table form and integrating the Syncfusion PowerApps Gantt code component.

PowerApps Model-Driven is a versatile platform for creating structured applications with a focus on data-centric design. It offers a guided approach, allowing users to build efficient business processes and workflows within a predefined data model.

Prerequisites

• Published Syncfusion PowerApps solution package

Create a new Dataverse table

Syncfusion PowerApps Gantt code component requires data to be loaded from a data source. Follow the steps provided in Create a new Dataverse table section to create a new table in Dataverse using the CSV in the Gantt code component data folder. Skip this step if you have an existing table with data.

When creating the Dataverse table using CSV file, ensure the column names and data types match those in the table below:

Column Name	DataType
TaskID	Whole.none
TaskName	SingleLine.Text
StartDate	Date and Time
EndDate	Date and Time
Duration	Whole.none
Predecessor	SingleLine.Text
Progress	Whole.none
ParentID	Whole.none
Work	Whole.none
Resources	SingleLine.Text
Indicators	SingleLine.Text

Note

When setting up a Dataverse, make sure that the table columns are assigned the correct data types to prevent data loading issues in the Gantt code component.

Add Syncfusion PowerApps Gantt code component to the Dataverse table

To add the Syncfusion PowerApps Gantt code component to the Dataverse table, follow the steps below:

1. In the Dataverse table, find the Forms tab in the Data experiences pane to streamline data management. Locate the Information form with the main form type to define how users interact with and organize data effectively.

2. Within the left navigation pane of the Information form, locate the Components tab. Here, click on Get more components at the bottom of the tab.

3. A window will appear. Switch to the Build by others tab at the top and import the built code component named SfGantt from the published solutions.

4. Create a new section in the form, opting for a 1-column tab from the popular section. Rename this tab as Gantt View to clearly delineate its purpose. This tab will be utilized to render the Gantt code component.

5. Within the More Components section, select the SfGantt component. Configure the DataSource property of the Gantt code component by accessing the list of Dataverse tables created previously with respective table views. This step ensures that the Gantt code component is seamlessly connected to the relevant data.

6. Once the data is loaded, include the necessary ganttConfig data for the Gantt code component by accessing the ganttConfig property and paste the Gantt config data and customize other properties in the property pane.

7. The output of the Gantt code component will appear as shown below. Click the Save and publish button at the top right corner of the PowerApps portal. This action commits the changes made to the form, ensuring that the Syncfusion PowerApps Gantt code component is now an integral part of the Dataverse table.

Create a PowerApps model driven application

To create a model-driven application, follow the steps below:

1. In the PowerApps portal, navigate to the Apps tab in the left navigation pane and click on the Start with a page design option.

2. Choose the Blank page with navigation option and provide a meaningful name for your model-driven application. Proceed by clicking create.

3. The PowerApps platform will generate a blank model-driven application based on your specifications. You are now ready to start building your application.

4. To incorporate data into your application, click on the Add Page button. Choose Dataverse table for the data source & columns, and select the specific table you created in the previous steps.

5. The Syncfusion PowerApps Gantt code component can be visible in the Gantt View tab by navigating into a TaskName column data.

For more information, refer to the Create an blank model driven app in PowerApps.

Publish the Syncfusion PowerApps Gantt application

To publish the Syncfusion PowerApps Gantt model driven application in the production environment, click the Publish button at the top right corner of the PowerApps portal.

After publishing the application, click the play button to preview the published application. You can also share the published application with your users.

See also

• Getting Started with the Syncfusion PowerApps Gantt Code Component in Canvas Application

• Getting Started with the Syncfusion PowerApps Gantt Code Component in Model-Driven Application (Custom Pages)

• Getting Started with the Syncfusion PowerApps Gantt Code Component in PowerPages