Customize forms in canvas apps

  • Article

In a canvas app, customize a Display form control and an Edit form control so that they show the data that matters most and in the most intuitive order to help users easily understand and update the data.

Each form comprises one or more cards, each of which shows data from a particular column in the data source. By following the steps in this topic, you can specify which cards appear in a form and move cards up and down within a form.

If you're unfamiliar with canvas-pps, see What are canvas apps?.

Prerequisites

Generate an app from the Microsoft Dataverse, and then customize the gallery in that app.

Show and hide cards

  1. Sign in to Power Apps, and then open the app that you generated and customized.

  2. In the left navigation bar, type or paste D in the search bar to filter the list of elements, and then select DetailForm1.

    Select details screen.

  3. On the Properties tab of the right-hand pane, select Edit fields to open the Fields pane.

    Open fields pane.

  4. Hide a field, such as Description, by hovering over it, selecting the ellipsis (...) that appears, and then selecting Remove.

    Hide description.

  5. Show a field by selecting Add field, typing or pasting the first few letters of the field's name in the search box, selecting the field's check box, and then selecting Add.

    List of fields.

Reorder the cards

  1. In the Fields pane, drag the Account Name field to the top of the list of fields.

    The cards in DetailForm1 reflect the change.

    Reordered cards.

  2. (optional) Reorder the other cards into this sequence:

    • Account Name
    • Number of Employees
    • Annual Revenue
    • Main Phone
    • Address 1: Street 1
    • Address 1: Street 2
    • Address 1: City
    • Address 1: ZIP/Postal Code

  3. In the left navigation bar, type or paste Ed in the search bar, and then select EditForm1 to select it.

  4. Repeat the steps in the previous procedure and this one so that the fields in EditForm1 match those in DetailForm1.

Run the app

  1. In the left navigation bar, type or paste Br in the search bar, and then select BrowseScreen1 to select it.

  2. Open Preview mode by pressing F5 (or by selecting the Preview icon near the upper-right corner).

    Preview icon.

  3. In the upper-right corner, select the plus icon to add a record in EditScreen1.

    Add record.

  4. Add whatever data you want, and then select the checkmark icon in the upper-right corner to save your changes and return to BrowseScreen1.

    Save record.

  5. Select the arrow for the item that you just created to show details about that item in DetailScreen1.

    Right arrow.

  6. In the upper-right corner, select the edit icon to update the record in EditScreen1.

    Edit record.

  7. Change the information in one or more fields, and then select the check mark in the upper-right corner to save your changes and return to DetailScreen1.

    Save changes.

  8. Near the upper-right corner, select the trash-can icon to delete the record that you just updated and to return to BrowseScreen1.

    Delete record.

  9. Close Preview mode by pressing Esc (or by selecting the close icon near the upper-left corner).

Next steps

See also