The Interactive Type displays the contents in the form of guide messages. The highlighted feature or element in the application will be surrounded with a border and a guide message, in the form of a tool tip, which provides the description of the element in a subtle way. The guide messages with tool tips are essentially referred as "Coach Marks." The Interactive Type coach marks can be applied only for web applications and hybrid mobile applications. For detailed information on the Static Type coach marks, refer Static Type. Perform the following steps to enable the Interactive Type coach marks for web applications and hybrid mobile applications built using Canvas Technology:

  1. For web apps, open the CT_HOME.jsp file in your project, e.g. …\CTModelHouse\src\main\jsp\CT_Home.jsp.

    For hybrid mobile apps, open the m_CT_Home.jsp file in your project, e.g. …\CTModelHouse\src\main\jsp\m_CT_Home.jsp.


  2. For web applications, specify data-chardin-sequenced="true" inside the body element of CT_HOME.jsp file in your project, as shown in the following code snippet:

    For hybrid mobile apps, you must specify data-chardin-sequenced="true" inside the body element of m_CT_HOME.jsp file in your project.


    <body data-chardin-sequenced="true">


  3. Add the chardinjs.scss file to the appropriate theme folder in your project, e.g. …\CTRIAFramework\src\main\UIArena\theme\system\jqtbs\structure\sass\canvas.

  4. In the same theme folder, in _canvas.scss and _canvas-config.scss files, specify the imported chardinjs, as shown in the following code snippet:

    @import "chardinjs";


  5. Add the chardinjs.min.js plugin to the plugins folder in your project, e.g. …\CTRIAFramework\src\main\javascript\view\jqtbs\plugins.

  6. Specify the path of chardinjs.min.js plugin in the JQTBS_PLUGINS fileset in canvasondemandjs.xml file, as shown in the following code snippet:

    <file url="/CTRIAFramework/javascript/view/jqtbs/plugins/chardinjs.min.js"/>


  7. Comment the "use strict" function in the jquery.mobile-events.js plugin.
  8. Add the canvas.util.coachmarks.js file to the common folder, placed inside the jqtbs folder of your project, e.g. …\CTRIAFramework\src\main\javascript\view\jqtbs\common.

  9. Specify the path of the canvas.util.coachmarks.js file in the jqtbs_CT_VIEW_BASE fileset in canvasondemandjs.xml file, as shown in the following code snippet:

    <file url="/CTRIAFramework/javascript/view/jqtbs/common/canvas.util.coachmarks.js"/>


  10. Add the ct.coachMarks.js file to the appropriate javascript folder in your project, e.g. …\CTModelHouse\src\main\javascript.

  11. Specify the path of the ct.coachmarks.js file in the CT_READY fileset in ondemandjsfiles_lib.xml, as shown in the following code snippet:

    <file url ="/javascript/ct.coachMarks.js"/>


  12. Ensure that the appropriate values and keys are provided in the ct.coachmarks.js file. The following code snippet serves as a sample reference:

    var config = {
	 "type": "interactive", // For web apps and hybrid mobile apps
	 "coachMarks": [{
			"type": "data-item-id",
			"selectorVal": "ct-user-details",
			"msg": "user details",
			"position": "left"

		},
		{
			"type": "data-item-id",
			"selectorVal": "ct_logo",
			"msg": "Canvas logo",
			"position": "bottom"
		}, 	
	],
	 "bundle": "common"
};


    • The type indicates the key of the unique element attribute. Select the element, which you want to highlight as part of coach marks.
    • The selectorval indicates the value of the unique element attribute.
    • The msg indicates the guide messages, which are to be displayed for as tool tips for the highlighted components, which help in providing a proper form of guidance to the users of the application.
    • The position indicates the position of the guide messages. Left, Right, Top and Bottom are the available positions. 
    • If you do not have an unique ID in the form of id, data-item-id, data-widgetid and data-itemid for the selected element, then you can specify the unique attribute key of the selected element in the canvas.util.coachmarks.js file.
    • The sequential order of the listed procedures is based on the order of the selected elements in DOM (Document Object Model).


The following screen shot showcases the User Details in the form of Interactive Type coach marks in a hybrid mobile application: 



The following screen shot showcases the Canvas Logo in the form of Interactive Type coach marks in a hybrid mobile application: