CodeCoupler UI Update from 1.x (cc-complete) to 2.x (cc-ui)

Changed Initializing procedure

Before:

//Target element is inside of "options" defined
let system = new System(options).then(() => {
  //Do something here
});

After:

let system = new System(element, options);
await system.initialized;
//Do something here

Stage loading option run changed to stage.

Before:

let system = new System(element, {
  stages: [
    {
      run: SomeStage,
      options: {},
    },
  ],
}).then(() => {});

After:

let system = new System(element, {
  stages: [
    {
      stage: SomeStage,
      options: {},
    },
  ],
}).then(() => {});

System changes

• Function getAuthModule removed. Use system.auth.module instead.
• Functions getAppLauncher, getAppLauncherUI and getAppUIName removed.
• Function run renamed to app

Stage changes

• Stage object must be derived from object Stage and will not use the old Widget-Factory anymore. Implications:
• The HTML will not be loaded automatically
• The class with the dashed name of the stage will not appended on the parent stage.
• initState is now initialized and will be automatically handled by base class.
• The constructor arguments changed from (current stage, options) to (environment, options).
• The property $ccSystem will not merged anymore into options. Use instead the property system from the argument environment.
• The css class cc-os-stage will not set to new stages anymore.

DataSource "LoopbackRepeating" changes

All the special properties was moved from trasnportSettings to transport.

These properties changed:

• UnauthorizedStatus: Changed name to repeatOnStatus and from int to Array.
• onUnauthorizedError: Change name to repeatProcess. Arguments is now the result object of the ajax request and not anymore a message which is configured in UnauthorizedMessage.
• The property UnauthorizedMessage do noit exist anymore.

Also keep in mind, that the repeating request feature was outsourced into the own base class DataSourceRepeating.

Launcher (now Sidebar) changes

• Launcher renamed to Sidebar
• once (boolean) do not exist anymore, use id (string) now.

App changes

• Everything inside the property definition is now moved to the root.

Before:

app.definition.ui;
app.definition.name;
app.definition.namespace;
app.definition.getSplashContent;
app.definition.getDashedName;

Now:

app.ui;
app.name;
app.namespace;
app.getSplashContent;
app.getDashedName;

• initPrepare, initPanel, initApp and initWidgets moved to only one function init

Return of prepare is now always:

return {
  version: "", //Before inside of "layoutStorage"
  widgets: {}, //Before inside of "layoutStorage"
  layout: {}, //Before inside of "layoutStorage"
  panel: {}, //Before on top of returned object
};

• window.libs Registration not used anymore
• block will use the arguments type, text like the System.block function and not html anymore
• CSS class derived from name will not be set automatically
• closeApp renamed to close
• widgetsById, widgetsAll and widgetsByName replaced with widgets where you can acces only widgets which have an id.
• With the new widgetsContainer you can access the container of each widget.

Changes to Layout configuration:

• widget and componentName is not used anymore. Set the widget class directly into componentType.
• config is not used anymore. Use componentState instead

Widget Changes

• _storage (Cookie based storage) not supported anymore

• definition.templateFilename and automatic template loading not supported anymore

• Everything inside the property definition is now moved to the root.

Before:

widget.definition.getDashedName;
widget.definition.getPluginName;
widget.definition.getComponentName;

Now:

widget.getDashedName;
widget.getPluginName;
widget.getComponentName;

• init renamed to start. The method cannot return false to reject initialisation. It should just throw an error.
• jQuery Wrapper not supported anymore
• Plugin Data-API not supported anymore
• block will use the arguments type, text like the System.block function and not html anymore
• showHint reneamed to hint

Widget Quick Start Migration Steps

If the widget is written based on the template in the documentation, you can follow these steps to get the work done:

• Remove encapsulation bracket with a standard class definition:

(function(/*...*/ undefined) {
  //...
}(/*...*/)

export default class {
  //...
}

• Remove the widgetDefinition and the widgetObject assignment.
• Change the widgetDefaults assignment into a static property:

var widgetDefaults = {
  //...
};

static defaults = {
  //...
};

• Replace the initfunction with async init(env, options) and add these three lines to get the old functionality:

function init() {}

  #env;
  #settings;
  async init(env, options) {
    this.#env = env;
    this.#settings = $.extend(true, {}, this.constructor.defaults, options);
    this.#env.$element.addClass("....") //If needed
    //...
  }

• Replace all other functions into class methods:

function something(configObject) {}

something(configObject) {}

• You can replace private functions into real private class methods:

function _something(configObject) {}

#something(configObject) {}

• Replace calling private functions with invoking real class methods:

_something.call(this /*...*/);

this.#something(/*...*/);

• Replace the following variables:

this.el => this.#env.element
this.$el => this.#env.$element
this.settings => this.#settings

Sometimes defined as:
widget.el => widget.#env.element
widget.$el => widget.#env.$element
widget.settings => widget.#settings

Panel changes

Moved functionality from Panel to Apllication:

• Button Shortcuts for footerToolbar
• Block and Unblock
• Hints
• Layout:
  • Option component will not moved to application. Only layout allowed.
  • Option layoutTarget moved to layout.element
  • Option register removed