Using Switch & If to Show/Hide Containers on a Responsive App

(0) Share

Report

Posted on by als1010

Hello everyone!

I have a Power App I am working on that I would like to behave responsively across all screen sizes.

Using a text label, the current screen size is printed to txtCurrentAppSize.

My screen's OnVisible property sets the following variable.

If(
 txtCurrentAppSize.Text = "Small",
 Set(varMobileUX, true)
)

Per below, my app uses one screen with a gallery and table to display and edit data.

Power Apps - Desktop.PNG

On mobile displays, the table's container is hidden using the following Switch function on the Visible property.

Switch(
 varMobileUX,
 true,
 false,
 true
)

This leaves us with the below screen when loading the application from a mobile device.

Power Apps - Mobile.PNG

Per the below illustration, I would like the gallery to navigate to the table when the user selects an item.

Lastly, I would like the user to have the option to return to the gallery without any additional screens.

I have tried using the gallery's OnSelect property to set this up with another function, but nothing works as expected. I have also tried to use the gallery's child elements to trigger the OnSelect but to no success.

Is it possible to show and hide these elements as necessary based on the user's input? If not, I can build this out using multiple screens, but fear it will bog down performance. I would like to avoid maintaining multiple versions of the app if possible.

Thanks in advance for your help!

Categories:

Building Power Apps

I have the same question (0)

All responses (8)

Answers (1)

Verified answer

LaurensM 12,516 Moderator on at

Like (2)

Report
Hi @als1010,

Thanks for reaching out, I would be more than happy to help. 😊

I wouldn't recommend the current responsive design approach for the following reasons:

The screen size is currently only evaluated when the screen becomes visible (this can change - think of swapping to a second monitor or a phone going to landscape mode)

The variable & text label are redundant since we have a direct reference to the current screen size via ScreenName.Size

As an example: Instead of using varMobileUX as a condition, you could use ScreenName.Size = 1 - which will also return true when the user is on a mobile phone in portrait mode. (Dependent on the SizeBreakpoints in the App component)

To start off we can change the Switch statement within the table's container Visible property to the following code:

//Will return true if the screensize is larger than breakpoint 1 //Change ScreenName to the correct name ScreenName.Size > 1

In order to display the table you can save the currently selected item in the OnSelect of your Gallery control:

//Gallery OnSelect Set(gblSelectedItem, ThisItem) //Note: Make sure the controls within your gallery contain Select(Parent) in their OnSelect properties

Now let's extend the table's container Visible property:

//Hide when screen size = 1 except when an item is selected ScreenName.Size > 1 || !IsBlank(gblSelectedItem)

You will have to hide the container that is currently being displayed (containing the gallery, searchbar...) in order to show the table container:

//Visible property (displays when the variable does not contain a value) IsBlank(gblSelectedItem)

When the table is being displayed, you may want to add a button (e.g. in the subheader container above) to 'navigate' back to the gallery by resetting the variable:

//OnSelect of a button Set(gblSelectedItem, Blank())

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

Thanks!

Was this reply helpful? Yes No
als1010 16 on at

Like (0)

Report

This is exactly what I was looking for. I appreciate the help more than I can say! Thank you so much for taking the time to provide such an in-depth and specific response. I am looking forward to finishing this project up.

Was this reply helpful? Yes No
als1010 16 on at

Like (0)

Report
I have encountered an unexpected issue as I moved farther along in the development process. After creating an additional screen with a form control to add and edit table entries, the form works as expected on desktop screens whereas I receive a "No data to display" message on mobile screens.

The form is connected to the table's selected item with the Item control containing the following:

tblItemDetails.Selected

I believe the following formula in the table's visible property is breaking the functionality on mobile devices.

ScreenName.Size > 1 || !IsBlank(gblSelectedItem)

Perhaps it is clearing the table's selection ONLY on mobile devices causing the form's context to render blank?

Please see the attached video for more details.

Hoping I am overlooking something as I tried multiple Switch and If functions to restore functionality but seem to be hitting a wall.

Thanks in advance!

Power Apps - Edit...

Was this reply helpful? Yes No
LaurensM 12,516 Moderator on at

Like (0)

Report

Hi @als1010,

Thanks for the information! The gif size unfortunately was very small, but I understand the general issue.

I don't expect this to be caused by our conditional visibilty of controls, since visibility will not reset a control selection. Would it be possible to share (1) the Table items property, (2) Form Datasource & (3) Items property. The (4) OnSelect of the button used to navigate to the form would also be very helpful.

I was able to recreate the issue when I used a Filter in the table property in which the filter condition suddenly changed - resetting the selected row. As an example: Should you use gblSelectedItem as a Filter condition for the table and the Form button resets that variable - this could cause a similar result. (Use Gallery.Selected as a filter condition instead, gblSelectedItem is used to handle mobile visibility)

Thanks!

Was this reply helpful? Yes No
als1010 16 on at

Like (0)

Report
Thanks for the speedy reply! My apologies for the gif size, I should've double checked. I tried to reupload in case anyone would like to see, but unfortunately it is over compressed.

The clip can be downloaded in HQ here.

The below filter function can be found in the table's Item property.
Filter( envItemDetails, 'Item Group'.Value = galFinder.Selected.'Item Group' )

In addition, here are the DataSource and Item properties of the form.

Form: DataSource:
envItemDetails

Form: Item:
tblItemDetails.Selected

The OnSelect property of the 'Edit' button leading to the form is:
EditForm(frmItemDetails); Navigate('Edit Screen')

For additional context, the button is not visible unless an item from the table is selected.

As such, the button's visible property is:
Not(IsBlank(tblItemDetails.Selected))

If there is any additional information I can provide, please let me know!

Thanks again!

Was this reply helpful? Yes No
LaurensM 12,516 Moderator on at

Like (0)

Report
Hi @als1010,

Thanks for the detailed info!

Very interesting find! After some testing on my end I think this is an linked to the modern table control. Please note that this control is still in preview and should thus not be used for production apps.

What I have noticed is the following:

The table resets / loses the current selection when navigating back to your screen containing the table control

The table resets / loses the current selection when changing UI type (tabular on desktop vs list on mobile)

When using the list view the selection reference does not work across screens

In general referencing controls across screens is not recommended since Power Apps has to keep the previous screen in memory. One thing you could do is save the current selection when navigating to the editform screen and referencing that variable instead of the tblItemDetails.Selected:

//OnSelect Edit button EditForm(frmItemDetails); Navigate('Edit Screen', ScreenTransition.None,{locTableSelected: tblItemDetails.Selected}) //Form item locTableSelected

I hope this helps!

Was this reply helpful? Yes No
LaurensM 12,516 Moderator on at

Like (0)

Report

@als1010,

As a note, I have documented our findings on the dedicated Modern Control thread. (See post here)

Was this reply helpful? Yes No
als1010 16 on at

Like (0)

Report

Wow! This turned out to be much deeper than I thought!

Your solution worked flawlessly as expected. Every time we communicate, I feel like I've opened up a new layer of experimentation in Power Apps. 😁

Just so I understand, you used the navigate function to store a local variable in the 'Edit Screen' so that the modern table control would not 'lose' the value upon navigation? What a work around!

I wonder why this works on desktop views when it is breaking on mobile?

Thanks again for your assistance and deep dive into the issue! I'm rather new to Power Apps and I am looking forward to watching the modern controls evolve.

Was this reply helpful? Yes No