User's Guide
Mobile and Web Components
UX
Controls
Containers
Container
RepeatingSection
Dynamically Compute Values for Added Rows in a Repeating Section

Dynamically Compute Values for Added Rows in a Repeating Section

Description

Create generated expressions for new rows in a repeating section using an Ajax callback.

You can use an expression in order to generate a GUID for a field in a repeating section. This can be done by defining the expression inside a function and then calling the function using the 'Default value' property on the control that contains the field in question. The expression can then be used to populate the rows associated with that control dynamically.

Three added rows generate the same GUID, unlike the five initially loaded rows above them.

When the server initially renders the repeating section the default value expression is automatically executed and then populates each existing row in the repeating section. However, if the user clicks on the 'Add row' button at the bottom of the repeating section, to add a new row, then the generated GUID for each added row will be exactly the same. This is because the default value expression is not rendered on the server when new rows are added to a repeating section. One way to resolve this problem is to define an ajax callback that fires when the user clicks the add new row button. The default value for the new row can then be evaluated on the server and sent back to the client to populate the new row.

This process is described in this video. You can also follow the guide below for more detail.

In the UX Builder on the UX Controls page open the 'Data Controls' menu. Click on on the [TextBox] option to add a textbox control to the component. Give the textbox the name and label 'Address'.
Add a second textbox control to the component with the name and label 'City'.
Highlight the 'City' textbox control. In the properties list on the right set the 'Default value' property in the 'Field Properties' section to this:
```
=api_uuidcreate()
```
From the 'Data Controls' menu add a third [TextBox] control to the component with the name and label 'Country'.
Highlight all of the textbox controls in the controls tree. Open the Containers menu click on the [Container] option.
From the 'Container Type' list seclect the 'RepeatingSection' option. Click OK
From the 'Events' section on the main menu open the 'Client-side' events page. Highlight the 'afterRptSectionRowAdd' event in the Client-Side Events list.
Add the following definition to the afterRptSectionRowAdd event:
```
var r = {dialog.Object}.getRepeatingSectionActiveRow(e.sectionName);
var data = 'rowNum=' + r;
{dialog.object}.ajaxCallback('','','xb','',data)
```
Here we are getting the row number of the repeating section row that was just added by using the getRepeatingSectionActiveRow method. We then construct a name value pair, ("var data = 'rowNum=' + r;")that will be sent back as part of an Ajax callback. This name value pair becomes this last parameter in the Ajax callback. The Ajax callback also calls an Xbasic function called 'xb', that is described in the next step.
From the main menu's 'Code' section open the 'Xbasic functions' page. Add the following definition:
```
function xb as c (e as p)
	dim js as c
	js = "{dialog.object}.setValue('Address:"+e.rowNum+"','"+js_escape(remspecial(api_uuidcreate()))+"');"
	xb = js
end function
```
This function generates the javascript to set the value on the 'Address' field. The address will be set on the row number for each row using 'e.rowNum'. This is the row number value that is being passed using the Ajax Callback defined in the step before this. A new GUID is then generated for that row on the server. The 'xb = js' simply sends the javascript contained inside this Xbasic function as the response to the Ajax callback.
Run the component in Live Preview. The initial rows should all be dynamically populated.
Click the 'Add row' button at the bottom of the repeating section. Now a custom expression value should appear for all of the rows in the 'Address' column.