List Control Actions

Description

Perform an action (refresh, search, sort, add group breaks, navigate, change layouts, show/hide parts, move rows, populate data, save or delete records, export data, and more) on a List or List detail view in a UX component.

Discussion

A number of actions can be performed on a List Control. The List Control Actions action allows you to perform the following actions:

Available Actions

Refresh Data

Perform an Ajax Callback to the server to refresh the data in the List.

This action is only meaningful if the List was populated with data that was computed on the server. For example, if the List data source is SQL, DBF, Custom, etc. If the List data source is set to Javascript function, then this action is meaningless.

Refresh Cascading Lists

Perform an Ajax Callback to refresh the data in the child List(s) for a particular List.

For example, the current List might show a list of Customers. This List might have a child List that shows Orders, and the Orders List might have a child List that shows OrderDetails. If you perform this action on the Customers List, it will update the data in the Orders List and the OrderDetails List.

Refresh Row

Perform an Ajax Callback to refresh the data in the current row.

This action is only meaningful if the List was populated with data that was computed on the server. For example, if the List data source is SQL, DBF, Custom, etc.

Refresh Row by Key

Perform an Ajax Callback to refresh a specific row of data. The row to refresh is specified by the primary key value.

This action is only meaningful if the List was populated with data that was computed on the server. For example, if the List data source is SQL, DBF, Custom, etc.

Navigate

Perform an Ajax Callback to navigate data in the List. You can specify First, Next, Prev, or Last as the target page.

This action is only meaningful if the List was populated with data that was computed on the server and if pagination was turned on in the List definition and the pagination method is set to NavigationButtons. For example, if the List data source is SQL, DBF, Custom, etc.

Navigate to Page

Perform an Ajax Callback to navigate data in the List. You can specify a target page number. For example, page 3.

This action is only meaningful if the List was populated with data that was computed on the server and if pagination was turned on in the List definition and the pagination method is set to NavigationButtons. For example, if the List data source is SQL, DBF, Custom, etc.

Fetch More

Perform an Ajax Callback to fetch the next page of data for the List. The number of records that are fetched is determined by the setting for the Page Size in the List definition.

This action is only meaningful if the List was populated with data that was computed on the server and if pagination was turned on in the List definition and the pagination method is set to FetchMore. For example, if the List data source is SQL, DBF, Custom, etc.

Fetch Records by Key Value

Perform an Ajax Callback to fetch a record specified by a key value. You can specify multiple key values. The fetched records are appended to the List.

This action is only meaningful if the List was populated with data that was computed on the server. For example, if the List data source is SQL, DBF, Custom, etc.

Filter List - Client-side

Filers the records shown in the List using a client-side filter. No Ajax Callback is made.

Filter List - Server-side

Perform an Ajax Callback to filter the data shown in the List.

This action is only meaningful if the List was populated with data that was computed on the server. For example, if the List data source is SQL, DBF, Custom, etc.

Filter List - Server-side - Select Checked Rows

Filters a list to show rows that have been checked using the Checkbox select column. The List must be based on a SQL data source. The action makes an Ajax Callback to the server to filter the data shown in the List.

Client-side sort

Sorts the data in the List. The sorting is done in the browser - no Ajax Callback is made.

Client-side group breaks

Sorts the data in the List and adds group breaks to the List. You can define headers and footers for each group break, and you can define multiple levels of grouping. You can also include summary data (such as the number of rows in a group or the total for a column in the group) in the header or footer.

A client-side sort is performed on the List data.

This action is a super-set of the Client-side sort action.

Client-side group breaks - remove

Remove client-side group breaks.

Show List Navigator

Display a List Navigator.

The List Navigator is a scrollable window with a list of all the Group Breaks in the List. You can quickly scroll to a section of the list by dragging on the List Navigator.

This action is only meaningful if the List has group breaks. These group breaks can either have been defined as server-side group breaks (in the case where the List data is based on a SQL, DBF, or Custom data source), or client-side group breaks.

Hide List Navigator

Hide the List Navigator if it was previously shown.

The List Navigator is a scrollable window with a list of all the Group Breaks in the List. You can quickly scroll to a section of the list by dragging on the List Navigator.

Server-side sort

Perform an Ajax Callback to sort the data in the List. This action only works with a List with a Columnar layout. To sort data in Lists using other layouts, use the Filter Records in a List Control action.

This action is only meaningful if the List was populated with data that was computed on the server. For example, if the List data source is SQL, DBF, Custom, etc.

Select Active Layout

