Examples

There are three examples in this section.

Form With Workflow and ETL

The example below has a form that uses Workflow and ETL.

In this example, a three-page form is created and it involves a workflow. Three Ambience 2021 modules will be required for this example:

  • ETL
  • Workflows
  • Forms

ETL

In the ETL module, create a new ETL chainset named SimpleWorkflow.

Define two chains in the new ETL.

In the “Add To elxPublic” step, key in the fields that need to be made public to pass to the next page and back. In this case, the fields “name” and “address” from the form are used.

Workflow

In the Workflows module, create a new workflow with the name SimpleWorkflow.

Create a three-page workflow and add the transitions as per the screenshot below.

Select the transition page2 to display the properties. In the “OnTransition” field, select “ToPageTwo” ETL chain. This allows the the workflow to call “ToPageTwo” ETL chain when the page2 event is fired.

Form

Create Form

In the Form Management module, create a new form with the name SimpleWorkflow.

In the Form tab, create a three-page form using the workflow defined earlier.

Ensure the “elxState” field uses the value “Main” to align with the Main page in the Workflow created earlier.

Set up the pages are per the screenshots below.

For the “Buttons” field in button-bar1, the syntax is [label]event. If no label is specified, the event name is shown. In this case, the label is “Go to Page Two” and the event is “page2” as per in the Workflow.

For the “Buttons” field in button-bar2, two buttons are added. The labels and events are [Go to Page Three]page3 and [Go to Page One]page1

Page3 simply states the form is submitted successfully.

Refer to the Form for more information on the items and their properties.

Create Rules

In the Rules tab, create rules to dictate how and when some pages or input items appear in the form.

Above is an example of using a rule to display only Page1 of the form instead of showing all 3 pages. You can also add rules to enable or disable parts of the form as well as provide alternate sub-forms based on earlier choices.

Refer to the Rules for more information on how conditions and actions are to be carried out on the form.

Create Workflow Instance

A workflow instance is one “Record” following a template. In this case, the SimpleWorkflow form.

Workflow instances are stored in a collection named by the Workflow, in this example, its SimpleWorkflow that was defined earlier.

This collection does not exist until the first instance is added onto it.

To create an instance, a form URL is used.

http://localhost:1740/form-runtime/<form id>/<workflow id>/create.html

The created URL will redirect you to the form.

http://localhost:1740/form-runtime/<form id>/<workflow id>/index.html

Validation and Test

Validation can be performed before a form is submitted to the workflow.

It is performed by ETL steps, in particular those in the Validation category which produce a “validationIssues” array as a result.

In this example, an validation ETL is created in the ETL module to validate the name that is being input into the form.

In the form, select “ValidationEg” ETL as the “Validator” in the properties of the root.

In each page, a Validator Chain can be assigned. In this case, assign “Name” to page1 of the form.

To test the form, click on the “More Actions” icon at the top row and select “Run Form” from the drop-down list. The form (Page 1) will appear in another tab, allowing you to test the form.

When the input in to the “Name” field is not “John” or “Henry”, an error message will appear.

This will allow you to check and verify the form.

Form With Script

This is an example of a form that uses script to customise a feature. It make use of the last three properties of the root item. IN this example, the script fields are used to customise the colour of some items in the form, as well as a counter function.

First, create a form with the following content.

Ensure the following properties are set up in the respective input fields.

Item Property Setting
html2 HTML Updates: <span id="updates"></span>
text-input1 Input Type “Number”
html1 HTML Reminder is: <span id="reminder"></span>
button-bar1 Buttons [Reset]reset, [Submit]submit

Next is to add the scripts into the three script fields. In the root properties, click on the “Edit (X lines)” button below the field. X represents the number of lines of script in the field. If no script has been added, X is 0. Upon clicking on the button, a dialog box will appear. In the dialog box, key in the script and click on the “Save” button. The number of lines entered will be shown on the button of the respective script fields.

To test the scripts, click on the “More Actions” icon at the top row and select “Run Form” from the drop-down list.

The “Run Form” dialog box will appear. Select “No Workflow” option, since scripts are used.

Click on the “OK” button to run the form. Another tab will appear with the form. The settings in the form is according to the script in the “Before Build Script” field.

The checkbox “Second” in red. Any selection done on the form and the number next to the “Reminder is” field will reduce. These are according to the script in the “After Build Script” field. Make more than five changes in the form and click on the “Submit” button. The results will be submitted with messages according to the script in the “On Action Script” field.

Form with Form Launcher

This is an example on how to create a simple form with form launcher that launch another form. It requires the use of the following modules:

  • ETL
  • Workflows
  • Forms
  • Themes

