Abiquo tutorials for onboarding users

popupTitle

String

yes

This attribute specifies the tutorial popup title

"Abiquo tutorials"

welcomeImgUrl

String

no

This attribute specifies if you want to display pictures in the header of the main tutorials page. The path can be absolute or relative

absolute: "http://blog.interdominios.com/wp-content/2008/abiquo.png"

relative: "./config/tutorials/{image_name.extension}"

welcomeText

String

yes

This attribute is for the main tutorial page description, to describe the tutorials, the company, and so on. You can use HTML tags

"Welcome to <strong>Abiquo</strong> Here is the list of all available tutorials"

width

Number

yes

This atrribute specifies the tutorial popup width

500

moreInfoUrl

String

no

If you specify a URL, then a help icon will appear in the tutorial popup, pointing to this attribute value

"http://wiki.abiquo.com"

tutorials

Array

yes

This is the tutorial list array (see below for more details)

[{"name": "Deploy my first application", "file": "deploy_first_vm"}]

translationCodes

Object

no

For a multi-language tutorial popup, add this object with the label you want to translate

{}

translationCodes.
popupTitle

String

no

Add this attribute if you want the title to be translated in multi-language environments. The value must match a translation code in related multi-language files (in lang/lang_en_US_custom.json for example)

"tutorials.popupTitle"

translationCodes.
welcomeText

String

no

Add this attribute if you want the tutorial page description to be translated in multi-language environments. The value must match with a translation code in related multi-language files (in lang/lang_en_US_custom.json for example)

"tutorials.welcomeText"

name

String

yes

This is the name of the tutorial you want to display

"Deploy my first virtual machine"

file

String

yes

This is the name of the file containing all tutorial information. This value must match with the tutorial file name

"deploy_first_vm"

translationCode

String

no

This is for multi-language support. By default, the text displayed for each tutorial will be the name value. You can use this attribute to specify a translation code, but be sure to add the translation code (and its translation) in all required language files, otherwise it will not work correctly.

"tutorial.deploy_first_vm"

steps

Array

true

This is the list of tutorial steps, step attributes are listed below

[{"intro":"Welcome to Abiquo's first tutorial"}]

-

-

-

-

-

intro

String

true

-

This is the only required element and it can be used alone. This is the text displayed to explain the current step.
You can use HTML tags to improve user experience. If you don't specify the element attribute, the step will be added in the middle of the screen: this can be used for the first or final step, for example

"Welcome to <strong>Abiquo</strong><br>The objective of this tutorial is to help you deploy your first <strong>virtual machine</strong><br>You will see that it's very easy and quick :)<br><strong>Let's start!</strong>"

translationCode

String

no

-

This is for multi-language support. By default, the text displayed for each description will be the intro value. You can use this attribute to specify a translation code, but be sure to add the translation code (and its translation) in all required language files, otherwise it will not work correctly.

"tutorial.step.1"

element

String

no

-

The javascript library is designed to highlight a specific UI element, and add a description of this element. This attribute is used to select an HTML element to highlight. Be careful of the following format restrictions:

• Start with '#', indicating that we are searching element by id

• Use '\\' to prevent '-' and '.', because most element IDs are composite names, and these two characters must be escaped

See #How to find the element id/name

-------------------------------------------------------------------------------------------------------

IMPORTANT: element by name

To identify an element by its name, use the following identifyElementBy attribute. Then specify the element attribute with its exact name (you don't need to use # or \\)

-------------------------------------------------------------------------------------------------------

HTML element example: <a id="element.id" name="element_name">I'm a simple link</a>

Search by id

element: "#element\\.id"

Search by name

element: "element_name",
identifyElementBy: "name" 

"#virtualdatacenters\\.tab"

identifyElementBy

String

no

-

This attribute is used to specify that the element should be identified by something other than the id. At the moment, name is the only option.

If you don't use this attribute (default behavior), the element will be identified by id.

name

subElement

Object

no

-

This attribute is used to specify another view element, different from the element to receive the user interaction (see actionType). The format should be as in the element format.

Example

• element: a vapp element in Virtual Datacenter view

• subElement: the enter button, this button should receive the user click action

subElement.
element

String

required if

subElement

• Same as parent element attribute, it's used to specify the id or the name of the subElement which receives the user interaction

"#vdc\\.vapp\\.enter\\-0"

subElement.
getElementBy

String

required if

subElement

This attribute is used to specify that the sub-element should be identified by something other than the id. At the moment, name is the only option.

If you don't use this attribute (default behavior), the sub-element will be identified by id.

name

actionType

String

required if

element

This attribute can control the user action before going to the next step. If you don't specify it, the Next button will always be active and the interaction with the user will be poor.

The actionType can have three values:

• "onclick": this value specifies that the user needs to click the element (or subElement) in order to go to the next step.

• "ondblclick": this value specifies that the user needs to double click the element (or subElement) in order to go to the next step.

• "{event.name}": you can specify an event type to wait for, and automatically go to the next step. For example, when you are creating a virtual appliance, you want to wait for 'virtualAppliance.created' to continue. These events are dispatched in the clientUi, and displayed at the end of this document in the #List of clientUi events

"onclick"

position

String

required if

element

This attribute is for positioning the description element related to the element. Values can be:

• left

• right

• top

• bottom

"bottom"

(In the previous element screenshot, you can see that the description is placed at the bottom of selected element)

blockPrevious

Boolean

no

-

By default, in the description zone, you have three buttons: Exit, Previous and Next. All buttons are available for each step (except Previous in the first step and Next in the last step). With this attribute, you can block the Previous button in specific steps, which can be useful in some cases, for example, when you ask the user to click a button to change the a main view, and you don't want the user to go back to the previous view.

You can also block the Next button, for details, please see the actionType attribute

delayBeforeNextItem

Number

no

-

This attribute can be used to add a timeout before going to the next step. When the library goes to the next step, the next element should exist in the view, otherwise the tutorial will fail. This attribute is very helpful when you are changing the current view and it's necessary to wait until the next element is retrieved from the database and loaded.

The value is in milliseconds

1000

skipStep

Object

no

-

Some steps can be skipped, for example, if the user already did the tutorial, or if a step needs an element to be created, but the element already exists.

"skipStep":{
"existingElement":"vapp",
"identifyElementBy":"name",
"stepsToSkip":2
}

skipStep.
existingElement

String

required if

skipStep

This attribute is to check if an element exists. You can specify the element name or id (check the identifyElementBy attribute)

"vapp"

skipStep.
identifyElementBy

String

required if

skipStep

Use this attribute to specify if the existingElement should be located by name or by id

"name"

skipStep.
stepsToSkip

Number

required if

skipStep

Specify the number of steps to skip if the existingElement is located (the minimum is 1, means to skip this step and go to the next one)

2

-

-

-

-

-

-