If you have defined multiple Layouts for a List, this action allows you to select which Layout to make active.

Remove selected rows from List

Removes the currently selected rows from a List. If the List has been configured to allow multiple rows to be selected, then this action will remove all of the rows that are currently selected.

Remove all rows from List

Clears out all rows in the List.

Move selected rows from one List to another List

Moves the currently selected rows to another List.

Move all rows from one List to another List

Moves all the rows in a List to another List.

Shift position of selected rows

Moves the currently selected rows in a List. You can specify the following moving directions: Top, Up, Down, or Bottom.

Populate controls with data from current row in List

Populates controls on the UX with data from the current row in the List.

For example, assume the List has these columns: Firstname, Lastname, City, and State.

Assume that you have placed textbox controls on the UX with these names: FN, LN, CITY, and STATE_REGION.

This action will set the value of FN, LN, CITY, and STATE_REGION controls with the data from the current row in the List.

images/populateListOnSelect.png

Click here to download a component that demonstrates populating text boxes with the data from the currently selected row in a List Control is selected.

Scroll to row number

Scroll the List so the specified row number (zero based) is scrolled into view.

Scroll to List value

Scroll the List so that the row with the specified value is visible.

For example, if the List has been configured to return values from the Lastname column, you can specify Smith as the value to scroll to, and the row with the Lastname value of Smith will be scrolled into view.

Show/hide List Item Footer

If you have defined a List Item Footer, this action will toggle the visibility of the footer, or explicitly show or hide it.

List Detail View Actions

If the List was configured to have a Detail View, this action allows you to perform some actions on the List's Detail View.

For some actions listed, if you are adding this event to a button, you may want to only enable the button if the List's Detail View has been edited. You can put the following expression in the button's Client-side Enable Expression:

dialog.listDetailView.LIST1.isDirty = true

The actions available are listed below:

Detail View Action
Description
Submit Detail View Edits to List

Saves edits to the record in the detail view to the List.

Submit List Edits to the Server

Synchronizes edits made to records in the List to the server.

New Detail View Record

Enter a new record using the List Detail View.

Reset Detail View Form

Reset the Detail View Form, undoing any changes made to the record.

Reset Data in Current Row

Undo the changes made to the current row in the List.

Export Data to Excel or Ascii

You can export data in a List control to either Excel or to Ascii files.

After the export file has been created you can either download the file to the client, or call an Xbasic function to further process the exported file. A typical use case where you might want to call an Xbasic function to process the exported file would be if you wanted to email the file to a list of recipients, or upload the file to cloud storage, such as Amazon S3 storage. In the case where the List is based on a SQL query you have the option of:

  • exporting the data in the List

  • exporting the data in the List query

Consider the case where you have defined a List and have turned on the pagination feature. You might have set the page size to 100 rows. The query that the List is based on might have 1,000 records, but the List will only show 100 rows of data at a time. If the export is based on the 'Data in the List' the export file will have 100 rows in it (because the List only has one page of data - 100 rows - in memory at any time). However, if the export is based on 'Data in the List Query' the export file will have 1,000 rows in it (subject to the Max Records setting which might limit the number of rows in the export file). To export data in a List you can use Action Javascript to define the code.

  1. Select the 'List Control Actions' in Action Javascript

    images/listExportExcel_1.jpg
  2. Select the 'Export List data to Excel/Ascii' action from the list of available actions.

    images/listExportExcel_2.jpg
  3. Click the smart field to define the 'Export list data settings'.

In the case where the List is based on a SQL query, the builder shows the 'Export what' property which can be set to 'Data in List query' or 'Data shown in List'. If the 'Export what' property is set to 'Data in List query' the 'Maximum number of records to export' property is shown.

images/listExportExcel_3.jpg

In the case where the 'Export what' property is set to 'Data shown in List' or if the List is not based on a SQL query (in which case the data that is exported is always the 'Data shown in List'), the 'Customize field sizes and column heading in export file' property is shown.

The 'Customize field sizes and column heading in export file' property is only shown if the 'Export format' is Excel.

This property allows you to customize the column headings in the Excel file and control the data types of the data in the excel file.

images/list_export_customizefieldsproperty.jpg

To customize fields, click the smart field for the 'Customize field sizes and column heading in export file' property. A build opens up where you can enter a CR-LF delimited list of definition - one for each field you want to customize. The syntax for the definition can be shown by clicking the 'Show syntax help' hyperlink. The syntax allows you to specify the data type, size and column heading of each column in the Excel file.

