Blog

Forms - How to convert a display form to an edit form

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 
        C:\PowerApps\ProjectFiles\App-to-convert

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  
       C:\PowerApps\ProjectFiles\App-to-convert

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.

Conclusion

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.
Previous
Next
Related posts