ONLINE HELP
 WINDEVWEBDEV AND WINDEV MOBILE

This content has been translated automatically.  Click here  to view the French version.
Help / Developing an application or website / Controls, windows and pages / Controls: Available types / Looper control
  • Overview of the Looper control
  • Creating a Looper control
  • Creating a horizontal Looper control
  • Attributes of a Looper control
  • Attributes of a Looper control in WEBDEV
  • Attributes of a Looper control in WINDEV or WINDEV Mobile
  • Vocabulary
  • Notes
  • Swapping a Table control and a Looper control
  • Refactoring: creating a Looper control from the selected controls
WINDEV
WindowsLinuxUniversal Windows 10 AppJavaReports and QueriesUser code (UMC)
WEBDEV
WindowsLinuxPHPWEBDEV - Browser code
WINDEV Mobile
AndroidAndroid Widget iPhone/iPadIOS WidgetApple WatchMac CatalystUniversal Windows 10 App
Others
Stored procedures
Overview of the Looper control
A Looper control is used to repeat the controls found in a specific area. More precisely, an Looper control is an control "container" that allows the set of control s (control s, labels, combos, etc.) it contains to be repeated several times..
The Looper control allows displaying and entering data more easily.
Compared to the Table control, the Looper control presents richer interfaces as all types of controls can be repeated.
The information displayed in the Looper control can:
  • be defined programmatically: this is referred to as Looper control populated programmatically.
  • come from a data file or query: this is referred to as Looper control based on a data file.
  • come from a WLanguage variable: this is referred to as Looper control based on a variable.
Universal Windows 10 App Only Looper controls populated programmatically are available.
Remarks:
  • According to the platforms, the Looper controls can be displayed:
    • vertically (by default on all the platforms).
    • horizontally.
      In WEBDEV, this type of control corresponds to the Linear Looper controls.
  • AndroidiPhone/iPad The "Pull to refresh" feature is available for Looper controls in Android and iOS. For more details, see Pull to Refresh on Table and Looper controls (Android/iOS).
  • AndroidiPhone/iPad Most smartphones or tablets show a "Next" button to allow the user to go to the next element. In the case of an Edit control within an Looper control, this key cannot be used to go to the next row, or to enable cascading input. You must create a specific interface for this type of input.
Creating a Looper control
To create a Looper control:
  1. On the "Creation" tab, in the "Data" group:
    • WINDEVWINDEV Mobile expand "Looper" and select "Looper (vertical)".
      WINDEVWindowsAndroidiPhone/iPad Remark: You can create a horizontal looper via "Horizontal looper".
    • WEBDEV - Server code expand "Looper" and select "Looper".
      Remark: You have the ability to create a Galley looper via "Gallery in row" and "Gallery in column".
  2. Click where the control will be created in the window or page. The Looper control creation wizard starts automatically.
Remarks:
  • WINDEV The dimensions of the control are optimized to take up the available space at the specified position. If the control size does not suit you, press Ctrl + Z: the control size will be reset to default.
  • iPhone/iPad The iPhone and iPad window creation wizard can also be used to create preset Loopers. For more details, see Windows for iPhone and iPad.
To view the control characteristics, select "Description" in the context menu of the control.
For more details:
WINDEVWindowsAndroidiPhone/iPad

Creating a horizontal Looper control

You also have the ability to create horizontal Looper controls. In this case, the control will include a horizontal scrollbar used to scroll the different rows.
To create a horizontal Looper control:
  1. On the "Creation" tab, in the "Data" group, expand "Looper" and select "Horizontal Looper".
  2. Click where the control will be created in the window or page. The Looper control creation wizard starts automatically.
To view the characteristics of the control, select "Description" in the context menu.
Attributes of a Looper control
WEBDEV - Server codeWEBDEV - Browser codePHP

Attributes of a Looper control in WEBDEV

A Looper control includes:
  • controls, that are repeated on each row.
  • attributes. An attribute defines the control characteristic that will change on each row. For example, if the value and color of the PRICE control must change on each row, you need to define two different attributes for the same control.
To find out or modify the characteristic of an control (its value, its color, etc.), simply program handle this control or the corresponding attribute.
WINDEVUniversal Windows 10 AppAndroidiPhone/iPadJava

Attributes of a Looper control in WINDEV or WINDEV Mobile

A Looper control includes controls that are repeated on each row.
WINDEVWindows The content of Table controls or Graph for example can be different at each repetition. For more details, see Displaying different content on each row.
To find out or modify the characteristics of an control (its value, its color, etc.), simply program handle directly to this control.
Remark: For compatibility with WEBDEV, you can also use attributes. In this case, to find out or modify the characteristic of an control (its value, its color, etc.), simply program handle this control or the corresponding attribute.
Vocabulary
To easily handle a Looper control, you must be familiar with the following vocabulary:
NameDefinition
AttributeAn attribute is the association between the control in the looper and the property of this control that will be modified on each row.
For each attribute, you must define:
  • the attribute name.
  • the name of the control in the looper.
  • the field property which can be modified at each repetition (value, Color, etc.).