images/listExport_customizeColumns.jpg

After export action: Xbasic Function

The After export action can either be set to Download the file or call an Xbasic Function. The Xbasic Function can be used to perform additional processing of the file, email the file, upload the file to a remote server, and more. For example, you could rename the file before sending it to the client to download:

function afterExport as V (e as P)
'The e object passed into the function contains
'e.filename - the filename of the export file that was created
'e.tmpl - definition of the component

'optional
'Your code can set the e.javascript property to return any Javascript to the client.
'For example:
'e.javascript = "alert('File was e-mailed');"

    ' Rename the file
    context.session.saveFileToSessionFile(e.filename, "myListData.xslx")
    ' Get the URL for the file
    dim file as c = context.session.FormatFileDataURL("myListData.xslx")

    ' Send the file to the client browser:
    e.javascript= "window.location = '" + js_escape(file) + "';"

end function

Import data into a List from Excel/Ascii

Informational placeholder. Use Import Data into a List Control from Excel or Ascii file action to import data from an Excel or Ascii file into a List.

Persist List Column Layout

Saves the current List column layout to local storage, including the size of columns, column position, column visibility, etc. This action only saves List column information. Use Persist List Layout to persist the List layout if your List has multiple layouts.

Restore List Column Layout

Restores a previously saved List column layout from local storage.

Persist List Layout

Saves the current List layout to local storage, including the current Layout if the List has multiple layouts. This action persists everything the Persist List Column Layout action saves in addition to the current layout.

Restore List Layout

Restores a previously saved List layout from local storage, including the active layout.

Delete Persisted List Layout settings

Deletes any saved List layout information from local storage.

Get Persisted List Layout settings

Fetches the saved List layout information and stores it in a local JavaScript variable specified in the Variable name property. The JavaScript variable can then be used in client-side scripts.

Show nested Detail View

Expands the embedded Detail View if the List has embedded content.

Hide nested Detail View

Collapses the embedded Detail View if the List has embedded content.

Properties for Configuring List Control Actions

List Control Action Properties

Action name

Specify the List Action that you want to execute. See Available Actions above for a description of each available action.

List Id

Specify the List you want to perform an action on.

Export list data settings

Export list data settings property.

List Id(s)

Specify the List(s) you want to perform an action on. You can enter a comma delimited list of ListIds if you want to refresh the data in more than one list in a single Ajax callback.

List navigator settings

List navigator settings property.

Direction

Specify the direction in which you want to navigate. (Only applies to Lists that are set to paginate data). Choices include First, Previous, Next, Last.

Page number

Specify the page number

Key values

Specify a comma delimited list of key values for records you want to retrieve and add to the List. The list of keys is CASE SENSITIVE. If the primary key of a record has multiple columns, separate each segment of the key with 3 pipes (|||); e.g. John|||Smith. To retrieve the records for customers 23, 57 and 35, enter 23,57,35.

Records to refresh

Specify a comma delimited list of key values for records you want to refresh. If the primary key of a record has multiple columns, separate each segment of the key with 3 pipes (|||); e.g. John|||Smith. To retrieve the records for customers 23, 57 and 35, enter 23,57,35. If a key value specified here is not currently in the List, it can optionally be added to the List. See the 'Add to List' property.

Add to List

If a key value that is specified in the 'Records to refresh' list is not currently in the List, it can optionally be added to the List.

Search field

Specify the name of the control that contains the value to search for.

Filter expression

Specify the filter expression for the List. You can use arguments in the filter. E.g. state = :stateName

Order expression

Specify the order expression.

Argument values

If your filter expression uses arguments, specify the argument values. Syntax is a CR-LF delimited list where each line in the list is argumentValue|||datatype|argumentName. E.g. Boston|||C|whatCity

Layout name

Specify the name of the Layout you want to select

Client-side group break definition

Client-side group break definition property.

Client-side sort mode

Chose 'Simple' if you only want to sort on a single column. Choose 'Advanced' to sort on multiple columns. To sort AND group the data, use the 'Client-side Group Breaks' action. Choices include Simple, Advanced.

Client-side sort definition

Specify the sort definition.

Client-side sort column

Specify the name of the column you want to sort. (Case-sensitive)

Client-side sort data type

Client-side sort data type property. Choices include Default, Number, Date, Logical, Character.

Sort direction

Specify the sort direction. None will remove the sort. Choices include Ascending, Descending, None.

Server-side sort column number

Specify the column number (1 based) of the column you wish to sort on. If the List has previously been sorted on this column, the sort direction is reversed.

