Template:MDBAddingRepeater - Revision history

TeeHiet: 307187

2017-11-22T10:59:33Z

307187

TeeHiet: 307187

2017-11-22T10:57:35Z

307187

TeeHiet: 307104

2017-06-27T11:53:21Z

307104

New page

== Add a Repeater and repeated content to a panel ==
# Add a Repeater Presentation Object to the panel by clicking the '''Repeater Presentation Object''' button on the side toolbar: [[File:AddRepeater.png|800px]]
# Click the '''Edit''' button on the Repeater: [[File:EditRepeater.png|800px]]
# The data source needs to be defined, so click '''Properties''': [[File:RepeaterProperties.png|800px]]
# After defining the '''Name''', click the '''Data Source''' tab: [[File:RepeaterProperties2.png|800px]]
# '''Select the data source''' from the list and click '''Close''': [[File:RepeaterDataSource.png|800px]]
# Add an '''SVG Presentation Object''' to the Repeater: [[File:RepeaterAddSVG.png|800px]]
# Click the '''Edit''' button on the SVG Presentation Object to open the SVG Presentation Object Properties: [[File:RepeaterSVGProperties.png|800px]]
# After defining the '''Name''' for the SVG Presentation Object, click the '''Presentation''' tab: [[File:RepeaterSVGProperties2.png|800px]]
# Define the '''SVG code'''. In the SVG code, use the '''name of the data source column''' as a '''context variable reference''' in the format "{#ContextVariableReference}". For example, here the SVG Presentation Object will get values from the '''Fruits''' column in the Repeater data source: [[File:RepeaterSVGCode.png|800px]]
# Click '''Close''' a couple of times so that you are in the View Editor. The Repeater has now created an SVG Presentation Object for every row cell value ("Apple", "Kiwi", and "Orange") in the Repeater data source, and the value from each row is now shown in place of the "{#Fruits}" context variable reference: [[File:RepeaterDone.png|800px]]

@@ Line 11: / Line 11: @@
 # After defining the '''Name''' for the HTML Presentation Object, click the '''Presentation''' tab:<br>[[File:RepeaterHTMLProperties2.png|800px]]
 # 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:<br>[[File:RepeaterHTMLCode.png|800px]]
-# Click '''Close''' a couple of times so that you are in the View Editor. The Repeater has now created an H>TML 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:<br>[[File:RepeaterDone.png|800px]]
+# 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:<br>[[File:RepeaterDone.png|800px]]

@@ Line 1: / Line 1: @@
 == Add a Repeater and repeated content to a panel ==
 # Add a Repeater Presentation Object to the panel by clicking the '''Repeater Presentation Object''' button on the side toolbar:<br>[[File:AddRepeater.png|800px]]
-# Click the '''Edit''' button on the Repeater:<br>[[File:EditRepeater.png|800px]]
+# Click the '''Properties''' button on the Repeater:<br>[[File:OpenRepeaterProperties.png|800px]]
-# The data source needs to be defined, so click '''Properties''':<br>[[File:RepeaterProperties.png|800px]]
+# After defining the '''Name''', click the '''Datasets''' tab:<br>[[File:RepeaterDefineDataset.png|800px]]
-# After defining the '''Name''', click the '''Data Source''' tab:<br>[[File:RepeaterProperties2.png|800px]]
+# Type in an '''identifier''' for the dataset and '''click''' the check mark:<br>[[File:RepeaterNewDataset.png|800px]]
-# '''Select the data source''' from the list and click '''Close''':<br>[[File:RepeaterDataSource.png|800px]]
+# Define the query for the dataset, and then click the '''Data Source''' tab:<br>[[File:RepeaterProperties2.png|800px]]
-# Add an '''SVG Presentation Object''' to the Repeater:<br>[[File:RepeaterAddSVG.png|800px]]
+# Select the '''dataset you created earlier''' from the data source list and click '''Close''':<br>[[File:RepeaterDataSource.png|800px]]
-# Click the '''Edit''' button on the SVG Presentation Object to open the SVG Presentation Object Properties:<br>[[File:RepeaterSVGProperties.png|800px]]
+# To add the contents to be repeated, click the '''Edit''' button on the repeater:<br>[[File:RepeaterEdit.png|800px]]
-# After defining the '''Name''' for the SVG Presentation Object, click the '''Presentation''' tab:<br>[[File:RepeaterSVGProperties2.png|800px]]
+# Add an '''HTML Presentation Object''' to the Repeater:<br>[[File:RepeaterAddHTML.png|800px]]
-# Define the '''SVG code'''. In the SVG code, use the '''name of the data source column''' as a '''context variable reference''' in the format "{#ContextVariableReference}". For example, here the SVG Presentation Object will get values from the '''Fruits''' column in the Repeater data source:<br>[[File:RepeaterSVGCode.png|800px]]
+# Click the '''Properties''' button on the HTML Presentation Object to open the HTML Presentation Object Properties:<br>[[File:RepeaterHTMLProperties.png|800px]]
-# Click '''Close''' a couple of times so that you are in the View Editor. The Repeater has now created an SVG Presentation Object for every row cell value ("Apple", "Kiwi", and "Orange") in the Repeater data source, and the value from each row is now shown in place of the "{#Fruits}" context variable reference:<br>[[File:RepeaterDone.png|800px]]
+# After defining the '''Name''' for the HTML Presentation Object, click the '''Presentation''' tab:<br>[[File:RepeaterHTMLProperties2.png|800px]]