How to deal with Unsaved data in Power Apps Form

For quite a lot of scenarios after pilot in Users feedback I found request to manage Unsaved data. How to deal with Unsaved data in Power Apps Form then? Learn what are your options for build in Form control and Self-made Form.

By the self-made Form I think about labels and input controls added in a structured way to reflect metadata of the record. I know that a lot of App Makers prefers this approach as it is giving more flexibility and is much quicker for modification of layout and design.

Table of content:

• Form control
• Self-made Form
• Usage scenarios
  • Scenario 1 – Only info
  • Scenario 2 – With choice
    • Idea
    • Implementation
• Summary

---

Form control

Thou I think sometimes working with Form control can be slightly challenging, this control have a lot of nice properties. One of such is Unsaved property.

Initially when Form will be displayed at the Screen it will have FALSE value.

When User start to interact with Form Unsaved value with change to TRUE:

I think this is quite powerful but hey this is Power Apps, so it should be like that.

---

Self-made Form

The second option where validation of unsaved data in Power Apps is required is self-made Form.

The question is how to achieve the same result as Unsaved property of Form control?

The answer is not so direct as there is no property to refer. For the self-made Forms I and other App Makers need to manually deal with Unsaved information.

My preferred approach is to utilize OnChange property of the input controls. Basically to ALL controls in my slef-made Form I’m adding:

UpdateContext({_varUnsavedData:true})

As a result every time when User will interact with the Form I will have one variable which I can check.

Final touch is for OnSelect property of Save/Submit button add update of variable to FALSE :

UpdateContext({_varUnsavedData:false})

With that I know that data were saved at least once.

---

Usage scenarios

Now how to use it? I would like to demonstrate usage with two simple scenarios.

User opens form and did changes but didn’t click SAVE button. Instead of saving data as next action, User clicked a back button to navigate to the previous screen. I would like to inform him that data are Unsaved.

---

Scenario 1 – Only info

I will only inform User and suggest what to do. I just added to OnSelect property of my button/icon the following functions.

Form control version:

If(FormTest.Unsaved,
    Notify("Form is not saved, click Submit and try one more time.",NotificationType.Information),
    Navigate(Screen1)
    )

Self-made Form version:

If(_varUnsavedData,
    Notify("Form is not saved, click Submit and try one more time.",NotificationType.Information),
    Navigate(Screen1)
    )

TIP
You don’t need to write equals for True/False values/variables in If function If(Value=true), you just can add True/False values/variables to If function, and it will evaluate values correctly.

If form is really Unsaved User will see notification at the top of the Screen:

Only when Form is saved Navigation will work.

Yet, I think this is not ideal as I’m now forcing User to take Save/Submit action. However, this is tempting I prefer to give the choice to decide what to do: “Save or Not to Save? “

---

Scenario 2 – With choice

Idea

To give User are choice I’m adding pop-up window where User can decide what to do:

If YES is selected User will navigate away from Form and data are lost.

If NO selected pop-up will hide and User can Save data.

For this configuration to work I first need to create pop-up window. I created it with one Label and two Buttons controls (in Group or Container). I’m aware that pop-up’s can be done in a much nicer way. If you want to learn more about this topic I would encourage you to check blog of Matthew Devaney: How To Create A Pop-up Menu In Power Apps – Matthew Devaney

---

Implementation

First I’m updating navigation / back button:

Form control version:

If(FormTest.Unsaved,
    UpdateContext({_varShowUnsavedPop:true}),
    Navigate(Screen1)
    )

Self-made Form version:

If(_varUnsavedData,
    UpdateContext({_varShowUnsavedPop:true}),
    Navigate(Screen1)
    )

I changed Notify to UpdateContext and setting variable to TRUE

TIP
You can set True/False variable using another syntax:
UpdateContext({_varShowUnsavedPop:!_varShowUnsavedPop})
Using ! character (which equals Not) it will set the value of variable to opposite of it.
If it was FALSE it will change to TRUE. This way is very useful to show / hide controls.
(but for the transparency I used “classic” notation).

Next for my pop-up I added label extended to the full screen and added there some text. On the top of the label I’m adding two buttons.

First one with text YES to OnSelect I’m adding simply Navigate to the Screen.

Next second button with text NO I added only update of variable to FALSE:

UpdateContext({_varShowUnsavedPop:false})

Now I’m grouping label and two buttons. On the Visible property of the group I’m adding the variable _varShowUnsavedPop.

Initial configuration is done. As the final step I would like to reset _varShowUnsavedPop variable. I could add that to OnVisible property of Screen however I don’t like this way. Instead of I like to set the context variable in Navigate function:

Form control version:

Navigate('Form Edit',ScreenTransition.None,{_varShowUnsavedPop:false})

Self-made Form version:

Navigate('Form Edit',ScreenTransition.None,{_varShowUnsavedPop:false,_varUnsavedData:false})

Please notice that in the second version I’m also resetting _varUnsavedData.

---

Summary

I hope you liked How to deal with Unsaved data in Power Apps Form. I think this topic is important but sometimes forgotten. Furthermore, I also tried to add couple extra tips which hope will help you in your solutions.

Let me know what do you think about this content in comments.

Thanks for reading and have a nice day.