> For the complete documentation index, see [llms.txt](https://mobsted-2.gitbook.io/knowledge-base/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://mobsted-2.gitbook.io/knowledge-base/basics/introduction/apply_loops_to_screen_elements.md). # Loops - display multiple line results in app Apply loops to screen elements 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: * Filter data [\[Step by step example →\]](/knowledge-base/basics/introduction/apply_loops_to_screen_elements.md#displaying-data-from-filters) * Operation data [\[Step by step example →\]](/knowledge-base/basics/introduction/apply_loops_to_screen_elements.md#displaying-data-from-operations) In both these examples we will take the following steps: * Set up data source: Filter or Operation * Set up loop that will parse the data from the data source * Call the loop reference and extract its' data. {% hint style="info" %} Before proceeding, please make sure that you are familiar with [Hashtags.](/knowledge-base/references/intro-placeholder/hashtags.md) {% endhint %} {% hint style="info" %} Make sure you have accomplished the steps described [Use automatic data filters](/knowledge-base/basics/introduction/use_automatic_data_filters.md) article before implementing the steps below. {% endhint %} \_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_ #### DISPLAYING DATA FROM FILTERS At [previous step](/knowledge-base/basics/introduction/use_automatic_data_filters.md) we have 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](https://kb.mobsted.com/article/ap8iv7mdhw-construstor-elements-build-app) element 4. Set its' properties: * **Backendname** as *Age* * **Default Value** as *#Variable:age#* 5. Drag and Drop [Button](https://kb.mobsted.com/article/ap8iv7mdhw-construstor-elements-build-app) element 6. Set its' properties: * **Backendname** as *Button* * **Caption Button** as *Less than Age #Backendname:Age#* 7. Click **Actions** button and **Add new action** from drop down: * **Set variable** with the **Name:** *Age* and **Value:** *#Backendname:Age#*. Click **Save** * 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](https://kb.mobsted.com/article/ap8iv7mdhw-construstor-elements-build-app) element 9\. Set it's text: *Filtered Data:* 10\. Drag and Drop another [Text](https://kb.mobsted.com/article/ap8iv7mdhw-construstor-elements-build-app) 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: * to display Name use *Employee:#Loop:AgeEmailLoop:objects\@Name#* * to display Age use *Age:#Loop:AgeEmailLoop:objects\@Age#* 15\. Click **Save Screen** ![](https://storage.googleapis.com/helpdocs-assets/jyme83anlw/articles/cv0t24tdm6/1560403334585/screen-shot-2019-06-13-at-10-20-59-am.png) 16\. Click **Preview** button to launch app from the screen to check it works. ![](https://storage.googleapis.com/helpdocs-assets/jyme83anlw/articles/cv0t24tdm6/1560418911316/screen-shot-2019-06-13-at-2-41-25-pm.png)![](https://storage.googleapis.com/helpdocs-assets/jyme83anlw/articles/cv0t24tdm6/1560419021736/image.png) {% hint style="info" %} You can have a look at how it's implemented in **Demo App** in your account, screen - **9** **Filters Iterate**. {% endhint %} \_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_ #### DISPLAYING DATA FROM OPERATIONS We have a screen, where a user can select a country from the drop down and see its' public holidays. For this example, we have pre-created API Operation to the 3rd party service. Steps to take: 1. Drag and Drop [Select](/knowledge-base/references/intro-placeholder/constructor_elements.md#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](/knowledge-base/references/intro-placeholder/constructor_elements.md#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](/knowledge-base/references/intro-placeholder/constructor_elements.md#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#* ![](https://storage.googleapis.com/helpdocs-assets/jyme83anlw/articles/cv0t24tdm6/1557327533849/screen-shot-2019-05-08-at-7-48-52-pm.png) 11\. Click **Preview** button to launch app from the screen to check it works. ![](https://storage.googleapis.com/helpdocs-assets/jyme83anlw/articles/cv0t24tdm6/1557894888294/screen-shot-2019-05-15-at-9-34-25-am.png)![](https://storage.googleapis.com/helpdocs-assets/jyme83anlw/articles/cv0t24tdm6/1557895014599/image.png) {% hint style="info" %} You can take a look at how it's implemented in **Demo App** in your account, screen - **13 Operation Loop Screen**. {% endhint %} {% hint style="info" %} **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#). {% endhint %} #### #### MENTIONED ARTICLES * [Hashtags](/knowledge-base/references/intro-placeholder/hashtags.md) * [Operations](/knowledge-base/basics/introduction/use_any_internal_and_external_api.md) * [Constructor elements](/knowledge-base/references/intro-placeholder/constructor_elements.md) * [Use automatic data filters](/knowledge-base/basics/introduction/use_automatic_data_filters.md) #### RECOMMENDED ARTICLES * [Automate with triggers](/knowledge-base/basics/introduction/automate_with_triggers.md) * [Smart filters](/knowledge-base/references/intro-placeholder/untitled-1.md)