Getting Started with Syncfusion PowerApps Schedule 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 Schedule 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.
Syncfusion PowerApps Schedule code component requires data to be loaded from a data source. Follow the steps provided in the Create a new Dataverse table section to create a new table in Dataverse using the CSV in the Schedule sample 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 |
---|---|
Id | Whole.none |
Subject | SingleLine.Text |
StartTime | Date and Time |
EndTime | Date and Time |
IsAllDay | Yes/no |
ProjectId | Whole.none |
TaskId | Whole.none |
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 Schedule code component.
To add the Syncfusion PowerApps Schedule code component to the Dataverse table, follow the steps below:
-
In the Dataverse table, find the
Forms
tab in the Data experiences pane to streamline data management. Locate theInformation
form with the main form type to define how users interact with and organize data effectively. -
Within the left navigation pane of the
Information
form, locate theComponents
tab. Here, click onGet more components
at the bottom of the tab.
- A window will appear. Switch to the
Build by others
tab at the top and import the built code component namedSfSchedule
from the published solutions.
-
Create a new section in the form, choosing for a
1-column tab
from thepopular
section. Rename this tab as Schedule View to clearly delineate its purpose. This tab will be utilized to render the Schedule code component. -
In the
More Components
section, choose theSfSchedule
component. Connect the Schedule code component to your Dataverse tables to ensure smooth data integration. We can also use the optional ScheduleConfig JSON configuration to configure the Schedule code component. Also, customize other properties as needed.
- The output of the Schedule code component will be displayed as shown below after updating
selected date
property with2023/01/04
. Then click theSave 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 Schedule code component is now an integral part of the Dataverse table.
To create a model-driven application, follow the steps below:
- In the PowerApps portal, navigate to the
Apps
tab located in the left navigation pane and select theStart with a page design
option.
- Opt for the
Blank page with navigation
option and assign a meaningful name for your model-driven application. Proceed by clickingcreate
.
- The PowerApps platform will generate a blank model-driven application based on your specifications. You are now ready to start building your application.
- To incorporate data into your application, click on the
Add Page
button. SelectDataverse table
for the data source, and specify the particular table created in the previous steps.
- The Syncfusion PowerApps Schedule code component can be visible in the
Schedule View
tab by navigating into aSubject
column data.
Note
For more information, refer to the Create an blank Model-Driven app in PowerApps.
To publish the Syncfusion PowerApps Schedule 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.