{"type":"doc","content":[{"type":"extension","attrs":{"layout":"default","extensionType":"com.atlassian.confluence.macro.core","extensionKey":"toc","parameters":{"macroParams":{},"macroMetadata":{"macroId":{"value":"737a22f4-90bc-4080-b2a3-23e8d6eb4eaa"},"schemaVersion":{"value":"1"},"title":"Table of Contents"}},"localId":"42c6b58c-8d63-4e13-bd39-f00bef7ddef1"}},{"type":"paragraph"},{"type":"panel","attrs":{"panelType":"note"},"content":[{"type":"paragraph","content":[{"text":"This documentation is deprecated","type":"text"}]}]},{"type":"paragraph"},{"type":"bodiedExtension","attrs":{"layout":"full-width","extensionType":"com.atlassian.confluence.macro.core","extensionKey":"excerpt","parameters":{"macroParams":{"atlassian-macro-output-type":{"value":"BLOCK"}},"macroMetadata":{"macroId":{"value":"b3d575e4-fd5d-406e-8cfd-3ec7019ad3e6"},"schemaVersion":{"value":"1"},"title":"Excerpt"}},"localId":"99a65e97-b8de-4ea4-aac7-fae71e7f6931"},"content":[{"type":"paragraph","content":[{"text":"The Tutorials feature enables a system administrator to create custom tutorials for specific user roles.","type":"text"}]},{"type":"paragraph","content":[{"text":"The tutorial system enables you to provide information, focus on a specific Abiquo UI element, and require the user to perform an action in order to continue. Thus you can streamline the process of onboarding users with your own platform walkthroughs.","type":"text"}]},{"type":"paragraph","content":[{"text":"Events and tracers to monitor users working with tutorials will be added in a future version.","type":"text"}]},{"type":"paragraph","content":[{"text":"You can easily customize the sample tutorials or design your own following the instructions below.","type":"text"}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Enable or disable tutorials","type":"text"}]},{"type":"paragraph","content":[{"text":"By default in ","type":"text"},{"text":"new installations","type":"text","marks":[{"type":"strong"}]},{"text":", tutorials are ","type":"text"},{"text":"enabled","type":"text","marks":[{"type":"strong"}]},{"text":" and in ","type":"text"},{"text":"upgraded environments","type":"text","marks":[{"type":"strong"}]},{"text":", tutorials are ","type":"text"},{"text":"disabled","type":"text","marks":[{"type":"strong"}]},{"text":". Sample content is available in all environments.","type":"text"}]},{"type":"paragraph","content":[{"text":"Abiquo displays a tutorial on login when:","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"The Enable tutorials checkbox is marked in Configuration view","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"There is tutorial content in the folder for the user’s role on the UI server","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"The user has not marked the \"Don't show me again checkbox\" in their browser, which sets a cookie to not show the tutorials","type":"text"}]}]}]},{"type":"paragraph","content":[{"text":"Users can manually open the tutorials at any time by clicking the ","type":"text"},{"text":"tutorials","type":"text","marks":[{"type":"strong"}]},{"text":" link at the bottom of the screen.","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"center","width":50.0},"content":[{"type":"media","attrs":{"width":1024,"id":"37dc9f37-d8ca-4151-9773-5cb3552f6b21","collection":"contentId-652336988","type":"file","height":702}}]},{"type":"paragraph"},{"type":"heading","attrs":{"level":2},"content":[{"text":"IntroJs library","type":"text"}]},{"type":"paragraph","content":[{"text":"This feature is based on the ","type":"text"},{"text":"IntroJs","type":"text","marks":[{"type":"link","attrs":{"href":"http://usablica.github.io/intro.js/"}}]},{"text":" library, which has been customized to fit our requirements.","type":"text"}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Architecture","type":"text"}]},{"type":"panel","attrs":{"panelType":"warning"},"content":[{"type":"heading","attrs":{"level":3},"content":[{"text":"Changes to Tutorial Architecture in 3.2.2","type":"text"}]},{"type":"paragraph","content":[{"text":"In Abiquo 3.2.2 and above, the installation of the default Abiquo tutorials will backup the /var/www/html/ui/config/tutorials directory and replace it with a symbolic link to the /opt/abiquo/tutorials directory. However, Abiquo will read the tutorials from /var/www/html/ui/config/tutorials. You can change the symbolic link to point to your own tutorials directory, for example, /opt/abiquo/mytutorials.","type":"text"}]},{"type":"paragraph","content":[{"text":"The manual tutorial installation that you perform as part of the Abiquo 3.2.2 upgrade process will create a backup of the existing directory, a new default tutorials directory and a symbolic link to the default tutorials directory. You can then change this symbolic link to point to your own tutorials directory. ","type":"text"}]}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"'tutorials' content folder in Abiquo 3.2.2 and above","type":"text"}]},{"type":"paragraph","content":[{"text":"Abiquo will read the tutorials from /var/www/html/ui/config/tutorials. This will be a symbolic link to the default Abiquo tutorials content folder or to your own custom content folder.","type":"text"}]},{"type":"heading","attrs":{"level":4},"content":[{"text":"New tutorials content folder and symbolic link","type":"text"}]},{"type":"panel","attrs":{"panelType":"error"},"content":[{"type":"paragraph","content":[{"text":"From Abiquo 3.2.2, the default tutorials content folder has been moved to ","type":"text"},{"text":"/opt/abiquo/tutorials and a symbolic link will be created from /var/www/html/ui/config/tutorials to /opt/abiquo/tutorials ","type":"text","marks":[{"type":"strong"}]}]},{"type":"paragraph","content":[{"text":"Abiquo will create tutorials.backup with existing content as part of the tutorials install or upgrade process. To create your own tutorials content, create a new tutorials folder, for example, /opt/abiquo/mytutorials and create a new symbolic link from /var/www/html/ui/config/tutorials to your directory","type":"text"}]}]},{"type":"paragraph","content":[{"text":"The ","type":"text"},{"text":"tutorials content ","type":"text","marks":[{"type":"strong"}]},{"text":"folder is found under the default Abiquo install folder:","type":"text"}]},{"type":"paragraph","content":[{"text":"By default this will be: ","type":"text"},{"text":"/opt/abiquo/tutorials/","type":"text","marks":[{"type":"strong"}]}]},{"type":"paragraph","content":[{"text":"This folder will contain a folder for each user ","type":"text"},{"text":"role","type":"text","marks":[{"type":"strong"}]},{"text":" with a sample tutorial. ","type":"text"}]},{"type":"codeBlock","content":[{"text":"[root@mjspac /]# tree -d /opt/abiquo\n/opt/abiquo\n|...\n|--- tutorials\n |-- CLOUD_ADMIN\n |-- ENTERPRISE_ADMIN\n |-- USER","type":"text"}]},{"type":"paragraph","content":[{"text":"To create your own tutorials content, create a new tutorials folder, for example, /opt/abiquo/mytutorials and create a new symbolic link from /var/www/html/ui/config/tutorials to your directory. For example:","type":"text"}]},{"type":"codeBlock","content":[{"text":"mkdir /opt/abiquo/mytutorials\nln -s /opt/abiquo/mytutorials /var/www/html/ui/config/tutorials","type":"text"}]},{"type":"heading","attrs":{"level":4},"content":[{"text":"Apache configuration","type":"text"}]},{"type":"paragraph","content":[{"text":"Check the Apache configuration, which by default is at /etc/httpd/conf/httpd.conf. Within the directive ","type":"text"},{"text":"/var/www/html/ui","type":"text","marks":[{"type":"strong"}]},{"text":" , in the Options line, you should enable ","type":"text"},{"text":" FollowSymLinks","type":"text","marks":[{"type":"strong"}]},{"text":" by adding this as an option.","type":"text"},{"text":" ","type":"text","marks":[{"type":"textColor","attrs":{"color":"#ff0000"}}]}]},{"type":"codeBlock","content":[{"text":"\n? ? ? ? Options MultiViews FollowSymLinks","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"'tutorials' content folder in Abiquo 3.2 to Abiquo 3.2.1","type":"text"}]},{"type":"paragraph","content":[{"text":"The ","type":"text"},{"text":"tutorials content ","type":"text","marks":[{"type":"strong"}]},{"text":"folder is found under the UI folder:","type":"text"}]},{"type":"paragraph","content":[{"text":"By default this will be: ","type":"text"},{"text":"/var/www/html/ui/config/tutorials/","type":"text","marks":[{"type":"strong"}]}]},{"type":"paragraph","content":[{"text":"This folder will contain a folder for each user ","type":"text"},{"text":"role","type":"text","marks":[{"type":"strong"}]},{"text":" with a sample tutorial. ","type":"text"}]},{"type":"codeBlock","content":[{"text":"[root@mjspac /]# tree -d /var/www/html/ui/config\n/var/www/html/ui/config\n|-- client-config.json\n|-- tutorials\n |-- CLOUD_ADMIN\n |-- ENTERPRISE_ADMIN\n |-- USER","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"'{role_name}' folders","type":"text"}]},{"type":"paragraph","content":[{"text":"For example, for the ","type":"text"},{"text":"USER ","type":"text","marks":[{"type":"strong"}]},{"text":"role, the tutorials folder contains a ","type":"text"},{"text":"USER","type":"text","marks":[{"type":"strong"}]},{"text":" folder. This folder contains a file named ","type":"text"},{"text":"tutorials.json","type":"text","marks":[{"type":"strong"}]},{"text":" and then a file for each tutorial you want the user to work through. You can see the user role at the bottom of the following filesystem diagram.","type":"text"}]},{"type":"codeBlock","content":[{"text":"[root@mjspac /]# tree /var/www/html/ui/config\n/var/www/html/ui/config\n|-- client-config.json\n|-- tutorials\n |-- CLOUD_ADMIN\n | |-- abiquo_concepts.json\n | |-- appliance_library.json\n | |-- create_infrastructure.json\n | |-- create_tenant.json\n | |-- deploy_first_vm.json\n | |-- trial_license.json\n | |-- tutorials.json\n |\n |-- ENTERPRISE_ADMIN\n | |-- appliance_library.json\n | |-- deploy_first_vm.json\n | |-- enable_team.json\n | |-- quick_ent_admin_view.json\n | |-- tutorials.json\n |\n |-- USER\n |-- deploy_first_vm.json\n |-- quick_user_view.json\n |-- tutorials.json","type":"text"}]},{"type":"paragraph","content":[{"text":"To create a new tutorial, for example for a role in your environment called CLOUD_USER, create a folder in the tutorials folder called CLOUD_USER.","type":"text"}]},{"type":"codeBlock","content":[{"text":"[root@api tutorials]# mkdir CLOUD_USER","type":"text"}]},{"type":"paragraph","content":[{"text":"See ","type":"text"},{"text":"Manage Roles","type":"text","marks":[{"type":"link","attrs":{"href":"/wiki/spaces/ABI61/pages/652321868"}}]},{"text":" for more information about user roles.","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"'tutorials.json' file","type":"text"}]},{"type":"paragraph","content":[{"text":"This file will contain some information about the tutorials and the list of available tutorials. The file must be named ","type":"text"},{"text":"tutorials.json","type":"text","marks":[{"type":"strong"}]},{"text":", otherwise it will not work. ","type":"text"}]},{"type":"heading","attrs":{"level":4},"content":[{"text":"General attributes","type":"text"}]},{"type":"table","attrs":{"layout":"full-width","localId":"f8767ed0-cb07-4e24-9121-2a3e1cd7ce81"},"content":[{"type":"tableRow","content":[{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":[140.0]},"content":[{"type":"paragraph","content":[{"text":"Name","type":"text"}]}]},{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":[117.0]},"content":[{"type":"paragraph","content":[{"text":"Type","type":"text"}]}]},{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":[117.0]},"content":[{"type":"paragraph","content":[{"text":"Required","type":"text"}]}]},{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":[975.0]},"content":[{"type":"paragraph","content":[{"text":"Description","type":"text"}]}]},{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":[291.0]},"content":[{"type":"paragraph","content":[{"text":"Example","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[140.0]},"content":[{"type":"paragraph","content":[{"text":"popupTitle","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[117.0]},"content":[{"type":"paragraph","content":[{"text":"String","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[117.0]},"content":[{"type":"paragraph","content":[{"text":"yes","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[975.0]},"content":[{"type":"paragraph","content":[{"text":"This attribute specifies the tutorial popup title","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[291.0]},"content":[{"type":"paragraph","content":[{"text":"\"","type":"text","marks":[{"type":"strong"}]},{"text":"Abiquo tutorials","type":"text"},{"text":"\"","type":"text","marks":[{"type":"strong"}]}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[140.0]},"content":[{"type":"paragraph","content":[{"text":"welcomeImgUrl","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[117.0]},"content":[{"type":"paragraph","content":[{"text":"String","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[117.0]},"content":[{"type":"paragraph","content":[{"text":"no","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[975.0]},"content":[{"type":"paragraph","content":[{"text":"This attribute specifies if you want to display pictures in the header of the main tutorials page. The path can be ","type":"text"},{"text":"absolute","type":"text","marks":[{"type":"strong"}]},{"text":" or ","type":"text"},{"text":"relative","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[291.0]},"content":[{"type":"paragraph","content":[{"text":"absolute: ","type":"text","marks":[{"type":"strong"}]},{"text":"\"","type":"text"},{"text":"http://blog.interdominios.com/wp-content/2008/abiquo.png\"","type":"text","marks":[{"type":"link","attrs":{"href":"http://blog.interdominios.com/wp-content/2008/abiquo.png"}}]}]},{"type":"paragraph","content":[{"text":"relative: \"","type":"text","marks":[{"type":"strong"}]},{"text":"./config/tutorials/{image_name.extension}\"","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[140.0]},"content":[{"type":"paragraph","content":[{"text":"welcomeText","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[117.0]},"content":[{"type":"paragraph","content":[{"text":"String","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[117.0]},"content":[{"type":"paragraph","content":[{"text":"yes","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[975.0]},"content":[{"type":"paragraph","content":[{"text":"This attribute is for the main tutorial page description, to describe the tutorials, the company, and so on. You can use ","type":"text"},{"text":"HTML","type":"text","marks":[{"type":"strong"}]},{"text":" tags","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[291.0]},"content":[{"type":"paragraph","content":[{"text":"\"Welcome to Abiquo Here is the list of all available tutorials\"","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[140.0]},"content":[{"type":"paragraph","content":[{"text":"width","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[117.0]},"content":[{"type":"paragraph","content":[{"text":"Number","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[117.0]},"content":[{"type":"paragraph","content":[{"text":"yes","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[975.0]},"content":[{"type":"paragraph","content":[{"text":"This atrribute specifies the tutorial popup width","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[291.0]},"content":[{"type":"paragraph","content":[{"text":"500","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[140.0]},"content":[{"type":"paragraph","content":[{"text":"moreInfoUrl","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[117.0]},"content":[{"type":"paragraph","content":[{"text":"String","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[117.0]},"content":[{"type":"paragraph","content":[{"text":"no","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[975.0]},"content":[{"type":"paragraph","content":[{"text":"If you specify a ","type":"text"},{"text":"URL","type":"text","marks":[{"type":"strong"}]},{"text":", then a help icon will appear in the tutorial popup, pointing to this attribute value","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[291.0]},"content":[{"type":"paragraph","content":[{"text":"\"http:// ","type":"text"},{"text":"http://wiki.abiquo.com","type":"text","marks":[{"type":"link","attrs":{"href":"http://wiki.abiquo.com/"}}]},{"text":"\"","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[140.0]},"content":[{"type":"paragraph","content":[{"text":"tutorials","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[117.0]},"content":[{"type":"paragraph","content":[{"text":"Array","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[117.0]},"content":[{"type":"paragraph","content":[{"text":"yes","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[975.0]},"content":[{"type":"paragraph","content":[{"text":"This is the tutorial list array (see below for more details)","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[291.0]},"content":[{"type":"paragraph","content":[{"text":"[{\"name\": \"Deploy my first application\", \"file\": \"deploy_first_vm\"}]","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[140.0]},"content":[{"type":"paragraph","content":[{"text":"translationCodes","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[117.0]},"content":[{"type":"paragraph","content":[{"text":"Object","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[117.0]},"content":[{"type":"paragraph","content":[{"text":"no","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[975.0]},"content":[{"type":"paragraph","content":[{"text":"For a multi-language tutorial popup, add this object with the label you want to translate","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[291.0]},"content":[{"type":"paragraph","content":[{"text":"{}","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[140.0]},"content":[{"type":"paragraph","content":[{"text":"translationCodes.","type":"text","marks":[{"type":"strong"}]},{"type":"hardBreak"},{"text":"popupTitle","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[117.0]},"content":[{"type":"paragraph","content":[{"text":"String","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[117.0]},"content":[{"type":"paragraph","content":[{"text":"no","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[975.0]},"content":[{"type":"paragraph","content":[{"text":"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 ","type":"text"},{"text":"lang/lang_en_US_custom.json","type":"text","marks":[{"type":"strong"}]},{"text":" for example)","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[291.0]},"content":[{"type":"paragraph","content":[{"text":"\"tutorials.popupTitle\"","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[140.0]},"content":[{"type":"paragraph","content":[{"text":"translationCodes.","type":"text","marks":[{"type":"strong"}]},{"type":"hardBreak"},{"text":"welcomeText","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[117.0]},"content":[{"type":"paragraph","content":[{"text":"String","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[117.0]},"content":[{"type":"paragraph","content":[{"text":"no","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[975.0]},"content":[{"type":"paragraph","content":[{"text":"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 ","type":"text"},{"text":"lang/lang_en_US_custom.json","type":"text","marks":[{"type":"strong"}]},{"text":" for example)","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[291.0]},"content":[{"type":"paragraph","content":[{"text":"\"tutorials.welcomeText\"","type":"text"}]}]}]}]},{"type":"heading","attrs":{"level":4},"content":[{"text":"Tutorials list array","type":"text"}]},{"type":"table","attrs":{"layout":"full-width","localId":"9d364279-7eb9-43ba-aef2-1333591393ca"},"content":[{"type":"tableRow","content":[{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":[140.0]},"content":[{"type":"paragraph","content":[{"text":"Name","type":"text"}]}]},{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":[117.0]},"content":[{"type":"paragraph","content":[{"text":"Type","type":"text"}]}]},{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":[117.0]},"content":[{"type":"paragraph","content":[{"text":"Required","type":"text"}]}]},{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":[1149.0]},"content":[{"type":"paragraph","content":[{"text":"Description","type":"text"}]}]},{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":[117.0]},"content":[{"type":"paragraph","content":[{"text":"Example","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[140.0]},"content":[{"type":"paragraph","content":[{"text":"name","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[117.0]},"content":[{"type":"paragraph","content":[{"text":"String","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[117.0]},"content":[{"type":"paragraph","content":[{"text":"yes","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[1149.0]},"content":[{"type":"paragraph","content":[{"text":"This is the name of the tutorial you want to display","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[117.0]},"content":[{"type":"paragraph","content":[{"text":"\"Deploy my first virtual machine\"","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[140.0]},"content":[{"type":"paragraph","content":[{"text":"file","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[117.0]},"content":[{"type":"paragraph","content":[{"text":"String","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[117.0]},"content":[{"type":"paragraph","content":[{"text":"yes","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[1149.0]},"content":[{"type":"paragraph","content":[{"text":"This is the name of the file containing all tutorial information. This value must match with the tutorial file name","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[117.0]},"content":[{"type":"paragraph","content":[{"text":"\"deploy_first_vm\"","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[140.0]},"content":[{"type":"paragraph","content":[{"text":"translationCode","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[117.0]},"content":[{"type":"paragraph","content":[{"text":"String","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[117.0]},"content":[{"type":"paragraph","content":[{"text":"no","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[1149.0]},"content":[{"type":"paragraph","content":[{"text":"This is for multi-language support. By default, the text displayed for each ","type":"text"},{"text":"tutorial","type":"text","marks":[{"type":"strong"}]},{"text":" will be the ","type":"text"},{"text":"name","type":"text","marks":[{"type":"strong"}]},{"text":" 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.","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[117.0]},"content":[{"type":"paragraph","content":[{"text":"\"tutorial.deploy_first_vm\"","type":"text"}]}]}]}]},{"type":"heading","attrs":{"level":4},"content":[{"text":"Sample and screenshot","type":"text"}]},{"type":"paragraph","content":[{"text":"This is a sample of a ","type":"text"},{"text":"tutorials.json","type":"text","marks":[{"type":"strong"}]},{"text":" file","type":"text"}]},{"type":"heading","attrs":{"level":5},"content":[{"text":"tutorials.json","type":"text","marks":[{"type":"strong"}]}]},{"type":"codeBlock","content":[{"text":"{\n \"welcomeImgUrl\": \"http://blog.interdominios.com/wp-content/2008/abiquo.png\",\n \"welcomeText\": \"Welcome to Abiquo Here is the list of all available tutorials\",\n \"width\": 1000,\n \"moreInfoUrl\": \"http://http://wiki.abiquo.com\",\n \"tutorials\": [\n {\"name\": \"Deploy my first application\", \"file\":\"deploy_first_vm\"}\n ],\n \"translationCodes\":{\n \"popupTitle\": \"tutorials.popupTitle\",\n \"welcomeText\": \"tutorials.welcomeText\"\n }\n}","type":"text"}]},{"type":"paragraph","content":[{"text":"And a screenshot of the sample tutorials popup in Abiquo","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"center","width":50.0},"content":[{"type":"media","attrs":{"width":1024,"id":"230b98eb-1937-4aa2-af02-65fe121af183","collection":"contentId-652336988","type":"file","height":702}}]},{"type":"paragraph"},{"type":"heading","attrs":{"level":2},"content":[{"text":"Tutorial details","type":"text"}]},{"type":"paragraph","content":[{"text":"We saw how to create tutorials for a group of users (by adding content for their ","type":"text"},{"text":"Role","type":"text","marks":[{"type":"strong"}]},{"text":"). Now let's see how to create new tutorials and how to configure them.","type":"text"}]},{"type":"paragraph","content":[{"text":"Previously, we saw that, in the ","type":"text"},{"text":"tutorials.json","type":"text","marks":[{"type":"strong"}]},{"text":" file, you have to specify the list of available tutorials, by specifying each tutorial name and file. So now you have to create a ","type":"text"},{"text":"JSON","type":"text","marks":[{"type":"strong"}]},{"text":" file for each tutorial, in the same folder where the ","type":"text"},{"text":"tutorials.json","type":"text","marks":[{"type":"strong"}]},{"text":" is located.","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"{tutorial_name}.json file","type":"text"}]},{"type":"paragraph","content":[{"text":"This file must be located in ","type":"text"},{"text":"/config/tutorials/{ROLE_NAME}/ ","type":"text","marks":[{"type":"strong"}]}]},{"type":"heading","attrs":{"level":4},"content":[{"text":"General attributes","type":"text"}]},{"type":"table","attrs":{"layout":"wide","localId":"90158056-0926-43fc-b0c5-4a453c4ea39a"},"content":[{"type":"tableRow","content":[{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":[140.0]},"content":[{"type":"paragraph","content":[{"text":"Name","type":"text"}]}]},{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":[117.0]},"content":[{"type":"paragraph","content":[{"text":"Type","type":"text"}]}]},{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":[117.0]},"content":[{"type":"paragraph","content":[{"text":"Required","type":"text"}]}]},{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":[731.0]},"content":[{"type":"paragraph","content":[{"text":"Description","type":"text"}]}]},{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":[535.0]},"content":[{"type":"paragraph","content":[{"text":"Example","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[140.0]},"content":[{"type":"paragraph","content":[{"text":"steps","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[117.0]},"content":[{"type":"paragraph","content":[{"text":"Array","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[117.0]},"content":[{"type":"paragraph","content":[{"text":"true","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[731.0]},"content":[{"type":"paragraph","content":[{"text":"This is the list of tutorial steps, step attributes are listed below","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[535.0]},"content":[{"type":"paragraph","content":[{"text":"[{\"intro\":\"Welcome to Abiquo's first tutorial\"}]","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[140.0]},"content":[{"type":"paragraph","content":[{"text":"-","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[117.0]},"content":[{"type":"paragraph","content":[{"text":"-","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[117.0]},"content":[{"type":"paragraph","content":[{"text":"-","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[731.0]},"content":[{"type":"paragraph","content":[{"text":"-","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[535.0]},"content":[{"type":"paragraph","content":[{"text":"-","type":"text"}]}]}]}]},{"type":"paragraph","content":[{"text":"As you can see, for now the only attribute should be the ","type":"text"},{"text":"steps","type":"text","marks":[{"type":"strong"}]},{"text":" one, in future releases we will probably add more attributes to improve this feature","type":"text"}]},{"type":"heading","attrs":{"level":4},"content":[{"text":"Step attributes","type":"text"}]},{"type":"table","attrs":{"layout":"full-width","localId":"39708dad-258d-4b56-b396-b77f945cb04a"},"content":[{"type":"tableRow","content":[{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":[150.0]},"content":[{"type":"paragraph","content":[{"text":"Name","type":"text"}]}]},{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":[117.0]},"content":[{"type":"paragraph","content":[{"text":"Type","type":"text"}]}]},{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":[117.0]},"content":[{"type":"paragraph","content":[{"text":"Required","type":"text"}]}]},{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":[117.0]},"content":[{"type":"paragraph","content":[{"text":"Dependency*","type":"text"}]}]},{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":[851.0]},"content":[{"type":"paragraph","content":[{"text":"Description","type":"text"}]}]},{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":[171.0]},"content":[{"type":"paragraph","content":[{"text":"Example","type":"text"}]}]},{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":[117.0]},"content":[{"type":"paragraph","content":[{"text":"Screenshot","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[150.0]},"content":[{"type":"paragraph","content":[{"text":"intro","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[117.0]},"content":[{"type":"paragraph","content":[{"text":"String","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[117.0]},"content":[{"type":"paragraph","content":[{"text":"true","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[117.0]},"content":[{"type":"paragraph","content":[{"text":"-","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[851.0]},"content":[{"type":"paragraph","content":[{"text":"This is the only required element and it can be used alone. This is the text displayed to explain the current step.","type":"text"},{"type":"hardBreak"},{"text":"You can use ","type":"text"},{"text":"HTML ","type":"text","marks":[{"type":"strong"}]},{"text":"tags to improve user experience. If you don't specify the ","type":"text"},{"text":"element","type":"text","marks":[{"type":"strong"}]},{"text":" attribute, the step will be added in the middle of the screen: this can be used for the first or final step, for example","type":"text"}]},{"type":"panel","attrs":{"panelType":"info"},"content":[{"type":"heading","attrs":{"level":3},"content":[{"text":"Unique line","type":"text"}]},{"type":"paragraph","content":[{"text":"You have to put the entire value on a single line. If you are using ","type":"text"},{"text":"HTML","type":"text","marks":[{"type":"strong"}]},{"text":" tags, use ","type":"text"},{"text":"
","type":"text","marks":[{"type":"strong"}]},{"text":"to add some space","type":"text"}]}]},{"type":"paragraph","content":[{"type":"hardBreak"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[171.0]},"content":[{"type":"paragraph","content":[{"text":"\"Welcome to Abiquo
The objective of this tutorial is to help you deploy your first virtual machine
You will see that it's very easy and quick :)
Let's start!\"","type":"text"}]},{"type":"paragraph","content":[{"type":"hardBreak"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[117.0]},"content":[{"type":"mediaSingle","attrs":{"layout":"align-start"},"content":[{"type":"media","attrs":{"width":319,"id":"b2c32d0a-bca8-4cc1-8c5d-b4694f59eb3e","collection":"contentId-652336988","type":"file","height":170}}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[150.0]},"content":[{"type":"paragraph","content":[{"text":"translationCode","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[117.0]},"content":[{"type":"paragraph","content":[{"text":"String","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[117.0]},"content":[{"type":"paragraph","content":[{"text":"no","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[117.0]},"content":[{"type":"paragraph","content":[{"text":"-","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[851.0]},"content":[{"type":"paragraph","content":[{"text":"This is for multi-language support. By default, the text displayed for each ","type":"text"},{"text":"description","type":"text","marks":[{"type":"strong"}]},{"text":" will be the ","type":"text"},{"text":"intro","type":"text","marks":[{"type":"strong"}]},{"text":" 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.","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[171.0]},"content":[{"type":"paragraph","content":[{"text":"\"tutorial.step.1\"","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[117.0]},"content":[{"type":"paragraph","content":[{"type":"hardBreak"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[150.0]},"content":[{"type":"paragraph","content":[{"text":"element","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[117.0]},"content":[{"type":"paragraph","content":[{"text":"String","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[117.0]},"content":[{"type":"paragraph","content":[{"text":"no","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[117.0]},"content":[{"type":"paragraph","content":[{"text":"-","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[851.0]},"content":[{"type":"paragraph","content":[{"text":"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 ","type":"text"},{"text":"HTML","type":"text","marks":[{"type":"strong"}]},{"text":" element to highlight. Be careful of the following format restrictions:","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Start with '","type":"text"},{"text":"#'","type":"text","marks":[{"type":"strong"}]},{"text":", indicating that we are searching element by ","type":"text"},{"text":"id","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Use '\\\\' to prevent '-' and '.', because most element IDs are composite names, and these two characters must be escaped","type":"text"}]}]}]},{"type":"paragraph","content":[{"text":"See ","type":"text"},{"text":"#How to find the element id/name","type":"text","marks":[{"type":"link","attrs":{"href":"#Abiquotutorialsforonboardingusers-Howtofindtheelementid/name"}}]}]},{"type":"paragraph","content":[{"text":"-------------------------------------------------------------------------------------------------------","type":"text","marks":[{"type":"strong"}]}]},{"type":"paragraph","content":[{"text":"IMPORTANT: element by name","type":"text","marks":[{"type":"strong"}]}]},{"type":"paragraph","content":[{"text":"To identify an element by its name, use the following ","type":"text"},{"text":"identifyElementBy ","type":"text","marks":[{"type":"strong"}]},{"text":"attribute. Then specify the ","type":"text"},{"text":"element ","type":"text","marks":[{"type":"strong"}]},{"text":"attribute with its exact name (you don't need to use ","type":"text"},{"text":"# ","type":"text","marks":[{"type":"strong"}]},{"text":"or \\\\)","type":"text"}]},{"type":"paragraph","content":[{"text":"-------------------------------------------------------------------------------------------------------","type":"text","marks":[{"type":"strong"}]}]},{"type":"paragraph","content":[{"text":"HTML element example: ","type":"text","marks":[{"type":"strong"}]},{"text":" I'm a simple link","type":"text"}]},{"type":"paragraph","content":[{"text":" ","type":"text","marks":[{"type":"strong"}]},{"text":"Search by id","type":"text","marks":[{"type":"underline"},{"type":"strong"}]},{"text":" ","type":"text","marks":[{"type":"strong"}]},{"type":"hardBreak"}]},{"type":"paragraph","content":[{"text":"element: ","type":"text","marks":[{"type":"strong"}]},{"text":"\"#element\\\\.id\"","type":"text"}]},{"type":"paragraph","content":[{"text":" ","type":"text","marks":[{"type":"underline"}]},{"text":"Search by name","type":"text","marks":[{"type":"underline"},{"type":"strong"}]},{"text":" ","type":"text","marks":[{"type":"underline"}]}]},{"type":"paragraph","content":[{"text":"element:","type":"text","marks":[{"type":"strong"}]},{"text":" \"element_name\",","type":"text"},{"type":"hardBreak"},{"text":"identifyElementBy:","type":"text","marks":[{"type":"strong"}]},{"text":" \"name\" ","type":"text"}]},{"type":"paragraph","content":[{"type":"hardBreak"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[171.0]},"content":[{"type":"paragraph","content":[{"text":"\"#virtualdatacenters\\\\.tab\"","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[117.0]},"content":[{"type":"mediaSingle","attrs":{"layout":"align-start"},"content":[{"type":"media","attrs":{"width":312,"id":"e4897d86-af90-4747-89ce-365c8f77fbda","collection":"contentId-652336988","type":"file","height":251}}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[150.0]},"content":[{"type":"paragraph","content":[{"text":"identifyElementBy","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[117.0]},"content":[{"type":"paragraph","content":[{"text":"String","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[117.0]},"content":[{"type":"paragraph","content":[{"text":"no","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[117.0]},"content":[{"type":"paragraph","content":[{"text":"-","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[851.0]},"content":[{"type":"paragraph","content":[{"text":"This attribute is used to specify that the element should be identified by something other than the ","type":"text"},{"text":"id","type":"text","marks":[{"type":"strong"}]},{"text":". At the moment, ","type":"text"},{"text":"name","type":"text","marks":[{"type":"strong"}]},{"text":" is the only option.","type":"text"}]},{"type":"paragraph","content":[{"text":"If you don't use this attribute (default behavior), the element will be identified by ","type":"text"},{"text":"id.","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[171.0]},"content":[{"type":"paragraph","content":[{"text":"name","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[117.0]},"content":[{"type":"paragraph","content":[{"type":"hardBreak"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[150.0]},"content":[{"type":"paragraph","content":[{"text":"subElement","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[117.0]},"content":[{"type":"paragraph","content":[{"text":"Object","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[117.0]},"content":[{"type":"paragraph","content":[{"text":"no","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[117.0]},"content":[{"type":"paragraph","content":[{"text":"-","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[851.0]},"content":[{"type":"paragraph","content":[{"text":"This attribute is used to specify another view element, different from the ","type":"text"},{"text":"element","type":"text","marks":[{"type":"strong"}]},{"text":" to receive the user interaction (see actionType). The format should be as in the ","type":"text"},{"text":"element ","type":"text","marks":[{"type":"strong"}]},{"text":"format.","type":"text"}]},{"type":"paragraph","content":[{"text":"Example","type":"text","marks":[{"type":"strong"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"element","type":"text","marks":[{"type":"strong"}]},{"text":": a vapp element in Virtual Datacenter view","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"subElement","type":"text","marks":[{"type":"strong"}]},{"text":": the ","type":"text"},{"text":"enter","type":"text","marks":[{"type":"strong"}]},{"text":" button, this button should receive the user click action","type":"text"}]}]}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[171.0]},"content":[{"type":"paragraph","content":[{"type":"hardBreak"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[117.0]},"content":[{"type":"paragraph","content":[{"type":"hardBreak"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[150.0]},"content":[{"type":"paragraph","content":[{"text":"subElement.","type":"text","marks":[{"type":"strong"}]},{"type":"hardBreak"},{"text":"element","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[117.0]},"content":[{"type":"paragraph","content":[{"text":"String","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[117.0]},"content":[{"type":"paragraph","content":[{"text":"required if","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[117.0]},"content":[{"type":"paragraph","content":[{"text":"subElement","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[851.0]},"content":[{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Same as parent ","type":"text"},{"text":"element","type":"text","marks":[{"type":"strong"}]},{"text":" attribute, it's used to specify the ","type":"text"},{"text":"id","type":"text","marks":[{"type":"strong"}]},{"text":" or the ","type":"text"},{"text":"name","type":"text","marks":[{"type":"strong"}]},{"text":" of the subElement which receives the user interaction","type":"text"}]}]}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[171.0]},"content":[{"type":"paragraph","content":[{"text":"\"#vdc\\\\.vapp\\\\.enter\\\\-0\"","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[117.0]},"content":[{"type":"mediaSingle","attrs":{"layout":"align-start"},"content":[{"type":"media","attrs":{"width":322,"id":"ca4ac11b-e523-4bd0-bec6-f91a2c8870c6","collection":"contentId-652336988","type":"file","height":195}}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[150.0]},"content":[{"type":"paragraph","content":[{"text":"subElement.","type":"text","marks":[{"type":"strong"}]},{"type":"hardBreak"},{"text":"getElementBy","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[117.0]},"content":[{"type":"paragraph","content":[{"text":"String","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[117.0]},"content":[{"type":"paragraph","content":[{"text":"required if","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[117.0]},"content":[{"type":"paragraph","content":[{"text":"subElement","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[851.0]},"content":[{"type":"paragraph","content":[{"text":"This attribute is used to specify that the sub-element should be identified by something other than the ","type":"text"},{"text":"id","type":"text","marks":[{"type":"strong"}]},{"text":". At the moment, ","type":"text"},{"text":"name","type":"text","marks":[{"type":"strong"}]},{"text":" is the only option.","type":"text"}]},{"type":"paragraph","content":[{"text":"If you don't use this attribute (default behavior), the sub-element will be identified by ","type":"text"},{"text":"id.","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[171.0]},"content":[{"type":"paragraph","content":[{"text":"name","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[117.0]},"content":[{"type":"paragraph","content":[{"type":"hardBreak"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[150.0]},"content":[{"type":"paragraph","content":[{"text":"actionType","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[117.0]},"content":[{"type":"paragraph","content":[{"text":"String","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[117.0]},"content":[{"type":"paragraph","content":[{"text":"required if","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[117.0]},"content":[{"type":"paragraph","content":[{"text":"element","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[851.0]},"content":[{"type":"paragraph","content":[{"text":"This attribute can control the user action before going to the next step. If you don't specify it, the ","type":"text"},{"text":"Next","type":"text","marks":[{"type":"strong"}]},{"text":" button will always be active and the interaction with the user will be poor.","type":"text"}]},{"type":"paragraph","content":[{"text":"The ","type":"text"},{"text":"actionType","type":"text","marks":[{"type":"strong"}]},{"text":" can have three values:","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"\"","type":"text"},{"text":"onclick","type":"text","marks":[{"type":"strong"}]},{"text":"\": this value specifies that the user needs to click the ","type":"text"},{"text":"element","type":"text","marks":[{"type":"strong"}]},{"text":" (or ","type":"text"},{"text":"subElement","type":"text","marks":[{"type":"strong"}]},{"text":") in order to go to the next step.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"\"","type":"text"},{"text":"ondblclick","type":"text","marks":[{"type":"strong"}]},{"text":"\": this value specifies that the user needs to double click the ","type":"text"},{"text":"element","type":"text","marks":[{"type":"strong"}]},{"text":" (or ","type":"text"},{"text":"subElement","type":"text","marks":[{"type":"strong"}]},{"text":") in order to go to the next step.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"\"","type":"text"},{"text":"{event.name}","type":"text","marks":[{"type":"strong"}]},{"text":"\": you can specify an event type to wait for, and automatically go to the next step. For example, when you are creating a ","type":"text"},{"text":"virtual appliance","type":"text","marks":[{"type":"strong"}]},{"text":", you want to wait for '","type":"text"},{"text":"virtualAppliance.created","type":"text","marks":[{"type":"strong"}]},{"text":"' to continue. These events are dispatched in the clientUi, and displayed at the end of this document in the ","type":"text"},{"text":"#List of clientUi events","type":"text","marks":[{"type":"link","attrs":{"href":"#Abiquotutorialsforonboardingusers-ListofclientUievents"}}]}]}]}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[171.0]},"content":[{"type":"paragraph","content":[{"text":"\"onclick\"","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[117.0]},"content":[{"type":"paragraph","content":[{"type":"hardBreak"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[150.0]},"content":[{"type":"paragraph","content":[{"text":"position","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[117.0]},"content":[{"type":"paragraph","content":[{"text":"String","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[117.0]},"content":[{"type":"paragraph","content":[{"text":"required if","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[117.0]},"content":[{"type":"paragraph","content":[{"text":"element","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[851.0]},"content":[{"type":"paragraph","content":[{"text":"This attribute is for positioning the ","type":"text"},{"text":"description","type":"text","marks":[{"type":"strong"}]},{"text":" element related to the ","type":"text"},{"text":"element","type":"text","marks":[{"type":"strong"}]},{"text":". Values can be:","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"left","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"right","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"top","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"bottom","type":"text"}]}]}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[171.0]},"content":[{"type":"paragraph","content":[{"text":"\"bottom\"","type":"text"}]},{"type":"paragraph","content":[{"text":"(In the previous ","type":"text"},{"text":"element","type":"text","marks":[{"type":"strong"}]},{"text":" screenshot, you can see that the description is placed at the ","type":"text"},{"text":"bottom","type":"text","marks":[{"type":"strong"}]},{"text":" of selected ","type":"text"},{"text":"element","type":"text","marks":[{"type":"strong"}]},{"text":")","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[117.0]},"content":[{"type":"paragraph","content":[{"type":"hardBreak"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[150.0]},"content":[{"type":"paragraph","content":[{"text":"blockPrevious","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[117.0]},"content":[{"type":"paragraph","content":[{"text":"Boolean","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[117.0]},"content":[{"type":"paragraph","content":[{"text":"no","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[117.0]},"content":[{"type":"paragraph","content":[{"text":"-","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[851.0]},"content":[{"type":"paragraph","content":[{"text":"By default, in the ","type":"text"},{"text":"description","type":"text","marks":[{"type":"strong"}]},{"text":" zone, you have three buttons: ","type":"text"},{"text":"Exit, Previous ","type":"text","marks":[{"type":"strong"}]},{"text":"and","type":"text"},{"text":" Next.","type":"text","marks":[{"type":"strong"}]},{"text":" All buttons are available for each step (except ","type":"text"},{"text":"Previous","type":"text","marks":[{"type":"strong"}]},{"text":" in the first step and ","type":"text"},{"text":"Next","type":"text","marks":[{"type":"strong"}]},{"text":" in the last step). With this attribute, you can block the ","type":"text"},{"text":"Previous","type":"text","marks":[{"type":"strong"}]},{"text":" 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.","type":"text"}]},{"type":"paragraph","content":[{"text":"You can also block the ","type":"text"},{"text":"Next","type":"text","marks":[{"type":"strong"}]},{"text":" button, for details, please see the ","type":"text"},{"text":"actionType","type":"text","marks":[{"type":"strong"}]},{"text":" attribute","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[171.0]},"content":[{"type":"paragraph","content":[{"type":"hardBreak"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[117.0]},"content":[{"type":"paragraph","content":[{"type":"hardBreak"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[150.0]},"content":[{"type":"paragraph","content":[{"text":"delayBeforeNextItem","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[117.0]},"content":[{"type":"paragraph","content":[{"text":"Number","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[117.0]},"content":[{"type":"paragraph","content":[{"text":"no","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[117.0]},"content":[{"type":"paragraph","content":[{"text":"-","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[851.0]},"content":[{"type":"paragraph","content":[{"text":"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 ","type":"text"},{"text":"element","type":"text","marks":[{"type":"strong"}]},{"text":" 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 ","type":"text"},{"text":"element","type":"text","marks":[{"type":"strong"}]},{"text":" is retrieved from the database and loaded.","type":"text"}]},{"type":"paragraph","content":[{"text":"The value is in ","type":"text"},{"text":"milliseconds","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[171.0]},"content":[{"type":"paragraph","content":[{"text":"1000","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[117.0]},"content":[{"type":"paragraph","content":[{"type":"hardBreak"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[150.0]},"content":[{"type":"paragraph","content":[{"text":"skipStep","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[117.0]},"content":[{"type":"paragraph","content":[{"text":"Object","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[117.0]},"content":[{"type":"paragraph","content":[{"text":"no","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[117.0]},"content":[{"type":"paragraph","content":[{"text":"-","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[851.0]},"content":[{"type":"paragraph","content":[{"text":"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.","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[171.0]},"content":[{"type":"paragraph","content":[{"text":"\"skipStep\":{","type":"text"},{"type":"hardBreak"},{"text":"\"existingElement\":\"vapp\",","type":"text"},{"type":"hardBreak"},{"text":"\"identifyElementBy\":\"name\",","type":"text"},{"type":"hardBreak"},{"text":"\"stepsToSkip\":2","type":"text"},{"type":"hardBreak"},{"text":"}","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[117.0]},"content":[{"type":"paragraph","content":[{"type":"hardBreak"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[150.0]},"content":[{"type":"paragraph","content":[{"text":"skipStep.","type":"text","marks":[{"type":"strong"}]},{"type":"hardBreak"},{"text":"existingElement","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[117.0]},"content":[{"type":"paragraph","content":[{"text":"String","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[117.0]},"content":[{"type":"paragraph","content":[{"text":"required if","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[117.0]},"content":[{"type":"paragraph","content":[{"text":"skipStep","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[851.0]},"content":[{"type":"paragraph","content":[{"text":"This attribute is to check if an element exists. You can specify the element ","type":"text"},{"text":"name ","type":"text","marks":[{"type":"strong"}]},{"text":"or ","type":"text"},{"text":"id","type":"text","marks":[{"type":"strong"}]},{"text":" (check the ","type":"text"},{"text":"identifyElementBy","type":"text","marks":[{"type":"strong"}]},{"text":" attribute)","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[171.0]},"content":[{"type":"paragraph","content":[{"text":"\"vapp\"","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[117.0]},"content":[{"type":"paragraph","content":[{"type":"hardBreak"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[150.0]},"content":[{"type":"paragraph","content":[{"text":"skipStep.","type":"text","marks":[{"type":"strong"}]},{"type":"hardBreak"},{"text":"identifyElementBy","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[117.0]},"content":[{"type":"paragraph","content":[{"text":"String","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[117.0]},"content":[{"type":"paragraph","content":[{"text":"required if","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[117.0]},"content":[{"type":"paragraph","content":[{"text":"skipStep","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[851.0]},"content":[{"type":"paragraph","content":[{"text":"Use this attribute to specify if the ","type":"text"},{"text":"existingElement","type":"text","marks":[{"type":"strong"}]},{"text":" should be located by ","type":"text"},{"text":"name ","type":"text","marks":[{"type":"strong"}]},{"text":"or by ","type":"text"},{"text":"id","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[171.0]},"content":[{"type":"paragraph","content":[{"text":"\"name\"","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[117.0]},"content":[{"type":"paragraph","content":[{"type":"hardBreak"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[150.0]},"content":[{"type":"paragraph","content":[{"text":"skipStep.","type":"text","marks":[{"type":"strong"}]},{"type":"hardBreak"},{"text":"stepsToSkip","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[117.0]},"content":[{"type":"paragraph","content":[{"text":"Number","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[117.0]},"content":[{"type":"paragraph","content":[{"text":"required if","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[117.0]},"content":[{"type":"paragraph","content":[{"text":"skipStep","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[851.0]},"content":[{"type":"paragraph","content":[{"text":"Specify the number of steps to skip if the ","type":"text"},{"text":"existingElement","type":"text","marks":[{"type":"strong"}]},{"text":" is located (the minimum is ","type":"text"},{"text":"1","type":"text","marks":[{"type":"strong"}]},{"text":", means to skip this step and go to the next one)","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[171.0]},"content":[{"type":"paragraph","content":[{"text":"2","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[117.0]},"content":[{"type":"paragraph","content":[{"type":"hardBreak"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[150.0]},"content":[{"type":"paragraph","content":[{"text":"-","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[117.0]},"content":[{"type":"paragraph","content":[{"text":"-","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[117.0]},"content":[{"type":"paragraph","content":[{"text":"-","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[117.0]},"content":[{"type":"paragraph","content":[{"text":"-","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[851.0]},"content":[{"type":"paragraph","content":[{"text":"-","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[171.0]},"content":[{"type":"paragraph","content":[{"text":"-","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[117.0]},"content":[{"type":"paragraph","content":[{"type":"hardBreak"}]}]}]}]},{"type":"heading","attrs":{"level":4},"content":[{"text":"Sample","type":"text"}]},{"type":"paragraph","content":[{"text":"Here you can find a sample of a tutorial file","type":"text"}]},{"type":"heading","attrs":{"level":5},"content":[{"text":"Tutorial sample file","type":"text","marks":[{"type":"strong"}]}]},{"type":"codeBlock","content":[{"text":"{\n \"steps\" : [\n {\n \"intro\": \"Welcome to Abiquo
The objective of this tutorial is to help you deploy your first virtual machine
You will see that it's very easy and quick :)
Let's start!\"\n },\n {\n \"element\": \"#virtualdatacenters\\\\.tab\",\n \"intro\": \"In the Virtual Datacenter section, you will manage all you virtual infrastructure, let's begin by clicking this icon

Action Needed:
Click the 'Virtual Datacenters' icon to continue\",\n \"position\": \"bottom\",\n \"actionType\": \"onclick\",\n \"blockPrevious\": true\n },\n {\n \"element\": \"#virtual\\\\-datacenter\\\\-list\\\\-container\",\n \"intro\": \"This is the list of available virtual datacenters, each of them contains some virtual appliances
\",\n \"position\": \"right\",\n \"translationCode\":\"tutorial.step.1\"\n },\n {\n \"element\": \"#vdc\\\\-0\",\n \"intro\": \"Select the 'vdc' virtual datacenter in order to continue with virtual appliance creation

Action Needed:
Select the 'vdc' virtual datacenter\",\n \"position\": \"right\",\n \"actionType\": \"onclick\",\n \"delayBeforeNextItem\": 1000\n },\n {\n \"element\": \"#create\\\\.vapp\",\n \"intro\": \"You can now create a virtual appliance, which contains virtual machines you'll want to deploy

Action Needed:
Click the '+' button\",\n \"position\": \"left\",\n \"actionType\": \"onclick\",\n \"skipStep\":{\n \"existingElement\":\"vapp\",\n \"identifyElementBy\":\"name\",\n \"stepsToSkip\":2\n }\n },\n {\n \"element\": \"#newVirtualApplianceForm\",\n \"intro\": \"Fill all required fields and then click the 'Save' button to create the virtual appliance
\",\n \"position\": \"left\",\n \"actionType\":\"virtualAppliance.created\",\n \"blockPrevious\": true\n },\n {\n \"element\": \"#vdc\\\\.vapp\\\\.list\",\n \"intro\": \"The virtual appliance has been created and you can find it in this list
\",\n \"position\": \"top\",\n \"blockPrevious\": true\n },\n {\n \"element\": \"#vdc\\\\.vapp\\\\-0\",\n \"subElement\": \"#vdc\\\\.vapp\\\\.enter\\\\-0\",\n \"intro\": \"The virtual appliance contains your virtual machines, you need to add at least one to deploy it

Action Needed:
Click the 'enter' button\",\n \"position\": \"top\",\n \"actionType\": \"onclick\",\n \"delayBeforeNextItem\":300\n },\n {\n \"element\": \"#vapp\\\\.vmTemplate\\\\.list\",\n \"intro\": \"A virtual machine is based on a virtual machine template, here you can find all the available template
\",\n \"position\": \"right\",\n \"blockPrevious\": true\n },\n {\n \"element\": \"#vapp\\\\.vmTemplate\\\\-0\",\n \"intro\": \"Let's use this template, please double click on it to use it as a virtual machine (note: you can also drag&drop the template into the virtual machine list on the right)

Action Needed:
Double click the 'm0n0wall' virtual machine template\",\n \"position\": \"right\",\n \"actionType\": \"ondblclick\",\n \"skipStep\":{\n \"existingElement\":\"#vapp\\\\.vm\\\\-0\",\n \"identifyElementBy\": \"id\"\n }\n },\n {\n \"element\": \"#vapp\\\\.vm\\\\.list\",\n \"intro\": \"The virtual machine has been created and now ready to be deployed
\",\n \"position\": \"left\"\n },\n {\n \"element\": \"#vapp\\\\.deploy\",\n \"intro\": \"Now you just have to click the Deploy Virtual Appliance button in order to deploy all virtual machines

Action Needed:
Click the 'Deploy Virtual Appliance' button to continue\",\n \"position\": \"left\",\n \"actionType\": \"onclick\",\n \"delayBeforeNextItem\":1000\n },\n {\n \"element\": \"#vapp\\\\.vm\\\\-0\",\n \"intro\": \"You can see that the virtual machine is being deployed, it will be deployed once the state is 'DEPLOYED'
\",\n \"position\": \"right\"\n },\n {\n \"intro\": \"You can see that the virtual machine is being deployed, you have successfully completed this tutorial

Tutorial completed:
You have deployed your first virtual machine\"\n }\n ]\n}","type":"text"}]},{"type":"heading","attrs":{"level":4},"content":[{"text":"List of clientUi events","type":"text"}]},{"type":"paragraph","content":[{"text":"Here you can find some most useful clientUI events","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"allocationRule.created","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"allocationRule.edited","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"allocationRule.deleted","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"volume.created","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"volume.edited","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"volume.deleted","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"category.created","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"category.edited","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"category.deleted","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"templateDefinitions.created","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"templateDefinitions.deleted","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"virtualDatacenter.created","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"virtualDatacenter.edited","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"virtualDatacenter.deleted","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"virtualAppliance.created","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"virtualAppliance.edited","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"virtualAppliance.deleted","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"user.created","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"user.edited","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"user.deleted","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"storagePools.created","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"storagePools.edited","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"storagePools.deleted","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"storageDevices.created","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"storageDevices.edited","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"storageDevices.deleted","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"physicalMachine.created","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"physicalMachine.discovered","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"physicalMachine.edited","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"physicalMachine.deleted","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"racks.created","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"racks.edited","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"racks.deleted","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"virtualmachine.created","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"virtualMachine.edited","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"virtualMachine.deleted","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"scope.created","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"scope.edited","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"scope.deleted","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"role.created","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"role.edited","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"role.deleted","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"remoteServices.created","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"remoteServices.edited","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"remoteServices.deleted","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"networkServiceType.created","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"networkServiceType.edited","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"networkServiceType.deleted","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"networks.created","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"networks.edited","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"networks.deleted","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"publicip.created","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"publicip.edited","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"publicip.deleted","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"enterprise.created","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"enterprise.edited","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"enterprise.deleted","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"datacenter.created","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"datacenter.edited","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"datacenter.deleted","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"license.created","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"license.requested","type":"text"}]}]}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"How to find the element id/name","type":"text"}]},{"type":"paragraph","content":[{"text":"You can find an ","type":"text"},{"text":"element's id or name","type":"text","marks":[{"type":"strong"}]},{"text":" using your browser. The following sections explain how to do this on Chrome and Firefox, but you can use another browser, inline UI analyzer or whatever software you want.","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Chrome","type":"text"}]},{"type":"paragraph","content":[{"text":"First, open the clientUI in your browser and then press ","type":"text"},{"text":"CTRL + ALT + i ","type":"text","marks":[{"type":"strong"}]},{"text":"to open the ","type":"text"},{"text":"Developer tools","type":"text","marks":[{"type":"strong"}]},{"text":".","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"align-start"},"content":[{"type":"media","attrs":{"width":906,"id":"b36f883d-bfaf-4322-9cf0-759a1e22412c","collection":"contentId-652336988","type":"file","height":819}}]},{"type":"paragraph","content":[{"text":"Then click ","type":"text"},{"text":"Elements","type":"text","marks":[{"type":"strong"}]},{"text":" tab, then the ","type":"text"},{"text":"inspector","type":"text","marks":[{"type":"strong"}]},{"text":" icon and select the element that you want to find out the ","type":"text"},{"text":"id/name","type":"text","marks":[{"type":"strong"}]},{"text":" of.","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"align-start"},"content":[{"type":"media","attrs":{"width":906,"id":"76c1c73f-c022-4d98-8c36-5047fa2708f5","collection":"contentId-652336988","type":"file","height":819}}]},{"type":"paragraph","content":[{"text":"In this example, you can see that the element has the ","type":"text"},{"text":"id = vapp.vm-0","type":"text","marks":[{"type":"strong"}]},{"text":" so you can use it as the ","type":"text"},{"text":"element","type":"text","marks":[{"type":"strong"}]},{"text":" attribute.","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Firefox","type":"text"}]},{"type":"paragraph","content":[{"text":"First, open the clienUI in your browser and then press ","type":"text"},{"text":"F12 ","type":"text","marks":[{"type":"strong"}]},{"text":"to open the ","type":"text"},{"text":"Developer tools","type":"text","marks":[{"type":"strong"}]},{"text":".","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"align-start"},"content":[{"type":"media","attrs":{"width":837,"id":"a4547dad-cfac-483f-9d40-1e34f1ed11b4","collection":"contentId-652336988","type":"file","height":795}}]},{"type":"paragraph","content":[{"text":"Then click ","type":"text"},{"text":"Inspector","type":"text","marks":[{"type":"strong"}]},{"text":" tab, then the","type":"text"},{"text":" ","type":"text","marks":[{"type":"strong"}]},{"text":" ","type":"text"},{"text":"inspector","type":"text","marks":[{"type":"strong"}]},{"text":" icon and select the element you want to know its ","type":"text"},{"text":"id/name","type":"text","marks":[{"type":"strong"}]}]},{"type":"mediaSingle","attrs":{"layout":"align-start"},"content":[{"type":"media","attrs":{"width":837,"id":"4674ee3f-c7a6-492f-9297-a2e15662e34c","collection":"contentId-652336988","type":"file","height":795}}]},{"type":"paragraph","content":[{"text":"In this example, you can see that the element has the ","type":"text"},{"text":"id = vapp.vm-0","type":"text","marks":[{"type":"strong"}]},{"text":" so you can use it as the ","type":"text"},{"text":"element","type":"text","marks":[{"type":"strong"}]},{"text":" attribute.","type":"text"}]}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Troubleshooting tips","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"'Next' button is not enabled when current step is done","type":"text"}]},{"type":"paragraph","content":[{"text":"When creating a new tutorial or even with the bundled ones, in some cases you may experience that 'Next' button is not enabled when current step is done. The Tutorials API expects to find elements like the ones described above to show appropriate dialog boxes but if tutorial dialog box is loaded before all the page content has been loaded, you may experience this issue.","type":"text"}]},{"type":"paragraph","content":[{"text":"To determine if this issue affects your system, you can open the browser JavaScript console and look for the following error message:","type":"text"}]},{"type":"paragraph","content":[{"text":"Uncaught TypeError: Cannot read property 'offsetWidth' of null","type":"text","marks":[{"type":"textColor","attrs":{"color":"#500050"}}]}]},{"type":"paragraph","content":[{"text":"If you see this error, you can easily work around it by adding a delay attribute to the tutorial element step.","type":"text"}]},{"type":"paragraph","content":[{"text":"For example, in the following step, the tutorial is expecting to find the virtualdatacenters tab:","type":"text"}]},{"type":"heading","attrs":{"level":5},"content":[{"text":"Virtualdatacenter's element","type":"text","marks":[{"type":"strong"}]}]},{"type":"codeBlock","attrs":{"language":"html/xml"},"content":[{"text":" {\n \"element\": \"#virtualdatacenters\\\\.tab\",\n \"intro\": \"In the Virtual datacenter section, you will manage all your virtual infrastructure. Let's begin by clicking this icon

Action needed:
Click the 'Virtual datacenters' icon to continue\",\n \"position\": \"bottom\",\n \"actionType\": \"onclick\",\n \"blockPrevious\": true\n },","type":"text"}]},{"type":"paragraph","content":[{"text":"If the 'Next' button is not enabled and the error described above is shown, simply add ","type":"text"},{"text":"delayBeforeNextItem attribute to the element, specifying a delay in milliseconds. For example:","type":"text","marks":[{"type":"textColor","attrs":{"color":"#222222"}}]}]},{"type":"heading","attrs":{"level":5},"content":[{"text":"Virtualdatacenter's element","type":"text","marks":[{"type":"strong"}]}]},{"type":"codeBlock","attrs":{"language":"html/xml"},"content":[{"text":" {\n \"element\": \"#virtualdatacenters\\\\.tab\",\n \"intro\": \"In the Virtual datacenter section, you will manage all your virtual infrastructure. Let's begin by clicking this icon

Action needed:
Click the 'Virtual datacenters' icon to continue\",\n \"position\": \"bottom\",\n \"actionType\": \"onclick\",\n \"blockPrevious\": true,\n\t\t\t\"delayBeforeNextItem\": 1000\n },","type":"text"}]},{"type":"paragraph","content":[{"text":"This will be enough to resolve the issue.","type":"text","marks":[{"type":"textColor","attrs":{"color":"#222222"}}]}]},{"type":"paragraph","content":[{"text":"It is up to you specify a suitable ","type":"text","marks":[{"type":"textColor","attrs":{"color":"#222222"}}]},{"text":"delay value","type":"text","marks":[{"type":"textColor","attrs":{"color":"#222222"}},{"type":"strong"}]},{"text":" depending on the screen and tutorial step, but it would be better to set higher delays than lower ones in order to avoid problems.","type":"text","marks":[{"type":"textColor","attrs":{"color":"#222222"}}]}]}],"version":1}