Loops - display multiple line results in app

Use screen elements loops to display resulting arrays of filters and API requests on an app screen. Common example of such arrays is a list of items in a shopping cart or a list of payments.

The platform allows to create loops over:

In both these examples we will take the followings steps:

  • Set up data source: Filter or Operation
  • Set up Loop that would parse the data from the data source
  • Call the Loop reference and extract its' data

Before proceeding, please make sure that you are familiar with Hashtags.

Make sure you have accomplished the steps described Use automatic data filters article before implementing the steps below.

_______________________________

DISPLAYING DATA FROM FILTERS

At the previous step we created AgeEmail filter that shows users with Gmail account with the age less than specified. Here we create a loop to display Name and Age of all the filtered records.

Steps to take:

  1. Navigate to Constructor
  2. Create new screen by clicking Add New Screen at the bottom of the platform
  3. Drag and Drop Text Input element
  4. Set its' properties:
    1. Backendname as Age
    2. Default Value as #Variable:age#
  5. Drag and Drop Button element
  6. Set its' properties:
    1. Backendname as Button
    2. Caption Button as Less than Age #Backendname:Age#
  7. Click Actions button and Add new action from drop down:
    1. Set variable with the Name: Age and Value: #Backendname:Age#. Click Save
    2. Add Go to action. Select Screen and in Choose screen drop down select the screen you are on now. This will reload the page. Otherwise the filter results will not be updated.
  8. Drag and Drop Text element
  9. Set it's text: Filtered Data:
  10. Drag and Drop another Text element
  11. Enable looping for that element - find LOOP in the right hand side menu and check Enabled box
  12. Set up Data Source: #ObjectsFilter:AgeEmail:Data#, where AgeEmail is the name of our Filter
  13. Enter Loop Name: AgeEmailLoop
  14. Go to Text field of the element and set up what will be displayed in each element by pulling the required Object columns from the loop:
    1. to display Name use Employee:#Loop:AgeEmailLoop:objects@Name#
    2. to display Age use Age:#Loop:AgeEmailLoop:objects@Age#
  15. Click Save Screen

  1. Click Preview button to launch app from the screen to check it works.

You can have a look at how it's implemented in Demo App in your account, screen - 9 Filters Iterate.

___________________________________

DISPLAYING DATA FROM OPERATIONS

We have a screen, where a user can select the country from the drop down and see its' public holidays. For this example, we have pre-created the API Operation to the 3rd party service with the сountry selected as the parameter which returns the list of holidays.

Steps to take:

  1. Drag and Drop Select element
  2. Use Add Option and create a list of countries:
    1. Label = USA
      Value = US
    2. Label = Canada
      Value = CA
    3. Label = Brazil
      Value = BR
  3. Drag and Drop Button element
  4. Set it's properties:
    1. Backendname = holidaysButton
    2. Caption Button = Check Holidays
  5. Click Actions, select Execute Operations and add pre-created Holiday operation
  6. Drag and Drop Text element
  7. Enable looping for that element: find LOOP in the right hand side menu and check Enabled box
  8. Set up Data Source for the loop: #Operation:Holiday:Response:Result:0:response:holidays#
  9. Name the loop as Holidays
  10. Go to Text field of the element and set up what will be displayed by pulling the required array elements from the loop (OPERATION):
    1. #Loop:Holidays:name#
    2. #Loop:Holidays:date:iso#

  1. Click Preview button to launch app from the screen to check it works.

You can take a look at how it's implemented in the Demo App in your account, screen - 13 Operation Loop Screen.
Note: we only use at sign (@) to reference Object properties (#Loop:AgeEmailLoop:objects@Age#). When referencing Operation, we use colons only (#Loop:Holidays:date:iso#).

MENTIONED ARTICLES


Was it useful?