JS Connector

Usage

The JS Connector allows you to deploy Ext JS 6 web applications developed using Sencha Cmd as a module instance to your configured portal.

Once the module is deployed, you can use the JS Connector to update changed variables of your Ext JS 6 web application to your portal.

To download and to learn how to install Sencha Cmd and Ext JS 6 SDK, refer to: https://docs.sencha.com/extjs/6.0.1/guides/getting_started/getting_started.html.

The JS Connector can only be used as an output connector at the end of the workflow.

Creating EXTJS 6 Application

To create an EXTJS 6 Web Application you can use the sample applications on the Sencha website, refer to https://docs.sencha.com/extjs/6.2.0/guides/tutorials/login_app.html

Once you have finished developing the web application, you can deploy it to the portal.

Refer to

Adjusting the Web Application and Providing it as .war File
Using JS Connector in a Technical Workflow

Adjusting the Web Application and Providing it as .war File

Prerequisites

You have created an Ext JS 6 web application using Sencha Cmd (refer to Creating EXTJS 6 Application).

Proceed as follows

Modify the output entry in the App.json file as follows:

"output": {
  "microloader": {
  "enable": false
  }
}

Make sure that the mainView object value in the App.js file will not be provided, e.g.:

Ext.application({
  extend: 'Employee.Application',
  name: 'Employee',
  requires: [
    'Employee.*'
  ],
  // The name of the initial view to create. This has not to be provided
  //mainView: 'MyAppClassic.view.main.Main'
});

Add or modify the launch function in the Application.js file as follows, e.g.:

launch: function() {
  Ext.create('Employee.view.main.Main', {
    layout: 'fit',
    renderTo: Ext.select('.employeeDiv')
  });
}

The employeeDiv Div Id mentioned in renderTo has to be entered in the mandatory Div Id field on the JS Connector properties tab (refer to Dialog JS Connector Properties) as the application will be rendered in this Div Id.

Run the following command to build the web application version for production:
```
sencha app build --production -c classic
```
Compress the web application in the folder ./build/production/<Application Name> in a .war file to be imported in the JS Connector.

Deploying a Web Application as a Portlet with JS Connector

Prerequisites

You have created a workflow with a Web Application Connector at the beginning and a JS Connector at the end.
You have configured the Web Application Connector properly, and you have activated the Use with JS Connector checkbox on the Web Application tab.
In the Application Configuration section on the JS Connector properties page, you have selected the .war file of your web application stored in your INUBIT repository or in the file system.
On the Portlet Configuration section, you have set the properties accordingly.

Proceed as follows

Publish and activate the workflow and the containing modules.
Deploy the web application available in the portal.

Using JS Connector in a Technical Workflow

Technical Workflows that involve a JS Connector must begin with a properly configured Web Application Connector.

Additionally, activate the option Use with JS Connector in the Extended settings section on the Web Application dialog.

Refer to Dialog Web Application.

It is also mandatory that the JS Connector is the last module in the Technical Workflow. A JS Connector can be used in two different ways:

Workflow without JS Variable Mapping

To deploy an Ext JS 6 web application created with Sencha Cmd (refer to Creating EXTJS 6 Application) to your portal, you only need a Web Application Connector and a JS Connector, refer to Adjusting the Web Application and Providing it as .war File.

Once you have published and activated the workflow and the modules in it, you can deploy the web application instance using the Portal Deployment in the INUBIT Workbench.
Workflow with JS Variable Mapping

To deploy an Ext JS 6 web application created with Sencha Cmd (refer to Creating EXTJS 6 Application) with adjusted variables to your portal, you need a Web Application Connector, at least one variable mapping, and a JS Connector with a JS Variables Mapping configured on the JS Connector properties dialog.

Refer to:
- Adjusting the Web Application and Providing it as .war File
- Dialog JS Connector Properties
  
  Variable values can be determined using other modules to provide them via the variable mapping, refer to Workflow Variables and Mappings.
  
  Once you have published and activated the workflow and the modules in it, you can deploy the module using the Portal Deployment in the INUBIT Workbench.

Dialog JS Connector Properties

This dialog offers the following options:

Application Configuration

File System

To load a stored Ext JS 6 web application from the respective file system of your local system.
Repository

To load a stored Ext JS 6 web application from your INUBIT repository. This repository is used for deployment of the modules.

Archive path

Choose the stored Ext JS 6 web application (either from your file system or the repository) in order to import it with the JS Connector.

The chosen Ext JS 6 web application must be created using Sencha Cmd (refer to Creating EXTJS 6 Application) and it must be stored as a .war file. Otherwise, it will not be shown in the Archive path dialog.

If you want to use a JS connector and its functionality in a BPC portal you must configure a Web Application Connector with selected Use with JS Connector option as well as the JS Connector. With Archive path you choose the .war file pertaining to the JS connector.

Be aware that you have to deploy this .war file manually into the BPC karaf/deploy folder.

Portlet Configuration

Portlet Context

Enter the context of your Portlet.

Div Id (mandatory field)

When building a web application in Ext JS 6, you must use Div Ids in order to render the selected application into particular div in the portal. Enter the Div Id you want to use to render your web application with JS Connector.

The Div Id attribute in the Ext JS 6 application and the Div Id field in the JS Connector module properties must be identical, refer to Adjusting the Web Application and Providing it as .war File.

JS Object name

Name of JavaScript object defined in the Ext JS 6 application. The Key column in JS Variable Mapping is the property associated with this JavaScript object.

JS Variable Mapping
- Add Parameter
  
  Here you can configure which JavaScript object property of your imported web application with JS Connector needs to undergo a variable mapping process. Click the Add parameter icon to create a new row in the mapping table.
  
  You can choose the respective Mapping variables out of the list of available variables. Those are listed in a drop-down menu, which appears when you click the empty field of the new row in the Mapping column. Afterwards, enter the respective Key for the chosen variable.
- Delete Parameters
  
  To delete a whole row of the table, mark the to be deleted row(s) by clicking on the row in the Key section of the respective row and afterwards click the Delete Parameter icon .
- Search
  
  To search a configured row, click the Search Icon and type in either the name of the Key or the name of the Mapping in the search field. A row that fits your search will be marked grey. By clicking on the arrows next to the search field, you can navigate through the search results backward and forward.