Rajeev Pentyala – Microsoft Power Platform

When working with large tables in Canvas App’s Phone layout Forms, it would be counterintuitive to place all the fields in a single form. In below screen, user has to scroll a lot to fill all the details.

In this article, lets see how we can simplify above screen by distributing fields in multiple forms and finally use the Patch function to save the information in to Dataverse from all the forms.

I am taking the OOB ‘Contact’ table in this scenario and distributing fields in to 3 screens (i.e., Basic Details, Contact Details and Additional Details). Lets get started.

• Create a new Canvas App from Maker portal.
• From the ‘Data’ tab, Select ‘Entities -> Current environment -> Contacts’ table and add to the App.

• Add 3 screens (Basic Details, Contact Details and Additional Details) to distribute fields.

• In the Basic Details screen (i.e., scrBasicDetails), add a new Form (i.e.,formBasicInfo) and add following fields from ‘Contact’ Datasource.

• Add a Button, to navigate to next screen (i.e., scrContactDetails). Add following formula on ‘OnSelect’ of button.

• Similarly, In the Contact Details screen (i.e., scrContactDetails) add a new Form (i.e.,formContactDetails) and add following fields from ‘Contact’ Datasource.

• Add a Button, to navigate to next screen (i.e., scrAddlDetails) by triggering ‘Navigate’ function on ‘OnSelect’ of button.
• In the last ‘Additional Details’ (i.e., scrAddlDetails) screen, add a new Form (i.e.,formAddlDetails) and add ‘Attachments’ field to capture and store documents to Dataverse.

• Since this is our final screen, Add a Button to Submit the data to Contact table in Dataverse using following ‘Patch’ function.

• Post submit refresh the forms using NewForm() function.
• Display a banner message using ‘Notify’ function.
• Finally Navigate back to first screen (i.e., scrBasicDetails) using Navigate() function.
• Combined formula is as below.

// Patch : Use Patch with the Defaults function to create records.
// form.Updates : Gets the data from the fields presented on the from.
Patch(
    Contacts,
    Defaults(Contacts),
    formBasicInfo.Updates,
    formContactDetails.Updates,
    formAddlDetails.Updates
);
// NewForm : Sets the form mode to Insert so that you can submit a new Contact.
NewForm(formBasicInfo);
NewForm(formContactDetails);
NewForm(formAddlDetails);
// Notify : Display notification
Notify(
    "Contact submitted successfully",
    NotificationType.Success
);
// Navigate : Navigates to first screen
Navigate(scrBasicDetails);

• Run the App, provide details and navigate to next screen and upload images and finally click ‘Submit’ to save data to Dataverse.

• Now go to Dataverse using Model Driven App and open the Contact -> Audit History, to prove only one transaction triggered with our Patch function.

🙂