Target List id

Specify the Id of the target List.

Shift direction

Specify the direction in which the selected rows should be shifted. Choices include Top, Up, Down, Bottom.

Control map

When the user clicks on a row in the List populate controls on the UX with data from the current row in the List. (Contrast this with 'Populate controls in an UNBOUND UX component with data from a table' which does an Ajax callback to get data to populate controls on the component.)

Target row number (zero based)

Specify the row number to scroll into view. First row is row 0, second row is row 1, etc.

Target List value

Specify the row to scroll into view by specifying the return value of the target row. For example, if the List is configured to return the value in the Lastname column, you could specify 'Smith' to scroll the row that contains a value of 'Smith' for the Lastname field into view.

Detail view action

Specify the action you want to perform on the List's Detail View. Choices include:

Detail View Action
Description
Submit Detail View Edits to List

Save the edits in the detail view to the List control.

Submit List Edits to Server

Save the edits made to the List back to the server.

New Detail View Record

Create a new record.

Reset Detail View Form

Reset the detail view, undoing all edits.

Reset Data in Current Row

Undo all change to the currently selected row int he List.

Mark Current Row as Deleted

Mark the currently selected row in the List as deleted.

Additional information

Provides tips for creating enable expressions that can be added to buttons that invoke the action, e.g. enabling a "Reset Detail View Form" button only when the Detail View is dirty.

Prompt for confirmation

If enabled, the user will be prompted to confirm the action before it is performed, i.e. when deleting the currently selected row.

Scroll Options Properties

Scroll mode

Should the target row be positioned at the top or bottom of the List, or simply scrolled into view. Choices include into-view, top, bottom.

Animate

Animate property.

Duration

Specify the duration of the animation in milliseconds

X offset

Distance from top/bottom of List to scrolled to item.

Y offset

Distance from left/right of List to scroll to item.

Show/Hide List Item Footer Properties

Mode

Specify if the visibility of the element should be toggled, or explicitly set to shown or hidden. Choices include ToggleVisibility, Show, Hide.

Target row

Specify which row to operate on. The first row in the List is '1' (not 0). To operate on the row that has focus, enter <Current> or leave blank.

Show animation style

Select the animation method to use when the window is shown. Fade and Slide use methods in jQuery core. Other options require jQueryUI.

Show animation speed

Specify the animation speed. You can select a pre-defined option, or you can enter an explicit value in milliseconds. Options are listed below:

Option
Description
slow

Animation is rendered in 600 milliseconds

fast

Animation is rendered in 200 milliseconds

<explicit value>

An explicit value greater than zero specifying the animation speed in milliseconds. E.g., 500.

onShowComplete Javascript

(Optional) Specify the Javascript to execute when the animation that shows the element has completed.

Hide animation style

Select the animation method to use when the window is closed. Fade and Slide use methods in jQuery core. Other options require jQueryUI.

Hide animation speed

Specify the animation speed. You can select a pre-defined option, or you can enter an explicit value in milliseconds. Options are listed below:

Option
Description
slow

Animation is rendered 600 milliseconds

fast

Animation is rendered in 200 milliseconds

<explicit value>

An explicit value greater than zero specifying the animation speed in milliseconds. E.g., 500.

onHideComplete Javascript

(Optional) Specify the Javascript to execute when the animation that hides the element has completed.

Refresh List Options Properties

Keep focus on current selection

If enabled, focus on the current row will be retained when the List control is refreshed. Child lists will also remember their current selection.

Set focus to value

Set focus to row with specified value after List is refreshed. You can leave this value blank.

Refresh child Lists

Specify if the child lists should be refreshed. Only applies to Lists with child lists.

Only refresh child Lists

Specify if only the child lists should be refreshed. The parent list is not refreshed. Only applies to Lists with child lists.

Incremental refresh

An incremental refresh will not overwrite edited rows in the List. New records added on the server after the List was initially populated will be retrieved. Records deleted on the server will be removed from the List. Records edited on the server will will be updated in the List (as long as these records to not have unsynchronized edits).

Warn if List is dirty before doing a full refresh

When you do a full refresh, unsynced List edits are lost. Therefore you should check that the List is not dirty before doing a full refresh.

Warning message if List is dirty

Specify the message to show if an attempt is made to refresh the data in a dirty List.

Videos

Filtering a List to Show only Checked Rows

In this video, we show how a server-side filter can be applied to a List to show only the rows that have been checked.

2021-04-03

Limitations

UX Component Only