Composer This topic is related to Transact Composer. | Form Builder | v4.3 & Higher This feature is related to v4.3 and higher.
In Composer, Dynamic Data has two meanings:
Dynamically changing the information displayed on a form without reloading
the page
Accessing a third party web service for data for this dynamic
display
Dynamic Data is an Avoka Transact capability that allows a form to
communicate back to the Transaction Manager Server while the form is still
being filled in and even display new data on the fly, without the page being
reloaded or the form being submitted. This allows an additional level of
functionality to be built into forms.
Dynamic Data is a general purpose communication mechanism and can be used
for many reasons. Common use cases are:
Sending some data from the form to the server (such as a user id) and
retrieving some information to populate fields in the form (such as their
address).
Sending some data from the form to the server (such as a user id) and
retrieving some information to populate a pick-list in the form (such as a
list of the subjects that the user is enrolled in). The pick-list can be in
the form of a drop-down list, table, or other visual element.
Sending some data from the form to the server to perform a server-side
calculation. Sending some data from the form to the server to perform a
server-side validation.
Dynamic Data requires collaboration between the form developer, and a
server-side developer who defines a Dynamic Data service in Transaction
Manager. Please refer to the Transaction Manager document for more
information on this.
Composer provides a number of different facilities for using Dynamic Data:
Widgets that have pre-built Dynamic Data support, such as the
"Lookup" Button. An
assistantthatbuildslookup-styleDynamicDatacapabilities.
We recommended you initiate Dynamic Data invocations by a direct user
actions, like a button click, not from implicit actions, such as exiting a
field. Direct actions set user expectations that "something
time-consuming should now happen, and may even fail." Internet
performance and reliability is beyond our control, so using a button sets
end user expectations that some action is about to occur.
However, it is also possible to use Dynamic Data to perform
"predictive" lookups, such as the list of completion hints seen
while typing in a Google search . The
AutoSuggest example below shows these predictive lookups using the Veda Geolocation
service.
By dropping the Dyanmic Data Assistant onto the form, and filling in a few
details, you can populate your form with a dynamic data fields in a few
steps by merely filling in the "Add A Dynamic Data" dialog.
In this example, the Transaction Manager service definition is
"ACMEPOST", which in real life would access some webservice from a
third party provider. Here, there is only one input field,
"Suburb" and the TM service returns multiple sets of 3 fields
each.
The "Result Block Type" selector toward the bottom of the dialog
gives 3 options:
which will display only one set of returned data
which will display multiple sets of data in the more flexible format than a
table structure
as selected in this example. Each set of returned data will populate a row
of the table.
We
have also activated the "Test Mode" checkbox. The assistant will
then provide a set of fake data automatically. You can also provide your own
fake data, as explained below. Of course, for the form to work from real
data, the service must already be defined in TM.
This dialog results in this wireframe and structure:
Previewing the form in HTML and clicking on the "Lookup" button
results in the following display of the default fake data generated by the
assistant.
The fake data belongs to the structure's button, here called
"Lookup". Going to the button's "Edit Properties ->
Properties -> Data -> Dynamic Data Testing" exposes a text field
called "Test Data (Fake Result JSON Object)". If you wish, paste
your own JSON data here. If the "Result Block Type" is either
"Repeatable Block" or "Table", all the JSON fake data
will display; if not, only the first set of the fake data will display.
When the service is returning an unmanageable number of hits, consider using
pagination.
An auto-suggest field is a text field (and its associated control widget)
where the rest of contents of the field are suggested to the user in a popup
below the field, and the user selects the correct information. The
suggestions are obtained from a dynamic data service (DDS). A common use
case for auto-suggest is entering a household address with suggestions
coming from a geodata DDS.
Here is how the field looks and behaves:
For the autoSuggest widget to work, the widget configuration has to
correspond to the Groovy scripts of the service in the "Service
Definitions" page of Avoka Transaction Manager. In other words, unlike
most widgets in Composer, the necessary service creation and scripting must
already exist in Transaction Manager before the widget can be added to the
form.
The following discusses:
Building an autoSuggest form element from scratch, with a service we have
defined as ACME POST in Transaction Manager
Using predefined widgets and scripts that ship with both Composer and
Transaction Manager for the VEDA
GeoCoder webservice
For further detail on the configuration parameters, refer to
thenotesbelow.
Another widget, the TM Reference Data Lookup Block, also provides lookup
data. The aim of this widget is to give a convenient way to provide an auto
suggest function with no programming. The reference data can be an Avoka
Transact dynamic data service defined in TM (see the Transaction Manager
Administration Guide), or from prepopulated data (see
hereforanexampleofhowyouintroduceprepopulateddataontoaform using a Data Field widget). In this example, we use test data.
The only change we made to the structure built from the block was to build
the "Result" block (3 in-line text fields named according to the
table headings of the CVS test data) and point to it in the
"Configuration" panel. Note the "Complex Reference Data"
checkbox: it is activated because the data is a table with more than 2
column headings.
Which results in the following behavior:
You can have only two columns of data, that is only one pair of data points
per row separated by a single comma. Make sure the Complex Reference Data
checkbox is unchecked.
So, as there are now no headings, the convention is that the left data point
or column is refered to as "display". The right data point or
column is called "data". The default parameters of the
Configuration Panel is to have the left column, "display", as the
"Trigger Field Name"; the right is the "Data Field
Name".
The following tables describes some of the "TM Auto Suggestion
Controller" parameters and gives the default abstracted values provided
off-the-shelf in the "TM Veda Address Lookup Block [Australia] ->
_controller". If you want to change these values, you should do this in
the TM Veda Address Lookup Block [Australia], not in its children.
Note: you still nominate to use test data in the "TM
Veda Address Lookup [Australia] -> _controller -> Data -> Test
Mode" checkbox.
AutoSuggest _controller -> Properties -> Data -> various panels |
Parameter Description |
VEDA Controller Abstracted Value |
Dynamic Data Service Name |
Points to the DDS |
$../{dds.service.name |
Minimum Characters to trigger auto suggest |
The number of keystrokes before the auto-suggest popup appears |
$../{dds.min.chars} |
Continue Typing Message |
A message displayed in grey in the trigger field while the user has still not made a selection from the suggestions presented |
$../{continue.message} |
Not in List Message |
Displayed at the bottom of the suggestions if the typed input in the trigger field is not an exact match to one of the suggestions presented. The user clicks on the message to leave the trigger field. What then happens is determined by the "Clear Trigger Field When Not Matched" checkbox |
$../{notInList.message} |
DDS Fail Message |
Displayed if the service times out. This is usually left blank. |
[blank] |
Clear Trigger Field When Not Matched checkbox |
If the user leaves the trigger field, and the entry does not match any of the suggestions, the field becomes empty. Otherwise, the un-matching entry will remain. The "Not in List Message" will be displayed. |
[checked] |
Second DDS Service Name |
Enables another layer of dependent data to be accessed from a DDS service and receive more auto suggestions in a secondary field. It follows that there are secondary input fields, and that test data can also be pasted into another Test Data field. |
$../{dds.detail.name} |
Timeout |
specifies number of milliseconds before the DDS access fails. This value is usually left as "0". |
0 |
Delay of Triggering DDS (in milliseconds) |
sets the delay before the user input triggers a query on the DDS. If this is set too short, there will be usability issues. |
200 |
This is a special checkbox in "TM Veda Address Lookup Block [Australia]
-> Properties -> Data -> Veda Configuration": the "Hide
Standard Address Block". Its behavior is as follows:
When checked:
When not checked:
In both cases:
Sequence numbers are enabled by these lines at the end of the service
definition Groovy script in Transaction Manager:
// See if there is a queryString holding a sequence number
def value = request.getParameter("seq")
if (value == null || "".equals(value)) {
// The request parameter 'seq' was not present in the query
stringOR
// The request parameter 'seq' was present in the query string but has
no value
return result
} else {
// add the sequence number back on theresult
result += new JSONSerializer().toJSON("{'seq' : '" + value +
"'}") return result
}
If there have been a number of requests made on the DDS, the responses may
not be returned in the same order as the requests. If sequence numbers are
being emitted in response, the value of seq is incremented with each
response, allowing TM to tell if responses came back out of sequence. TM
will then only act on the most recent response, that with highest seq
number.
End users on IE8 can receive multiple alert dialogs. The workaround for this
is setting the "TM Auto Suggestion Controller -> Edit Properties
-> Rules -> Click -> Failure Notification" and choose "Do
Nothing".
Composer now has a "Pagination Block" widget (currently
specifically for Dynamic Data using a "Lookup" button). It is very
simple to add to a form using a Dynamic Data Service with a table in the
result bock:
just drop in a "Pagination Block" onto the form
point the lookup button of the input block of the dynamic data service to
the page controller of the Pagination block
point the page controller of the Pagination block to the lookup button of
the input block We illustrate this by adding pagination to the
ACMEPOSTexample.
Add from the Palette, a "Field Types -> Pagination -> Page
Pagination Block" element. Fill in the resulting dialog:
Note: the "Include Dynamic Data Button" in the
Page Navigation Block is not activated in this example: there is already a
button in the ACMEPOST Dynamic Data block.
And. vice versa, you point the Dynamic Data Service back to the
page navigation structure, via the ACMEPOST Lookup button's "Edit
Properties -> Properties -> Data -> Data -> Page Navigation
Controller".
There must be enough rows of fake data in the result table to activate the
pagination functionality. If so, the preview looks like this:
Please refer to the Responsive Layout section about viewing the result table
on mobile devices. You should give some thought on how you want the table to
appear
intheresponsivelayout thresholds, where each table cell gets its own line instead of being laid out in
rows.