Skip to content

Application Designer

If you plan to generate the final application using a template, such as the Mobile Development Kit Template, you can use the Application Designer to customize and enhance the final application.
Customizations are reflected using OData annotations. This allows supported templates to detect them without influencing the direct consumption.

The Application Designer allows you to customize generated input and output screens and to chain multiple sequences together, in order to represent subsequent actions.

Note

As the Application Designer is used to modify and enhance a recording based on its sequences, it is required to do the initial recording beforehand.
However, it is possible to modify a recording after the Application Designer has been used.

Steps to Open the Application Designer

  1. In mobile transaction bridge Recorder navigate to the list of Apps in the left pane (by using the breadcrumb navigation).
  2. Select the More overflow button of the recording you want to enhance.
  3. Select the Application Designer wrench button in the popover menu.

Concepts

The Application Designer shows a visualization of the application flow. Each part of the flow is represented as a node of a graph. The different nodes can interact with each other by being linked together.
Therefore each node can have multiple input and output slots. An output slot can be linked to the input slot of another node. The input slots are located at the left side of a node, while the output slots are located on the right.
In order to create a link between two slots, left-click and hold on any output slot. Drag the cursor to the target input slot and release the mouse button.

Sequence Nodes

The most important part of the application design is Sequence Nodes. A Sequence Node is used to execute a sequence. It is bound to a specific sequence type and therefore has generated input and output slots based on the sequence definition:

  • There is one input slot for each input parameter.
  • There is one output slot for each output field.

This allows the output of one sequence to feed into the input of another Sequence Node. By doing so, the generated app provides an action from the result screen of the first sequence to invoke the second sequence.

The Application Designer distinguishes between sequences placed on the home screen and subsequent action.
Sequences are accessible from the root of the generated app. Actions are only accessible in result screens.

By default, there is one corresponding node for each sequence placed on the home screen. Subsequent nodes can then be added manually.

Steps to Create a Subsequent Sequence Call

Given there is a sequence node output screen, from which you want to initiate another sequence:

  1. Perform a right-click on an empty area.
  2. Select Sequences in the context menu. A list of all sequences is displayed.
  3. Select the sequence you want to add as subsequent action. A new node is created.
  4. Connect the output properties you want to link to the input of the new node one by one.
  5. Optionally, customize the name of the created action by selecting the node and changing the Name in the property pane located at the right side.

Note

On the output screen of the first node there is a button that triggers the second sequence.
Unbound input properties are mapped to null.

It is also possible to create multiple actions for one sequence. This creates multiple buttons on the output screen. However, the input properties of a sequence can only refer to the output of a single sequence.

Example Sequence Call

List Item Actions

If an output field of a sequence is a list, it is not possible to feed the value directly into another sequence due to the fact, that a sequence can't accept lists as input.
However, it is possible to define a press action for each individual list item. If the user clicks on a list item later on, the triggered sequence can access the properties of the selected list item.

Steps to Create a List Item Action

Given there are already two sequences, one having a list output and another one used as target action:

  1. Perform a right-click on an empty area.
  2. Select Aggregations and then List Item Action in the context menu. A new node is created with a single input called List.
  3. Connect the list output from the first sequence to the List input of the List Item Action node. The node updates its output properties according to the type of list.
  4. Connect the desired output fields of the List Item Action to the target sequence. Each of those properties is evaluated in the context of the pressed item later on.

Example List Item Action

On-Success Events

To execute multiple sequences one after another, the OnSuccess event of a Sequence Node can be used to chain multiple nodes together. The event is emitted as soon as the sequence execution has been completed successfully. In contrast to regular sequence executions invoked by a user interaction, sequences triggered by an event can also access the output of the previous sequence.

When chaining multiple sequences together, only the output of the last sequence is displayed. Therefore, it is mainly used to combine sequences with and without output. By doing so, sequences which do not provide any output data can be triggered while maintaining a good and fluent user experience.
The following example illustrates how to update a user and show the updated profile afterwards. The Update User sequence does not define any output properties. Therefore, after updating the user details, the Get User Detail sequence is triggered in order to display the updated user profile.

Example Usage of Events

Note

All output properties of the Update User node, for example the User property, refer to the first node.
This shows how to access properties from the previous sequence when using events.

Steps to Configure an On-Success Event

Given there are already two sequences, one used as the event emitter and another one used as the receiver:

  1. Connect the OnSuccess event from the first sequence to the Trigger input of the second sequence.
  2. Connect any of the output properties from the first sequence to the input slots of the second sequence. If the first sequence has an ancestor node, its output properties can also be bound to the receiver.

Constant Parameters

