Control the visibility of UI elements

To control the visibility of UI elements for specific users, you can use the visible property. You might hide widgets from a user if the widget isn't relevant or the user shouldn't be able to use it. For example, a page doesn't need a Save button to save changes to a record until the user changes a record. If a user doesn't have permission to access a page, you can hide a link to that page.

Key concepts:

The visible property has a boolean value (true = visible, false = hidden). You can bind the value or use a script to determine whether the user meets the requirements for a widget to be visible.
Call a server script function from a client script when the visibility condition depends on another server script or information from a third party service.
When a widget contains other widgets, the setting on the parent widget applies to its children. For example, if you have a form widget that contains a title, input fields, and a Submit button, you can hide individual components or the entire form.

Use a script to control widget visibility

Write a client script that determines if the user can access the widget and returns a boolean. For example, the Travel Approval template has the client script Utility. It has three functions to test whether the user is a member of a specific role:
```
/**
 * Determines whether the user has specified role.
 * @param {string} roleName - name of the role to check.
 * @return {boolean} true if user has the role.
 */
function hasRole(roleName) {
  return (app.user.roles.indexOf(roleName) > -1);
}

/**
 * Determines whether the user is admin.
 * @return {boolean} true if user is an admin.
 */
function isAdmin() {
  return hasRole('Admins');
}

/**
 * Determines whether the user is approver.
 * @return {boolean} true if user is an approver.
 */
function isApprover() {
  return hasRole('Approvers');
}
```
The hasRole(roleName) function gets a list of roles that the current user is a member of and searches for the presence of the specified role. For example, if a client script calls isAdmin(), the script searches for the Admins role. If the Admins role is present, it has an index value of 0 or more and the return expression evaluates to true.
Select the widget you want to set visibility for. Remember that any widgets under it in the hierarchy inherit the parent widget's visibility.
In the Property editor, click Display.
Click the visible dropdown menu and select binding.
In the binding dialog, enter an expression that calls the client script. For example, to show the widget if the user is a member of Admins or Approvers, enter the following:
```
isAdmin()||isApprover()
```

Use a binding to control widget visibility

Select the widget you want to set visibility for. Remember that any widgets under it in the hierarchy inherit the parent widget's visibility.
In the Property editor, click Display.
Click the visible dropdown menu and select binding.
In the binding dialog, write a binding expression. For example, to give access to members of the Managers role:
```
@user.role.Managers
```

Use numbers and strings in bindings as boolean values

You can bind the visible property to a field with a Number or String value (not a Date) and App Maker can automatically convert the value to a boolean. The conversions for numbers and special cases (undefined, null, and NaN) match JavaScript type conversions. The conversions for strings don't match JavaScript type conversions.

Field type	True (Visible)	False (Hidden)	Same as JavaScript?
Boolean	Value: box is selected	Value: box is cleared	yes
Number	1, 1.0 All other values not listed under False; for example, 2, 208.1, -7, Infinity, -Infinity	0, -0, 0.0, -0.0	yes
String	"true", "True", "TRUE" (any case)	"false", "False", "FALSE" (any case) All other values not listed under True; for example, "employee", or "admin".	no