• Loop through collection with results
• Loop through collection without results
• Date Formatting
• HTML escaped value and HTML unescaped value

Loop through collection with results

We are using actions flow to demonstrate how to loop through a collection with result and how to loop through a collection without result. We will be showing the result of each in the application log. 

Below are the steps for using the advanced expression to loop through a collection: 

1. Begin by clicking ‘Start’ on the action flow as shown on the screenshot below. 
   
   
   
   
2. Create an action variable by clicking ‘Add” under the Action variables tab.
   
   
   
   
3. Select ‘Collection’ under variable kinds, name your variable, and select a model as shown on the screenshot below. 
   
   
   
   NOTE: In this example on the screenshot above, we have selected a ‘Task ‘model which holds several tasks already created in it so user must ensure that the model they select has items in the model to be able to loop through it. 
   
   
4. Click Save.
   
   
   
   
5. Drag an expression step into the action flow and rename the expression step to your choosing. In the screenshot below, the expression step is named ‘Loop with results. 
   
   
   
   
6. Click ‘Loop with results’ expression step to open the expression window to fill in values under the Options tab as shown on the screenshot below. 
   
   
   
   

   NOTE: The syntax to retrieve the result of the collection with results must be in quotes. In the screenshot above, we are using "<ul>{{#tasks_collection}} <li>{{description}}</li>{{/tasks_collection}}</ul>".  

   The ‘<ul>’ is an HTML tag for unordered list, the ‘<li>’ is also an HTML tag for list items while ‘description’ in the syntax is one of the fields in the ‘Task’ model selected. So, this expression syntax is stating that the system will loop through the ‘tasks_collection’ and list out the description of each task.
   
   

7. Click ‘Add’ to create a variable. In the screenshot below, we created a variable and entered ‘tasks_collection’ as the Key. 
   
   NOTE: The ‘KEY’ is very important. The value of your key will be used in the expression syntax because it is the collection that you are using (meaning the array). In the screenshot below, we named the key ‘tasks_collection’ and we selected the action variable created in step 3. 
   
   
   
   
8. Enter a name for RESULT and leave as ‘Text’ as shown in the screenshot below. 
   
   
   
   

9. Add a Log Message to the action flow to see what the loop with result as shown in the screenshot below looks like when the system has successfully processed the action step. 

   NOTE: We have renamed the log message to ‘Log Loop with results.
   
   
   
   

10. Click the Log Loop with results step and select ‘Debug’ in the Severity field under the Options tab and click Add as shown in the screenshot below. 
    
    
    
    
11. Enter in a KEY (name of your choosing), click the “(X)” icon and select the ‘tasks_list’ variable created in step 6 as shown in the screenshot below. 
    
    
    
    
12. Click Save.
    
    
    
    
13. You can test your expression by returning to the project create task, compile the page, create a task, and open the application Log to view the result. 
    
    
    
    Click on Tools icon located at the bottom left-hand corner of the application as shown on the screenshot below. 
    
    
    
    
    
    Below is the enlarged screenshot of the Log Message. 
    
    
    
    NOTE: The Task model has 2 tasks with description names ‘test’ and ‘Is it running?’. 

Loop through collection without results

1. Follow the same steps listed in the Loop through collection with results with the exception to create the action variable in step 2 and enter an id which doesn’t exist in your application or selecting a collection without items in it. Below is a screenshot of the action variable created for the Loop without results.
   
   
   
   NOTE: We entered an ID that doesn’t exist to show the loop through without results. 
   
   
2. Click Save.
   
   
   
   
   
   
3. In Step 6, Select the ‘no_task’ action variable created for the loop without result expression. This is the empty collection.
   
   
   
   NOTE: The syntax for the Loop without result expression is shown below. The “^” indicates that if it doesn’t exist or if the collection is empty, then it writes the ‘Sorry, no task to list!’ message to user. 
   
   "<ul>{{#tasks_collection}}<li>{{description}}</li>{{/tasks_collection}}</ul>{{^tasks_collection}}Sorry, no tasks to list!{{/tasks_collection}}"
   
   
   
   
4. Click Save.
   
   
5. Below are the screenshots examples for the Loop without results. 
   
   
   
   
6. After adding a Log message for the Loop without results, below is an example screenshot of what the Log message should contain.
   
   
   
   
7. Click Save and Below is the completed action flow in the screenshot.
   
   
   
   
8. Test your expression by returning to the project create task, compile the page, create a task, and open the application Log to view the result. 
   
   
   
   NOTE: Below is the enlarged view of the Log Message.
   
   
   
   

Date Formatting

We are using an action flow to demonstrate how to use the Betty Block’s Advanced expression to format a date, and we will utilize the Application Log to view the result. Below are the Steps to create the date formatting expression: 

