{identifier-name}
with a name of your choice. For instance, [input-state-set-likebutton]
.active
and default
, respectively.[state-set:{identifier-name}]
tag to the group, replacing {identifier-name}
with a name of your choice, for instance, [state-set:likebutton]
. In case you create more than one different stateful component (for instance, a heart and a thumb), you need to set different names for each of them.[action:remote]
tag to each of the variant items. The remote action will be bound to an API request in Bravo Studio's Data Binding section, after importing the file. This will be covered in the next section of this document.[state-set:{identifier-name}]
tag to the group, replacing {identifier-name}
with a name of your choice. Add the [state:default]
and [state:active] tags to them, respectively. Also, add the [action:remote] tag to both the default and active state elements. Sample Apps
section inside the Bravo Dashboard, choosing the Bravo sample: like button app.True
or False
in the API response. In Airtable, this field can be created with a checkbox. In our example, it has the name Liked
.active
or default
. The way to implement this will depend on the backend tool you use. In Airtable, you can do it by creating a formula field, setting it to the following statement:PATCH
request that changes the state of a component from default to active, by targeting the boolean field of our table.PATCH
request that, inversely, changes the state of a component from active to default.true
:false
:default
or active
, depending on the value of its associated boolean field. This is shown in the video below. We'll need to specify that name later in the Data Binding section.${}
notation) the name of the data item we selected before in the API request, containing either default
or active
. In this example, it's called likedstate
.