Keeping a user on screen

[tjestesjr]

Hi all,

I have an application where a user can upload an excel file to our database. The application first parses the Excel data to a gallery for the users to review and then delete or upload the data. The users are requesting that they not be allowed to leave the screen without committing or deleting the data, so I have added the following logic:

Screen.OnHidden If(
    CountRows(galKEDPricingJSON.AllItems) > 0,
    UpdateContext({showPopup: true}) && Back(ScreenTransition.None)
)

This works in my personal Dev environment and works well. I created a Modal Popup form that covers the screen and give the user the choice to cancel and stay on screen or delete the records without committing them. My problem is when I publish to UAT I get different behavior.  The user is presented with the popup, but they can navigate away from the screen so the Back() is not working.

Any thoughts or suggestions as to how to debug this would be greatly appreciated.

[LaurensM]

Hi @tjestesjr, 😊

Preferably you would have an If statement on the OnSelect code used to navigate to the next screen:

//OnSelect of the next page button or icon...
If(
    CountRows(galKEDPricingJSON.AllItems) > 0,
    UpdateContext({showPopup: true}),
    Navigate(ScreenName)
)

(You could also use conditional logic within the DisplayMode of that control)

As a side note: chaining functions is done by using the semicolon not '&&'.

Function1();
Function2()

The back() function indeed seems to run in the editor (causing 2 rapid screen swaps) but not in the live app version. That said, even if it were to have worked I would have highly advised against it. It is best to stop the user from navigating via an If statement instead of trying to navigate the user back to the previous screen after navigating.

If this solves your question, would you be so kind as to accept it as a solution.
Thanks!

[tjestesjr]

@LaurensM 

I didn't realize that I had used the logical AND operator '&&' there instead of the ';' . Always useful to have a second set of eyes and a fresh perspective on the situation. I am fixing the function chaining now and will publish to UAT and report back here. 

[LaurensM]

@tjestesjr,

Please note that changing to the correct chaining operator does not seem to change the behaviour in the live app version. It is best to change your OnHidden approach to the shown OnSelect code.

I hope this helps!

[tjestesjr]

@LaurensM 

So, you are right changing my linking operator did not fix the functionality in UAT. My issue now is trying to disable the navigation component when the Popup Criteria is met. I have my user navigation in a component and I am not sure how to enable/disable the menu. I have a collection on my App.OnStart that drives the menu component through the collection below.

ClearCollect(
    colVerticalMenu,
    {
        Title: "Facility Management",
        Screen: KED_FacilityManagement,
        Id: 1
    }, 
    {
        Title: "Brand Item",
        Screen: KED_BrandItemSearch,
        Id: 2
    },   
    {
        Title: "Brand Item Mapping",
        Screen: KED_BrandItemMapping,
        Id: 3
    },
    {
        Title: "Member Mapping",
        Screen: KED_MemberShipTo,
        Id: 4
    },
    {
        Title: "Restaurant Mapping",
        Screen: KED_ResaurantMapping,
        Id: 5
    },
    {
        Title: "Pricing Import",
        Screen: KED_PricingImport,
        Id: 6
    }
);

[LaurensM]

@tjestesjr 

Thanks for the info! 😊

If I understand it correctly your navigation is built as a Power Apps component. Most likely this will be a Gallery within that component? Below I have documented a possible approach.

By enabling 'Access App Scope' you will be able to update global variables from within a Component:

In addition add an input custom property of type boolean - make sure to set the default value to false.

Your OnSelect of the Gallery should look quite similar to the following code - make sure to add the Set() function:

If(
    ComponentName.DisableNav,
    Set(gblShowPopup, true),
    Navigate(ThisItem.Screen)
)

On your Power Apps screen shown in the screenshot, select the component and add the code below to the custom input property called DisableNav:

galKEDPricingJSON.AllItemsCount > 0

Use gblShowPopup as the Visible property for your pop-up. Make sure that the pop-up background (1) also covers the navigation control and (2) is higher in the tree view hierarchy. This will 'disable' the navigation menu by covering the navigation menu - only allowing the user to select either the cancel or delete button.

I hope this helps!

[tjestesjr]

@LaurensM 

Thank you for the excellent write-up! I have implemented the suggestions, but I am still having issues with user being able to leave the KED_PricingImport screen. I am not able to keep them on the screen (see gif below). But if they have uploaded data and navigate back to the screen then it works as intended.

[LaurensM · Accepted solution]

Hi @tjestesjr,

I unfortunately am unable to recreate this behaviour. On my end I am not able to navigate when the gallery contains records and will display a pop-up.

The current logic checks whether galKEDPricingJSON contains records. If this is the case, navigation will not be allowed and a variable will be set to true instead - resulting in the pop-up showing. Is this the functionality that you would like to implement?

I did make a small mistake in my OnSelect code: Set(gblShowPopup: true) should be Set(gblShowPopup, true). (comma instead of colon) I have adjusted my previous comment accordingly.

The gallery OnSelect should contain the If() statement code, controls within the gallery should only contain Select(Parent) within their OnSelect property. It may be beneficial to check whether the controls within the gallery don't accidentally have the old nav code. Is there any other code that could interfere with our conditional logic?

I hope this helps!

[tjestesjr]

@LaurensM 

"I did make a small mistake in my OnSelect code: Set(gblShowPopup: true) should be Set(gblShowPopup, true). (comma instead of colon) I have adjusted my previous comment accordingly." I did see that but didn't call it out. 🙂

This is what finally worked was changing the OnSelect to  Select(Parent)  for the  controls within the MenuComponent gallery.

Thanks very much for your help and patience and persistent, I really appreciate it.

[LaurensM]

Perfect! Glad I was able to help @tjestesjr. 😊