Rajeev Pentyala – Microsoft Power Platform

In this article, I am going to provide steps to build a basic Canvas app which uses Dynamics 365 (CDS) as Data Source.

If you are new to Power Apps, refer my blog on steps to get started.

The App we are going to build will have 3 screens.

• Manage Contacts – Displays the list of Contacts using ‘Gallery’ control.
• Create Contact – Creates a new Contact.
• Edit Contact – Updates an existing Contact.

Create a new Canvas app:

• Connect to the Power Apps portal and select the ‘Environment’.
• Create a new ‘Canvas app from blank’.

Connect to Dynamics 365 data source:

Now we have the blank App and as a first step, create a new data source by connecting to your D365 instance using ‘Dynamics 365’ connector.

• Click on the ‘Data source’ tab.
• Under the ‘Connectors’, select ‘Dynamics 365’ and choose the ‘dataset’.
  • ‘dataset’ is your Dynamics organization name.

• Next, under the ‘Choose a table’ pane, select the entities you would like to work with.
  • I’ve chosen ‘Contacts’ entity for this App

• Click on ‘Connect’
• You should see the ‘Contacts’ table under ‘Data sources’ as below:

Design ‘Manage Contacts’ screen:

Now we have ‘Data source’ ready and lets design our first screen.

• By default the Canvas app will have a screen.
• Rename the out of the box screen to ‘ManageContacts’
  • Providing appropriate name to the controls is a best practice.
• As we need to display available ‘Contacts’ on the screen, select ‘Insert -> Gallery’ and choose ‘Blank Vertical’.
  • ‘Gallery’ is a grid kind of a control.

• Now we need to map ‘Contacts’ table to the Gallery.
• Select the ‘Gallery’ and click on ‘Edit gallery’ icon.

• In the ‘Select a data source’ pane, select ‘Contacts’ table. Now the ‘Gallery’ gets mapped with ‘Contacts’ from Dynamics.

• To display the Contact details (i.e., Full Name, Email, etc…), add ‘Label’ controls to the ‘Gallery’ and rename the Labels with meaningful names.
• Labels will not show anything until you map them with the Contacts field.
• So, select the Label and in the ‘Text’ property, type ‘ThisItem.{field_Name}‘
  • To map, ‘Full Name’ of the Contact to a label, set ‘Text’ as ThisItem.’Full Name’

Design ‘New Contact’ screen:

In the ‘Manage Contacts’ screen, we configured a ‘Gallery’ which displays all the Contacts. Now lets design a ‘New Contact’ screen.

• Add a ‘New Screen’ and rename it.
• To Create/Edit records, we need to add ‘Forms’ control
  • ‘Edit’ form: Use this to Create or Edit a record.
  • ‘Display’ form: Use this to display the record (Read-only).

• So, lets add a new ‘Edit’ form to the screen and rename it to ‘formCreateContact‘.

• Next, we need to map the ‘formCreateContact’ to ‘Contacts’ Data source and then select and arrange the ‘Contact’ fields, which allows us to input and save.
  • Set the ‘DataSource’ property of ‘formCreateContact’ to ‘Contacts’
  • Click on the highlighted link and add the required columns and click ‘Add’.

• Next, we can rearrange the columns using ‘Move up’ and ‘Move down’ options.

• We can also set ‘Columns’ to 1 of the ‘formCreateContact‘ which arranges the fields in a single column.
• Add ‘Save’ icon to the ‘CreateContact’ screen.

• As we need to save the ‘Contact’ (i.e., Submit the Form) on ‘Save’ icon click, add below statement

SubmitForm(formCreateContact);

Link ‘Manage Contacts’ screen and ‘New Contact’ screen:

Now, we have the ‘New Contact’ screen ready. Lets hook it up to ‘ManageContacts’ screen.

• Go to ‘ManageContacts’ screen and add + icon.
• There are 2 key steps to create a new Contact
  • First create a new form of type ‘formCreateContact’.
  • Navigate to ‘New Contact’ screen.
• We need to execute these key steps on click of + icon.
• Select the + icon and on the ‘OnSelect’ event, add below statement
  

  NewForm(formCreateContact);Navigate(CreateContact);

• That’s it, run the App and you should be able to see the Contacts on ‘Manage Contact’ screen.

• Click on + icon, which will take you to ‘New Contact’ screen.

• Lets see ‘Edit Screen’ and Navigation’s in next article.

🙂