Steps
- Download the following files fromĀ GitHub - xbsoftware/enjoyhint
- enjoyhint.css
- enjoyhint.min.js
- Upload both of the files into your app at Properties & Export > Add Resource
- 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>
During runtime, once you open the form you will see the EnjoyHint hints.
Reference
Download Demo App
Download theĀ demo app with examples of using EnjoyHint. It also includes customizable hints from a lookup table as well.
Attachments:


