Tag

The Tag component can quickly display tags on, for example, a detail page. An optional delete button can be added, which can be configured using Actions.

Customising the tag

To customise the tag, you have several settings in the Settings Panel you can use.

Tutorial: Movie genre tags

In this tutorial we will look at how you can use the tag component to display movie genres.

Setup

To get started, add an internal Budibase DB table called Movies, with 'Title', 'Year', and 'Image Url' columns. Add some rows.

Next go to the Design section, and add a Cards block. Select the Movies table as the Datasource, and bind the Title, Subtitle and Image URL values to the table columns. For example, the Subtitle: {{ New Cards block.Movies.Year }}

Your screen should look roughly like so:

Adding the tags

Go back to the Data section, and add another table called Tags. Give it a text column called 'Name' and a Many->Many Relationship column linking to Movies.

Add some tag rows, linking them to some movies.

Head back over to the Design section. To be able to add our tags, we must Eject the cards block.

Next add a Container nested under the Repeater. Set the Gap to 'None'. Drag the Spectrumcard into the new container.

Below the Spectrumcard insert a Repeater block. Give it the name 'Tags Repeater Block', and select the Tags table from the relationship.

Finally add the Tag component underneath the Tags Repeater Block. Click Align right on the repeaters block to align the tags to the right-hand side of the card, and choose Row layout.

Give the tag the text binding: {{ Tags Repeater block.Tags.Name }}. This can be selected from the bindings dropdown.

As a finishing touch, it would be nice to give the different tags a color. To do so, we will use Conditional UI. Click on Configure conditions: Update Setting 'Color' TO ... IF {{ Tags Repeater block.Tags.Name }} Equals ...

The duplicate condition button will be very useful in this case!

Result

To see how tags can be used in a SQL database, have a look at this MS SQL Server tutorial.

Removing tags

You may optionally also want the ability to remove tags. To do so, first check the Show delete icon setting. This will allow you to specify some actions.

Add a Save Row action with the Movies Repeater as the datasource, (not the tags repeater block), and select the Movies table as the save destination.

Check Do not display default notification so that a toast is not displayed. Also Add column for the Tags relationship and give it the following JavaScript binding:

return $("Repeater.Movies.Tags")?.filter(tag => tag._id !== $("Tags Repeater block.Tags._id"));

The JavaScript binding may appear a little daunting to some, but to explain in pseudo-code:

Save all of the movie tags excluding the one we are removing

After removing all tags, you will see a No rows found message, which isn't what we'd like in this case.

Ideally this should just be blank. Click on the Tags Repeater block and Configure conditions: Hide component IF {{ Repeater.Movies.Tags }} Is empty.

As a finishing touch, it would be nice to add some margin when there are no tags so that the vertical spacing is consistent. Click on the Spectrumcard and Configure conditions: Update Setting 'Custom CSS' TO margin-bottom: 32px; IF {{ Repeater.Movies.Tags }} Is empty.

Naive result

As you probably noticed, there is substantial delay between clicking the 'x' and the tag being removed. Ideally in this scenario we don't want to await for a database response. We can use App state to cache the tags and improve the tag deletion UX.

Add a second action for updating app state:

return {
	...$("State.RemovedTags"),
	[$("Tags Repeater block.Tags._id")+$("Repeater.Movies._id")]: true
}

Next we want to replace the Save Row action with a Trigger Automation action instead. Check Create a new automation, enter a name and check Do not display default notification.

Add Field for the tags, and movie_id.

The JavaScript binding for the tags field looks as follows:

return $("Repeater.Movies.Tags")?.filter(tag => !$("State.RemovedTags")?.[tag._id+$("Repeater.Movies._id")]);

Here we are only looking to save tags for each movie that have not been flagged as removed in our front-end cache.

Instead of waiting for a save row response, we will fire and forget a request to our Automation which will remove the chosen tag from our chosen movie.

After saving those actions, navigate to the Automate section and select the DeleteTag automation that was automatically created for us.

Make sure tags is set to type Array.

Next add an Update Row step for the Movies table as follows, making sure the Use bindings options is selected!

In addition, check the Clear relationships if empty? flag to ensure that all tags can be removed.

👍

Publish your app to activate the automation.

Navigating back to the Design section, add another condition to the tag: Hide component IF

return $("State.RemovedTags")?.[$("Tags Repeater block.Tags._id")+$("Repeater.Movies._id")];

Equals Boolean True.

Faster result