Part D: A Component with secured controls
Once a user logs in, they will see the main screen of the application.
By using group-level security, only certain users will be able to see certain controls.
Observe as the instructor creates a destination for the login Component.
- Create a new blank UX Component.
- Add a Panel Navigator to the Component.
- Add two Panel Cards to the Panel Navigator.
- Inside PANELCARD_1, add a Container, of type Panel Header.
- The new Container will automatically be renamed PANELHEADER_1.
- Inside PANELHEADER_1, place:
- A Static Text control that displays Welcome!
- A TabStop control
- A Button with Button Label Logout.
- Save the Component with the file name MainButtons.
Now you create the Component up to this point.
Observe as the instructor continues creating the MainButtons Component.
- Copy PANELHEADER_1 and its controls, paste it inside PANELCARD_2.
The new container will automatically be named PANELHEADER_2.
- Delete the Static Text in PANELHEADER_2.
- Inside PANELHEADER_2, place a Button with:
- The Label Back.
- A click Event, with an Action to Set Active Panel to PANELCARD_1.
- In the Properties group Button Appearance, click the smart button for Sub-theme, and choose Left.
- Save the Component.
- Display the Component in Working Preview
Now you continue creating the Component up to this point.
Observe as the instructor adds Button controls to the MainButtons
Component, and then sets group-level security for them.
- Inside PANELCARD_1, below the PANELHEADER_1 closing tag, add four buttons, with the Labels All Users, Administrators, Marketing, and Sales.
- Highlight the Sales control. Locate its Security Groups property, as shown here, and click the smart button:
The Security Groups window appears.
- Mark the checkboxes for Sales and Administrators, as shown here, and then click OK:
Notice Alpha Anywhere creates an Administrators Group by default, but that group is not allowed to use any controls by default.
- For the Administrator and Marketing controls, allow the appropriate Groups to see them.
- For the All Users control, do not explicitly allow any of the Groups to see it.
If a user can log in, and if they can access a Component, then they can access all the controls in that Component. (You will see how to allow all authenticated users to access a Component very soon.) So, if all authenticated users should be able to access a control, then do not choose any security groups for it.
- Change the Width Property of the Button controls to make them easier to use on a mobile device. Here’s a fast way to do it:
- Highlight all four Button controls.
- Click the % button above the Design area.
- In the box that appears, choose 100%.
- Save the Component, and display it in Working Preview.
Now you create the buttons, and then assign Security Groups to them.