JavaScript Dialog Fields module

Edition

Incubator (services)

Issues

Git

Git

Latest

1.1.8

Compatible with Magnolia 6.2.

This module allows you to create custom form fields with JavaScript.

This module is at the INCUBATOR level.

Installing with Maven

Maven is the easiest way to install the module. Add the following to your bundle:

<dependency>
  <groupId>info.magnolia.ui</groupId>
  <artifactId>magnolia-ui-framework-javascript</artifactId>
  <version>1.1.8</version>
</dependency>

Configuration

Add a JavaScript field in your dialog definition as follows:

label: Home page
form:
  implementationClass: info.magnolia.ui.javascript.form.FormViewWithChangeListener
  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
1 Must be javascriptField.
2 Points to a valid HTML file located in any module (Maven & Light modules).
3 The height of the field in the dialog.
4 The field default value.
5 Pass custom parameters to the Javascript field.

Message format

Magnolia will send the following message to the field iframe:

Property Description

action

  • init: to initialize the field properties and values.

  • error: to notify the field failed the validation (either via the required flag or a validator).

  • change: to notify the field about any changes in dialog

correlationId

The id used by Magnolia to establish communication between the backend and the frontend.

It must be passed in all messages sent to the backend.

state

The component state

See the Vaadin section.

Magnolia can receive following messages from the iframe:

Property Description

action

  • changeValue: sent when any other field of the form gets updated.

  • changeHeight: sent when the height of the field gets updated by the user in the form.

All iframe styles can be also changed directly on the DOM element e.g.:
window.frameElement.style.position = 'fixed';
window.frameElement.style.top = '0';

correlationId

The id used by Magnolia to establish communication between the backend and the frontend.

value

For changeValue, the type of the value is always a String. If you need to store complex objects, stringify it before returning it to Magnolia.

For changeHeight, send the height in pixels that the new <iframe> will be.

Example:

parent.window.postMessage({
    action: 'changeValue',
    correlationId,
    value: input.value
}, '*');

Vaadin

Vaadin shares a component state with the Javascript field, here is its format:

Property Description

contextPath

The current Magnolia instance context path.

Example: /author

currentNode

The current node.

This is null in case of a node creation.


Example

{
    "id":"8346c262-689b-4622-98ac-a56e15c59163",
    "name":"tests",
    "path":"/tests",
    "properties":{
        "mgnl:created":"2022-01-21T11:42:04.143+01:00",
        "mgnl:template":"my-light-module:pages/home",
        "jcr:created":"2022-01-21T11:42:04.143+01:00",
        "mgnl:lastModifiedBy":"superuser",
        "jcr:createdBy":"admin",
        "mgnl:createdBy":"superuser",
        "jcr:uuid":"8346c262-689b-4622-98ac-a56e15c59163",
        "jcr:primaryType":"mgnl:page",
        "colorField":"#ff0040",
        "mgnl:lastModified":"2022-01-21T11:42:04.143+01:00"
    },
    "type":"mgnl:page"
}

defaultValue

The default value defined in the yaml of the form field.

fieldScriptUrl

The field script URL defined in the yaml of the form field.

Example:

/my-light-module/webresources/colorField/index.html

formFields

The values of the other fields of the current form.

height

The height defined in the yaml of the form field, or the updated value sent in case the field gets enlarged from the UI.

Example: 50

parameters

The parameters defined in the yaml of the form field.

value

The current value of the form property.

Changelog

Version Notes

1.1.8

1.1.7

1.1.6

1.1.5

1.1.4

Support for Magnolia 6.2.12

1.1.3

Add support in content apps

1.1.1

Bug fixes

1.1

Add the message action

  • Add the error notification

1.0

Initial release.

Feedback