Connecting unmapped data service

It is possible to connect with unmapped server repositories using the Server field in the web extension menu found at the top right of your browser. This could be useful for authors connecting to sandbox guide repositories etc that should not be used by the overall user community.

1. Click the extensions menu

2. Click “Light My Way“ icon

3. Enter server URL with domains and press ENTER

4. “Connected successfully” should appear in green

Quick disable

If you for some reason want to disable all Light My Way evaluation and rendering there is a quick enable slider available in the web extension menu found at the top right of your browser.

Enabling Author

In the web extension popup you can enable or disable the author mode, using the author mode requires that you also provide the secret author key.

Toggle panel

It is possible to toggle panel tabs to hide or show depending on preference. Toggle is available in the context menu accessed by right clicking somewhere in the target application. Toggle panel could be useful in case the panel is in the way or if you have set your preferred guides and you are only interested in the callouts.

Reposition

The user can move the panel tabs vertically. Reposition could be useful in case the tabs is in the way. Click and hold the tab and drag it up or down to reposition the tabs.

The new position is persisted so that the user preference is stored over sessions and the user do not have to repeat it.

Resize

The user can resize the panel by dragging on the resize button in the bottom left corner.

To reset the size simply click on the reset button next to it.

Toggle on/off

The consumer can toggle guides to be displayed on/off. The toggle state is persisted over time (browser local storage) and allows the user to keep his favorite guides on so that the right instruction automatically appears as the application state is right.

Available guides

To make it easy for users to find help relevant to the current view the guides, with at least one instruction valid for the current view (app statecontexts) is displayed on top.

The user also get aware there is help to get in case the panel tab is minimized. If there is a guide available but it is disabled a shining indication appears on the panel tab.

Finding guides

Users can find instruction guides by a filtering functionality. The filter field opens by clicking the search icon. Entered text will filter down the guide matching the text in labels, description and instruction content. The filter function is cancelled by pressing the arrow and any entered text is cleared by pressing the x.

Description

A detailed description for each guide can be added by the author and is made available to the consumer by expanding an accordion. A good description makes the guide searchable and makes it easy for the consumer to understand what it is about and when it is made available.

Color

To easily differentiate between guides the author can assign different colors.

Guide colors are also displayed next to the guide name in the panel.

Sort Guides

Users can sort guides by color, alphanumerically or “Default sorted” (the order the Author has sorted them by) by clicking the sort icon.
By default the sorting is set to “Default sorted”.

Tags View

By clicking on “Enable TagsView” the guides will be grouped by tags.
For more information about tags see “Tags” below.

Just-in-time delivery

To ensure that the right instruction appear at the right time, all callouts reacts and validates as the application state change.

Instructions valid for the current view and application state automatically appears on screen. With the condition context that its guide is toggled active.

In case of multiple instructions appearing on top of each other. The hovered instruction would go on top.

Dismissing instructions

In case an instruction callout is in the way it can be dismissed by clicking the x. Instruction dismissal is temporary and will appear next session as long as application state and group toggle state still say it should .

Links

Some instructions can contain links. When a link is clicked the content will open in a new browser tab.

Preferences

To increase usability the consumer can control some of the behavior through preferences found at the top right corner of the panel.

UI Preferences

Under the preferences option the user can control callout layout and styling.

Use slim tabs

Make tabs smaller when toggled on.

Flip LMW Panel

This is used to switch side of the panel from the right to the left and vice versa.

You can also flip the panel from the browser context menu by right-clicking the page and navigating to “Light My Way“ → “Flip Panel“.

Refresh

Reloads Light My Way with the latest data.

Tags

Filter listed guides by tags. Toggling tags on/off can be done from the tag icon found at the top right corner. By enabling at least one tag all guides will be filtered down to only include those matching the selected tags. Tag filtering is a good way to hide the guides not of value to you and allow you to focus on the ones that are.

Listing Guides

In the authors tab ‘GUIDES VIEW’ all guides are listed. Using the ‘TAGS VIEW’ guides can be navigated by tag and could be useful making it easy to find guides.

Deleting Guides

To delete a guide click the trash bin icon next to it

Modifying Guides

Clicking the edit icon next to a guide opens a form that allows modification.

Ordering Guides

To change the order of guides simply move the mouse over a guide until you see the movement cursor. You can now use drag and drop to move the guide up or down in the list.

This order will be presented to the Consumer as “Default sorted”.

Creating Guides

Click ‘Create Guide’ from the + menu (found at the top right) to open the create form, fill out the form and click save.

Title

The title is presented to the author and consumer in the list of guides and is used to identify the guide. It is also presented as a header inside the instruction callouts.

Description

The description is presented to the consumer in the list of guides by expanding an accordion.

Tags

