Steps

  1. Download the following files from GitHub - xbsoftware/enjoyhint
    1. enjoyhint.css
    2. enjoyhint.min.js
  2. Upload both of the files into your app at Properties & Export > Add Resource
  3. Add the following code into CustomHTML


    <script src="https://cdnjs.cloudflare.com/ajax/libs/kineticjs/5.2.0/kinetic.js"></script>
    <link href="#appResource.enjoyhint.css#" rel="stylesheet">
    <script src="#appResource.enjoyhint.min.js#"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-scrollTo/2.1.2/jquery.scrollTo.min.js"></script>
    
    <script type="text/javascript">
        //initialize instance
        var enjoyhint_instance = new EnjoyHint({});
        
        //simple config. 
        //Only one step - highlighting(with description) "New" button 
        //hide EnjoyHint after a click on the button.
        var enjoyhint_script_steps = [
          {
                selector: "input[id='name']", /*modify this to point to input field*/
                event_type: "next",
                description: "This is a hardcoded hint, see CustomHTML",
                showSkip: false
            }, {
                selector: "#section1 > div.form-column > div:nth-child(2)", /*modify this to point to input field*/
                event_type: "next",
                description: "Click here to fill up the date!",
                showSkip: false
            }, 
            {
                selector: "#submit", /*modify this to point to input field*/
                event_type: "next",
                description: "Click the save button once you're done!",
                shape: 'circle',
                radius: 50,
                showSkip: false
            }
        ];
        
            //set script config
            enjoyhint_instance.set(enjoyhint_script_steps);
            
            //run Enjoyhint script
            enjoyhint_instance.run();    
        
    </script>
  4. During runtime, once you open the form you will see the EnjoyHint hints.

Reference

GitHub - xbsoftware/enjoyhint

Download Demo App

Download the demo app with examples of using EnjoyHint. It also includes customizable hints from a lookup table as well.

APP_enjoyhint.jwa

  • No labels