Configure a Workflow Step

Bird-eye view:

Click to find instructions for creating a Workflow		Adding steps to new or existing Workflows		Covered in this article: Select an element Step heading / description Advance options Balloon position Highlight Options Extended options Entry points and page anchors		Click to learn more about publishing Workflows

How to select an element

Any step of a Workflow is attached to some element of the hosting application (a button, field, drop-down list, etc. ). Apty offers 4 options for selecting an element, one of them representing manual selection by pointing to the element in the browser window, and three others working through element identifiers that can be accessed and retrieved through the Developer tools in the browser.

Element Selection:

At the top of the Apty Studio click Select Element  to define the element on the screen where the balloon will point. The control is transferred to the browser window. Hover over the element you want to start the flow in the hosting application and click it. An Apty balloon will be attached to the selected element of the hosting application.

To help Apty define the selection scope, you can switch between the given modes:

 

Element Selection:

At the top of the Apty Studio click Select Element to define the element on the screen where the balloon will point. The control is transferred to the browser window. Hover over the element you want to start the flow in the hosting application and click it. An Apty balloon will be attached to the selected element of the hosting application. To help Apty define the selection scope, you can switch between the given modes: Narrow Selection Expand Selection

Custom Script CSS Selector XPath

Custom Script, CSS Selector and XPath identifiers can be retrieved by accessing Developer Tools in your browser. To access Developer Tools in Chrome, use the following keyboard shortcuts: Windows: Control+Shift+I Mac: Command+Option+I To access any if the identifiers, follow the steps below: 1.  In the Developer tools switch to the Elements tab. 2.  Choose the "Select an element on the page to inspect it" mode by clicking the  button. 3.  Hover over the required element on the screen. The HTML code of this element is going to be displayed in the Developer Tools area. 4.  Right-click the highlighted element code displayed at the Developer Tools area and in the context menu go to Copy > Copy Selector / Copy JS path / Copy XPath. To use the retrieved identifiers in the Apty Studio: Custom Script Select Custom script option from the drop-down list in the Apty Studio. In the displayed window type "return" and paste the copied code snippet. Expected Result: selector window in the Apty Studio turns green and the ballon is displayed next to the required element in the browser window. CSS Selector Select CSS Selector option from the drop-down list in the Apty Studio. In the displayed window paste the copied code snippet. Expected Result: selector window in the Apty Studio turns green and the ballon is displayed next to the required element in the browser window. XPath   Select XPath option from the drop-down list in the Apty Studio. In the displayed window paste the copied code snippet. Expected Result: selector window in the Apty Studio turns green and the ballon is displayed next to the required element in the browser window.

   

Add / Update Step heading and description

Compose the hint text for the balloon. Steps content may vary from simple one-line hints (for example, "Enter username") to a more complex instructions that may combine text, hyperlinks and images depending on the complexity of the task. The standard toolbar at the top of the text area provides basic text styling (bold, italic, heading, font, and alignment). 

The font can be defined for a given application globally at Admin Console > on the left side bar select application > Customization > User Interface. In the Typography field select a default content font for this application. 

NOTE: If the toolbar at the top of the text area is invisible, click the text area and at the bottom right corner of the text area the T(Toggle Rich Text Editor) button appears, click it to access the styles toolbar.

Advance options

Choose how the end user should proceed to the next step in the ADVANCE ON section:

• Next Button: When the user clicks on the Next button on the balloon, the flow advances to the next step. 
• Click on the element: The flow advances to the next step when the user clicks on the element (i.e., the element on which the step was built). 
• Mouse over the element: The flow advances to the next step when the user moves the cursor over the element.
• Change in element: The flow advances to the next step when the user changes the data in the element; for example, change in value of drop-down lists or checkboxes.
• Input in element: The flow advances to the next step when the user enters any value in the element; for example, a text field.
• Multiple Advance-on Option: Apty clients or partners also get the option to enable more than one Advance-on option depending upon the use case. For instance, if you select both Mouse over the element and Click on the element as Advance-on options for the workflow, then users can either click on the element or just hover over it to go to the next step of the workflow.

• Advance -on by Right-clicking on the element: Apty clients or partners get the option to add the Right-click on the element button as an Advance-on option for your workflows, which means the flow will advance when you use the mouse right-click action.

Balloon position

Define position the position of a Workflow Heading and Description. Apty offers 12 predefined positions to locate the balloon around the element it belongs to. Click on the circles in the Apty Studio to preview how the balloon is going to look on the hosting web application in the live mode.

Highlight Options

Apty offers step customization to visually match the design of the client application. Upon selecting an element and its highlight options, it is now possible to choose the border color from the palette and preview it live:

• Select the target element HIGHLIGHT OPTIONS  from the following: None, Highlight, Blinking, Focus.

• Color choice is available for the Highlight and Blinking Highlight Options as shown on the screen below.

• There are 12 options for positioning the balloon with respect to the element to which it belongs. Balloon positions can be adjusted and previewed live.
  

Extended options

Optionally, check the boxes for required EXTENDED OPTIONS :

• Scroll to: Workflow scrolls the page automatically in alignment with the step balloons.
• Optional: Workflow skips this step and moves to the next step if this element doesn't exist. Also clients or partners can configure the time taken to skip the step by adding the time (in seconds) in the text box provided below the optional check box.
• Display when outside the viewport: This option enables the user to see the balloon even if 100% of element is not visible on screen.

Entry points and page anchors

If this step starts from a new page with respect to previous elements of a Workflow, check the Mark as Entry Point box.

To Mark as Entry point, first we need to define the page from which we have to start the balloon or workflow from. To define a page we need to Create a Frame. To know about how to create a frame, refer to What is a Frame? and the consecutive articles in that section.