Create ETL

In the ETL module, create a new ETL chainset named Master-Detail.

Define two chains in the Master-Detail ETL.

Left the steps blank for the time being.

Create Workflows

In the Workflows module, create two workflows.

For the first workflow, name it Master.

Selects eno as the database, Master as the collection and selects Master-Detail chainset in the dialog box.

In the Master workflow, add a new transition named addDetail. In the “OnTransition” field property, selects AddDetail ETL.

For the second workflow, name it Detail.

Selects eno as the database, Detail as the collection and selects Master-Detail chainset in the dialog box.

In the Detail workflow, add a new transition named save. In the “OnTransition” field property, selects SaveDetail ETL.

Create Forms

In the Forms module, creates two forms.

For the first form, name it Detail.

In the Form tab, create a single-page form.

Ensure the “elxState” field uses the value “Main” to align with the Main page in the workflow created earlier. Set up the page as per the screenshot above. The “Save” button is defined as [Save]save so that it will trigger the save transition in the Detail workflow.

For the second form, name it Master.

In the form tab, create a single-page form.

Set up the page as per the screenshot above. The “Form” and “Columns” fields in the form-launcher1 corresponds to the ids from the Detail form. The “Add” button is defined as [Add]addDetail so that it will trigger the addDetail transition in the Detail workflow.

Testing Form IDs

To get the instance of the Master form and workflow, in the Master form designer page, click on the icon top row of the page and select “Run Form” option.

The “Run Form” dialog box will appear. Choose “Master” in the “Workflow” field and click on the “OK” button.

The Master form is generated in another tab. Copy the URL from the address bar. Below is an example.

http://localhost:1740/form-runtime/e6ff3721-aa21-4712-b45e-d4fef9e2fab9/
d002bfe6-f332-4203-b621-0f8726748d01/28b69d13-2a1d-4c7e-a3c0-a12a1b787f5d/index.html

In the Ambience folder, go to the “web” sub-folder. Create a new file named master-detail.html. Key in the following code and replace your URL in place of the placeholder below.

<!DOCTYPE html>
<html>
<head>
   <meta http-equiv="refresh" content="1; URL=/form-runtime/.../.../.../index.html" />
 </head>
 <script>
    window.location.href = "/form-runtime/.../.../.../index.html"
 </script>
 <body>
    This page should redirect to the Master-Detail form.
 </body>
 </html>

In the browser address bar, key in http://localhost:1740/master-detail.html. It will redirect you to the Master form.

Storing The Redirect

You can store the redirect to the Themes module. This way, even if the Ambience is updated, as long as the same MongoDB database is unchanged, the redirect will still work. To do so, remove the master-detail.html file from the “web” folder.

In the Themes module, create a new theme and name it MAster-Detail.

Click on the “Upload” button at the upper right corner of the page.

In the “Upload” page, browse to the location of the master-detail.html file. Left the “Path” field empty (i.e., top level). Click on the “Save” button to save the file.

Go back to the Themes management page. Click on the “Enable” icon under the “Actions” column corresponding the Master-Detail theme.

You can try key in http://localhost:1740/master-detail.html into the address bar of your browser. The Master form page will appear.

Upload ETL

Go to the ETL module to add steps to the two ETL chains that were created earlier.

In the ETL module, select the Master-Detail ETL chainset. Select AddDetail under the “Chains” column. In the “Steps” column, click on the “+” icon to add the required step into the chain.

In the “URL” field, key in /form-runtime/<Form ID>/<Workflow ID>/create.html, where <Form ID> is the ID of the Detail form and <Workflow ID> is the ID of Detail workflow. These IDs can be found in the address bar when editing them.

The Set elxRedirect ETL redirects to the create.html to add new details.

Next, select the SaveDEtail under the “Chains” column. In the “steps” columnm click on the “+” icon to add two steps into the chain.

The Add To elxPublic ETL stores the entered data from the form and the Set elxRedirect ETL redirects to the top level master-detail.html link.

Testing Forms

Test this example by visiting the http://localhost:1740/master-detail.html link. Click on the “Add” button in the Master form to launch the Detail form. Add some details and click on the “Save” button. The Master form will display the details added. Click on these rows to edit them.

Points to note:

  • There is only one Master form instance. You should not keep running “Run Form” on the Master form to create new forms. Only one is needed. Therefore, remember the IDs and create a redirector so the same form can be easily retrieved.
  • The eno:Master collection will only have one record in it, whereas the eno:Detail collection will have a record for every detail being created.
  • Use /form-runtime/<FormID>/<WorkflowID>/create.html to create a new record and show the form for that record.