1. Drag an expression step to the action flow and rename the step to a name of your choosing. We named the expression step ‘Date Formatting’ as shown in the screenshot.
   
   
   
   
2. Enter in the Syntax “new Date().toISOString().substring(0,10)” in the Expression field under the Options tab. 
   
   
   
   
3. Click the RESULT field and enter in a name and leave as text as shown in the screenshot below. 
   
   
   
   
4. Click Save.
   
   
5. Add a Log message to view the result of the date format as shown on the screenshot below. 
   
   
   
   
6. Click on the Log Date Formatting step and fill in the information under the Options tab as shown in the screenshot below. 
   
   
   
   
7. Click Save.
   
   
8. Return to the Project create page, compile the page, create a new task to test the date format, and open the application Log to view the result. Below is a screenshot of the result. 
   
   
   
   Enlarged view of the Log message is shown below.
   
   
   
   NOTE: The syntax entered in the expression step is to format today’s day to display "2024-03-16".  

Another example to get the United States’ month day and year date format, enter the Date formatting expression as shown in the screenshot below. 

Click Save.

To test the new date formatting expression, compile the project create page, create new task, and open the application Log to view the result. 

Below is a screenshot of the result. 



Here is the enlarged view of the Log message result below. 



NOTE: The value in the Expression field can be any JavaScript date format code. 

HTML escaped value and HTML unescaped value

A use case to demonstrate the HTML Escaped value will be a case where a person’s name contains an ‘ampersand’ which is denoted by symbol ‘&’. In a scenario where a user is working with an email or a pdf, a user can use the Betty Block expression to show an ampersand which will be the “HTML Escaped value”. To demonstrate the steps of accomplishing this in Betty Blocks, we are using an action step and the Application Log to show how the HTML escaped value and HTML unescaped value expressions work.

Steps:

1. Go into an action step. The example used here is a ‘Project create form’. 
   
   
   
   
2. Click on the ‘Start Input & Action variables’ to create action variables. 
   
   
   
   
3. Click on ‘Add’ and select ‘Text’ in the variable kinds. Enter a name and value for the newly created variable. An example is shown on the screenshot below. 
   
   
   NOTE: The value has the ampersand symbol ‘&’. 
   
   
4. Click Save.
5. Create a second action variable as shown in the screenshot below.
   
   
   
   
6. Drag an expression into the action on the canvas and rename your expression step as shown in the screenshot below. 
   
   
   
   
7. Click on the ‘HTML escaped value’ expression step to fill in the ‘Options’ tab as shown in the screenshot below. 
   
   
   NOTE: The syntax in the Expression field is very important. There must be two curly brackets (enclosed in double-quotes to signify a text variable) holding the variable key for the HTML escaped value to work.
   
   
8. Click Save.
9. Drag a Log Message step to the action flow as shown on the screenshot below.
   
   
   
   
10. Rename the Log message to a name of your choosing. Our screenshot shows ‘Log HTML Escaped value Result’ as the Log message name. 
11. Click the Log HTML escaped value Result and fill in the ‘options’ tab as shown on the screenshot below. 
    
    
    
    
12. Click Save.
13. Drag another expression to the action log and rename your expression step as shown in the screenshot below. 
    
    
    
    
14. Click on the ‘HTML unescaped value’ expression step to fill in the ‘Options’ tab as shown in the screenshot below. 
    
    
    
    NOTE: The syntax in the Expression field is very important. There must be three curly brackets (enclosed in double-quotes, because this is a text variable) holding the variable key for the HTML unescaped value to work. 
    
    
15. Click Save.
    
    
16. Drag a Log Message step to the action flow as shown on the screenshot below. 
    
    
    
    
17. Click the Log HTML unescaped value Result and fill in the ‘options’ tab as shown on the screenshot below. 
    
    
    
    
18. Click Save. 
    
    NOTE: The Create Record is the final step on the action flow. We are using the action for when a project is created to test the HTML escaped and unescaped value in the application log. Below is a screenshot of the final action flow. 
    
    
    
    
19. Ensure that you have selected a model and entered a property along with its value in the create record step. Below is a screenshot of Create Record step where the ‘options’ tab has been filled in and the user has saved this information. 
    
    
    
    
20. You are ready to test the HTML Escaped and Unescaped value. The user can test this by going to the project create page in your application in our example and compiling the page. The user should create a new project and access the application Log by clicking the ‘Tools’ icon located at the left navigation on the page as shown on the screenshot below.
    
    
    
    
21. Click on Logs as shown on the screenshot below.
    
    
    
    
22. Verify that the HTML escaped value has the symbol ‘&’ in the name displayed while the HTML unescaped value has the ‘&amp;’ in the name as shown on the screenshot below.
    
    
    
    

Below is an enlarged screenshot for the HTML unescaped value result. 



Below is an enlarged screenshot for the HTML escaped value result. 



NOTE: Betty Blocks expressions documentation can be found here.