A guide can be tagged with one or more tags allowing the consumer to filter out the guides that matters to him. Simply type the desired tags in the tags field to tie the guide with it.

Tags can be maintained in the preference menu later on.

Color

The guide color controls the color of the callouts and also puts a colored circle in guide lists for easy identification.

Blue is the default color.

You can also change the color of a specific instructions by expanding Options and changing the color of that instruction.

Group is the default value, meaning same color as the Guide.

Cloning Guides

Guides as well as Instructions can be cloned using the “Clone“ or ”Clone as” actions. Where the “Clone“ action will create a copy and keeping the cone name, and “Clone as“ action will let you rename the guide/instruction before cloning.

Creating instructions

To create an instruction, go to the authoring tab and click the plus icon on the row of the guide you like to record. Added instructions will be added to the end of the list of instructions of that guide.

Modifying instructions

Find the instruction in the group tree list and click the edit icon next to it. For visible callouts it is possible to open the edit form directly by clicking the edit icon.

Ordering instructions

To change the order of instructions simply move the mouse over an instruction until you see the movement cursor. You can now use drag and drop to move the instruction up or down in the list.

Selecting targets

When adding an instruction, the author is automatically in target selection mode. Press ctrl+click or ctrl+space to submit your selection.

There are two ways of pointing out targets.

Supported targets (green)

The preferred method of selecting target elements is by using one of the built-in and supported green targets. The supported targets identification is carefully considered and maintained as part of the product. Supported targets are quality assured, cleaned off version specifics and html detail so that only a minimum required to identify the element is recorded with the instruction data. The complex and potential changing part is maintained in the configuration as part of the product.

Fall back - XPATH based targets (yellow)

To provide flexibility there is also a fall-back target recording method using xpath. You could see xpath as more of a direct map through the html elements to your target element. Using the flexibility of xpath you can record anything you want but you will also tie your instruction closer to the html and it will be more sensitive to change. More html version specifics will end up in the recorded data. We support this recording method but not the specific targets. Built in with the product is a set of ignored classes attributes etc to generate a good xpath starting point that is likely to work well as a start.

Colored rectangle

During selection a colored rectangle will appear to indicate:

• The element that is targeted for selection

• The status of the selection

Highlight all supported (green) targets

All supported (green) select targets can be highlighted by pressing ctrl + alt

Submitting your selection

To complete selection hold control key and left click mouse (ctrl + click) or press space (ctrl + space). Control + space is useful in cases when the target platform reacts to mouse click and prevents recording.

Re-selecting target elements

To re-select the target element, click the ‘SELECT TARGET’ button below the ‘Target element’ label found at the top of the instruction form.

Advanced innerText controls

To use advanced innerText controls, select a supported target element that is using innerText, then open the target details form and you will be able to change the behaviour of innerText evaluation. If the target element innerText should be equal, contain, startWith or endWith the chosen text.

Callout positioning (anchors)

A callout positioning choice could be done during selection by clicking one of the anchor points (grey small circles) at the edge of the rectangle. For some targets, such has really small ones, the anchor points on target selection are disabled by the administrator.

Callout positioning (panel form)

A callout is possible to position in a number of ways. To select the position, use the drop down. Default position is bottom.

Note that the anchor point could be assigned during target selection (see ‘Selecting Target Elements’).

Callout positioning (offset)

A callout can also be re-positioned from its anchor position with horizontal and vertical offset (+/- in pixels).

Preview instructions

While creating or modifying instruction an instant preview is made available. The preview instantly reacts and displays changes in text just as the consumer would see it.

Instruction text

Instructions has two fields. The title renders in bold and the description renders as paragraph and is suitable for longer texts.
The description field features a rich text editor which allows you to apply basic formatting with links, lists.

Links

To add a link to an instruction simply enter the link text and then click on the link icon in the editor to add the URL.

Interactivity

Linked guides

Under “Interactivity” you can add linked guides to an instruction.
This will show up as a button in the bottom part of the callout.

Toggle off current guide

If you toggle on “Toggle off current guide” clicking the button will toggle off the current guide and toggle on the linked guide.

If you don’t toggle on “Toggle off current guide” clicking the button will only toggle the linked guide.

Controlling when instructions are shown

There are various ways to control when an instruction should show.

Contexts

To control when an instruction is shown, it is tied with application state. This is achieved by selecting among a set of built-in app states contexts valid for the current view.

Hovering an app state a context in the list will highlight the element in the current view that the app state context is tied to.

Inside of

There are cases when the target element selection is ambiguous and generates multiple hits in the UI. In such cases you can use “Show inside of” to limit the context.

You can select multiple “Show inside of“ and in that case the callout will be rendered in the first available condition container.

Target state

Some target elements could have a state itself. Such elements can be configured with a target state that controls instruction visibility.

