Solved: Unsaved Text Field Warning Doesn't Disappear When ...

PowerAppsHori · ‎05-04-2022

For each field a user can edit, I have added a yellow triangle to signify that field has been changed and needs to be saved. At the top of the form, I have a warning text label that says to "Please Save Changes" if it sees that any of my forms are Unsaved. For dropdowns, date fields and checkboxes, the warning at the top of the form and the yellow triangles works flawlessly. If I change them, the warnings appear. If I remove my changes, the warnings disappear.

However, for Text fields it's a different story. In the card of a Text field, I've added a yellow triangle with the Fill property showing this:

If (Parent.Default = DataCardValue1.Text,

RGBA(0,0,0,0),

RGBA(212,175, 55,1)

)

Where the other fields work as expected, the Text fields are not.

If the Text field starts blank, and I add text in it, the triangle and the warning appear. If I delete the text, the triangle and warning remain.
If a text field had already contained text, and I make a change, the triangle and warning appear. If I remove those changes to the original text in the field, the triangle and warning disappear.

This only seems to affect text fields that are originally blank, added to, then made blank again. I've tried adding additional code to the Fill property comparing if the fields are blank. That seems to work but only on a visual level. The warning at the top of the page still remains since for some reason something behind the scenes thinks the form is Unsaved.

Can someone help me here?

RusselThomas · ‎05-10-2022

Hi @PowerAppsHori ,

I wasn't using the Unsaved property in the previous example - just a condition check. If your gallery and main message are using the Unsaved property then they will behave differently.

The only way Unsaved goes back to false in this scenario (once someone has edited a text field and then cleared their edit by deleting or backspacing their entry), is to reset the text input control with a Reset() function, (or reset the entire form with a ResetForm() function which does the same thing but for the entire form).

Performing a Reset() or a ResetForm() is an action that can only be fired by a behaviour property - which is why we originally used it on the OnChange: property of the text input. Unfortunately it has the focus drawback in that someone has to move focus off the control for the OnChange: event to fire. We can use in-line logic in the Color: property of the warning icon to avoid the Onchange: limitation, but then we're not resetting the control so Unsaved doesn't work. Your gallery and message logic are using the Unsaved property (which looks at all the fields in the form together) - so they will still fail to revert with this scenario. It's a bit of a catch 22.

The only way I can think of to get around this is for your Gallery and main message to use in-line logic like your warning icon instead of Unsaved. This means however that you have to create your own "Unsaved" logic to test the value of each and every form input field against its original value in the source - like Unsaved does - but cater for originally Blank() values that become empty strings after editing and clearing - which Unsaved does not do unless you do a Reset().

It's a pain, and a lot of work - so probably not something you want to do - you should consider the effort vs the benefit.

As an example, assuming the Item: property of your form was based on a gallery selection (Gallery1.Selected) and there were three text fields in the gallery source (Field1, Field2 and Field3) - then the logic we want to use would look something like this;

And(
    (IsBlank(DataCardValue1.Text) && IsBlank(Gallery1.Selected.Field1))  ||
    (DataCardValue1.Text = Gallery1.Selected.Title), //no changes

    IsBlank(DataCardValue2.Text) && IsBlank(Gallery1.Selected.Field2) ||
    (DataCardValue2.Text = Gallery1.Selected.Field2), //no changes

    IsBlank(DataCardValue3.Text) && IsBlank(Gallery1.Selected.Field3) ||
    (DataCardValue3.Text = Gallery1.Selected.Field3) //no changes
)

Here, like in the previous example, we're using IsBlank() on each value separately instead of directly comparing them to each other. We do this because IsBlank() does some handy type conversions for us when used in this way, and will return true even when one value is Blank() and the other value is an empty string, which a direct comparison won't do. If that's true, OR if the source value does actually equal the entered value, then the result is true.

And() tests all the conditions we stipulate, and only if all of them resolve to true would the final output be true - if any one of them is false the final output is false. This lays the foundation for testing all the fields in the form.

Lastly, to apply the logic, you have a main message you want to show or hide, and you have a gallery you want to disable or enable based on that result - so instead of repeating that (presumably massive) chunk of code on both your gallery and your message (or every time you want to perform the same check on the same page on another control), it might be better to put the code once into a text label and check the label output instead. This allows you to "reuse" that same piece of code multiple times, and if you need to adjust your logic, you only have one place to do it - which just makes things a little easier and neater.