WINDEVWINDEV Mobile Reminder: The attributes are not mandatory.
Looper based on a data fileThe Looper control is based on a data file or on a query. A record from the data file is displayed on each row. Two types of Looper controls based on a data file are available:
  • Looper with in-memory data source: The content of the looper is loaded in memory, then displayed. The access to the different control elements is faster. This mode is reserved for data files with less than 100,000 records.
  • Looper with direct access to the data source (no limit): The Looper control displays the content of the data file or query directly. The current record corresponds to the selected element. Selecting an element in the control triggers an access to the linked data file. This mode is reserved for data files with more than 100 000 records.
Looper populated programmaticallyThe Looper control is not based on a data file or on a query. The elements displayed in the control are defined by the developer (by programming).
Looper based on a variableThe Looper control is based on an Variable (global to the project, window or Page, class member, etc.).
Notes

Swapping a Table control and a Looper control

WINDEV, WINDEV Mobile and WEBDEV allow you to automatically transform a Table control into a Looper control:
  1. Select the Table control to transform.
  2. On the "Modification" tab, in the "Transformations" group, expand "Refactoring and swapping" and select "Table to Looper".

Refactoring: creating a Looper control from the selected controls

WINDEV, WINDEV Mobile and WEBDEV allow you to automatically create a Looper control from the controls currently selected:
  1. Select the desired controls.
  2. On the "Modification" tab, in the "Transformations" group, expand "Refactoring and swapping" and select "Create a looper from the selection".
Related Examples:
The Looper control (display the bounds) Unit examples (WEBDEV): The Looper control (display the bounds)
[ + ] This example explains how to display the bounds of a looper with custom pager.
Displaying/Hiding an input area Unit examples (WEBDEV): Displaying/Hiding an input area
[ + ] This example explains how to display/hide an input area via a looper.
Adding an input area is performed by adding a row in the looper.
The Looper control (selection bar) Unit examples (WEBDEV): The Looper control (selection bar)
[ + ] This example explains how to simulate a selection bar in a looper
The Looper control (modify the number of rows displayed) Unit examples (WEBDEV): The Looper control (modify the number of rows displayed)
[ + ] This example explains how to modify the number of rows displayed in a looper.
The Ajax Looper control Unit examples (WEBDEV): The Ajax Looper control
[ + ] This example explains how to use the Ajax looper. This example allows you to:
- Clear the looper
- Fill the looper
- Sort the looper
The Ajax Looper control in PHP Unit examples (WEBDEV): The Ajax Looper control in PHP
[ + ] This example presents the use of Ajax loopers in PHP.
This example allows you to:
- Clear the looper
- Fill the looper
- Sort the looper
The Looper control Unit examples (WINDEV): The Looper control
[ + ] Using the Looper control.
You have the ability to add a row with LooperAddLine.
The following syntax is used to retrieve the existing values:
  AttributeName[Subscript]
webmillion Complete examples (WEBDEV): webmillion
[ + ] The following topics are presented in this example:
1/ Using queries
2/ Using "browsing" loopers in automatic browse
3/ Using "browsing" loopers in manual browse

Summary of the example supplied with WEBDEV:
This Web application, powered by WEBDEV, is used to display, find and order tee-shirts.
Once the order is placed, you have the ability to use the PayBox module for secure payment.

This example contains a page used to generate a data file containing an important number of records.
WM Managing Contacts Cross-platform examples (WINDEV Mobile): WM Managing Contacts
[ + ] This example presents the management of contacts for Android et iOS.
It is used o:
- list the contacts found on the phone
- call the contacts
- send SMSs to the contacts
- ...
WM ToDo List Cross-platform examples (WINDEV Mobile): WM ToDo List
[ + ] This example is a manager of To-Do Lists.
The project is using the gestures in the loopers in order to move and delete the lists and tasks.
The data is stored in a HFSQL database.
WM Attendance Cross-platform examples (WINDEV Mobile): WM Attendance
[ + ] This application is an attendance manager. It allows you to list the persons who attended a meeting.
The database is filled beforehand with the list of registered persons.
You have the ability to find a person by using his/her name.
The following topics are presented in this example:
1/ using a browsing looper based on a query
2/ using a database in HFSQL format.
Photo_Gallery Complete examples (WEBDEV): Photo_Gallery
[ + ] This example is a photo gallery site and is composed of 2 main parts:
- the "visitor" part, developed in Active WEBDEV Page mode and SEO-compatible.
- the administration part, secured and developed in standard WEBDEV mode.  
 
These are some of the available features:
- organize photos via albums
- include links to social networks
- enable users to comment on posts
- user login via WEBDEV'S GPU
- contact form
- ability to upload, describe, and classify photos via albums on the administration side
Minimum version required
  • Version 9
This page is also available for…
Comments
Click [Add] to post a comment

Last update: 10/10/2023

Send a report | Local help