Displaying Style change based on a Variable value

Q: I need to add a CSS style to a button based on the value of a  "status" column in a table. How do I design for this requirement?

A: As a thumb rule when a style class is mapped to a single object within an array, the logic should have a step to refresh the entire array that the object refers to. This ensures that any changes made to the object's value becomes visible in the user interface at runtime.

Follow the steps below to ensure the style change is applied in the UI:

Sample Usecase

A CSS class(border) is applied to a "Like" button, when the user clicks the button. The button is linked to the 'status' object within the table temp_recipe_approval. 

Pre-requisites: It is assumed that the reader knows how to design a page in the App Designer and add App Behaviors. For step-by-step instructions, refer the App Designer and App Behavior sections of the EdgeReady Userguide.

1. A "Like" button is placed in a page component. It is referencing an object "status" within the array temp_recipe_approval.
2.  In the button properties, under Style > Classes, a class "up" is applied to the temp_recipe_approval.status object. 
3. The "up" class is added to fordemo.css file under Library > assets.
   Note

   The asset file needs to be shared with the project where the business function is built, to enable the referencing of the class by the components in the page.
   
4. Adding a behavior: 
   1. Click the Behavior tab for the "Like" button.
   2. Add the blocks as shown in the image.Logic: When the "like" button is clicked, the value of the "status" object from the temp_recipe_approval array is set to "like". The mapped class(up) is applied. For the style change to be seen in the UI, update the temp_recipe_approval array using a set block. This step refreshes the array and displays the object value(style change) at runtime.

By following these steps, you ensure that the style change triggered by the "Like" button is reflected in the UI.