Differences

This shows you the differences between two versions of the page.

--- dglux5_wiki:widgets_and_property_inspector:repeaters:home [2019/10/29 21:29]
oem [Repeaters FAQ]
+++ dglux5_wiki:widgets_and_property_inspector:repeaters:home [2021/09/20 14:51]
@@ Line 1: / Line 1: @@
-{{indexmenu_n>7}}
-====== Repeaters ======
-A repeater takes a [[dglux5_wiki:widgets_and_property_inspector:components:symbols:home|symbol]] and renders an instance of that symbol for each row of data in a [[dglux5_wiki:dataflow:working_with_tables:home|table]]. Each instance of the symbol can have different parameter values, based on the data in the given row.
-This page covers steps to make a simple repeater using the [[dglux5_wiki:widgets_and_property_inspector:components:group:home|group]] component. You can also create repeaters for [[dglux5_wiki:widgets_and_property_inspector:components:view_deck:home|view decks]], [[dglux5_wiki:widgets_and_property_inspector:components:google_map:home|Google Maps]], [[dglux5_wiki:widgets_and_property_inspector:components:map_group:home|map groups]], and [[dglux5_wiki:widgets_and_property_inspector:components:data_grid:home|data grids]]. A similar effect can be created for the markers, bars, or columns in a [[dglux5_wiki:widgets_and_property_inspector:charts:home|chart]] using an Item Renderer.
-DGLux5 also features a [[dglux5_wiki:widgets_and_property_inspector:charts:raw_svg_repeater:home|Raw SVG Repeater]] that repeats an SVG instead of a symbol.
-{{:dglux5_wiki:widgets_and_property_inspector:repeaters:dglux5_repeater_1.png?direct|image1}}\\
-//A repeater created using a group component in DGLux5//
-----
-===== Video Tutorial: Repeaters =====
-<html>
-<left>
-<iframe width="620" height="350" src="http://player.vimeo.com/video/116305987" frameborder="0" allowfullscreen></iframe>
-</left>
-</html>
-More video tutorials are [[http://dglogik.com/videos|here]].
-----
-===== Create a Simple Repeater =====
-These steps show you how to create a simple repeater using a [[dglux5_wiki:widgets_and_property_inspector:components:group:home|group]] component. In these steps, you will use a [[dglux5_wiki:dataflow:dataflow_blocks_reference:variables:home|Table]] dataflow block and a [[dglux5_wiki:widgets_and_property_inspector:components:symbols:home|symbol]].
-==== Configure the Table ====
-  - <WRAP>In the [[dglux5_wiki:workspace_and_workflow:panels_and_menus:document_window|Document window]] or [[dglux5_wiki:workspace_and_workflow:panels_and_menus:outline|Outline]], right-click the Stage and select **Insert** > **Components** > **Group**.
-{{:dglux5_wiki:widgets_and_property_inspector:repeaters:dglux5_repeater_2.png?direct|image1}}</WRAP>
-  - <WRAP>Right-click the group and select {{:dglux5_wiki:92_icn-dataflow-icon.png?nolink|}} **Dataflow**.
-{{:dglux5_wiki:widgets_and_property_inspector:components:group:dglux5_repeater_0.png?direct|}}</WRAP>
-  - <WRAP>Drag a [[dglux5_wiki:dataflow:dataflow_blocks_reference:variables:table|Table]] dataflow block to the dataflow window.
-{{:dglux5_wiki:widgets_and_property_inspector:repeaters:dglux5_repeater_3.png?direct|image1}}</WRAP>
-  - <WRAP>Click the button for the **data** property to open the table, and then edit the table so that it appears similar to the image below.
-{{:dglux5_wiki:widgets_and_property_inspector:components:data_grid:dglux5_grid_42.png?direct|}}\\
-{{:dglux5_wiki:widgets_and_property_inspector:repeaters:dglux5_repeater_11.png?direct|}}
-In the image, the first column contains integers, and the second column contains hexadecimal color codes. For help, see [[dglux5_wiki:dataflow:working_with_tables:home#enter_data_in_a_table_dataflow_block|Enter Data in a Table Dataflow Block]].</WRAP>
-  - Without closing the dataflow, select the group in the Outline.
-  - <WRAP>In the [[dglux5_wiki:workspace_and_workflow:panels_and_menus:properties_panel|Property Inspector]], under **Repeater**, bind the table for your repeater to the **Data** property.
-{{:dglux5_wiki:widgets_and_property_inspector:components:group:dglux5_repeater_2.png?direct|}}</WRAP>
-==== Create the Symbol ====
-  - Create a [[dglux5_wiki:widgets_and_property_inspector:components:symbols:home|symbol]] for your repeater:
-    - Right-click the Stage, and select **Insert** > **Components** > **Text**.
-    - Right-click the text component that you added, and select {{:dglux5_wiki:27_icn-tool-convert-to-symbol.png?nolink|}} **Convert to Symbol**.
-    - <WRAP>Name the symbol ''symbol'', and click OK.
-{{:dglux5_wiki:widgets_and_property_inspector:repeaters:dglux5_repeater_4.png?direct|image1}}</WRAP>
-  - <WRAP>In the [[dglux5_wiki:workspace_and_workflow:panels_and_menus:symbols_panel|Symbols panel]], select **symbol**. Then, right-click **symbol**, and select **Edit**.
-{{:dglux5_wiki:widgets_and_property_inspector:repeaters:dglux5_repeater_5.png?direct|image1}}</WRAP>
-  - In the Outline, right-click **symbol**, and select **Edit Properties**.
-  - <WRAP>In the [[dglux5_wiki:widgets_and_property_inspector:components:symbols:home|Symbol Parameters]] dialog, drag one **number** and one **fill** to the right-hand panel.
-{{:dglux5_wiki:widgets_and_property_inspector:repeaters:dglux5_repeater_6.png?direct|image1}}</WRAP>
-  - <WRAP>Bind the **number** parameter to the **Text** property in the Property Inspector.
-{{:dglux5_wiki:widgets_and_property_inspector:repeaters:dglux5_repeater_7.png?direct|image1}}</WRAP>
-  - <WRAP>Bind the **fill** parameter to the **Fill** property in the Property Inspector.
-{{:dglux5_wiki:widgets_and_property_inspector:repeaters:dglux5_repeater_8.png?direct|image1}}</WRAP>
-  - <WRAP>Close the Symbol Parameters dialog, and then click **OK** to close the symbol editing dialog.
-{{:dglux5_wiki:widgets_and_property_inspector:repeaters:dglux5_repeater_12.png?direct|image1}}</WRAP>
-==== Finish the Repeater ====
-  - <WRAP>In the Outline, select the group, and ensure that the group's **Layout** property is set to Horizontal or Vertical. You might also want to set the **Wrap** property to Wrap.
-If the group's layout is Absolute, all the symbol instances will appear at the same location in the group.
-{{:dglux5_wiki:widgets_and_property_inspector:repeaters:dglux5_repeater_13.png?direct|image1}}</WRAP>
-  - <WRAP>In the Property Inspector, under **Repeater**, for **Symbol**, type ''symbol''.
-{{:dglux5_wiki:widgets_and_property_inspector:repeaters:dglux5_repeater_14.png?direct|image1}}</WRAP>
-  - <WRAP>In the Outline, select the "renderer" node that is a child of the group.
-{{:dglux5_wiki:widgets_and_property_inspector:repeaters:dglux5_repeater_15.png?direct|image1}}</WRAP>
-  - <WRAP>With the "renderer" node selected, click {{:dglux5_wiki:92_icn-dataflow-icon.png?nolink|}} **Dataflow** to open the dataflow for the group. Then, select the Table dataflow block, and click the button next to the **data** property to open the table.
-  - Drag the v1 column header to the **number** property, and the v2 column header to the **fill** property.
-{{:dglux5_wiki:widgets_and_property_inspector:repeaters:dglux5_repeater_9.png?direct|image1}}</WRAP>
-You have created a repeater that shows one instance of the symbol for each row of data in the table.
-{{:dglux5_wiki:widgets_and_property_inspector:repeaters:dglux5_repeater_10.png?direct|image1}}
-----
-===== Configure Repeater Selection =====
-You can control other components in your project based on the user's selection of items inside the repeater. To do this, you can use the group's [[dglux5_wiki:widgets_and_property_inspector:property_inspector:allcomponents:selection|Selection properties]]. In this example, you will add a Single Select behavior to a repeater, and create a text component that displays the currently selected value. In these steps, you will use a [[dglux5_wiki:dataflow:dataflow_blocks_reference:table_operations:table_row_cells|Table Row Cells]] block.
-Follow these steps after you create a repeater in a group component.
-In the same ''.dg5'' file as your repeater:
-  - Right-click the Stage in the [[dglux5_wiki:workspace_and_workflow:panels_and_menus:document_window|Document window]] or [[dglux5_wiki:workspace_and_workflow:panels_and_menus:outline|Outline]], and select **Insert** > **Components** > **Text**.
-  - <WRAP>In the Outline, next to the group component that contains the repeater, click the {{:dglux5_wiki:92_icn-dataflow-icon.png?nolink|}} **Dataflow** icon.
-{{:dglux5_wiki:widgets_and_property_inspector:components:group:dglux5_repeater_8.png?direct|}}</WRAP>
-  - <WRAP>In the Blocks Palette, expand **Table Operations**, and drag a [[dglux5_wiki:dataflow:dataflow_blocks_reference:table_operations:table_row_cells|Table Row Cells]] block to the dataflow.
-{{:dglux5_wiki:widgets_and_property_inspector:components:group:dglux5_repeater_9.png?direct|}}</WRAP>
-  - <WRAP>Bind the table that is driving your repeater to the **input** property of the Table Row Cells block.
-{{:dglux5_wiki:widgets_and_property_inspector:components:group:dglux5_repeater_10.png?direct|}}</WRAP>
-  - With the group selected in the Outline, expand the **Selection** properties, and set the Selection Behavior property to {{:dglux5_wiki:194_pi_selection_single.png?nolink|}} **Single Select**.
-  - <WRAP>Bind the **Selected Index** property to the Table Row Cells block's **row** property.
-{{:dglux5_wiki:widgets_and_property_inspector:components:group:dglux5_repeater_11.png?direct|}}</WRAP>
-  - <WRAP>For the Table Row Cell block's **column 0** property, enter the name of one of the columns from the table that is driving the repeater.
-{{:dglux5_wiki:widgets_and_property_inspector:components:group:dglux5_repeater_12.png?direct|}}
-If a repeater item is selected, the Table Row Cell block's **value 0** property automatically updates when you specify a **column 0**.</WRAP>
-  - Without closing the dataflow, select the text component in the Outline.
-  - <WRAP>Bind the Table Row Cell block's **value 0** property to the text component's **Text** property.
-{{:dglux5_wiki:widgets_and_property_inspector:components:group:dglux5_repeater_13.png?direct|}}</WRAP>
-  - <WRAP>Change to [[dglux5_wiki:workspace_and_workflow:edit_preview:home|Preview mode]], and test your repeater by clicking. The text component's contents should update depending on the items you click inside the group.
-{{:dglux5_wiki:widgets_and_property_inspector:components:group:dglux5_repeater_14.png?direct|}}</WRAP>
-===== Repeaters FAQ =====
-<hidden **How do I create a repeater with multi-select behavior?**>
-**How do I create a repeater with multi-select behavior?**\\
-To create a repeater with multi-select behavior, follow the steps above to create a repeater. Then, select the group that contains the repeater, and in the group's [[dglux5_wiki:widgets_and_property_inspector:property_inspector:allcomponents:selection|Selection properties]], for **Selection Behavior**, choose {{:dglux5_wiki:192_pi_selection_multi.png?direct|}} **Multi-Select**. Be sure to change to [[dglux5_wiki:workspace_and_workflow:edit_preview:home|Preview mode]] when you test the behavior.
-When items in the repeater are selected, their indexes appear in the **Selected Index** property as comma-separated values.
-{{:dglux5_wiki:widgets_and_property_inspector:property_inspector:properties_common_selection_index.png?direct|}}
-Also, the **Selected** property of selected symbol instances is set to TRUE.
-{{:dglux5_wiki:widgets_and_property_inspector:repeaters:dglux5_repeater_selected.png?direct|}}
-</hidden>
-<hidden **How do I change the appearance of items in my repeater depending on whether they are selected?**>
-**How do I change the appearance of items in my repeater depending on whether they are selected?**\\
-These steps show you how to use the **Selected** property of the repeater's symbol in order to control repeater item background color. Follow these steps after you create a repeater in a group component. In this example, you will use [[dglux5_wiki:dataflow:dataflow_blocks_reference:logic:if|If]], [[dglux5_wiki:dataflow:dataflow_blocks_reference:variables:boolean|Boolean]], and [[dglux5_wiki:dataflow:dataflow_blocks_reference:variables:color|Color]] dataflow blocks.
-In the same ''.dg5'' file as your repeater:
-  - In the [[dglux5_wiki:workspace_and_workflow:panels_and_menus:symbols_panel|Symbols Panel]], right-click the symbol that represents an item in your repeater, and select **Edit**.
-  - In the [[dglux5_wiki:workspace_and_workflow:panels_and_menus:outline|Outline]], right-click the symbol, and select **Dataflow**.
-  - In the dataflow Blocks palette:
-    - Expand **Logic**, and drag an [[dglux5_wiki:dataflow:dataflow_blocks_reference:logic:if|If]] block to the dataflow window.
-    - Expand **Variables**, and drag a [[dglux5_wiki:dataflow:dataflow_blocks_reference:variables:boolean|Boolean]] block and two [[dglux5_wiki:dataflow:dataflow_blocks_reference:variables:color|Color]] blocks to the dataflow window.
-  - For the Color blocks that you added, set one of the values to be a "Selected" fill and the other to be a "Not Selected" fill.
-  - For the Boolean block that you added, set the value to TRUE.
-  - In the If block that you added:
-    - <WRAP>For **input 0**, drag the **Selected** property of the symbol.
-{{:dglux5_wiki:widgets_and_property_inspector:repeaters:dglux5_repeater_selected_1.png?direct|}}</WRAP>
-    - For **input 1**, bind the TRUE value from the Boolean block.
-    - For **then**, bind the "Selected" fill.
-    - <WRAP>For **else**, bind the "Not Selected" fill.
-{{:dglux5_wiki:widgets_and_property_inspector:repeaters:dglux5_repeater_selected_2.png?direct|}}</WRAP>
-  - <WRAP>Bind the **output** property of the If block to the **Fill** property of the symbol.
-{{:dglux5_wiki:widgets_and_property_inspector:repeaters:dglux5_repeater_selected_4.png?direct|}}</WRAP>
-  - Close the dataflow window, and click **OK** to close the symbol editing dialog.
-  - <WRAP>In [[dglux5_wiki:workspace_and_workflow:edit_preview:home|Preview mode]], test your repeater. Items in the repeater change color based on whether they are selected.
-{{:dglux5_wiki:widgets_and_property_inspector:repeaters:dglux5_repeater_selected_3.png?direct|}}</WRAP>
-</hidden>
-<hidden **Users will scroll inside my repeater using touch screens. What should I do?**>
-**Users will scroll inside my repeater using touch screens. What should I do?**\\
-If users will scroll inside your repeater using touch screens, the onClick event that typically drives selection should not be used because the act of scrolling can trigger selection. Instead, you can use the onMouseUp event to drive selection. To do this, you can create an [[dglux5_wiki:actions:home|action]] that affects the repeater's source symbol. The action drives the symbol's [[dglux5_wiki:widgets_and_property_inspector:property_inspector:allcomponents:general|Selected]] property. In this example, you will create a text component that displays a value from a column in the repeater's table.
-Before following these steps, create a repeater as described above, without selection behavior.
-In the same ''.dg5'' file as your repeater:
-  - <WRAP>In the [[dglux5_wiki:workspace_and_workflow:workspace_basics:home|Symbols panel]], right-click the symbol that represents an item in your repeater, and select **Edit**.
-{{:dglux5_wiki:widgets_and_property_inspector:components:group:dglux5_repeater_23.png?direct|}}</WRAP>
-  - Create an action:
-    - Click the **Actions** tab to open the [[dglux5_wiki:workspace_and_workflow:workspace_basics:home|Actions panel]].
-    - <WRAP>Click {{:dglux5_wiki:67_icn-pi-add.png?nolink|}} **Add Action**, and select **Set State**.
-{{:dglux5_wiki:widgets_and_property_inspector:components:group:dglux5_repeater_15.png?direct|}}</WRAP>
-    - <WRAP>For the action's **Command Type**, select **onMouseUp**.
-{{:dglux5_wiki:widgets_and_property_inspector:components:group:dglux5_repeater_16.png?direct|}}</WRAP>
-    - <WRAP>Open the Outline, and next to the symbol, click the {{:dglux5_wiki:92_icn-dataflow-icon.png?nolink|}} **Dataflow** icon.
-{{:dglux5_wiki:widgets_and_property_inspector:components:group:dglux5_repeater_17.png?direct|}}</WRAP>
-    - <WRAP>In the State block, click the plus sign.
-This adds **path 0** and **change 0** properties.
-{{:dglux5_wiki:widgets_and_property_inspector:components:group:dglux5_repeater_18.png?direct|}}</WRAP>
-    - <WRAP>Without closing the dataflow, open the Property Inspector, and expand the top section of properties.
-{{:dglux5_wiki:widgets_and_property_inspector:components:group:dglux5_repeater_19.png?direct|}}</WRAP>
-    - <WRAP>Bind the symbol's **Selected** property to the State block's **path 0** property.
-{{:dglux5_wiki:widgets_and_property_inspector:components:group:dglux5_repeater_20.png?direct|}}</WRAP>
-    - <WRAP>For the State block's **change 0** property, click the {{:dglux5_wiki:70_imported_layers.png?nolink|}} icon, and set **Selected** to TRUE.
-{{:dglux5_wiki:widgets_and_property_inspector:components:group:dglux5_repeater_21.png?direct|}}</WRAP>
-  - <WRAP>Click **OK** to exit the symbol editing dialog.
-{{:dglux5_wiki:widgets_and_property_inspector:components:group:dglux5_repeater_22.png?direct|}}
-You have created custom selection behavior that uses the onMouseUp event instead of the onClick event.</WRAP>
-</hidden>
-<hidden **How to use “onDone” trigger while using “Threaded” mode in a Repeater**?>
-    - <WRAP>In the [[dglux5_wiki:workspace_and_workflow:panels_and_menus:outline|Outline panel]], right-click the **Stage** and select **Insert** > **Components** > **Text**.
-{{:dglux5_wiki:widgets_and_property_inspector:repeaters:dglux5_repeater_ondone-1.png?direct|}}</WRAP>
-    - <WRAP>Right-click the **Stage** and click {{:dglux5_wiki:92_icn-dataflow-icon.png?nolink|}} **Dataflow** icon.
-{{:dglux5_wiki:widgets_and_property_inspector:repeaters:dglux5_repeater_ondone-2.png?direct|}}</WRAP>
-    - <WRAP>Drag a **Table** dataflow block and a **Repeater** block to the dataflow window.
-{{:dglux5_wiki:widgets_and_property_inspector:repeaters:dglux5_repeater_ondone-3.png?direct|}}</WRAP>
-    - <WRAP>To create a new dataflow symbol and to enter edit mode for that symbol:\\
-a. Switch to the **Symbols** panel.\\
-b. Click the {{:dglux5_wiki:27_icn-tool-convert-to-symbol.png?nolink|}} **Convert to symbol** icon.\\
-c. When prompted, enter a symbol name, and click OK.\\
-{{:dglux5_wiki:widgets_and_property_inspector:repeaters:dglux5_repeater_ondone-4.png?direct|}}\\
-d. Right-click a symbol instance in the dataflow window, and choose **Edit**.\\
-{{:dglux5_wiki:widgets_and_property_inspector:repeaters:dglux5_repeater_ondone-5.png?direct|}}
-e. Edit the dataflow model according to the requirements.\\
-f. Right-click an empty area in the dataflow window, and choose **Symbol Properties**.\\
-{{:dglux5_wiki:widgets_and_property_inspector:repeaters:dglux5_repeater_ondone-6.png?direct|}}
-g. Drag **trigger** from **Panel** to **Symbol Parameters**. Rename trigger to **onDone**.\\
-{{:dglux5_wiki:widgets_and_property_inspector:repeaters:dglux5_repeater_ondone-7.png?direct|}}</WRAP>
-    - <WRAP>In the **Repeater** block, browse for the symbol in block's parameters.
-{{:dglux5_wiki:widgets_and_property_inspector:repeaters:dglux5_repeater_ondone-8.png?direct|}}</WRAP>
-    - <WRAP>Bind table to the **data** field of the **Repeater** block.
-{{:dglux5_wiki:widgets_and_property_inspector:repeaters:dglux5_repeater_ondone-9.png?direct|}}</WRAP>
-Now you can trigger other actions using **onDone** property.
-<hidden **See a sample dg5 file below for the reference**>
-<file javascript ThreadedRepeater.dg5>
-{"@type":"group","Text":{"@type":"text","width":504,"cornerRadius":0,"multiline":true,"fontSize":"12","height":185,"border":{"@type":"fill","gradient":{"@type":"gradient","@array":[{"ratio":0,"color":"#000000","alpha":1},{"ratio":100,"color":"#ffffff","alpha":1}]},"color":16777215},"text":["@parent.storage.value"],"color":12303296,"left":-5.684341886080802e-14,"top":5.595524044110789e-14},"storage":{"@type":"localStorage","!ps":["key","value"],"!x":444,"!y":155,"key":"debug_out","value":"","!w":208},"width":"100%","height":"100%","clipContent":true,"repeater":{"@type":"repeater","renderer":{"map":{"string":["@parent.@data.v1"]}},"!ps":["symbol","data","mode","output"],"!x":293,"!y":34,"symbol":"s","data":["@parent.table.data"],"mode":"threaded"},"table":{"@type":"table","data":{"@type":"tabledata","cols":[{"name":"row","type":"number","meta":{"name":"row","type":"number"}},{"name":"v1","meta":{"name":"v1"}}],"rows":[[0,"value 1"],[1,"vvv 2"],[2,"last row"]]},"!ps":["data"],"!x":46,"!y":37},"!df":true,"@array":[["Text"]],"@symbols":{"@df":{"s":{"@type":"dfcontent","script":{"@type":"script","!ps":["invoke","script","output","print","a","onDone"],"!x":166,"!y":63,"invoke":["@parent.@params.onInit"],"script":"@parent.storage.value = @parent.storage.value + \"\\n triggered: \" + @.a;\n@.onDone = Math.random();","!var":[{"n":"a","t":"string"},{"n":"onDone","t":"trigger"}],"a":["@parent.@params.string"]},"!df":true,"storage":{"@type":"localStorage","!ps":["key","value"],"!x":378,"!y":82,"key":"debug_out","!w":208},"@params":{"!var":[{"n":"onInit","t":"trigger"},{"n":"onDone","t":"trigger","isOutput":true},{"n":"string","t":"string"}],"onDone":["@parent.script.onDone"]}}}},"@ver":8503}
-</file>
-</hidden>
-</hidden>
-----
-<WRAP left>[[dglux5_wiki:widgets_and_property_inspector:form_input:list:home|Previous: List Input]]</WRAP>
-<WRAP right>[[dglux5_wiki:widgets_and_property_inspector:callouts:home|Next: Callouts]]</WRAP>