Multi-Tab / Multi-Icon Variable Question, specifically Show and Hide Edit/Save Icons

[tagustin2020]

Hello,

I have a multi-tab form app I am working on. The Requestor and those working the request (admins) can edit the Request and Comments tabs, but only the admins can edit the Designer and Model Shop tabs.

Request Tab 

What I have achieved so far: The form defaults to view mode. If any of the users (requestors or admins) have click on the Request tab, the Edit icon is displayed. When they click the Edit icon, the fields open up and Save and Cancel icons are displayed. All OnSelect form actions work (please see attached formulas). The part I am struggling with is visibility. The icons are always visible no matter which tab is clicked. I need them to disappear when the Model Shop or Designer tab is clicked.

Designer Tab and Model Shop Tab

While all users are allowed to see the information on these forms, only admins are allowed to edit the information. I would like to create two separate sets of icons for these 2 tabs that are only visible if the logged in person is an admin. I realize that in theory, I could have one big form and set the visibility of the data cards to show depending on which tab is clicked, but with 18 fields on one form and 9 on the other, I decided to hold off unless you tell me it is absolutely necessary. It's okay if it is, I just didn't want to go through all the extra work if it wasn't. I followed Reza's @Reza instructions ("Check if User is a Member of SharePoint Group in Power Apps") on how to set up a variable called isAdmin that checks to see if they are part of a SharePoint Security Group. Thanks for that video Reza. I just need to know how to apply it to this kind of complicated situation.

Comments Tab

The Comments tab has its own controls so we don't have to worry about that one.

You can view all of my app variables and screenshots in the second document called "App Variables". I would rather err on the side of providing too much info than not enough.

Thank you in advance for your help,

Teresa

[v-siky-msft]

Hi @tagustin2020 ,

Request Tab:

I just feel confused with ReqEditlbl which is more like a update context variable? Another question is that are the four Tabs in a gallery? 

The issue of Edit/Save/Cannel icon is because the logic in Visible property is not clear enough. You need to add explicit logic to determine which tab is selected, for example:

TabGallery.Selected.Value="Request" && ReqEditlbl= false  //EditIcon.Visible property
TabGallery.Selected.Value="Request" && ReqEditlbl= true  //SaveIcon.Visible property
TabGallery.Selected.Value="Request" && ReqEditlbl= true  //CannelIcon.Visible property

Designer Tab and Model Shop Tab:

You can create two separate forms for each tab and control the form visible, or create a big form with all data cards for all Tabs and control the visible of card. Both solution are feasible, and the latter may be slightly superior in performance.

As for how to implement this Admin logic, you can determine whether the login user is Admin by getting a member of the Sharepoint Admin Group as you mentioned, or more simply by going through Office365 Group.

Add all administrators to an Office365 group( named AdminGroup), and then in App.OnStart to check if login user is Administrator.

If("AdminGroup" in Office365Groups.ListOwnedGroupsV3().value.displayName, Set(IsAdmin,true),Set(IsAdmin,false))

Then configure the Visible of Form or data cards based on IsAdmin variable.

It may not be perfect for your situation, but hopefully the above will give you inspiration.

Hope this helps.

Sik

[tagustin2020]

Thank you for the advice Sik. I managed to break my app yesterday while attempting to introduce sorting functionality to my Gallery. I'll try these variable adjustments once I have visibility to the forms again. I promise to circle back around as soon as I can. Have a nice afternoon. Teresa

[tagustin2020]

@v-siky-msft 

Hello Sik,

My forms are back up and running so I went in to give this a try, but unfortunately is not working. The names of my button tabs are tabRequest, tabDesign and tabModelShop if that helps. The screen does not contain a gallery only Edit forms and buttons made to look like tabs so I'm getting the error message "invalid argument". It is very possible that my foundation is off in regards to how I went about setting up these variables in the first place since I am still so new to Power Apps and am trying to get my head wrapped around how global and contextual variables work. If we were to start from scratch what would be a better way to approach what I am trying to achieve as stated in my original post?

Thank you,

Teresa

[tagustin2020]

@v-siky-msft 

Hi Sik,

I just realized I was supposed to enter the formulas into the Visible property, not the OnSelect property so I restored my OnSelect formula for the Edit icon to EditForm(frmRequestVE);UpdateContext({ReqEditlbl:true}) and entered tabRequest.Selected.Value="Request" && ReqEditlbl=false into the Visible property of the Edit icon. It generated 3 errors. I have attached a png for your review. Same question as before, should I be approaching the variables for the 3 tabs in a different way?

Thanks again for your help!

Teresa

[v-siky-msft]

Hi @tagustin2020 ,

That's ok, so these tabs are all buttons, and the tabrequest is the name of request button, right?

I would suggest you create a variable to reflect the tab selection in OnSelect event of four Tab buttons.

Set(varSelectedTab, "Request")  // tabRequest.OnSelect
Set(varSelectedTab, "Designer")  // tabDesigner.OnSelect
Set(varSelectedTab, "Model Shop")  // tabModelShop.OnSelect
Set(varSelectedTab, "Comments")  // tabComments.OnSelect

Then, modify the visible property as follows.  (Just take RequestTab as an example)

varSelectedTab="Request" && ReqEditlbl= false  //EditIcon.Visible property
varSelectedTab="Request" && ReqEditlbl= true  //SaveIcon.Visible property
varSelectedTab="Request" && ReqEditlbl= true  //CannelIcon.Visible property

Hope this helps,
Sik

[tagustin2020 · Accepted solution]

@v-siky-msft 

Hello Sik,

Thank you so much for your guidance! I wouldn't have been able to figure this out without your help. Here are the formulas that ended up working for me in the sense that each set of edit/save/cancel icons is only visible when its tab is clicked, that the Edit and Save/Cancel icons toggle correctly depending on which mode I am invoking and finally that the edit/save/cancel icons are only visible to app admins when the Designer and Model Shop tabs are clicked. 

Request Tab:

OnSelect: Set(varFormTab, "Request")

Request Tab Edit Icon:

OnSelect: EditForm(frmRequestVE);UpdateContext({ReqEditlbl:true})

Visible: varFormTab="Request" && If(ReqEditlbl=true,false,true)

Request Tab Save Icon:

OnSelect: UpdateContext({ReqEditlbl:false});SubmitForm(frmRequestVE);ViewForm(frmRequestVE)

Visible: varFormTab="Request" && If(ReqEditlbl=true,true,false)

Request Tab Cancel Icon:

OnSelect: UpdateContext({ReqEditlbl:false});ResetForm(frmRequestVE);ViewForm(frmRequestVE)

Visible: varFormTab="Request" && If(ReqEditlbl=true,true,false)

Designer Tab:

OnSelect: Set(varFormTab, "Designer")

Designer Edit Icon:

Visible: varFormTab="Designer" && isAdmin && If(ReqEditlbl=true,false,true)

Designer Save Icon:

Visible: varFormTab="Designer" && isAdmin && If(ReqEditlbl=true,true,false)

Designer Cancel Icon:

Visible: varFormTab="Designer" && isAdmin && If(ReqEditlbl=true,true,false)

Req Edit Label (only 1 label is needed for all the sets - I toggle the Visible property to off/false once I am done testing):

Text: If(ReqEditlbl=true,"Save","Edit")

The Model Shop formulas are the same as the Designer formulas with the exception of the tab name. I am attaching a document that includes other fine tuning details in case anyone who happens upon this post is interested in taking a look.

Again, thanks so much. I really appreciate your taking the time to help me. 

Kind regards,

Teresa