Versions Compared

Version Old Version 9 New Version Current
Changes made by

Lakshminarayanan1 S CTOO (Unlicensed)

Lakshminarayanan1 S CTOO (Unlicensed)

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

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

    Note

    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:

    Note

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


    Code Block
    languagebash
    <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:

    Code Block
    languagesass
    @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:

    Code Block
    languagexml
    <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:

    Code Block
    languagexml
    <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:

    Code Block
    languagexml
    <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:

    Code Block
    languagejs
    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"
};


    Note
    • 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).


...