Dynamically Filling Form Fields

As mentioned earlier, a profile can be specified for each source structure node in the attribute Data profile. This profile dynamically delivers data to the Portal main profile (and ultimately to the Portal form) on request. There are two ways to start a data profile in the form.

  • With a field whose attribute Portal control has the value _submitButton_. The field is then converted to a submit button in the portal.

  • With a field whose attribute Data event has one of the values On change, Initial or Initial & on change. You can set the Input delay in the Input Agent, which determines how fast the entered value is passed.

Portal Main Profile

The following screenshot shows an example of the first option. Try to recreate the profile. You already know the steps of the previous phases.

images/download/attachments/36575013/Portal_6c_EN-version-1-modificationdate-1567062068000-api-v2.png

Set all field attributes Show in list to Yes (except for field get_items) and use value _hAlign_ for the attribute Portal control of node Order_Header to make the form a little bit more neatly arranged.

Since we do not need a list for the Order_Header in the form, we set the Maximum for the corresponding node in the profile to 1.

Do not worry about the destination structure in this example. Just click on the 1:1 button when you are done with the source structure.

The goal is to dynamically read out the customer ID and the items for an order number and enter it in the form. In addition, we want to load the existing order numbers into a selection list during initial loading.

Profile Portal_data_profile is assigned to the second node via the attribute Data profile (1).

The attribute Portal control of the input structure field get_items (2) has the value _submitButton_ and that of the field customer_id has the value _readOnly_, i.e. it is not editable and will only be filled.

The form then looks like in the following screenshot. Of course, you can use the previously described localisation to make the labels of the form a little nicer.

When the form is loaded, the order numbers are initially loaded into the selection list. If an order number is selected there, the items and the customer ID are automatically loaded. Both actions start the data profile Portal_data_profile. The button get_items also starts the data profile (even if this is not needed directly here). If you delete one of the articles, you can reload it with the button.

images/download/attachments/36575013/Portal_3-version-3-modificationdate-1567045771000-api-v2.png

Data Profile

Create a new profile Portal_data_profile, select the Input Agent Manual Upload in phase 1 and document type JSON in phase 2.

images/download/attachments/36575013/Portal_8-version-5-modificationdate-1567061767000-api-v2.png

Source Structure

The data profile must contain the same node (same name) in the source structure that it is assigned to in the main Portal profile (Order_Header here). In addition, the fields you want to use need to have identical names as well, but you do not need to use all the fields. Note: If a Portal main profile field has the value _keepInSession_ in attribute Portal control, it is also transferred to the data profile, regardless of where it is in the main Portal profile.

Destination Structure

The destination structure of a data profile has the two nodes data and dataProvider.

All field values in node data (must always have this name and must always value 1 for attribute Maximum!) are returned to the fields of the same name in the Portal main profile. You can fill tables as shown with the Order_Item node. In the destination structure, you can repeat this node as many times as you like using the node attribute Path and an Integer variable to create any number of table rows. Simply have a look at the example profiles below.

Nodes in top-level node dataProvider (must always have this name and must always value 1 for attribute Maximum!) provide a selection list (assigned by name) in the form (here order_number). The corresponding field in the source structure of the Portal main profile needs to have value * in attribute Allowed values.

There are two possibilities.

  • You can specify the values of the selection list in a node with any number of fields. The values of the fields will be the selection values. See node order_number#2 in the example (the node must have the name size, the suffix #2 is ignored). The node attribute Maximum must have the value 1. Important note: The values that are sent to the Portal main profile are the field names! So A or B in this example. The field values only act as labels! Note: In the example, node order_number#2 is inactive (node attribute Inactive has value Yes), since only one node order_number (one method) may be used.

  • In the second variant (node order_number#1 in the example), you use a field value that contains the value that is sent to the Portal main profile and a field label that provides the value for the selection list. You can create the node as many times as you need with node attribute Path. Use value 99999 for the node attribute Maximum.


Then please use the JsonCreationUnit in phase 5 of the data profile, create a Response Route of type Custom class with class DefaultWebServiceResponse and set the Content to Content of IU. Do not forget to activate the profile before you save it.

General Procedure

The general procedure is as follows. Initially, when changing values (order_number here), or by pressing the button, the data profile is started via the corresponding node in the Portal main profile. In the source structure (which is syntactically similar to the source structure of the Portal main profile), the data profile receives the entered data from the Portal form. The destination structure of the data profile generates the data that is returned to the Portal main profile and ultimately to the Portal form. The communication between the Portal main profile and the data profile is done internally via JSON and is normally not visible. Note: If you want to view the JSON data (e.g. for troubleshooting during development) that is sent from the data profile to the Portal main profile (internally), you can create an additional Response Route of type File with set option Is backup of target data in the data profile (set the Content to Content of IU). You can then view the backup of the output file in the Control Center. Note: Regardless of the settings in the data profile, backups of the input data are deleted immediately after the successful completion of the respective job. This does not happen if the checkbox Trace messages for phase 1 is set (see section Profile Logging).

Example Profiles

Simply import the following two profiles and set them on active. You can then reach the portal at the URL http://<IP_or_URL_of_Lobster_data_or_DMZ/portal (e.g. http://localhost/portal). Note: In our profiles, we only work with fix values to keep the example simple. In a real application, you would rather read the data from a database and then write it back to a database.