To do that, create a label on your screen somewhere and called it "myUnsavedLabel" - you can hide it by setting its Visible: property to false, but set it's Text: property to the above And() function logic that applies to your form and fields.

Note, as it's a Text label, while the output of the formula is a boolean true or false result, it's converted to text result in the label Text property - i.e. "true" or "false".

With this in mind, your gallery DisplayMode: property can now be updated to logic that looks like this;

If(myUnsavedLabel.Text = "false", //there are some changes
   DisplayMode.Disabled, 
   Displaymode.Edit)

if you're using the Visible: property to show or hide your main message then it would look like this;

myUnsavedLabel.Text = "false"

or if you're using the Color: property of your main message to make it transparent instead of hiding it then it might look like this;

If(myUnsavedLabel.Text = "false", //there are some changes
   RGBA(212,175,55,1), 
   Transparent)

That's it.

I hope this explanation and the examples help,

Kind regards,

RT

View solution in original post

RusselThomas · ‎05-05-2022

Hi @PowerAppsHori ,

I think the behaviour you're experiencing is related to the difference between null or Blank() and an empty string.

A "not yet populated" field in the source would be null, reflected as Blank().

Blank() is an oddity in that it doesn't have a data type - it's just Blank().

With the text input, if the source is Blank() the text input starts out as Blank() - but as soon as you enter something into the text field the changed value becomes a non-blank text type with whatever you've entered. If you backspace or delete what you've entered then it's an empty string, which is still a non-blank text type. The reason your condition fails after something has been entered and removed is that you're testing for a Blank(), when in fact it's an empty string.

Sounds confusing, but hopefully this will help explain it;

Blank() = null
"" = empty string
null <> empty string
Blank() <> ""

So the question really is - do you want people to be able to save empty values back to your source - and if so, do you want them to be nulls or empty strings?

For now, because it's easier, let's assume that if the source is null/Blank() and if I enter and then remove text in the input, then we just reset the input back to it's default, which is Blank(). We do this to avoid saving empty strings back to the source when they're already Blank() in the source - it's just more efficient.

In terms of logic, instead of trying to test whether "" = Blank(), (which is false), we test the length of both. The Blank() source will be 0, and if the text input length is 0 then we know the user has entered and then cleared text in the text input. We know this because the text input is Blank() until someone types something in there.

If it's Blank() like the source, then the condition hasn't changed and your warning won't appear.

Try this - on the text input OnChange: property, add the following;

If (Len(Parent.Default)=0 && Len(DataCardValue1.Text)=0, Reset(Self))

Hope this helps,

RT

PowerAppsHori · ‎05-05-2022

Thank you for the response! I added that code to the OnChange property of the text field, and both the icon and the warning message remain even after I delete the text I input.

But that feels SO close to the solution!! Is there something else we can explore?

PowerAppsHori · ‎05-05-2022

Ok upon further testing, I feel like we're so close! So this is what's happening. If I enter the code in the OnChange property, it works partially. Here are the two scenarios where the code works and where it doesn't:

Code Works: If I enter text in the field, click out of it, click back into it and then delete the text IT WORKS. But I have to exit the text field and return.
Code Doesn't Work: If I enter text, but backspace all the way before exiting the text field, it DOESN'T WORK. This will remove the yellow triangle but not the warning at the top of the screen.

Anything else I can do here to finalize this? Again this feels so close. Thanks so much!!

RusselThomas · ‎05-05-2022

Hi @PowerAppsHori ,

Ok, so you also need to update your icon color properties to use the same logic.

Normally I'd use the Visible: property to show and hide them, as this ensures you don't have interactions with icons that you can't see but are still actually "there" - but if you're happy with using the color to hide them that's fine too.

Color: property might then look something like this;

If(DataCardValue1.Text = Parent.Default, Transparent, 
   //values are the same, don't show
   
   Len(DataCardValue1.Text)=0 && Len(Parent.Default)=0, Transparent, 
   //original is Blank() and input has been edited and cleared so is now empty string, 
   //so don't show
   
   RGBA(212,175, 55,1)) 
   //otherwise they're different, so show

If you want to use to the Visible: property instead, you can add set it to this;

