JavaScript UI module
Edition |
DX Core + Incubator (services) |
||
Issues |
|||
Git |
|||
Latest |
2.0.4
|
The JavaScript UI module allows you to create custom apps and custom form fields with JavaScript. The module requires that you have a DX Core Enterprise license.
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>2.0.4</version>
</dependency>
Custom form fields
Configuration
Add a JavaScript field in your dialog definition as follows:
label: Home page
form:
implementationClass: info.magnolia.ui.javascript.form.FormViewWithChangeListener (1)
properties:
colorField:
label: Background color
$type: javascriptField (2)
fieldScript: /my-light-module/webresources/colorField/index.html (3)
height: 70 (4)
defaultValue: "#00ff00" (5)
parameters: (6)
foo: bar
1 | Must be info.magnolia.ui.javascript.form.FormViewWithChangeListener . |
2 | Must be javascriptField . |
3 | Points to a valid HTML file located in
|
4 | The height of the field in the dialog. |
5 | The field default value. |
6 | Pass custom parameters to the Javascript field. |
Message format
Communication between Magnolia
and your iframe
is done with message
event.
An iframe
can listen for dispatched messages by executing the following JavaScript:
window.addEventListener(
'message',
function (event) {
if (event.data.action === 'init') {
console.log(event.data.correlationId);
console.log(event.data.state);
}
},
false
);
Magnolia will send the following message to the field iframe:
Property | Description | ||
---|---|---|---|
|
|
||
|
The id used by Magnolia to establish communication between the backend and the frontend.
|
||
|
The component state
|
Magnolia can receive following messages from the iframe:
Property | Description | ||
---|---|---|---|
|
|
||
|
The id used by Magnolia to establish communication between the backend and the frontend. |
||
|
For For For For |
Example:
parent.window.postMessage({
action: 'changeValue',
correlationId,
value: input.value
}, '*');
parent.window.postMessage({
action: 'changeHeight',
correlationId,
value: 50
}, '*');
parent.window.postMessage({
action: 'changeFormFieldValue',
correlationId,
value: 50,
fieldName: 'other-field-name'
}, '*');
parent.window.postMessage({
action: "callRestClient",
correlationId: correlationId,
restClientName: "ShopProducts",
restClientMethodName: "list",
body: ""
}, '*');
Custom app
Configuration
Add a JavaScript app in your app definition as follows:
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
1 | First listed subApp :will be shown when opening the app (e.g. via Admincentral tile), will have not closable tab. |
2 | It must be info.magnolia.ui.javascript.app.JavascriptSubAppDescriptor . |
3 | Points to a valid HTML file located in
|
4 | Pass custom parameters to the Javascript field. |
5 | All but the first listed subApps :by default will not be shown when opening the app, by default will have closable tabs. |
6 | Set to false to modify the default behaviour described in point 5 . |
Message format
Communication between Magnolia
and your iframe
is done with message
event.
An iframe
can listen for dispatched messages by executing the following JavaScript:
window.addEventListener(
'message',
function (event) {
if (event.data.action === 'init') {
console.log(event.data.correlationId);
console.log(event.data.state);
}
},
false
);
Magnolia will send the following message to the field iframe:
Property | Description | ||
---|---|---|---|
|
|
||
|
The id used by Magnolia to establish communication between the backend and the frontend.
|
||
|
The component state
|
Magnolia can receive following messages from the iframe:
Property | Description |
---|---|
|
|
|
The id used by Magnolia to establish communication between the backend and the frontend. |
|
The name of the app to forward to |
|
The name of the subapp to forward to |
|
The target subapp tab caption |
|
The concatenated parameters to be passed to the target subapp with |
Example:
parent.window.postMessage({
action: 'changeLocation',
correlationId,
app: 'custom-app',
subapp: 'secondApp',
tabTitle: 'My tab title',
urlParameter: 'my-object-id'
}, '*');
Vaadin
Vaadin shares a component state with the Javascript field, here is its format:
Property | Description | ||
---|---|---|---|
|
The current Magnolia instance context path. Example:
|
||
|
The field script URL defined in the Example:
|
||
|
The parameters defined in the |
||
|
The current user. |
||
|
The current locale. |
||
|
|||
|
The current node.
Example
|
||
|
The default value defined in the |
||
|
The values of the other fields of the current form. |
||
|
The height defined in the Example:
|
||
|
The current value of the form property. |
||
|
Whether the field is readOnly or not. |
||
|
|||
|
Used to communicate parameters between two javascript subapps. |
Samples
Check out some samples here.
Changelog
Version | Notes |
---|---|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Support for Magnolia 6.2.12 |
|
Add support in content apps |
|
Bug fixes |
|
Add the message action
|
|
Initial release. |