Modules and components

Modules and components

Modules and components

Components and modules are of two types: system and visual. System modules placed in storage\components\modules\system path. Visual components (buttons, charts, lists etc) placed in storage\components\modules\visual

Module structure

Each module contains its own description in the file "package.json":

    "name": "OneSignal PUSH",
    "class": "OneSignalInstall",
    "code": "02_onesignal_nwicode",
    "type": "system",
    "category": "modules",
    "position": "footer",
    "description": "OneSignal PUSH module",
    "author": "NWICODE Team",
    "email": "",
    "version": "1.0.0",
    "release": "11.12.2021",
    "component": false,
    "free_to_distribute": true,
    "card_design": true,
    "run_command": [
      "npm install @capacitor-community/firebase-crashlytics"  
    "dependencies": [
      "\"@ionic-native/onesignal\": \"^5.31.1\"",
      "\"onesignal-cordova-plugin\": \"^3.0.1\""
	"devDependencies": []
  • name - Module name
  • class - name of PHP class. This class is used to make and modify the sources during the installation and build process of the application.
  • code - Unique code of the module in the system. Unique value.
  • type - system or visual. Module type. System modules - system, visual modules (which are used in the constructor) - visual.
  • category - Module category. The category is used to distribute visual components in the constructor. Category in constructor created automaticaly.
  • version - Module version
  • release - Module last release date
  • run_command - These commands will be executed in the shell before building the application. Commands can deliver additional packets, write variable values, or perform other manipulations.
  • dependecies and devDependencies - Additional dependencies used by the module, which must be specified in package.json file.
  • card_design - if true, then the "Card Design" tab appears in the component editing panel, in which you can get settings for using them in the ion-card component.

Module files


form.php, icon.svg, inner.css, ionic.css, ionic.php, form.js, preview.php, preview_js.php - these files are needed only for components and modules used in the constructor.

Additionally, the folder may contain the file default_value.php. This file contains the data that is placed in the table when the component is placed on the form.


     * Default values for module
     * used for fill component data filed after drop to pagcard

     $default_values['code']['font_size'] = "15";
     $default_values['code']['text_align'] = "center";
     $default_values['code']['background_color'] = "--ion-color-primary";
     $default_values['code']['text_color'] = "--ion-color-light";
     $default_values['code']['left_button_color'] = "--ion-color-primary";
     $default_values['code']['left_button_color_value'] = "f4f5f8";
     $default_values['code']['left_button_text_color'] = "--ion-color-light";
     $default_values['code']['left_button_text_color_value'] = "#f4f5f8";
     $default_values['code']['left_button_icon'] = "add-outline";
     $default_values['code']['left_button_icon_color'] = "--ion-color-light";
     $default_values['code']['left_button_icon_color_value'] = "#f4f5f8";
     $default_values['code']['left_button_action'] = "-";
     $default_values['code']['left_button_type'] = "solid";
     $default_values['code']['left_button_border_radius'] = "5";
     $default_values['code']['TRANSLATIONS']['ru']['FOOTER_LB_TITLE'] = "Click";
     $default_values['code']['TRANSLATIONS']['en']['FOOTER_LB_TITLE'] = "Click";

     //element height and width(for calcualte positions)


"app" - this directory is copied entirely into the ionic project. All files that are in this directory will be copied to the project and can be connected to it. Including the assets directory.

"preview" - this directory is copied entirely into the preview folder. All files that are in this directory will be copied to the preview folder and can be connected to preview controller. Preview does not support Angular2 and older, but does support AngularJS. If any files in this folder have a .js extension, those files will be automatically linked to the index file in the preview and also automatically linked to the main controller:

"installs" - contains files for connecting files from the "app" folder to the project. This folder contains two files - installs.php


This is the form that is shown in the component's settings on the canvas.


The global variable component_data is available in this file. This is an associative array containing component parameters and data about the application and the current page. Fields present in component_data:

$component_data['app_id'] - current application id
$component_data['page_id'] - current page id (The page on which the component is used).
$component_data['page_component_id'] - Component ID from application_page_components table (model App\Models\ApplicationPageComponent)
$component_data['page_component_code'] - Component CODE from application_page_components table (model App\Models\ApplicationPageComponent)
$component_data['application'] - current model App\Models\Application
$component_data['page'] - current model App\Models\Application_Page
$component_data['colors'] - colors, used in current application (this method from App\Models\Application)

also $component_data contains all data from package.json

Each component has its own data. This data is stored in the application_page_components ((model App\Models\ApplicationPageComponent) table in the "code" field in JSON format.Before the form is shown, this data is also added to the $component_date variable.

When the user clicks on the Save form, the handler collects data from all form fields, serializes it, and places it in the "code" field in the application_page_components table (model App\Models\ApplicationPageComponent) for the current component.

When the form of the component is opened, you must programmatically fill in all the fields used.Automatic filling of fields is not provided.

Using the built-in dialogs for selecting icons, colors, text

When the form is loaded, all buttons are checked for the following attributes:

  1. icon-dialog
  2. color-dialog
  3. string-dialog
  4. texts-dialog

For example:

<button id="title-button" string-dialog string-values='<?php echo json_encode($rbtitle_langs)?>' class="btn btn-icon btn-warning btn-xs mr-2"><i class="fas fa-pen"></i></button>

Click on this button opened dialog for multilangual string and pass to this dialog values from 'string-values' attribute. After dialog closed, will be called event from form.js file.

How multilingual data is stored

The form only works with string values. If you need to store multilingual values in the component, the field should look something like this:

<input type="hidden" name="TRANSLATIONS[en][FOOTER_TITLE]" value="some text value"  />
<input type="hidden" name="TRANSLATIONS[en][FOOTER_BUTTON_TITLE]" value="some text value"  />
<input type="hidden" name="TRANSLATIONS[en][FOOTER_RIGHT_BUTTON_TITLE]" value="some text value"  />

In this case, if the field name is [TRANSLATION][EN][PHRASE_KEY] before saving in the "code" field in the application_page_components table (model App\Models\ApplicationPageComponent) to will be converted to a structure:

$code['TRANSLATION'] => [
     "FOOTER_TITLE" => "some text value",
     "FOOTER_BUTTON_TITLE" => "some text value",
     "FOOTER_RIGHT_BUTTON_TITLE" => "some text value",

Use javascript handlers and JQUERY

You can add any onclick events to buttons and process them in the form.js file. You can add any on-click events to buttons, and process them in the form.js file. Events must be added with the classic "vanilla" method, but jQuery syntax can be used inside the method.