If(DataCardValue1.Text = Parent.Default, false, 
   //values are the same, don't show
   
   Len(DataCardValue1.Text)=0 && Len(Parent.Default)=0, false, 
   //original is Blank() and input has been edited and cleared so is now empty string, 
   //so don't show
   
   true) 
   //otherwise they're different, so show

That should work for your icons, but if you have a single warning message for the whole form that is based on something else like Updates or Unsaved, it might be a little trickier....what is the warning message formula and is it on the Color: property or the Visible: property of the label?

Kind regards,

RT

PowerAppsHori · ‎05-05-2022

That should work for your icons, but if you have a single warning message for the whole form that is based on something else like Updates or Unsaved, it might be a little trickier....what is the warning message formula and is it on the Color: property or the Visible: property of the label?

Ya the icon works fine now (thanks to you!), it's the overall warning at the top of the app I'm struggling with now. I check if Form1.Unsaved in the visible property of the text field. Basically just: If(Form1.Unsaved, true, false). If it feels the form has anything unsaved, it shows the warning message that something that been changed and unsaved.

So with your method, I can get the icon to disappear just fine. I can even get the message to disappear if I click out of the text field, then click back in and delete the text at that point. However, if I enter text and delete it without exiting the text field first or at all, the warning message never disappears.

Any ideas?

RusselThomas · ‎05-05-2022

Hi @PowerAppsHori ,

Unfortunately, you can only evaluate the text field using the OnChange: event, which only fires after you've moved off the control. Because Unsaved is linked to the Update: property of the card, and that in turn is linked to the default control in the card, changing this might be difficult.

It might be possible to create other controls that can be referenced as data is entered, but I'm not convinced the benefit will outweigh the effort...

Kind regards,

RT

PowerAppsHori · ‎05-05-2022

Do you have any recommendations?

May app is meant to track large multi-year projects. So over 10 forms there's maybe 200+ fields of information. Being able to help the user know they've made changes and where they made changes as they hop and scroll around the app would be extremely valuable from a user experience standpoint. But having the potential for false positives would be confusing and a bad user experience.

If you have any recommendations on how I can go about this any other way, I'm all ears. Thanks so much for your help so far!

RusselThomas · ‎05-06-2022

Hi @PowerAppsHori ,

Maybe if you can share some of the user experience in screenshots it might help?

On the face of it though, how big a problem is this? (Not showing changes unless they've moved off an input field that is?)

In theory, navigating from page to page automatically moves focus, so that shouldn't be too much of an issue.

It might help to have a summary page of items that need saving - or make sure they can't move off the page unless they've saved changes - but I'm guessing, only you know how big a deal it is or how best to support the user experience, so perhaps if you can share some it we can explore some options...?

Kind regards,

RT

PowerAppsHori · ‎05-09-2022

I can't share screenshots since it contains sensitive work information. That said, here's how the app works:

It contains 9 forms each representing a phase in a project that spans 3-5 years
Each form contains a dozen to 80+ fields
The gallery lists each project

The user experience is straight forward:

There's a gallery on the left side of the screen listing each project
There's a dropdown at the top where you select a phase of a project and will make that corresponding form appear
A user selects the project, the phase and enter their information
Once done, they click save to finish

Since PowerApps doesn't block someone from selecting another project without losing progress, I'm trying to put those in place myself. To make sure a user knows there's unsaved information and to make sure they don't lose their progress, I've implemented the following:

I disable the gallery until Unsaved changes are saved
I have a list of which forms have been affected. So if you made a change in form 3, 5 and 7, the list will say there are unsaved changes in form 3, 5 and 7
I disable all other buttons that may confuse a user or potentially trigger the selection of another project
I enable and highlight the save button
I enable and highlight a Reset Fields button which resets all the forms if they want to undo what they did
I change the color of each field affected so the user know which fields they altered in case they want to delete their changes (which is the main issue in this thread)

That last bullet point is where I'm struggling to make sure the user experience isn't confusing. The dropdown, calendar and checkbox fields work as expected. It's the text input fields that do not.

Considering how many text fields are in the form, it would be a weird experience if someone clicked into a text field, typed in it, realized they were filling in the wrong one halfway through, deleted it but the application is still saying they have unsaved changes. They'd wonder where the information they entered was but there'd be no fields signifying they've been changed. So this is what I'm trying to avoid if I can help it. The setup is like 95% there, I just would like to plug this last 5% to make sure I don't get emails and questions wondering why it keeps telling them they've made a change they already deleted.