This article provides a step-by-step guide for setting up a PowerApps canvas application and integrating the Syncfusion PowerApps Schedule code component.
Power Apps canvas empowers users to design custom applications with a personalized interface, offering creative freedom. Its intuitive drag-and-drop features enable seamless integration of elements, ensuring flexibility in app development and dynamic user experiences with diverse data sources.
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.
Initiate the creation of a canvas application by following these steps:
-
If you're creating the canvas application for the first time in your PowerApps environment, ensure to
enable the PowerApps component framework for canvas appssupport. Otherwise, proceed to the next step.For detailed instructions, consult the FAQ.
-
Go to the PowerApps portal, access the
Appstab from the left navigation pane, and click onStart with a page design.
- Choose the
Blank canvasoption and specify either tablet or phone resolution.
- The PowerApps blank canvas application will be generated as like below.
Note
For additional guidance, refer to the Create an blank canvas app in PowerApps documentation.
Integrating the Syncfusion PowerApps Schedule code component into the blank canvas application involves the following steps:
- Within the created blank canvas application, navigate to
Insert->Get more componentsicon below search bar.
- Switch to the
codetab and import the published solution build componentSfSchedule.
- Once imported, you'll find the Syncfusion PowerApps Schedule code component in the
code componentssection.
Enhance your canvas application by adding the Syncfusion PowerApps Schedule code component using the following steps:
- From the
Inserttab, drag and drop theSfSchedulecomponent located in thecode componentssection into your application layout.
- First update the selectedDate property with
2023/01/04and Load the Schedule code component data from the Dataverse tables previously created or connectors listed in data source tab. Also, we can also use the optional ScheduleConfig JSON into theScheduleConfigproperty.
Note
Please note that when employing the PowerFx table or Connectors to load the data source, you can add columns data by clicking on edit in the Fields section located below the Data Source property. For further details, please consult the comprehensive list of all connectors supported in PowerApps.
- Once the data is loaded, the output of the Schedule code component will displayed. Customize the Schedule code component properties in the right property pane and also via the PowerFx tab on top.
To preview the Syncfusion PowerApps Schedule application in development environment with multiple device resolution, click the Preview button at the top right corner of the PowerApps portal.
To publish the Syncfusion PowerApps Schedule application in the production environment, click the Publish button at the top right corner of the PowerApps portal. Now you can share the published application with your users.
Once the application is published, you can preview it by clicking the play button from the Apps tab on the homepage.
