JavaScript UI module

label: Home page
form:
  properties:
    colorField:
      label: Background color
      $type: javascriptField (1)
      fieldScript: /my-light-module/webresources/colorField/index.html (2)
      height: 70 (3)
      defaultValue: "#00ff00" (4)
      parameters: (5)
        foo: bar

window.addEventListener(
  'message',
  function (event) {
    if (event.data.action === 'init') {
      console.log(event.data.state);
    }
    //Optional:  Our form state manager notifies any change to your iframe too. You can react to it as shown in the following example:
    if (event.data.action === 'change') {
        if (event.data.state && event.data.state.formFields) {
            // You can consider adding the state globally in your iframe context
            window.formFields = event.data.state.formFields;
            console.log('::: FormFields updated state', window.formFields);
        }
    }
    //Optional: If you requested a REST endpoint, the response is notified as this:
    if (event.data.action === 'restResponse') {
        console.log('REST Response received via postMessage:', event.data);
    }
    //Optional: If you opened a dialog, when onChoose the dialog propagates the dialogResponse event action
    if (event.data.action === 'dialogResponse') {
        console.log("Dialog response received via postMessage:", event.data);
    }
  },
  false
);

icon: icon-categories
class: info.magnolia.ui.contentapp.configuration.ContentAppDescriptor
appClass: info.magnolia.ui.framework.app.BaseApp
label: Custom app
subApps:
  firstApp: (1)
    class: info.magnolia.ui.javascript.app.JavascriptSubAppDescriptor (2)
    label: 1st tab
    fieldScript: /ui-framework-javascript-dev-samples/webresources/debugApp.html (3)
    parameters: (4)
      welcomeMessage: Browser
  secondApp: (5)
    class: info.magnolia.ui.javascript.app.JavascriptSubAppDescriptor
    label: 2nd tab
    fieldScript: /ui-framework-javascript-dev-samples/webresources/debugEditApp.html
    closable: false (6)
    parameters:
      welcomeMessage: Editor

window.addEventListener(
  'message',
  function (event) {
    if (event.data.action === 'init') {
      console.log(event.data.correlationId);
      console.log(event.data.state);
    }
  },
  false
);

parent.window.postMessage({
    action: 'changeLocation',
    correlationId,
    app: 'custom-app',
    subapp: 'secondApp',
    tabTitle: 'My tab title',
    urlParameter: 'my-object-id'
}, '*');

window.addEventListener(
  'message',
  function (event) {
    if (event.data.action === 'init') {
      console.log(event.data.correlationId);
      console.log(event.data.state);
    }
  },
  false
);

parent.window.postMessage({
  action: "callRestClient",
  correlationId: correlationId,
  restClientName: "ShopProducts",
  restClientMethodName: "list",
  body: ""
}, '*');

parent.window.postMessage( {
  action: "openDialog",
  correlationId,
  dialogId: "ui-framework-core:chooser",
  workspace: "personas",// required for chooser dialogs, optional for standard dialog
  callerId: "unique-identifier",
}, "*",);

parent.window.postMessage( {
  action: "closeDialog",
  correlationId,
}, "*",);