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 images. You cannot apply the Static Type coach marks for hybrid mobile apps and web apps. For detailed information on the Interactive Type coach marks, refer Interactive Type. Perform the following steps to enable the Static Type coach marks for the native mobile applications built using Canvas Technology:

Copy the guide images to the Images folder, placed inside Assets folder of your project, e.g. ...\MobileSource\RNModelHouse\CTModelHouse\assets\images.
Execute the command, "react-native-asset" in the relevant project folder, e.g. ...\MobileSource\RNModelHouse\CTModelHouse.

On executing the "react-native-asset" command, the guide images will get moved to the Custom folder of your project, e.g. ...\android\app\src\main\assets\custom.
Add the CoachMarksComponent.js file to the loginComponent folder of your project, e.g. …\MobileSource\RNModelHouse\CTModelHouse\src\Component\loginComponent.
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.

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(
  {
    AuthFilter: AuthLoadingScreen,
    HomeScreen: drawerNavigate,
    Auth: LoginComponent,
    CoachMarks:CoachMarksComponent, // For specifying the coach marks component
    filterView: filterStackNav,
    DetailsView: detailViewComponent,
    AboutView: aboutViewComponent,
    PdfView: viewPdfComponent,
    ModalWindow: modelStackNavigator,
    WidgetModalWindow: widgetModelStackNavigator,
    mode: "modal",
    sortView: sortStackNav,
    formModal: formWithoutContainer,
    itemSelector: itemSelectorComp,
    formContainerView: formContainerStack,
    pictureUpload: pictureComponent,
    InAppBrowser: InAppBrowserNavigator,
    advGroupList: advGroupStackNav,
    contextMenu: contextMenuStack,
    scannerComponent: ScannerComponent,
  },

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" 
```

Add 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 = function() {
  setTimeout(function () {
    storeInAsyncStorage = async (key, value) => {
      try {
          await AsyncStorage.setItem(key, value);
      } catch (error) {
            // Error saving data
      }
  };
  retrieveFromAsyncStorage = async (key) => {
      try {
          return await AsyncStorage.getItem(key);
      } catch (error) {
            // Error saving data
      }
  };
  var checkCM = retrieveFromAsyncStorage("coachMarks");
  checkCM.then(
      result => {

          if (result != "false") {
              storeInAsyncStorage("coachMarks", "false");
              var config = {
                "type": "static",
                "coachMarks": [{
                    "topMsg1": "This is the Home Page",
                    "bottomMsg1": "You can find your details here",
                    "img": "homeTop.jpg"
                  },
                  {
                    "topMsg": "This is the Orders Page",
                    "bottomMsg": "Your order details are shown here",
                    "img": "homeBottom.jpg"
                  }

                ]
              };
              CANVASCOACHER.startCoaching(config);
          }


      },
      err => {}
  );

  }, 1000);

}

ct.coachMarksRN();

Add 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:

ct.util.canvasCoacher = (function () {
  /*
   * Adds the intro atrribute based on the selector provided in config
   */
  function addDataIntro(type, selectorVal, msg, position) {
      var element;
      switch (type) {
      case "id":
          element = $("#" + selectorVal);
          break;
      case "data-item-id":
          element = $("[data-item-id=" + selectorVal + "]");
          break;
      case "data-itemid":
          element = $("[data-itemid=" + selectorVal + "]");
          break;
      case "data-widget-id":
          element = $("[data-widget-id=" + selectorVal + "]");
          break;
      case "data-widgetid":
          element = $("[data-widgetid=" + selectorVal + "]");
          break;
      default:
          return false;
          break;
      }
      if (element && element.length == 1) {
          element.attr("data-intro", msg);
          if (position) {
              element.attr("data-position", position);
          }
          else {
              return null;
          }
      }
      else {
          return null;
      }
  }
  /*
   * Starts the coaching
   */
  function start() {
      $('body').chardinJs({
          'attribute': 'data-intro'
      });
      if (true) {
          $('body').chardinJs('start');
      }
  }
  return {
      startCoaching: function (config) {
          if (ct.isEmpty(config.type) || ct.isEmpty(config.coachMarks) || !ct.isArray(config.coachMarks)) {
              return "Please validate your input. Coaching couldn't be started";
          }
          else {
              if (config.type == "static") {
                  if (ct.navigation) {
                      ct.navigation.navigate('CoachMarks', config);
                  }
              }
              else if (config.type == "interactive") {
                  var length = config.coachMarks.length;
                  var bundleName = config.bundle;
                  for (var i = 0; i < length; i++) {
                      var type = config.coachMarks[i].type;
                      var selectorVal = config.coachMarks[i].selectorVal;
                      var msg = config.coachMarks[i].msg;
                      var translatedMsg = CRB.getBundleValue(bundleName, config.coachMarks[i].msg);
                      var position = config.coachMarks[i].position;
                      if (!ct.isEmpty(type) && !ct.isEmpty(selectorVal) && !ct.isEmpty(msg)) {
                          addDataIntro(type, selectorVal, !ct.isEmpty(translatedMsg) ? translatedMsg : msg, position);
                      }
                  }
                  start();
              }
              else {
                  return "Please validate your input. Coaching couldn't be started";
              }
          }
      }
  }
})();
CANVASCOACHER = ct.util.canvasCoacher;

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"; 
```
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 mobile 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: