Control functionality with feature flags

Feature flags allow you to manage access to data or functionality on a granular level. A common use case for feature flags is to enable certain features on a per-user basis.

This guide explains how to build a feature flagging tool using the Table and Feature Flags components. Using this tool, you select a user from the table and toggle available feature flags. These changes are saved back to the user record to ensure a persistent state.

Demo

Try out the app to see the feature flag tool in action (toggles are disabled).

Retrieve a list of users

Create a query to retrieve the users table from the sample onboarding_db PostgreSQL database.

1. In the Query editor, create a new Resource query.
2. Select the onboarding_db PostgreSQL resource.
3. Enter select * from users; as the query.
4. Click Save and Run.
5. Rename the query to getUsers.

Next, drag a Table component from the Component Library to the Canvas. The table displays the results of the most recently created query and loads the list of users.

The users table contains a feature_flags column that is initially empty. This will be used to store feature flag information when enabled or disabled.

Define feature flags

The Feature Flags component contains a list of toggles that can trigger queries when enabled or disabled. Each toggle can include a description and metadata to provide further context about each flag.

Drag a Feature Flags component from the Component Library to the Canvas. Two feature flag toggles are created automatically but this guide only requires one---remove one of the feature flags.

You can set the Toggle Checked? setting of the toggle so it dynamically reflects the state of a feature flag. Set the value to {{ table1.selectedRow.feature_flags.feature1 }}. The toggle is checked only if this is evaluated as a truthy value. Since feature1 does not currently exist, it is evaluated as false and switched off.

Set and unset feature flags

The last step is to create two queries that set and unset the feature flag for the user. These queries run when the toggle is enabled or disabled. Both of these queries set the appropriate boolean value for feature1, creating the key if necessary.

Set the feature flag

Create a new query that sets the feature flag and make the following changes:

• Resource: onboarding_db
• GUI mode
• Run query only when manually triggered
• Table: users
• Action type: Update an existing record

The action to update a record requires a column filter to identify which record to update. It must be a unique identifier to avoid incorrect changes. A list of available filters is automatically populated using the available table columns. Set the value to {{ table1.selectedRow.id}}.

The Changeset contains the information to update. To update the feature flag state, select Object as the data type and set the value to:

{
  "feature_flags": {
    "feature1": true,
  }
}

Save these changes and then rename the query to setFeature1.

Unset the feature flag

Duplicate the query you just created. Click ••• and select Duplicate. and change the Changeset to:

{
  "feature_flags": {
    "feature1": false,
  }
}

Save these changes and then rename the query to unsetFeature1.

Refresh the table after submission

Add an event handler to both queries that reload the table to show the changes automatically:

• Event: Success
• Action: Trigger query
• Query: getUsers

Click Save to save the additional changes.

Update toggle actions

Now that you have queries to set and unset feature flags, update the Feature Flag component toggle to trigger the respective query when turned on or off:

• Query to run when toggled on: setFeature1
• Query to run when toggled off: unsetFeature1

You can now toggle feature flags. Turning on a feature flag triggers the setFeature1 query, and turning it off triggers unsetFeature1. Both queries automatically refresh the table so changes are immediately reflected.