Dynamically disable component menu items based on roles

[tjestesjr]

Hello all. I have an application with a custom menu component. The menu component consists of a gallery driven by a collection.

I want to be able to dynamically enable/disable menu items based on a users role. I have tried to create the collection from a SQL table but I get the "the first argument of navigate should be a control or screen" error and have not found a work-around to this issue. The other requirement is that a single user can have multiple roles. I thought about a switch statement to custom build the collection but think that will be a lot of code and was looking for a more elegant solution.

ClearCollect(
    colVerticalMenu,
    {
        Title: "Facility Management",
        Screen: KED_FacilityManagement,
        Id: 1
    }, 
    {
        Title: "Brand Item Mgmt",
        Screen: KED_BrandItemSearch,
        Id: 2
    },   
    {
        Title: "Brand Item Mapping",
        Screen: KED_BrandItemMapping,
        Id: 3
    },
    {
        Title: "Member Mapping",
        Screen: KED_MemberShipTo,
        Id: 4
    }
);

I will have the code below to determine the roles that a user will fall into:

With(
    {
        wRoleID: Filter(
            colAuthUsers,
            Lower(PrimaryEmail) = Lower(User().Email)
        ).RoleID
    },
    If(
        89 in wRoleID,
        Set(
            varIsCreator,
            true
        )
    );
    If(
        90 in wRoleID,
        Set(
            varIsManager,
            true
        )
    );
    If(
        91 in wRoleID,
        Set(
            varIsAccounting,
            true
        )
    )
);

[Kirkby]

Hi @tjestesjr 

It seems you can create the menu structure for the logged-in user using the following logic at the app's OnStart or at the initial point you think, and continue to use it.

//For demo. Actually retrieve data from SPO List or other place. Your collection contains all users' permissions as in the above code.

ClearCollect(colAuthUsers, {Email:"A@dd.com", RoleID:89},{Email:"A@dd.com", RoleID:90},{Email:"A@dd.com", RoleID:91}, {Email:"emma@dd.com", RoleID:89},{Email:"emma@dd.com", RoleID:91},{Email:"BBB@dd.com", RoleID:89});

// For demo. I used fixed email address to filter

ClearCollect(colUserPermission, Filter(colAuthUsers,Email="A@dd.com").RoleID);

Clear(colVerticalMenu);

//If you don't want to use the Switch statement repeatedly, it would be helpful to have a consistent rule between Permission and ID.

//Arbitrary examples for permissions and allowed menus.

ForAll(

    colUserPermission,

    Collect(

        colVerticalMenu,

          {

            Title: Switch(colUserPermission[@RoleID], 89, "Facility Management", 90, "Brand Item Mgmt",  91, "Brand Item Mapping", 92, "Member Mapping"),

            Screen: Switch(colUserPermission[@RoleID], 89, Screen1, 90,Screen2, 91, Screen3, 92, Screen4),

            Id: Switch(colUserPermission[@RoleID],    89, 1,  90, 2,   91, 3,   92, 4)

        }

    )

)

Collection for populating the menu is created as follows. (case when access to Screen1,2 and 3 is available)

Kirkby

(I would appreciate it if you could select it as the solution If it has been helpful in solving the problem)

[Kirkby · Accepted solution]

My second approach is as follows.

//Get relationship between RoleID and the accessible screens in advance to avoid complicated switch

//Assuming that you have already defined this relationship somewhere.

ClearCollect(

    colPermissionsInfo,  //actually retrieves from SPO list

    { Title: "Facility Management", Screen:Screen1, RoleID: 89},

    { Title: "Brand Item Mgmt",      Screen:Screen2, RoleID: 90},

    { Title: "Brand Item Mapping", Screen:Screen3, RoleID: 91},

    { Title: "Member Mapping",     Screen:Screen4, RoleID: 92}

);

//It shows the screens accessible according to RoleID. If there are screens accessible to everyone in common, those can be added separately from logic here.

//For demo.  

ClearCollect(colAuthUsers, {Email:"A@dd.com", RoleID:89},{Email:"A@dd.com", RoleID:90},{Email:"A@dd.com", RoleID:91}, {Email:"emma@dd.com", RoleID:89},{Email:"BBB@dd.com", RoleID:91},{Email:"BBB@dd.com", RoleID:89});

// For demo.  

ClearCollect(colUserPermission, Filter(colAuthUsers,Email="A@dd.com").RoleID);

Clear(colVerticalMenu);

ForAll(

    colUserPermission,

    Collect(

        colVerticalMenu,

          {

            //Since we have the colPermissionsInfo collection, there is no need for complex switch statements.

            Title:LookUp(colPermissionsInfo, RoleID = colUserPermission[@RoleID],  Title),

            Screen:LookUp(colPermissionsInfo, RoleID = colUserPermission[@RoleID], Screen),

            Id:  CountRows(colVerticalMenu) +1

            // If the 'Id' is used solely for sorting purposes and does not hold significant meaning,

            //it seems appropriate to simply increment it sequentially.

          }

    )

)

*I would probably go with this second approach.

The outcome is the same as the previous reply.

I hope this helps.

 Kirkby

( I would appreciate it if you could select it as the solution If it has been helpful in solving the problem)

[tjestesjr]

@Kirkby 

Thank you for your time and the thoughtful write-up.

I have implemented the second strategy that you suggested, and I am able to dynamically generate the menu list, BUT the navigation does not work 😞

ClearCollect(
    colRolesMenu,
    KED_ManagementSystemRoleMenu
);
ClearCollect(
    colUserPermissions,
    SortByColumns(
        Filter(
            colRolesMenu,
            Lower(PrimaryEmail) = Lower(User().Email)
        ),
        "PrimaryEmail",
        SortOrder.Ascending,
        "MenuOrder",
        SortOrder.Ascending
    )
);
ForAll(
    colUserPermissions,
    Collect(
        colVerticalMenu,
        {
            Title: Title,
            Screen: Screen,
            Id: CountRows(colVerticalMenu) + 1
        }
    )
);

The above code gives me a collection:

Whereas this code produces a collection were the "Screen" is a reference to a control:

ClearCollect(
    colVerticalMenu,
    {
        Title: "Facility Management",
        Screen: KED_FacilityManagement,
        Id: 1
    },
    {
        Title: "Brand Item Mgmt",
        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
    }
);

I am not sure how to get the "Screen" to reference the screen control when building the collection dynamically, hence why I think I may have to write up a big, ugly, switch statement, unless there is a way to "cast" that screen name from the database to a control.

The other acceptable solution is to disable menu items based on the role, but I am unsure how to do that.

[tjestesjr · Accepted solution]

@Kirkby 

So, I have figured out a solution. I have to create the vertical menu collection like so:

ClearCollect(
    colVerticalMenu,
    {
        Title: "Facility Management",
        Screen: KED_FacilityManagement,
        Id: 1
    },
    {
        Title: "Brand Item Mgmt",
        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
    }
);

This creates the collection with the correct reference to the screen controls. Then I loop through the colUserPermissions and LookUp the screen control from the vertical menu collection above.

ForAll(
    colUserPermissions,
    Collect(
        colVerticalMenuFiltered,
        {
            Title: Title,
            Screen:LookUp(colVerticalMenu,Title = colUserPermissions[@Title],Screen)
            
        }
    )
);

 This creates the new collection with the correct screen control reference that I then use as the source for my menu gallery.