Editing/deleting/adding objects stored in a user's attributes

[R_S_I_F]

I want to add table saved filters based on the user's attributes.
so I created user attribute named filters of

{'data': []}

Would it be possible to change it with JS on the app?

[Paulo]

Do you mean adding filters to the table component based on who's logged in, like what user group they belong to?

Could you expand on your use case?

[R_S_I_F]

My goal is to build a saved filter component that each user can customize.
In other words, each user can save, edit, and reuse filters

[Paulo]

Here is how we can implement this:

We can add filters for a table using the setFilterStack function. Here is the syntax:

table1.setFilterStack({
  filters: [{ columnId: "column_name", operator: "includes", value: "test" }]
});

So we could create a table in Retool Database:

Note: user_id is how we'll pull filters for the current_user.

We'll also need a form to create filters:

To get the columns dynamically on the Select component, we'll need this SQL query:

Note: The magic happens with 'Transform results.' Set this query as the 'Data source' of the Select component and users will be able to select any column from that table.

Checkpoint

Let's test setting up filters at this point:

Note: Works like a charm!

Now let's save this in Retool DB so the filters are saved for the current_user.

Replace the event handler on the button to run the insert query:

After a couple of submissions:

Now let's create the filters with this data!

Create a query to pull the filters for the current_user:

Note: We need to transform those results and map them because the setFilterStack function expects 'camelCase' for columnId.

Here is the JS for the 'Transform results' field:

return formatDataAsArray(data).map(filter => {
  return {columnId: filter.column_name,
          operator: filter.operator,
          value: filter.value
         }
})

Finally, we just need the JS to set those filters:

Worked like a charm:

To go the extra mile, let's make this optional for our users. This way, they can load their filters only if they want to. We can do this by attaching the getFilters query to a button, and adding a 'Success' event handler to that query to run our setFilters JS query:

Note: Don't forget to change the run behavior on getFilters to manual.

Here is the final product: