Completing application-side changes

Complete the instructions for the application-side changes needed to create a hybrid application by using Apache Cordova.

Procedure

Copy the contents of <cordova_project folder>/platforms/<platform>/platform_www to the <Runtime>/extensions/isf/webpages/cordova/<UserAgentName> folder.
- The UserAgentName value is set for the AppendUserAgent attribute preference in the config.xml file.
- If you are creating the project for multiple platforms, repeat the step for each platform.
To load the Cordova plug-in files, add the following properties in the customer_overrides.properties file.
- yfs.isf.cordova.supportCordovaApp =Y
- yfs.isf.cordova.useragent.<UserAgentName>=../extn/cordova/<UserAgentName>/cordova.js
For example, yfs.isf.cordova.useragent.cordova-android=../extn/cordova/cordova-android/cordova.js yfs.isf.cordova.useragent.cordova-ios=../extn/cordova/cordova-ios/cordova.js.
If you are hosting Cordova plug-ins on a different server, then you can provide the appropriate URL. For example, yfs.isf.cordova.useragent.<UserAgentName> = <baseurl>/<UserAgentName>/cordova.js.

Add the cordova-<feature/plugin>.config.ts file to store extensions at store-single-spa/extensions/features/override-component/src/app/components/cordova-initialiser. The config file must implement the CordovaPluginInitialization interface, and return a function that initializes the Cordova plug-in. The sample barcode-scanner-plugin-config.ts file is present in store-single-spa/extensions/features/override-component/src/app/components/cordova-initialiser.

For example, barcode-scanner-plugin-config.ts file.

import { Injectable } from '@angular/core';
import { CordovaPluginInitialization } from '@sim-core/services/cordova-plugin-config';

@Injectable()
export class BarcodeScannerPluginConfig implements CordovaPluginInitialization {

    constructor(private barcodeScannerService: BarcodeScannerService) { }

      getCordovaPluginInitializationfunc() {

            return () =>  {
                
        if(<check for plug-in available>){
            //Initialize the cordova barcode plug-in if necessary
            // Configure the barcode plug-in settings to call a method on barcode scan
            // Refer the plug-in documentation for acessing the barcode data.
            // fire a event called isf:cordova_barcode_event and pass bardcode data for application
            //window.dispatchEvent(new CustomEvent('isf:cordova_barcode_event',{'detail':{ 'barcode':result.text}}));
            
         }


            };


      }


}

The config.ts file must be imported in the app.module.ts file that is present in the store-single-spa/extensions/features/override-component/src/app/ folder. Ensure to add an entry in the providers array. For example,

import { BarcodeScannerPluginConfig } from './components/cordova-initialiser/barcode-scanner-plugin-config';
@NgModule({
  declarations: [
    
  ],
  imports: [
   
  ],
  providers: [
  
BarcodeScannerPluginConfig
  ],
})

Register the newly created plug-in config file by using the registerPluginInitialization method from CordovaService. The registration needs to be done within the ngOnInit method of the cordova-initialiser.component.ts file that is present in the store-single-spa/extensions/features/override-component/src/app/components/cordova-initialiser folder.
For example,
```
CordovaService.registerPluginInitialization(this.barcodeScannerPluginConfig)
```
.
Note: The ngOnInit method in the cordova-initialiser.component.ts file contains a commented code, which calls the CordovaService.registerPluginInitialization() method. You can uncomment the code and pass the config file as an argument by importing the config file that is created in step 3.
Build and deploy your customizations. For more information, see Building and deploying your customizations.