How to make workflow actions have different colors

In this tutorial, you will learn how to make the buttons for specific workflow actions having different colors on the example of a simple vacation approval app.

1. Sysuser list

Go to the sysuser list designer and add two new columns: Supervisor and Supervisor_ID. Type for each user his supervisor and his ID in the appropriate columns.


2. Information about vacation

Create a new app and spreadsheet called Data with two columns in it. In the first one, type in cells: 'User:', 'From:', 'To:', 'Number of days:', 'Reason:' and 'Comments:'. In the field next to 'User:' enter the formula =currentusername(), which returns the name of the user who is currently editing the app instance. Make the rest of the cells in column B except B4 editable. For cells B2 and B3, set the type to date and cell B4 to number. In cell B4, enter a formula that will subtract the dates and return how many days of vacation the user wants to take.


This will be a spreadsheet where the user will be able to enter information about their vacation.

3. Workflow actions


Create a new spreadsheet called Supervisor with one cell. Bind the section to the sysuser list and the cell to the Supervisor_ID column. In the section options, in the filter field, add the following condition to the lookup: NAME=DATA.B1. Set the visibility of this section to false. This cell will return the id of the supervisor of the user who is editing the app.



Go to the Workflow tab. Create three states: Sent, Accepted and Rejected, and create actions leading to these states: Send, Accept and Reject as below.


On the Send action, set the Add editors action step. As an editor enter the value from the cell Supervisor.A1.


Add another action Set section editability. Type the Data spreadsheet as the section and set the editable to false. Thanks to this, the supervisor will not be able to change the data entered by the user.


4. Different colors of actions

Create three Workflow action buttons. Assign one action to each button by entering the formula =array('action name') in the widget options in action names field. For example, on the screen below there is an action name parameter for the Send action button.


Change the color of the appropriate buttons, leave the default color for Send action, red for Reject and green for Accept.


Thanks to this, each action will have its own separate color.

5. Test

Add yourself as an app editor and save. Check how the app works.


6. Extra note

You can assign more actions to a given button. Then the actions in this widget will be displayed in the order in which they were entered in the array formula.

Have more questions? Submit a request


Please sign in to leave a comment.
Powered by Zendesk