---
title: "Show / Hide UI Components"
description: "Show fields and actions conditionally based on user input, roles, or view logic."
permalink: /docs/guides/common-app-patterns/show-hide-components/
---
# Show / Hide UI Components
Use `show-if` and `hide-if` to adapt a view to user input or the current workflow. These examples show dependent fields, role-specific controls, and a button that toggles visibility.
## Hide/Show Inputs Based on Prior Input
This example assumes `province` and `city` models, with a `cities` relationship on each province, and a `provinces` query initialized in the view script. We have a dropdown list to select a Province, and a dropdown list to select a City within the selected Province. The dropdown list for the City only shows once the user selected a Province. We also show a *"You selected:"* status message when the user selected a city.
**main.view\.xml**
```xml
{selected_city}
```
## Show or Hide Based on User Role
In this example, a single mobile app will be used by both Salespeople and Technicians at a company. However, Technicians should only have access to Job Card related functionality, whereas Salespeople should only have access to Sales Quote related functionality. We accomplish this by having two menu buttons on a view that show or hide depending on what the user's role is (we use an `single-choice` to store each user's role)
**main.view\.xml**
```xml
```
**main.js**
```javascript
function init() {
// 'role' is a single-choice on the 'user' object where 'technician' = Technician and 'salesperson' = Salesperson
if (user.role == 'technician') {
view.is_technician = true;
view.is_salesperson = false;
} else if (user.role == 'salesperson') {
view.is_technician = false;
view.is_salesperson = true;
}
}
```
## Trigger Show/Hide From JavaScript
This example shows how we can dynamically control the showing/hiding of components from JavaScript/TypeScript. If the user presses a button, we hide or show the heading above the button.
**main.js**
```javascript
function init() {
// initially the heading will be visible
view.hide_me = false;
}
function hideMeShowMe() {
if (view.hide_me == false) { // if the heading is visible,
view.hide_me = true; // hide the heading
} else {
view.hide_me = false; // show the heading
}
}
```
**main.view\.xml**
```xml
I will be hidden when the user presses the below button!
```
## Background GPS Capturing
**Note:** The visibility of a GPS component cannot be dynamically controlled. It must be either visible or specifically hidden (see below).
Normally, a `capture-coordinates` component in the Runtime will show a map to the user indicating what GPS location is being captured. However, often you want to capture a GPS location in the background without displaying a map to the user. Hiding the component will cause it to continue capturing a GPS location in the background.
```xml
```