ToolJet/docs/versioned_docs/version-2.68.0/how-to/conditionally-display-components.md
Aman Regu bdfe3270e2
[docs]: v2.68.0-Beta (#10755)
* docs: jira

* docs: formatting + Client Credentials grant type

* docs: connection string pgsql

* docs: parameterized queries mysql

* docs: parameterized queries in PostgreSQL

* docs: update mysql example

* docs: TJDB sql editor

* docs: add metadata to REST API

* docs: add, update  postgresql media

* docs: add metadata to graphql

* docs: update parameterized queries

* docs: add parameterized queries for mssql

* docs: add SSL Cert to mysql

* docs: TJDB SQL restricted commands

* docs: update JIRA token location

* docs: update delete issue example

* docs: update find user by query example

* docs: remove session id from get assignable users

* docs: use correct image for get issues for board

* docs: update create issue example

* docs: update delete issue media

* docs: update assignable users media

* docs: update examples

* docs: update key desc

* docs: v2.68.0-Beta
2024-09-13 19:23:19 +05:30

2.2 KiB

id title
conditionally-display-components Conditionally Display Components Using fx and Groups

In this guide, you'll see how you can utilize groups to conditionally display components. This can be handy when two or more groups have access to the same app and you want to conditionally display components based on the group.

Here's a basic application with some components.

Initial UI without any conditions

In this app, the Approve Selected button should only display if someone from the Manager group is accessing the application.

  • To implement this, select the button component and navigate to its Visibility property.
  • Click on the fx button next to Visibility and enter the below code in the input:
{{globals.currentUser.groups.includes('Manager')}}
Visibility Code on Button Component
  • Now if you check the UI, you won't see the Button component unless you are a part of the Managers group.

  • Here's what the users who are not in the Managers group can see:

Non Manager View
  • Here's what the users in the Managers group can see:
Manager View

This was a basic implementation of how you can control the visibility of components using fx and Groups in ToolJet.

Feel free to implement the same logic for more advanced use cases. For instance, for conditionally displaying a section or a group of components, you can place all the relevant components inside a Container component and apply the same logic.