Documentation

Module

Interactive Guide

// TODO: Add common description for all guide steps options and implementation of a guide.

View Source guides/index.js, line 1

Members

# static Options

Common options for configuring a guide step. These options control the behavior and appearance of steps within a guide and applied to all steps.

Individual steps can define additional options on top of these common ones as needed.

The options object contains settings, parameters, and configurations passed from the guide definition, and they are used by the step to determine its behavior, content, and placement.

Properties:
Name Type Attributes Default Description
translatedGuideName string

The translated name of the interactive guide to which this step belongs. Represents the localized name of the guide currently in progress.
translatedGuideDescription string

The translated description of the interactive guide to which this step belongs. Represents the localized description of the guide currently in progress.
title string

A string that will be displayed as the step title in the dialog header.
content string

The main content displayed in the dialog body.
extraContent string

A string displayed as additional content below the main content in the dialog body.
elementSelector string <optional>

A CSS selector for the element that should be highlighted when this step is active.
placement string <optional>
 'bottom'

A string that defines where the step dialog should be placed relative to the highlighted element:

  • auto | auto-start | auto-end
  • top | top-start | top-end
  • bottom | bottom-start | bottom-end
  • right | right-start | right-end
  • left | left-start | left-end
url string <optional>

A string that defines the URL where the step should be active. If the current URL does not match the step URL, the guide will navigate to the step URL before activating the step.
maxWaitTime number <optional>
 3

The maximum time (in seconds) to wait for the element to appear on the screen.
disablePreviousFlow boolean <optional>
 true

A boolean that defines whether the user can go back to the previous step.
skipPoint boolean <optional>
 false

A boolean that defines whether this step can be used as a skip point. When true, a "Skip" button will appear in the dialog, allowing the user to skip the guide from this point. When clicked, the guide will continue at the next step marked as a skip point. If no further skip points are defined, the guide will be finished.
className string <optional>

A string that defines additional CSS classes to be added to the step dialog.
skipButtonLabel Object <optional>

The bundle object, containing the label for the skip button in different languages.

skipButtonLabel = {
    en: 'Skip',
    fr: 'Sauter'
};

View Source guides/options.js, line 1

# static autocomplete-enable-checkbox

The autocomplete-enable-checkbox step shows the user how to enable the autocomplete index in GraphDB.

This step can be configured using the common options defined in Options.

View Source guides/autocomplete/autocomplete-enable-checkbox.js, line 4

Example
```JSON
{
  "guideBlockName": "autocomplete-enable-checkbox"
}
```

# static autocomplete-focus-on-indexing-status

The autocomplete-focus-on-indexing-status step produces a step that describes user that have to wait until indexing finished and shows where they can see the status of autocomplete indexing process.

The autocomplete-focus-on-indexing-status step can be configured using the common options defined in Options.

View Source guides/autocomplete/autocomplete-focus-on-indexing-status.js, line 4

Example
```JSON
{
  "guideBlockName": "autocomplete-focus-on-indexing-status"
}
```

# static enable-autocomplete

The enable-autocomplete guide shows how to use the Autocomplete index view to enable the autocomplete index.

The guide consists of the following steps:

  1. An introduction to the guide.
  2. A step that guides the user to click on the "Setup" main menu.
  3. A step that guides the user to click on the "Autocomplete" sub-menu item.
  4. A step that shows the user how to enable the autocomplete index by clicking a checkbox.
  5. A step that explains the status of the autocomplete index after it has been enabled.

This guide can be configured using the common options defined in Options.

View Source guides/autocomplete/enable-autocomplete.js, line 3

Example
```JSON
{
  "guideBlockName": "enable-autocomplete"
}

# static welcome

The Welcome step produces two steps:

  • The first step onboards users on how to interact with the guide dialogs. It explains the basic concepts, provides hints, and describes the overall purpose of the guide.

  • The second step shows the description for the specific guide being run. The content is passed through the option translatedGuideDescription.

The Welcome step can be configured using the common options defined in Options.

View Source guides/welcome/welcome.js, line 4

Example
```JSON
{
  "guideBlockName": "welcome"
}
```