Many app stakeholders want to lock down parts of their canvas apps so that certain screens are only accessible to a subset of application users. If a screen is not referenced in any Navigate functions throughout your application and its not the home screen, there is no way to access the page in the published version of the canvas app. In this post we will walk through dynamically hiding screens within a reusable navigation component.
Our example home screen, where we will lock the admin button for users with admin permissions
Setting up the navigation component
Create a new component and rename it “Navigation”. Add a new table property to the Navigation component and title it “Screens”. If the user is not an admin, we will hide the admin screen from the navigation, but we want to avoid a blank space.
Table property
As for the structure of the table, there are three fields: the screen itself, the name of the screen and an icon. After creating the ‘screens’ property as a table type, add the following sample table values:
Component’s Screens property configuration
Connecting the table to a gallery
First add a button to the gallery. Change the Text property to ThisItem.ScreenName and the OnSelect property to Naviate(ThisItem.Screen). Next, add the icon on top of the button and change the Icon property to ThisItem.Icon.
Items property of component’s gallery
Conditional styling
To further improve ease of use within your application, it may be helpful to add additional styling to the buttons so there is an indicator of which screen is active. This can be done referencing App.ActiveScreen.
Conditional formatting on button Fill property
Adding the component to a screen
After adding the new component, the next step is to build the table that will be passed to the table property in the new component. Like the property within the component, the table will have a ScreenName, Screen and Icon. In addition, it should have a Boolean field called Visible, to decide if the screen should be surfaced in the app.
For ease of testing purposes, a global variable will be initialized to determine if the user is admin in the app OnStart or not:
Changing OnStart for testing
Next, build the table with the four fields for each of the screens in the app that should be surfaced in the application by at least one user.
Set(gblScreens,
Table(
{
ScreenName: "Home",
Screen: Home,
Icon: Icon.Home,
Visible: true
},
{
ScreenName: "My Requests",
Screen: 'My Requests',
Icon: Icon.Person,
Visible: true
},
{
ScreenName: "New",
Screen: 'Create New Request',
Icon: Icon.Add,
Visible: true
},
{
ScreenName: "Admin",
Screen: Admin,
Icon: Icon.Lock,
Visible: gblUserIsAdmin
}
)
)
Removing certain screens from navigation based on current user
Run the OnStart and update the Screens property of the navigation component on the screen to gblScreens. This should show all the screens referenced in the table, but the Admin screen is still visible even though the gblUserIsAdmin variable is still set to false. Therefore, the final step will be to wrap the Table (gblScreens variable) in a Filter formula, so we remove the screens that shouldn’t be visible:
Set(
gblScreens,
Filter(
Table(
{
ScreenName: "Home",
Screen: Home,
Icon: Icon.Home,
Visible: true
},
{
ScreenName: "My Requests",
Screen: 'My Requests',
Icon: Icon.Person,
Visible: true
},
{
ScreenName: "New",
Screen: 'Create New Request',
Icon: Icon.Add,
Visible: true
},
{
ScreenName: "Admin",
Screen: Admin,
Icon: Icon.Lock,
Visible: gblUserIsAdmin
}
),
Visible
)
)
Re-run the OnStart and note that the navigation component should now hide the Admin screen. Test this behavior by switching the value for gblUserIsAdmin. In the long term, the logic for setting if the user is or isn’t an admin may be connected to a relevant data source with this information.
This was all about Permission-driven canvas app component. Hope you enjoyed it.
For further queries or demo please comment below or contact us.
For any for consultant/ support work on O365/ development, contact us or visit our website www.sigilotech.com
Comments