Dynamic Action Plugin using OpenSource JS framework "Stepherd". It´s useful to guide your users through the application, or give your users a first run wizard to explain parts of your app. (https://github.com/HubSpot/shepherd)
This is not an single plugin, instead it contains 3 DA plugins. The Framework shepherd.js is splitted in 3 sections:
- Initialize the guided tour
- Add several tour steps
- Start the guided tour
So the plugins are exactly for this events:
- GuidedTour (New Instance)
- GuidedTour (Add Step)
- GuidedTour (Start Tour)
- Import plugin files "dynamic_action_plugin_de_danielh_gt_newinstance.sql / dynamic_action_plugin_de_danielh_gt_addstep.sql / dynamic_action_plugin_de_danielh_gt_starttour.sql" from source directory into your application
- (Optional) Deploy the CSS/JS files from "server" directory on your webserver and change the "File Prefix" to webservers folder.
On target page create a single Dynamic Action, say "GuidedTour". Event should be set to "Page Load"! This DA has multiple true actions.
Here you can choose 4 shepherd themes / templates for the look&feel. Use this true action, only once. Should have the smallest sequence of all true actions, so it is called first.
This true action adds a step "popup". You can customize it with this values:
- Step title
- Step text
- Button close text
- Button next text
- Position (botton/top/left/right)
- Attach to CCS class: (shepherd is designed to attach the popup to a css class, for example ".t-Body-nav" for navigation menu or ".t-Body-actions" for the action menu on right side. for items use "#P1_ITEM_NAME". Without quotes!)
This true action can be used multiple times. The order/sequences of the true actions are the order in which they are executed.
This true action starts the tour with all steps from before. Put it at the end of all true actions.
- Do all steps as it is described above except using "GuidedTour (Start Tour)" plugin. ("New Instance" and "Add Step" only)
- new DA on button click - type execute Javascript (on page load false)
JS Code:
tour.start();
