Development tools : XUI editor : XUI widgets and containers : Containers Description : Repetitive Panel
  
Repetitive Panel
Repetitive Panel is a container that can contain various widgets and container and is used to create repetitive groups of widgets with the same appearance and function in one view.
You can set an iColl to Repetitive Panel. For every widget inside the panel, its dataName starts with the iColl, the index is replaced with the current iteration index at run time. The element and layout with different data are repeatedly displayed in the view. You can place other widgets in a Repetitive Panel, except the following widgets:
▪ Tree widget
▪ Paginated Table
▪ Nested Repetitive Panel
Properties for the Repetitive Panel
 
Property
Property description
id
The id is the identifier for the container.
dataNameForList
This is mandatory. Users can specify an IColl in the context, which contains all the dataName or dataNameForList value in the IColl.
visibility
This property indicates whether the widget is displayed or not. There are three values:
▪ visible
▪ hidden: there will be blanket area to place the widget.
▪ gone: there will be nothing.
dataNameForRow
This property is the name of the data element in server context which is used to record the submitted row number selected by user. The type of data element in server context must be Integer or Number.
selectionMode
This property controls the selection function mode. It has 2 optional values.
▪ none: The selection function is disabled. All the data in the current Repetitive Panel is submitted.
▪ single: One row can be selected. The dataNameForRow property is mandatory when selectionMode is set to be single. Only the data in the selected row is submitted.
You can use the Enhanced Page state to create the nested Repetitive Panel. To support the selectionMode property in the nested Repetitive Panel, add the following codes in the UDTT global configurations section in the template.ftl or template_debug.ftl file.
BTT.conf["btt.dijit.RepetitivePanel.forceSingleSubmit"] = "true";
The following code block shows an example:
<script type="text/javascript">
require([
"com/ibm/btt/BTTGlobal",
"com/ibm/btt/util/AjaxUtil",
"com/ibm/btt/util/I18nUtil",
"com/ibm/btt/util/StringUtil",
"com/ibm/btt/event/BaseMonitor",
"com/ibm/btt/event/NavigationEngine"
], function(BTT, AjaxUtil, I18nUtil, StringUtil, BaseMonitor){
// exports global vars for compatibility reason
window.Engine = BTT.engine;
window.AjaxUtil = AjaxUtil;
window.I18nUtil = I18nUtil;
window.StringUtil = StringUtil;
// BTT global configurations, see com/ibm/btt/BTTConfiguration.js for details
// BTT.conf["btt.dijit.Select.clickModeForDropDown"] = "OnWholeWidget"; // default is "OnlyOnButton"
// BTT.conf["btt.dijit.StringTextBox.maxlength"] = "manual"; // detault is "auto"
BTT.conf["btt.dijit.RepetitivePanel.forceSingleSubmit"] = "true"; if(!window.engine){
window.engine = BTT.engine.getInstance("ajax");
......
 
The following list describes the data submission result in the nested Repetitive Panel design, where selectionMode(main) is the selectionMode property for the main Repetitive Panel and selectionMode(sub) is the selectionMode property for the sub Repetitive Panel.
selectionMode(main)=single and selectionMode(sub)=single
Data that is submitted in the main Repetitive Panel: The data in the selected row
Data that is submitted in the sub Repetitive Panel: The data in the selected row
selectionMode(main)=single and selectionMode(sub)=none
Data that is submitted in the main Repetitive Panel: The data in the selected row
Data that is submitted in the sub Repetitive Panel: All the data in the sub Repetitive Panel
generateLayout
The generateLayout property specifies whether to generate the HTML layout. The default value is true.
generateInlineStyle
The generateInlineStyle property specifies whether to generate the inline styles. The default value is true.
See
ECA tool support
Setting different styles for the odd and even rows
Setting style for the selected row
Go up to
Containers Description