Skip to content

Latest commit

 

History

History
111 lines (64 loc) · 6.25 KB

getting-started-with-canvas.md

File metadata and controls

111 lines (64 loc) · 6.25 KB
Raw

Getting Started with Syncfusion PowerApps Kanban Code Component in Canvas Application

This article provides a step-by-step guide for setting up a PowerApps canvas application and integrating the Syncfusion PowerApps Kanban 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.

Prerequisites

Create a new Dataverse table

Syncfusion PowerApps Kanban 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 Kanban 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
Id SingleLine.Text
Title SingleLine.Text
Status SingleLine.Text
Summary SingleLine.Text
Type SingleLine.Text
Priority SingleLine.Text
Tags SingleLine.Text
Estimate Decimal
Assignee SingleLine.Text
RankId Whole.none
Color SingleLine.Text
ClassName 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 Kanban code component.

Create a PowerApps canvas application

  1. If you're creating the canvas application for the first time in your PowerApps environment, ensure to enable the PowerApps component framework for canvas apps support. Otherwise, proceed to the next step.

    For detailed instructions, consult the FAQ.

  2. Go to the PowerApps portal, access the Apps tab from the left navigation pane, and click on Start with a page design.

Canvas App Create

  1. Choose the Blank canvas option and specify either tablet or phone resolution.

Canvas App Create 1

  1. The PowerApps blank canvas application will be generated as like below.

Canvas App Created

Note

For additional guidance, refer to the Create an blank canvas app in PowerApps documentation.

Import Syncfusion PowerApps Kanban code component into canvas application

Integrating the Syncfusion PowerApps Kanban code component into the blank canvas application involves the following steps:

  1. Within the created blank canvas application, navigate to Insert -> Get more components icon below search bar.

Canvas Import 1

  1. Switch to the code tab and import the published solution package component SfKanban.

Canvas Import 2

  1. Once imported, you'll find the Syncfusion PowerApps Kanban code component in the code components section.

Canvas Import 3

Add Syncfusion PowerApps Kanban code component into canvas application

Enhance your canvas application by adding the Syncfusion PowerApps Kanban code component using the following steps:

  1. From the Insert tab, drag and drop the SfKanban component located in the code components section into your application layout.

Canvas Import Data For Kanban

  1. To initialize the Kanban code component with data from previously created Dataverse tables or connectors listed in the DataSource tab, simply click and load the data.

Note

When utilizing the PowerFx table or Connectors to access the data source, you can incorporate columns data by selecting edit in the Fields section located beneath the DataSource property. For additional information, please refer to the comprehensive list of all connectors supported in PowerApps.

Canvas DataSource

  1. Once the data is loaded, include the necessary kanbanConfig data for the Kanban code component by accessing the kanbanConfig property and paste the Kanban config data.

  2. After loading the kanbanConfig data, ensure the keyField property is mapping the data in the Kanban board like assigning the value Status to the keyField property in the Kanban component. This is crucial for rendering the Kanban board layout correctly.

  3. The output of the Kanban code component will displayed. Customize the Kanban code component properties in the right property pane and also via the PowerFx tab on top.

Canvas Output

Preview the Syncfusion PowerApps Kanban application

To preview the Syncfusion PowerApps Kanban application in development environment with multiple device resolution, click the Preview button at the top right corner of the PowerApps portal.

Canvas Preview

Publish the Syncfusion PowerApps Kanban application

To publish the Syncfusion PowerApps Kanban 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 of the created canvas application from the Apps tab on the homepage.

Canvas Preview

See also