Targeting input fields

Targeting input fields will always present the option to control state. e.g. text field, textarea, checkbox, radio button, select (dropdown), file upload. etc. will all present a state option to the author.

Popup context

If you have placed an instruction in a popup window you get the option to add the opener window app states contexts to control visibility of the instruction.

This is useful since the popup itself usually lack information about the state of the app and with the opener states popup context you can tie the instruction to the state of the app when opening the popup.

Manually selected Context elements (Sequencing by state)

If the built-in standard app states contexts are not enough to control visibility of an instruction, one or more conditional context elements could be used. Target states also apply to conditional manually selected context elements and using it in combination is a powerful way to control sequential flow. Multiple conditional context elements could be used in combination so that all conditions have to be met for the callout instruction to display.

Sequencing (Fall-back)

Display one instruction after another with help of making instructions directly dependent on each other. Select the instruction you want to make a dependency to in the dropdowns. In the case multiple instructions are used as display after / before only one have to be shown to fulfil the requirement. The instruction sequence can be followed multiple times by specifying when the sequence should reset.

Instruction Type

You can change type of the instruction under “Options”.

Types

• Callout: Renders the default callout popover pointing to the selected element.

• Info: Renders the instructions more compact. Then the user will have to actively click the small info symbol to render the full callout.
  Optional: Under “Display Settings” there are additional settings for the Info type:

  • Open on hover: You can toggle “Open on hover” to have the full callout rendered when hovering the instruction instead on having to click.

  • Pulsating icon (enabled by default): If toggled off the info symbol will be static and not animate.

  • Icon type (Info by default): You can select between multiple different icon types e.g. question mark, warning, arrows etc.

• Global Info: Renders a global info overlay on top or bottom of the page (not pointing to a specific element).

Move to another guide

You can change which guide an instruction should belong to.

Validation

To ensure proper data some validation is applied to the instruction create / edit form.

• At least 1 condition context is needed otherwise a warning is displayed

• Title is mandatory

• If used recorded XPATH have to be valid (details found when expanding target element)

Chapters

To easier be able to group Guides together you can create a Chapter. You can add a Guide to a Chapter form the guide edit form or the action menu. Chapters can also have their own sub chapters.

Password

To ensure unauthorized authoring a password is required the first time the author tab is used. The password will be stored in local storage, so you don't have to enter it the next time authoring using the same machine.

Evaluation status

In order to help you understand if and why an instruction is (or isn’t) visible the status of the evaluation is shown to the left of the instruction.

• An open eye icon indicates that the instruction is visible

  • If the icon is yellow the instruction is using XPATH-based targets

• A closed eye icon indicates that the instruction is not visible

  • If the icon is yellow the instruction is using XPATH-based targets

General

To overview all recorded data, export/import or to better support your authors specific recording needs, there is an Admin UI. In the admin UI you can easily create, edit and remove configuration items (e.g. app statescontexts). The admin UI is web based and available with any supported browser.

Edit & Delete

To edit or remove a configuration item simply choose the target platform in the tree list and the configuration item you want to edit or remove.

Add

To add a new configuration item either click on the add button in the tree list under the chosen configuration type or click “+ Add” in the top bar.

History

Check configurations history, e.g. who and when created or modified a UI Condition context or Target Element.

Targets

Targets are the html elements that an instruction is tied with. The instruction callout is positioned relative to the target and is displayed if the target html element is present only. There are two different methods to identify a target element.

Target elements (green targets)

This is the method of the built in and with product supported green targets.

Targets defined this way will be presented in highlight and green to authors (as the supported targets).

Administrators could extend the list of target elements to indicate good target selections to their users.

To create a new target either clone an existing one or add a new one by clicking on the “+ Add” in the top bar and choose “Create New Target”.

CSS-based target formulas

Target elements defined using CSS-based formulas.

Example:

Formula: form[name='frmFormView'] tr{0} td.field
Read value: id

In this case the stored data on the instruction is the id of the parent tr but the selected element will be the child td.field.

This can be done with multiple read values and multiple formulas enabling platform independent targets with different css selectors but same matching unique identifier (read values)

XPATH-based target formulas

Target elements can also be defined using XPATH-based formulas.

Reasons to use XPATH formulas could be that the desired target element has styling: 'pointer-events: none', an overlapping element is blocking the target element with unique identifier or there is some other advanced pathing needed.

Defining a target element using xpath formulas and readvalues is done the same way as with css formulas, however there are some considerations to make a valid xpath.

When using readvalues in xpath formula the index '{0}' is replaced by ` and contains(@attribute, 'attributevalue')` for each readvalue in the formula.

The xpath formula with readvalues must contain some base identifier to make it evaluable without a readvalue.

Examples:

//div[{0}] => //div[ and contains(@attribute,'value')]

✅ //div[@id='topbar' {0}] => //div[@id='topbar'  and contains(@attribute,'value')]

✅ //div[contains(@class,'topbar') {0}] => //div[contains(@class,'topbar')  and contains(@attribute,'value')]

Fields

XPATH based (yellow) targets

To provide flexibility there is also a fall back target recording method using xpath. Using the flexibility of xpath authors can record anything they want but will also tie instruction closer to the html and it will be more sensitive to change. When selecting a yellow fall back element an xpath is automatically generated. Multiple configuration types are used to control how xpaths are generated.

Built in with the product is a set of ignored classes attributes etc to generate a good xpath starting point.

Starting Elements

Starting elements are used to truncate all XPATH before the matching starting element. This to make the stored XPATH nice, clean and less sensitive to context, changes or version.

Starting elements are defined using XPATH.

Fields

Ignore Lists

Ignore lists are used to define the class or attribute names to exclude from the recorded XPATH. This to make the stored XPATH nice, clean and less sensitive to context, session, changes over time or version.

Fields

Ignore By Parent

Ignore by parent is used as ignore lists but will make the configuration valid within the scope of a specific parent only. This would be useful if you like to exclude common attributes like name in a specific scope only but retain it in other places. The name and details fields are used to identify parent elements. Attribute, Classes and Inner text to control ignore behavior in scope of that parent.

Fields

Ignore Anchors

Ignoring anchors points during target selection could be useful for cases when it does not work well. Anchor points could be problematic for very small targets or if the target by script automation disappear as you hover an anchor point and then it makes sense to inactivate it. In these cases you could instead define a default and the author could always control this in the next step using the advanced settings for the instruction.

Fields

Contexts

The list of app states contexts is used by authors to control when an instruction is shown/evaluated. The list of app states of contexts is controlled in the Admin UI and is only presented to the author if available for inclusion with the current target selection.

The app states contexts are configured using CSS selectors.

Fields

Target states

State specific to the selected target element is used to control when a callout should display when the target itself carries state.

The target states are configured using CSS selectors the same way as app statescontexts, but you simply check only for target checkbox.

Focus conditions

Focus conditions are used to limit evaluation within the focused element if present. Very useful to make all other callouts not in the focus group automatically hide as long as the focus condition is fulfilled (e.g. hide background callouts when search is open). Focus is a silent feature and the author is not aware this actually happens behind the scenes.

Focus conditions are configured using CSS selectors.

Fields

Overriding the built-in default configuration

Light My Way comes with a rich set of built-in and supported configurations for target platforms. If for some reason like to override behavior of a built-in configuration it is possible to clone it into your target configuration.

Cloned definitions will be styled italic in the admin UI.

Server Mappings

Server mappings are used to match each repository with a number of environment URL’s. This to allow web extensions to automatically connect with the correct repository. Server mappings can be added from the Global Admin UI upon request.

Fields

Repository

Repositories are commonly used for separating guides and/or config based on state. E.g. one repository could contain “released“ guides for use in production and one could contain guides that are “in progress“ or not completed yet, before they are moved to the production repo to be used by the consumers. (companyName/prod & companyName/dev).

Switch between repositories from extension is done in extension settings.

Create

Create a new repository by clicking the toolbar “+ Add” command, then selecting “Create New Repository“.

Edit

Edit a repository by clicking the edit icon next to the repository name.

Password

The author keys prompted to authors are controlled in the Admin UI. To modify, add or remove author keys click the edit icon next to the repository. Create a new key by typing the key value in the input field and then click the dropdown entry called Create “keyvalue“.

Settings

Example:

{
  evaluateToggledGuidesOnly: false,
  delays: {
    mutationCallback: 250,
    mutationListener: 100,
    scrollListener: 100,
    inputListener: 250
  }
}

Read Only

If “Read Only” is checked the repository wont be editable by the Authors.

Data management

Administrators can view and edit all guide and instruction data from within the Admin UI. Accessing data could be useful in collaboration with Authors, troubleshooting etc. The Data view is accessed from the Data tab found in the top bar.

Data entries using xpath is indicated with yellow.

Import & export

To allow managing configuration and data in SCM tools or to bulk change efficiently using IDE features, it is still possible to edit the configurations JSON data as in previous releases. To do this

1. export the database content to the json format

2. change the files manually

3. delete the database

4. import the json data into a new database

Configuration export

Configurations could be exported from targets. Export could be useful to back up configurations, bulk modifications or storing it in SCM.

Data import / export

Data can be exported and imported from and to targets. This could be useful when moving data from one target to another or if there is a need to bulk modify data in an editor etc. The data export and import commands are available under the ‘Data’ tab found in the top bar.