Guide to implementing pageguide.js

Guide to implementing pageguide.js

  
pageguide.js is An interactive guide plugin for web page elements.
you can use it to provide on screen help for forms.
demo:http://tracelytics.github.io/pageguide/  also check the attached espace


Create an Entity Contact and use Intelli Warp to generate the Web Screens, as shown below

 
 Step1:  Go to http://tracelytics.github.io/pageguide/           
 
 
 download and extract the contents of the zip file, you will need two files
            pageguide.min.js (from the js subfolder)       
            pageguide.min.css (from the css subfolder)
  
Step2: Create a new Web Block PageGuide

 
Double click the JavaScript property of the Web Block
Scroll to the end and paste this code
 
osjs(document).ready(function() {
        tl.pg.init();
    });

Drag an If Condition onto the Web Block and set  the if condition to False.
In the True Branch of the condition enter the Text pageguide.js
 

(for some reason this post is being truncated, so i'm continuing it in the next post)
   

Step3:Drag the PageGuide Web Block onto the Contact_Edit Web Screen



 
Select the Textbox  next to Name and set its Style to Name



Select the Textbox  next to Email  and set its Style to Email
Select the Textbox  next to Address and set its Style to Address
Select the Textbox  next to Phone and set its Style to Phone
 Select the Save Button and add an additional style called Save

 
 
The styles that you have set are sort of field identifiers for pageguide
 Step 4:Drag an expression to the Web Screen and set its Escape Content property to no
 Paste the following code into the expression
 
"<ul id='tlyPageGuide' data-tourtitle='Online help guide'>
  <li class='tlypageguide_left' data-tourtarget='.Name'>
    <div>
     Enter the Name for the new Contact.This Field is mandatory
    </div>
  </li>
  <li class='tlypageguide_right' data-tourtarget='.Email'>
    <div>
     Enter the Email address of the new Contact
    </div>
  </li>
  <li class='tlypageguide_left' data-tourtarget='.Address'>
    <div>
      Enter the Address of the new Contact
    </div>
  </li>
  <li class='tlypageguide_right' data-tourtarget='.Phone'>
    <div>
     Enter the Phone Number of the new Contact
    </div>
  </li>
  <li class='tlypageguide_left' data-tourtarget='.Save'>
    <div>
     Click Save
    </div>
  </li>
</ul>"

Step 5: Run and test

Tip1#: for more options visit  http://sprintly.github.io/jquery.pageguide/ 
Tip2#: If you want to change the colors, inspect it in chrome and change the css accordingly
Beautiful! Have you tried a green version?
background-color:rgba(247,0,119,0.1) before 
background-color:rgba(247,0,119,0.1) after
rgba(247,0,119,0.9) before
rgba(24,122,19,0.9)  after
rgba(247,0,119,0.95) before
rgba(24,122,19,0.95) after
rgba(247,0,119,0.3) before
rgba(24,122,19,0.3) after
rgba(247,0,119,0.1) before
rgba(24,122,19,0.1) after
#f70077 before
#187a13 after

Best regards
Graça