In case an input parameter can't be resolved by the previous output and should not be resolved to null, it is possible to define constant values.
For each parameter type there is a dedicated node type:

  • Text / String: String Constant
  • Integer: Integer Constant
  • Decimal Number / Double: Double Constant
  • Boolean: Boolean Constant
  • Null: Null Constant

Steps to Create Constant Parameters

  1. Perform a right-click on an empty area.
  2. Select Constants and then the desired constant type in the context menu. A new node is created with a single output called Value.
  3. Click on the node. The right property pane shows the properties of the Constant Node.
  4. Depending on the type of constant, use the Constant Value field to set the value.
  5. Connect the Value output to the desired input value.

Note

It is possible to re-use a single Constant Node for multiple inputs. However, the node can only output a single value.
In order to use multiple values, simply create multiple Constant Nodes.

Example Constant

Prepopulated Input

By default, the input parameters of a sequence are either bound to a value or to an input field. By using a Prepopulated Input node, it is possible to bind a parameter to a value while still allowing users to modify the value on the input screen.

Instead of binding the value directly to the input parameter, the Prepopulated Input node is put in between. At runtime, the input field will receive its default value from the binding. The user can then decide whether to modify it or to accept the default.

Steps to Create a Prepopulated Input Binding

Given there is already a sequence, which contains the target input parameter as well as a source for the value binding (for example a constant or a sequence output property).

  1. Perform a right-click on an empty area.
  2. Select Modifiers and then Prepopulated Input in the context menu. A new node is created with a single input called Input.
  3. Connect the value which should be used as the default to the Input parameter of the Prepopulated Input node. A new output property is added.
  4. Connect the Output property of the Prepopulated Input to the target input parameter.

Example <!-- spellchecker-disable -->Prepopulated<!-- spellchecker-enable --> Input

Value Helps for Input Fields

In case an input parameter requires a technical ID that is not known by the end user, the F4 Value Help node can be used to provide input suggestions at runtime. The user can then decide whether to enter a value directly or to use the value help dialog.

Note

A dedicated sequence must be recorded that provides at least one output list. Input parameters are optional and can be used to narrow down the search.

It is highly recommended that the sequence does not cause any side-effects, and ends up on the same screen from which it starts.

Steps to Create a Value Help Binding

  1. Perform a right-click on an empty area.
  2. Select Modifiers and then F4 Value Help in the context menu. A new node is created with a single output.
  3. Select the newly created node.
  4. From the property pane on the right side, select the Sequence, List and Column used to provide the value help.
    • At runtime, the sequence is executed and its list is displayed.
    • When a user picks a suggestion, the value of the configured column is used as output value.
  5. Connect the output property of the Value Help to the target input parameter.

Example Value Help

Note

Currently, value helps only take effect for web applications. Generated Mobile Development Kit apps will display a default input field without a value help.

Hide Sequences From the Main Page

By default, all sequence are reachable from the entry screen of the application. In order to improve the usability it might be useful to hide sequences which are not meant to be called directly. Hidden sequences can still be reached as subsequent action.

Steps to Hide a Sequence From the Main Page

  1. Select the sequence you want to hide.
  2. From the property pane on the right side, set the Show on Main Page property to Hide.

Preview the Application

To test the current application it is possible to generate a web preview running in the browser. This allows to verify the behavior and the look and feel without the need of publishing the recording or leaving the Application Designer.

When launching the Application Designer, the preview is presented on the right side of the page. It is interactive and allows to test the application end-to-end. During the design process you can always update the preview using the Save button in the bottom-right corner.

Preview Destinations

As the preview allows to execute the recording, it requires a destination to the target system. If no destination is available, you first have to create a new one.

Steps to Select a Destination

If multiple destinations are available, it is possible to switch between them.

  1. If not already present, navigate to the home screen of the preview by using the Back nav-back button.
  2. Click on the drop-down in the top-right corner of the preview. It has the current destination selected.
  3. Select the desired destination from the drop-down. The preview reloads in order to target the new destination.

Steps to Preview the App in a New Browser Tab

As the side-by-side view might be truncated due to the screen size, it is possible to open the preview in a new browser tab.

  1. Click the Preview App button in the bottom-right corner. A popup is presented showing the list of available destinations.
  2. Select the destination for the preview. A new browser tab opens containing the standalone preview.

Note

A preview running in a separate browser tab always reflects the state during the creation and is not affected by further modifications in the Application Desinger.

The link to the preview can be shared with other people and is valid for 24 hours. After that time the preview is deleted automatically.

Steps to Generate The Application

Once you are done with the application design, you can save the current state using the Save button in the bottom-right corner.
As soon as the application has been saved you can leave the Application Designer by pressing the Back nav-back button in the top-left corner.

To generate the final application, publish the app and start the generator of your choice (for example, use the Mobile Development Kit Template).


Last update: July 1, 2021