Defines CustomAction action component.

This component helps you writing your own processing code.
To edit code, double click the CustomAction. You are free to code in TypeScript any custom processing you want. Be sure to write your code between the
/*Begin_c8o_function */
/*End_c8o_function */

delimiters.

Custom actions can be inserted in an Event processing chain, combined with any other Actions. For example, you could have a Camera Action called when the user clicks on a button an you would like to process this action’s output. To do this, place a CustomAction under the Camera action. This way, the CustomAction will be called after the Camera has finished (when the user clicks on ok to save the image…).

When you finish processing in your CustomAction, you can call resolve(data) to pass control to the next CustomAction in the chain. The data object will be seen a the parent.out or stack["ActionName"].out object you can configure in the (TS) source of the next action in the chain.You can also call reject(err) to signal an error in the Custom Action processing. In this case, the Failure Handler or Error Handler error handler will be called.

You can pass Variables to any action. To do so, simply add Variable components under the CustomAction. You are free to associate the variable to any fixed text (TX) , TypeScript expression (TS), source (SC) and the value will be transmitted to the action.

You can access the variables value in your custom action code by using :

vars.myVariable (where myVariable is the variable name)

You can call from CustomAction code any additional package available on NPM. To do so, simply configure the Application packages property with a NPM Package and version number, and configure the Page Imports property to declare all the packages import you will need. This will automatically insert TypeScript ‘Import’ statements in the page where the CustomAction is used. If you want to use use one the imported classes, you may have to get an Instance of it. To do so, you can use the CAF utility method this.getInstance(Class).

Some NPM packages may require also additional module declarations. To do so, configure the Application modules property, the Application providers property and the Application imports property. This will insert automatically the module to the app.module.ts file in the @NgModule ‘imports’ or ‘provider’ arrays, and add an ‘Import’ TypeScript statement in the file header.

Some other NPM packages may also require an Additional Cordova plugin. (For example ionic Native packages). You can also declare these plugins in the Application plugins property. This will cause Convertigo Studio to automatically add the plugin to the project’s Cordova Config.xml file.

CustomActions are also a great way to add some additional NPM packages to your projects, even if you do not write some code in the CustomAction itself, but in any other place (Page class, (TS) mode binding…)

Property Type Category Description
Comment String standard Describes the object comment to include in the documentation report.
This property generally contains an explanation about the object.
Is active boolean standard Defines whether the component is active.
Application assets XMLVector expert Defines the assets needed by this action.
Add here any additional json to be inserted in the app:architect:build:option:assets[] of angular.json (Ex {“glob”: “*/”, “input”: “node_modules/tinymce”, “output”: “/tinymce/”})
Application imports XMLVector expert Defines the imports needed by this action.
Add here any ‘Import’ statements needed in the app.module.ts
Application modules XMLVector expert Defines the modules needed by this action.
Add here any application module to be inserted in the @NgModule({Imports[]}) in app.module.ts
Application packages XMLVector expert Defines the packages needed by this action.
Add here any NPM Package needed by you code. They will be automatically added to the app’s Packages.json
Application plugins XMLVector expert Defines the plugins needed by this action.
Add here any additional Cordova plugin your code needs (Ex ion native Packages).
Application providers XMLVector expert Defines the providers needed by this action.
Add here any application module to be inserted in the @NgModule({Providers[]}) in app.module.ts
Application scripts XMLVector expert Defines the scripts needed by this action.
Add here any additional path to script file needed by your code
Application styles XMLVector expert Defines the styles needed by this action.
Add here any additional path to scss file needed by your code
Page imports XMLVector expert Defines the imports needed by this action.
Add here any ‘Import’ statements your code would require to compile.