How to loop or repeat a screen

Canvas was built to allow for Smartphone and Tablet based devices to replace expensive and inefficient paper based forms.  One integral part of forms is the ability to collect data regarding a list of items, or a table.  Some common examples of lists of items are:

  • Materials/parts required or used on site
  • Tracking worker's labor or time on a job site
  • Expenses on an expense report

Below is an example of a common paper form or table that can be used in Canvas with our "loop" functionality.  Instead of having to create multiple Item, Description, Quantity, and Last Date Updated fields for an unknown number of line items, you can use the loop setting to repeat the field for as many times as needed.

Building a Loop Screen

Before you start, decide what the defining element of each line item is. For instance, if you are creating a parts screen, each of your parts may have a part number. If you are tracking time on site, each log may start with either the employee name or date.  Follow the headers of your previous form to use as the field labels in your mobile app.

 

 

1. Create a new app or launch the App Builder for your existing app.
2. Click the + New Screen button in the bottom left corner to add a new screen to your app.  Name your screen.
3. Hover over the screen in the App Outline to reveal the "Loop" icon.  Click to Loop the screen.

Loop Icon

You can also access the Loop setting from the Screen Settings.

Screen Settings Loop

4. Next you will be asked to create your key field.  The key field would be the defining element of your list such as Item Number or Name, Labor Code, or Employee Name.  Currently you can use Short Text, Number, Drop Down, Date, Time, and Barcode fields as the key field type.  Click Done once created.

Key Field

NOTE: You will notice that once you create your key field, the app outline will display Looped screens differently than others.  The key field is separated to form a mini screen as on your mobile device you will first enter information into the key field on it's own screen prior to completing the additional fields.  The entire loop will outlined to show you what fields and screens can be repeated.

Loop App Outline

5. Click on the second screen in the loop.  This should show your screen's name.
6. Add any additional fields to the screen.
7. Once finished, Save your app or Publish to device to see it in action!

Can I loop a screen I've already created?

Yes!  Just follow the same instructions above to loop the screen.  Instead of creating a new key field, select the Use Existing Field option.

Loop an existing screen

Use Existing Field

Can I un-loop a screen?

You can un-loop a screen by hovering over the key field mini screen in the App Outline.  Click the Delete icon to un-loop the screen.

Remove Loop

Example of Looped Screens on a Mobile Device

If you are using Canvas version 8.0.0.5 or above.

Click the Add New Row button or the + icon in the top right to add an item to your loop.  Next, select or type in the key value.

   

You will automatically be taken to any additional detail you can enter about the selected item.  Click Done when you've entered in any needed information.

You will be returned to the main loop screen where can add another item to your loop or click Next if you have finished adding items.

If you are using an earlier version of Canvas.

Add a value into your key field and press the icon to add more information about the value entered.  Once you completed any additional fields, press the Add button in the bottom left to add the item to your list.

Loop screen on mobile    Loop screen on mobile

You will now see your item added to the list.  If you would like to enter additional items, simple repeat the process by adding a value to the key field and clicking +.  Once finished,click the Next button.

Loop screen on mobile

In summary, our Loop functionality allows you to use the tables that you have in your paper forms on your mobile device.  Loops will allow you to repeat a set of fields as many times as you need to like you are adding another line item to a table.

Need to loop multiple screens or create a loop within a loop?  This is also possible!  You can view our help topic on looping multiple screens here.

Contact Us

If you have any questions about using Canvas on an Android or Apple device, do not hesitate to contact us by phone or email!