Forms - How to convert a display form to an edit form
May 24. 2021
If you want to convert a display form to an edit form, there's unfortunately no way to do this through the app designer. However, we can accomplish this through code and this post describes how to carry out this task in more detail.
A frustrating limitation of the app designer is that there's no way built in way to convert a display form to an edit form. Where this often poses a problem is in cases where an app builder spends significant time building and laying out a good looking display form.
At a future point in time, the end-users request the ability to update the values on the display form. Since there's no way to convert this display form to an edit form, it becomes necessary to spend unnecessary time recreating what's already there.
Whilst it's not possible to convert an edit form to display form through the designer, we can carry out this task through code. This post walks through how to convert a simple display form into an edit form.
The layout of our sample app
To demonstrate, we'll take the simple app that shown beneath. This app contains a display form called FormViewer1, as shown in the screenshot beneath. As we would expect, notice how all the cards on this form are display cards (meaning that there is no 'update' property for each of the cards).
Extracting the source code for an app
The first step is to save the app as a MSApp file, and to extract/unpack the source code. We call the pasopa utility to unpack the files, using the following command:
pasopa -unpack C:\PowerApps\MSAppFiles\App-to-convert.msapp
My previous post here describes how to install the pasopa utility, and how to unpack an msapp file.
Once we unpack the msapp file, we can open it in Visual Studio Code or a text editor of our choice. In this example, I've extracted the files to C:\PowerApps\ProjectFiles\App-to-convert.
How to convert a display form to an edit form
To convert a display form to an edit form, we locate the source file for the screen that contains the target display form - ViewScreen.fx.yaml in this example.
In the source code, we locate the display form control. Within the definition of the form, we see definitions for each child card control.
To convert a display form to an edit form, we change formViewer to form. For each card that we want to make editable, we change the type to textualEditCard. This is the key step because that unlocks the 'Update' property on the card.
We can now repack our app by calling pasopa with the pack switch, like so:
pasopa -pack C:\PowerApps\MSAppFiles\App-to-convert.msapp
Opening the converted app
We can now open our msapp file in Power Apps Studio and as the screenshot beneath shows, the display form has now been converted to an edit form.
The important highlight of this screenshot is that the Update property is now accessable for each card, which makes it possible to update the data source.
There's unfortunately no way to convert a display form to an edit form through the app designer, however, this is task that we can carry out through code.
To avoid any future rquirements to covert display forms to edit forms, a good practice is to consider not to use display forms in the first place, and to use an edit form with read-only controls instead. This can prevent this longer process of carrying out the conversion in code.
- Forms - How to set the value of a field to todays date for new records only
- Apps - How to create an app from a hand drawn image
- Forms - How to highlight user modified field values on a form
- Forms - How to append text to field in a data source
- Forms - How to calculate values (eg sums and products) and store the results in SharePoint or other datasource
- SharePoint - How to programmatically set and clear single select choice items in a combo box on a form
- SharePoint - How to clear datetime fields/set an empty datetime value on a form
- Forms - How to copy/save an existing record on a form as a new record
- Forms - How to show Office 365 user profile details on a form
- Forms - How to hide fields that are blank, or have not been completed
- Forms - How to select-all / unselect-all checkbox or toggle controls on a form
- Forms - How to set the data source of a form to a collection
- Forms - The best practice for setting the data item on a form
- Controls - How to set default control and form values
- Forms - How to conditionally make form fields mandatory