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

« Previous Version 2 Next »

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. Copy the guide images to the Assets folder of your project, e.g. ...\MobileSource\RNModelHouse\CTModelHouse\assets
  2. Execute the command, "react-native link asset" in the same Assets folder. 

    On executing the "react-native link asset" command, the guide images will get moved to the Custom folder of your project, e.g. ...\android\app\src\main\assets\custom

  3. Add the CoachMarksComponent.js file to the loginComponent folder of your project, e.g. …\MobileSource\RNModelHouse\CTModelHouse\src\Component\loginComponent.
  4. 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.
  5. 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({}) 
  6. 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" 
  7. 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(); 
  8. 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, as shown in the following code snippet:

    CANVASCOACHER = ct.util.canvasCoacher; 
  9. 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"; 
  10. 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:

    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"
        }
    
        ]
    • The topMsg indicates the guide messages, which are to be displayed on the top of the guide image, e.g. ORDERS PAGE OF GEM
    • The bottomMsg indicates the guide messages, which are to be displayed on the bottom of the guide image, e.g. Here you will get Complete details of your order
    • 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