Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

Version 1 Next »

Enabling Coach Marks for mobile and web applications

Canvas now enables you to enhance the interactive experience of your end applications by providing the Coach Marks feature in the form of an application tour guide. The interactive and extensive experience provided by Coach Marks will be certainly beneficial to the users of your applications, thereby providing a clear and concise picture to them. The Coach Marks feature can be applied for both mobile and web applications.
Canvas offers two types of Coach Marks.

  • The first one is Interactive Type, which can be applied for web applications and hybrid mobile applications.
  • The second type is Static Type, which can be applied only for native mobile applications.

Interactive Type:

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. 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.

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.

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

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

  1. 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._
  2. 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";

  1. Add the chardinjs.min.js plugin to the plugins folder in your project, e.g. …\CTRIAFramework\src\main\javascript\view\jqtbs\plugins.
  2. 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"/>

  1. Comment the "use strict" function in the jquery.mobile-events.js plugin.
  2. 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.
  3. 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"/>

  1. Add the ct.coachMarks.js file to the appropriate javascript folder in your project, e.g. …\CTModelHouse\src\main\javascript.
  2. 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"/>

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

Note: The Coach Marks get rendered in your application on the basis of the provided values, which are passed in the ct.coachmarks.js file. The ct.coachmarks.js file serves as the pivotal part of the coach marks structure.
var config = {
"type": "interactive", // For web apps and hybrid 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.
  • If you do not have an unique data item ID or data widget ID, then you can specify the unique attribute key of the element in canvas.util.coachmarks.js file.
  • The sequential order 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:

Static Type:

The Static Type displays the contents of the guide messages at the top and bottom of the page, with the guide images placed at the centre of the page. The guide messages will get displayed on either side of the image, with the guide messages getting displayed at the top and bottom of the image respectively. The Static Type is exclusively applied only for native mobile applications. While swiping the screen, the guide images are displayed on the center of the application, whereas the guide messages either appear on top or bottom of the displayed messages. You cannot apply the Static Type coach marks for hybrid mobile apps and web apps. Perform the following steps to enable the Static Type coach marks for the native mobile applications built using Canvas Technology:

  1. Add the guide images in the appropriate Custom folder of your project, e.g. …\android\app\src\main\assets\custom.
  2. Add the CoachMarksComponent.js file to the loginComponent folder in your project, e.g. …\MobileSource\RNModelHouse\CTModelHouse\src\Component\loginComponent.
  3. Add the appropriate styles for the coach marks in the structure.scss file placed inside the styles folder of your project, e.g. …\MobileSource\RNModelHouse\CTModelHouse\src\styles.
  4. Specify the Root Navigator in the router.config.js file placed inside the routing folder of your project, e.g. …\MobileSource\RNModelHouse\CTModelHouse\src\routing, as shown in the following code snippet:

export const RootNavigator = createStackNavigator({})

  1. Import the CoachMarksComponent and specify the path of the CoachMarksComponent.js in the same router.config.js file, as shown in the following code snippet:

import CoachMarksComponent from "../component/loginComponent/CoachMarksComponent"

  1. Specify the ct.coachMarksRN class in the CT_READY_RN.js file placed inside the module folder of your project, e.g. …\MobileSource\RNModelHouse\CTModelHouse\src\impl\module, as shown in the following code snippet:

ct.coachMarksRN();

  1. Specify the ct.util.canvasCoacher class in the RN_CT_VIEW_BASE.js placed inside the viewBase folder of your project, e.g. …\MobileSource\RNModelHouse\CTModelHouse\src\viewBase.

CANVASCOACHER = ct.util.canvasCoacher;

  1. Import the Async Storage from the React Native environment to the CT_READY_RN.js file, as shown in the following code snippet:

import { AsyncStorage } from "react-native";

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

Note: The Coach Marks get rendered in your application on the basis of the provided values, which are passed in the CT_READY_RN.js file. The file format of the image needs to be specified for the img class. The CT_READY_RN.js file serves as the pivotal part of the coach marks structure.
var config = {
"type": "static", // For native apps
"coachMarks": [{
"topMsg": "ORDERS PAGE OF GEM",
"bottomMsg": "Here you will get Complete details of your order",
"img": "ORDERPAGE.jpg"
},
{
"topMsg": "ORDERS PAGE OF GEM",
"bottomMsg": "Here you will get Complete details of your order",
"img": "ORDERDETAILS.jpg"
}
]
}
Note:

  • The topMsg indicates the guide messages, which are to be displayed on the top of the guide image.
  • The bottomMsg indicates the guide messages, which are to be displayed on the bottom of the guide image.
  • The img indicates the guide image. It is mandatory for you to specify the appropriate file name of the image with the relevant file format, e.g. ORDERDETAILS.jpg.

The following screen shot showcases the Orders Page in the form of Static Type coach marks in a native mobile application:

  • No labels