Configure a Workflow Step


Bird-eye view:

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 Assist 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 Assist Studio:

Custom Script

Select Custom script option from the drop-down list in the Assist Studio. In the displayed window type "return" and paste the copied code snippet.

Expected Result: selector window in the Assist 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 Assist Studio. In the displayed window paste the copied code snippet.

Expected Result: selector window in the Assist 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 Assist Studio. In the displayed window paste the copied code snippet.

Expected Result: selector window in the Assist 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, header, alignment).

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 on" 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.

How to define 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 Assist Studio to preview how the ballon 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.


"Scroll to" and "Optional"

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 steps and moves to the next step if this element doesn't exist.

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.

Did you find it helpful? Yes No

Send feedback
Sorry we couldn't be helpful. Help us improve this article with your feedback.