1. Pull in users

First, let's make request to our API to pull in our users. Create a REST query for your server, and click Run (or press ⌘⏎) to preview your query, and when you're happy with the result, click Save (or press ⌘S) to save it. We can name it something more descriptive than query1, like getUsers, by clicking on the query name in the tab.

You can see the preview of our users in results.preview.

Now that we have the data from our API, let's put it in a table for easy viewing. Drag a table component from the right hand side onto the page, and replace the default data value with {{ getUsers.data }} to load our query data into the table.

The table is connected to our query data.

Our table looks pretty crowded, so we might want to hide some of these columns. For example, the address column does not seem very important. We can hide this column in the table settings. Under "Column Options", you will see a list of columns. Here, you can modify many properties of table columns, including display names, etc. For now, let's just hide the address column.

The address column options.

After hiding some of the columns, our table looks a lot nicer!

2. View features

Now that we have our users, we want to see what features are enabled for them. We'll use a Toggle List Component, which is perfect for feature flagging. For each feature, you can create a toggle in the toggle list.

You can also add descriptions and tags for your listed features.

Now, let's connect the toggle list with live data so we can actually see which features are enabled for our users. We can dynamically set the Toggle Checked? attribute of each toggle based on the user in the table, by setting it to {{ table1.selectedRow.data.feature_flags.feature1 }} (or the equivalent in your data structure). Try changing the selected row and seeing the values change!

3. Edit features

We're almost there! The only thing left to do is connect these flags with the backend. We can do this by creating queries to enable and disable our features. Create a new REST query and name it turnOnFeature1, and create an endpoint on your server that enable or disable a user's feature. Sending a POST request, we can send the data over as a form-encoded body.

The userId is dynamically set to the id of the selected user in the table.

This query will enable feature1 for the selected user when it's run. Now, we need to link it with the feature1 toggle. In the properties of the Toggle List, modify the feature1 toggle. We're going to set the "Query to run when toggled on" to the turnOnFeature1 query that we just created.

Now, turnOnFeature1 will be triggered whenever the toggle is turned on.

This connects our tool with our backend, making our changes persist! Now, we need to create a query to run when the toggle is turned off. It'll be just like our turnOnFeature1 query, except instead enabled is false instead of true. We can call this turnOffFeature1. Once we've made the query, we can activate it by changing the "Query to run when toggled off" to turnOffFeature1.

At this point, you can play with the toggle and see the effect. It's connected with your database and making persistent changes! Just repeat the process for our other features, and you'll have a complete tool to flip feature flags.

4. Actually using it

This tool is now production-ready. You can send the link to your coworkers, and they'll be able to use it to change feature flags for individual users - immediately. If you'd like, you can also add a search field for users or an approval flow for changes.

If you give your operators specific permissions, they won't be able to edit the tool and change the queries - they'll just be able to use the tool you've created.