Difference between revisions of "Repeater Properties"

From Mea Wiki
Jump to navigation Jump to search
 
(19 intermediate revisions by 2 users not shown)
Line 1: Line 1:
== Properties ==
+
The Repeater is a container UI element, which loops through rows in its defined dataset ('''repeat data''') and it dynamically draws presentation object(s) ('''instances''') for each row in the repeat data. The repeated content is defined (by the designer user) to the dashboard only once, and that definition is stored to the dashboard in the server. The number of repeated instances depends on the amount of data in the repeat data.
In the Repeater Properties, you can define the Name and Description of the Repeater.
 
  
== Presentation ==
+
To choose which type of presentation objects are repeated, add those presentation object(s) inside the repeater, similarly as with the [[Panel Properties|Panel Editor]]. Thus, the repeated content are containers.
The Repeater's Presentation tab contains the following settings:
 
* '''Aspect ratio flex''': Decimal number determining how much the repeater content's aspect ratio (width divided by height) is allowed to vary. Note that this setting doesn't affect the aspect ratio of the repeater itself in a panel (it's determined in the panel designer), but only its contents.
 
** Repeater has a '''design aspect ratio''' which is determined by how presentation objects are arranged in the repeater designer. Note that the whole available design area doesn't matter - only the actual presentation objects determine the shown area and the design aspect ratio.
 
** Aspect ratio calculation rule: If design aspect ratio is '''A''' and aspect ratio flex is '''B''', repeater's aspect ratio is allowed to change between '''A/B''' and '''A*B'''. Example: If design aspect ratio is 2 and aspect ratio flex is 4, repeater's aspect ratio is allowed to vary between 0.5 and 8 (2/4=0.5 and 2*4=8).
 
** Repeater contents always take all available space horizontally. If the aspect ratio's lower limit is reached (i.e. repeater contents is not allowed use all available space vertically), there may be empty space in the bottom of the repeater. If the aspect ratio's higher limit is reached (i.e. repeater contents doesn't fit vertically), the repeater has a vertical scrollbar.
 
** The aspect ratio flex is useful e.g. for presentation objects which don't work properly if the aspect ratio stretches to too extreme.
 
* '''Item minimum width (px)''': The smallest width, in pixels, that a single repeated item should have.
 
* '''Item maximum width (px)''': The biggest width, in pixels, that a single repeated item should have.
 
* '''Vertical centering''': Selecting this will center the repeated items vertically inside the Repeater.
 
* '''Horizontal centering''': Selecting this will center the repeated items horizontally inside the Repeater.
 
* '''Background color''': Background color of the Repeater content area.
 
  
== Data Source ==
+
The Repeater treats the first row cell(s) in the data source as name(s) of context variable(s) for which is sets the values from the following rows. The data from the rows of the data source can then be shown in the created presentation objects by referencing the context variables.
On the Data Source tab, you can select the [[Data_Grid_Properties|Data Grid]] or table from which the Repeater will read its data.
 
  
== Context ==
+
Note that if the repeat data contains no rows, no presentation objects are drawn (repeated) by the Repeater.
The Context tab is used to set the [[Context]] of the Repeater. A "Default" context value defined here will be used in the repeated items in case the Repeater isn't able to find the context variable references needed by the items from the Repeater's data source.
+
 
 +
== Properties Tabs ==
 +
* [[View_Properties#Properties Tabs|Properties]]
 +
* [[Datasets_in_QPR_UI|Datasets]]
 +
* [[Container_Presentation_Settings_in_QPR_UI|Presentation]]
 +
* Data source: Select a dataset from which the repeater will read its data.
 +
* [[Context_Variables_in_QPR_UI|Context]]
 +
 
 +
== Example Use of Repeater==
 +
There is a Repeater that uses the following data to be repeated:<br>
 +
{| class="wikitable"
 +
! Fruit
 +
|-
 +
|Apple
 +
|-
 +
|Kiwi
 +
|-
 +
|Orange
 +
|}
 +
 
 +
The Repeater contains a single [[SVG_Properties|SVG Presentation Object]] that uses a context variable reference <#Fruit> as text. The Repeater draws three SVG presentation objects (as there are three rows in the repeat data), and sets the context variable values from the "Fruit" column for each SVG presentation object:<br>
 +
[[File:Repeater.png|800px]]
  
 
{{MDBAddingRepeater}}
 
{{MDBAddingRepeater}}
  
[[Category: QPR MobileDashboard]]
+
[[Category: QPR UI]]

Latest revision as of 15:42, 7 December 2018

The Repeater is a container UI element, which loops through rows in its defined dataset (repeat data) and it dynamically draws presentation object(s) (instances) for each row in the repeat data. The repeated content is defined (by the designer user) to the dashboard only once, and that definition is stored to the dashboard in the server. The number of repeated instances depends on the amount of data in the repeat data.

To choose which type of presentation objects are repeated, add those presentation object(s) inside the repeater, similarly as with the Panel Editor. Thus, the repeated content are containers.

The Repeater treats the first row cell(s) in the data source as name(s) of context variable(s) for which is sets the values from the following rows. The data from the rows of the data source can then be shown in the created presentation objects by referencing the context variables.

Note that if the repeat data contains no rows, no presentation objects are drawn (repeated) by the Repeater.

Properties Tabs

Example Use of Repeater

There is a Repeater that uses the following data to be repeated:

Fruit
Apple
Kiwi
Orange

The Repeater contains a single SVG Presentation Object that uses a context variable reference <#Fruit> as text. The Repeater draws three SVG presentation objects (as there are three rows in the repeat data), and sets the context variable values from the "Fruit" column for each SVG presentation object:
Repeater.png

Add a Repeater and repeated content to a panel

  1. Add a Repeater Presentation Object to the panel by clicking the Repeater Presentation Object button on the side toolbar:
    AddRepeater.png
  2. Click the Properties button on the Repeater:
    OpenRepeaterProperties.png
  3. After defining the Name, click the Datasets tab:
    RepeaterDefineDataset.png
  4. Type in an identifier for the dataset and click the check mark:
    RepeaterNewDataset.png
  5. Define the query for the dataset, and then click the Data Source tab:
    RepeaterProperties2.png
  6. Select the dataset you created earlier from the data source list and click Close:
    RepeaterDataSource.png
  7. To add the contents to be repeated, click the Edit button on the repeater:
    RepeaterEdit.png
  8. Add an HTML Presentation Object to the Repeater:
    RepeaterAddHTML.png
  9. Click the Properties button on the HTML Presentation Object to open the HTML Presentation Object Properties:
    RepeaterHTMLProperties.png
  10. After defining the Name for the HTML Presentation Object, click the Presentation tab:
    RepeaterHTMLProperties2.png
  11. Define the HTML code. In the HTML code, use the names of the data source columns as a context variable references in the format "{#ContextVariableReference}". For example, here the HTML Presentation Object will get values from the name and createddate columns in the Repeater data source:
    RepeaterHTMLCode.png
  12. Click Close a couple of times so that you are in the View Editor. The Repeater has now created an HTML Presentation Object for every row cell value in the Repeater data source, and the values from each row are now shown in place of the context variable references:
    RepeaterDone.png