Configuration
All the Metadata templates are put inside the following path:
{SWING-APP}/config/templates/objectpanel/{TEMPLATE-FOLDER}/{TEMPLATE-NAME}.html
We have to create an html file for each object’s type that we want to handle, specifying the type-template mapping into objectpanel section in configuration file file, as follows:
Configuration example:
<objectpanel>
<template type="EOM::CompoundStory">objectpanel.html</template>
<template type="EOM::Story">objectpanel.html</template>
<template type="EOM::WebPage">dwp-objectpanel.html</template>
<template type="EOM::MediaGallery">gallery-objectpanel.html</template>
<template type="Image">image-objectpanel.html</template>
<template type="EOM::TopicItem">topicItem.html</template>
<template type="EOM::TopicItem-story>topicItem-story.html</template>
<template type="EOM::TopicItem-picture>topicItem-picture.html</template>
<checkBox>
<checkedList>si,ja,oui</checkedList> (1)
</checkBox>
</objectpanel>|
Configuration for a specific topic item object panel must follow this configuration EOM::TopicItem-<conten type>, otherwise the default object panel for topic item is loaded. |
| 1 | This list is used to indicate in the checkbox field which is the positive element on a pair of values configured in the Classify metadata dtd.
It is used to extended the default list of the positive values: True, Yes, T, Y, 1 (the match is case insensitive). E.i. suppose to have configured the following pair of values in the Classify dtd (si|no), (ja|nein), (oui|non) the list of the positive values will be <checkedList>si,ja,oui</checkedList> |
|
Default templates are put in the base folder {SWING-APP}/config/templates/objectpanel/
For custom templates, it is recommended ( read mandatory ) that you put them in a specific folder: {SWING-APP}/config/templates/objectpanel/{TEMPLATE-FOLDER}
|
Object panels can be configured outside {SWING-APP}. See the paragraph How to configure object panels in external folder for some tips in how to take advantage of this new configuration option.
Create a template
| The object panel template must be wrapped inside the following html to work properly. |
<div class="em-objectpanel">
<form>
// CUSTOM TEMPLATE HERE
</form>
<div class="em-metadata-footer emui-binder-footer">
<button class="em-metadata-save btn btn-sm btn-primary pull-right">Save</button>
<button class="em-metadata-reset btn btn-sm btn-default pull-right m-r-5">Reset</button>
<button class="em-metadata-clean btn btn-sm btn-default pull-left m-r-5">Clean</button>
</div>
</div>Accordion menu
Thanks to an accordion menu we can group the fields and show or hide them easily. The structure is as follows:
<div class="accordion">
<div class="accordion-group accordion-icon">
<div class="accordion-heading">
<a class="accordion-toggle"
data-toggle="collapse"
href="#{SECTION_ID}">{SECTION_NAME}</a>
</div>
<div id="{SECTION_ID}" class="accordion-body collapse in">
<div class="accordion-inner">
... (1)
</div>
</div>
</div>
</div>| 1 | Accordion content (e.g. metadata fields, here). |
|
Since {SECTION_ID} is a HTML id, it should be unique inside the whole Swing application. To guarantee its uniqueness, please use a custom prefix (e.g. my-custom-metadata). Furthermore, if you put the following code:
after the {SECTION_ID}, whenever an instance of metadata is created, Swing adds an additional unique number. This number is available inside the ObjectPanel methods (see below). |
Tabs
We have also the possibility to group the fields by a tab, here the html structure:
<div class="tabbable">
<ul class="nav nav-tabs tab-sm">
<li class="active">
<a href="#{ID_TAB}" data-toggle="tab">{TAB_NAME1}</a>
</li>
<li>
<!-- Notice that we have only a single ACTIVE tab -->
<a href="#{ID_TAB2}" data-toggle="tab">{TAB_NAME2}</a>
</li>
<li>
<!-- Notice that we have only a single ACTIVE tab -->
<a href="#{ID_TAB3}" data-toggle="tab">{TAB_NAME3}</a>
</li>
</ul>
<div class="tab-content">
<div id="{ID_TAB}" class="tab-pane active">
... (1)
</div>
<div id="{ID_TAB2}" class="tab-pane">
... (2)
<!-- Notice that we have only a single ACTIVE tab -->
</div>
<div id="{ID_TAB3}" class="tab-pane">
... (3)
<!-- Notice that we have only a single ACTIVE tab -->
</div>
</div>
</div>| 1 | Tab content (e.g. metadata fields, here). |
|
Since {ID_TAB} is a HTML id, it should be unique inside the whole Swing application. To guarantee its uniqueness, please use a custom prefix (e.g. my-custom-metadata). Furthermore, if you put the following code:
after the {ID_TAB}, whenever an instance of metadata is created, Swing adds an additional unique number. This number is available inside the ObjectPanel methods (see below). |
Object Panel fields
Swing Object Panels supports different field types.
|
All fields must have a "data-id" attribute to work properly. Its value represents the xpath of element in the metadata xml that we want to set, separated by ` > `. (e.g The :nth-child selector can be used in the "data-id" to select the element value, Swing supports :nth-child with an argument as a single integer.
(e.g |
String
The HTML of a simple "string" metadata is:
<div class="qmItem">
<label>{METADATA_FIELD_NAME}</label>
<input data-id="{METADATA_ELEMENT_XPATH}" type="text"/>
</div>Date-time, Date, Time
If you want to create a "date","date-time" or "time" Metadata field you just only use these lines of code:
<div class="qmItem">
<label>{METADATA_FIELD_NAME}</label>
<div class="input-append date">
<input data-id="{METADATA_ELEMENT_XPATH}" type="text"></input>
<span class="add-on">
<i data-time-icon="icon-time" data-date-icon="icon-calendar" class="fa fa-calendar"></i>
</span>
</div>
</div>Checkbox
If you want to create a Metadata "list" (options) the source code is:
<div class="qmItem">
<label>{METADATA_FIELD_NAME}</label>
<div class="checkbox-content">
<label class="checkbox">
<input data-id="{METADATA_ELEMENT_XPATH}" type="checkbox">
<span>{CHECKBOX_LABEL_1}</span>
</label>
<label class="checkbox">
<input data-id="{METADATA_ELEMENT_XPATH}" type="checkbox">
<span>{CHECKBOX_LABEL_2}</span>
</label>
</div>
</div>Select
If you want to create a Metadata "list" field the structure is:
<div class="qmItem">
<label>{METADATA_FIELD_NAME}</label>
<select class="form-control" data-id="{METADATA_ELEMENT_XPATH}">
</select>
</div>TextArea
The HTML of a simple text area is:
<div class="qmItem">
<textarea data-id="{METADATA_ELEMENT_XPATH}"></textarea>
</div>User List
The HTML of a simple user list is:
<div class="qmItem">
<input data-id="{METADATA_ELEMENT_XPATH}" type="text" data-type="user-list">
</div>This input will become a typeahead field with all the Methode Users available.
DataSource
If you want to create a "dataSourceMaster" Metadata field you have to specify the following attributes:
Relational database type
-
"data-dsurl": The datasource servlet url. If specified, overrides the default datasource URL specified at DTD element level.
-
"data-itemText": The xml element name that will be displayed in text field.
-
"data-nChar": Number of characters to type before you display the list of elements (Default: 3).
-
"data-max-items": The number of items allowed to add (default: unlimited).
-
"data-dsFilter": Its value depends of database type (relational or xml) and represents the filter xpath that will be passed as "q" parameter to the datasource servlet.
The HTML that you have to include is:
<div class="qmItem">
<label>{METADATA_FIELD_NAME}</label>
<input data-id="{METADATA_ELEMENT_XPATH}"
data-itemText="{XML_ELEMENT_NAME}"
data-dsFilter="{FILTER_XPATH}"
data-nChar="{NUMBER}"
type="text"/>
</div>An example of sql database is the following:
data-dsFilter="_{FIELD}%2B_{&filter}*%2B_%2B" (1)
e.s: {FIELD} = "Country" {&filter} = "austr"
<ra>
<Row>
<IndexSchemeID>8140</IndexSchemeID>
<Term>AAPC_Ltd</Term>
<Type>1</Type>
<ParentTerm>0</ParentTerm>
<AliasName/>
<FTEPCode/>
<ISIN/>
<Sedol/>
<Ticker/>
<Exchange/>
<FTCode>AAPCA00000</FTCode>
<IsLive>Y</IsLive>
<Deleted>N</Deleted>
<IsOrganisation>N</IsOrganisation>
<UseInManualIndexing>Y</UseInManualIndexing>
<FTSEAWI>N</FTSEAWI>
<Country>Australia</Country>
<NumberOfTaxonomies>1</NumberOfTaxonomies>
</Row>
</ra>You have to choose the tag value, like "Term", that you want to display and put in the data-itemText attribute.
| 1 | {&filter} will be replaced automatically with typed text |
XML database type
-
"data-itemText": The xml element name that will be displayed in text field.
-
"data-max-items": The number of items allowed to add (default: unlimited).
The HTML that you have to include is:
<div class="qmItem">
<label>{METADATA_FIELD_NAME}</label>
<input data-id="{METADATA_ELEMENT_XPATH}"
data-itemText="{XML_ELEMENT_NAME}"
type="text"/>
</div>An example of xml database is the following:
<ra>
<section id="_s" c="15">
<title selectable="true">MAZ</title>
<path selectable="true">MAZ</path>
<id>1217088</id>
</section>
</ra>You have to choose the tag value, like "title", that you want to display and put in the data-itemText attribute.
List of strings
If you want to create a "List of strings" Metadata field you have to specify the following attributes:
-
"data-item": The xml element name that will be added as child of the element specified in data-id.
-
"data-type": The metadata form type "string-list"
-
"data-max-items": The number of items allowed to add (default: unlimited).
-
"data-delimiter": The delimiter to the be used as string separator in the string list (default: ',').
The HTML that you have to include is:
<div class="qmItem">
<label>{METADATA_FIELD_NAME}</label>
<input data-id="{METADATA_ELEMENT_XPATH}"
data-item="{XML_CHILD_ELEMENT_NAME}"
data-type="string-list"
type="text"/>
</div>Simple tags
If you want to create a "Simple tags" Metadata field you have to specify the following attributes:
-
"data-type": The metadata form type "simple-tags"
The HTML that you have to include is:
<div class="qmItem">
<label>{METADATA_FIELD_NAME}</label>
<input class="tags-input" data-role="tagsinput" data-type="simple-tags" data-id="{METADATA_ELEMENT_XPATH}" type="text"/>
</div>DataSource list
If you want to create a "data source list" Metadata field you have to specify the following attributes:
-
"data-item": The xml element name that will be added as child of the element specified in data-id.
-
"data-type": The metadata form type "ds-list"
-
"data-dsurl": The url file that return a json file with the following syntax:
[{ "id": "{ID}", "value": "{VALUE}" }, ... ] (1)| 1 | id and value keys are mandatory. |
The HTML that you have to include is:
<div class="qmItem">
<label>{METADATA_FIELD_NAME}</label>
<input data-id="{METADATA_ELEMENT_XPATH}"
data-item="{XML_CHILD_ELEMENT_NAME}"
data-dsurl="{DATASOURCE_URL_FILE}"
data-type="ds-list"
type="text"/>
</div>Location with Maps
If you want a Metadata location field you have to create a simple input with "location" class. If you add the attribute "for="location"" in the label it will be clickable if location is setted. If you want also the latitude and longitude info you just need to add two input with "marker-lat" and "marker-long" like follows (half-width class allows you to see inputs placed side by side):
|
To associate an input element with the specific address value, it is possibile to add the following classes:
|
<div class="qmItem">
<label for="location">{METADATA_FIELD_NAME}</label>
<input class="location" data-id="{METADATA_ELEMENT_XPATH}" type="text"/>
</div>
<div class="qmItem">
<label>{METADATA_FIELD_NAME}</label>
<input data-id="{METADATA_ELEMENT_XPATH}" type="text" class="marker-lat half-width form-control" style="display: inline-block">
<input data-id="{METADATA_ELEMENT_XPATH}" type="text" class="marker-long half-width form-control" style="display: inline-block">
</div>
<div class="qmItem">
<label>{METADATA_FIELD_NAME}</label>
<input data-id="{METADATA_ELEMENT_XPATH}" type="text" class="marker-region form-control" style="display: inline-block">
</div>
<div class="qmItem">
<label>{METADATA_FIELD_NAME}</label>
<input data-id="{METADATA_ELEMENT_XPATH}" type="text" class="marker-city form-control" style="display: inline-block">
</div>
<div class="qmItem">
<label>{METADATA_FIELD_NAME}</label>
<input data-id="{METADATA_ELEMENT_XPATH}" type="text" class="marker-state form-control" style="display: inline-block">
</div>
<div class="qmItem">
<label>{METADATA_FIELD_NAME}</label>
<input data-id="{METADATA_ELEMENT_XPATH}" type="text" class="marker-province form-control" style="display: inline-block">
</div>
<div class="gmaps-responsive"></div>
Buttons
Before form tag closest you need to add div ".em-metadata-footer" that contains buttons with ".em-metadata-save", ".em-metadata-reset" and ".em-metadata-clean" classes, the source code is:
<form>
...
</form>
<div class="em-metadata-footer">
<button class="em-metadata-save btn btn-primary pull-right">
METADATA_LABEL_SAVE
</button>
<button class="em-metadata-reset btn pull-right">
METADATA_LABEL_RESET
</button>
<button class="em-metadata-clean btn pull-left">
METADATA_LABEL_CLEAN
</button>
</div>Bulk mode (multiple selection)
Object Panel implements a mechanism that automatically converts custom templates when multiple objects are selected, adding support for multiple selection (bulk mode). The following list of qmItem template components support multiple selection:
-
String
-
Date-time, Date, time
-
Checkbox
-
Select
-
TextArea
-
List of strings
-
Simple tags
Not supported qmItem components will be shown as disabled fields in multi selection mode (but values coming from that fields won’t be lost on each object when saving).
You can prevent a qmItem node from being parsed by using the class ignore-bulk
<div class="qmItem ignore-bulk">
/** ignored by bulk parser */
</div>or you can disable a qmItem field on bulk mode by using the class disable-bulk
<div class="qmItem disable-bulk">
/** shown as a disabled field in bulk mode */
</div>Any custom html will be maintained in the multi selection mode resulting panel, but may need to be implemented custom logic when multi selection mode is on.
The context object api(s) have been extended to support multi selection mode. In particular, an activeObjects array property of activeObject is available to let you interact with each object instance. Some changes also on preSave method callback to support the multi selection case. If you need to interact with qmItem fields values (read\write) use the brand new activeObject api getFieldValue and setFieldValue
| If you ignore from parsing qmItems fields having a data_id attribute is up to you handle the field on bulk mode, by default the system will populate the item with comma separated values coming from each object item. |
See Context Object (ctx parameter) for further information.
Customizations
It is possible to enhance the templates behaviour by adding custom Javascript functions to be used along with the templates. Such Javascript files should be in the same path as the templates:
{SWING-APP}/config/templates/objectpanel/{TEMPLATE-FOLDER}/{TEMPLATE-NAME}.js
|
The Javascript file must have the same filename as the template |
Add custom behavior
Custom behavior can be added to a specific object type. To do so, in your Javascript it is necessary to register to the ObjectPanel module, as follows:
eidosmedia.webclient.extensions.objectpanel.register(types, template, options);
where:
-
types: an array of types for which the Javascript is valid. Please use an array even if you are configuring a single type. E.G: ["EOM::CompoundStory", "EOM::Story"]
-
template: the template name or a function that returns the template name given the Context object and the current user info (see sample bellow), complete with extension ( E.G. "image-objectpanel.html" ). Note: the template path starts from the objectpanel/ folder, so if your template is in /config/templates/objectpanel/mycustomobjectpanel/my.html, the template must be mycustomobjectpanel/my.html )
function( activeObject, currentUserInfo, ctx, extraInformation ) {
// IMPORTANT: extraInformation is a JS object populated with further information to determine the right template
// It is used in the Diagram Workflow, where the constraints are passed.
/* Method called to get the object panel template given the activeObject and the currentUserInfo.*/
var metadataXML = activeObject.getMetadataXML();
return 'mycustomobjectpanel/my.html';
}-
options: a Javascript Object structured as follows:
var options = {
preFillForm: function( ctx, extraInformation ) {},
postFillForm: function( ctx, callback ) {},
preSave: function( ctx ) {},
validate: function( ctx ) {},
postSave: function( ctx ) {},
onApplicationStatusChange: function (ctx, status) {}
}|
The options parameter can also be a function, which returns a JSON object structured exactly as explained before. |
Properties and methods of the "options" parameter
The options parameter defines the whole behaviour of the custom object panel. It defines settings and behaviours in different moments of the object panel creation and editing. The following paragraphs define them properly.
getToolbar
Method to return a list of customs actions to be added to the toolbar and options to apply to the standard toolbar. Each custom action is a single Javascript object with the following properties:
-
name: the actions’s identifier.
-
action: the function that is called when the user clicks on the corresponding button. The function is called with Context Object (ctx parameter) as parameter.
-
label: the label associated with the command
-
icon: the icon associated with the command. See Icons supported by Swing for a comprehensive list of icons available in Swing.
The syntax is the following:
getToolbar( );
Method |
|
Returns |
|
Example
// options object...
{
getToolbar: function( ) {
var actions = [];
actions.push ({
name: "action1",
action: function (ctx) {},
label: "Action 1",
icon: 'icon-globe'
});
actions.push ({
name: "action2",
action: function (ctx) {},
label: "Action 2",
icon: 'icon-file'
});
return {
'options': {
'hideRefreshButton': true
},
'actions': actions
};
}
}refreshOnShow
If set to true, the objectPanel will refresh ( and call all the subsequent methods, e.g. preFillForm and postFillForm ), any time the object Panel tab is selected by the user ( except for the first time ).
skipDelayOnSaving
If set to true (default is false), a delay is not added during saving process when the user clicks the save button.
enableDirtyChecking
If set to true (default is false), enables the "prompt the user to save unsaved changes to metadata" functionality in the Story and Report Editor .
closeOnHide
If set to true, the onClose method, if available, will be called any time the objectPanel tab loses focus ( another tab is opened ).
preFillForm
Method called on the object panel initialization. It can be used to initialize internal variables, and load external sources. The DOM elements of the HTML templates are available but have NOT been initialized ( so, they contain no value ).
preFillForm has an additional piece of information, extraInformation added in specific contexts (such as the Diagram Workflow).
The syntax is the following:
preFillForm( ctx );
Method |
|
Parameter |
|
Returns |
|
|
See Context Object properties for the ObjectPanel for info on Context Objects methods available here. |
Example
// options object...
{
preFillForm: function( ctx ) {
// Let's check a particular metadata...
var metadataXML = ctx.activeObject.getMetadataXML();
}
}onImageProcessing
Method called on the object panel initialization. This is your chance to manipulate the metadata by processing the raw image data. Imaga raw data is provided in asynchronous way by ctx. See Context Object properties for the ObjectPanel for further information.
The syntax is the following:
onImageProcessing( ctx, callback );
Method |
|
Parameters |
|
Returns |
|
|
See Context Object properties for the ObjectPanel for info on Context Objects methods available here. |
Example
// options object...
{
onImageProcessing: function (ctx, callback) {
ctx.activeObject.getImage().then(image => {
// get current metadata
const metadata = ctx.activeObject.getMetadataXML();
// EXIF is third-part library not included
EXIF.getData(image, function (info) {
//... enrich metadata
callback(metadata)
}
}
}
}postFillForm
Method called when the object panel is ready and the metadata has been loaded. It can be used to add custom listeners to buttons, make some elaborations, or it can be used to used to add custom listeners to input elements to notify changes in the metadata, etc..
The syntax is the following:
postFillForm( ctx, callback );
Method |
|
Parameter |
|
Returns |
|
|
See Context Object properties for the ObjectPanel for info on Context Objects methods available here. |
Example
// options object...
{
postFillForm: function( ctx ) {
// Let's check a particular metadata...
var metadataXML = ctx.activeObject.getMetadataXML();
$('.my-custom-button' ).on('click', function() {
// do something and refresh metadata
ctx.activeObject.refreshMetadata();
});
$('.my-custom-input')
.off('input.metadata')
.on('input.metadata', (event) => {
// notify metadata change for a specific input element
ctx.activeObject.notifyMetadataChange({dataId: 'my-custom-input', newValue: event.target.value});
});
}
}preSave
Method called before validating and saving. In this method, it is possible to modify the metadata BEFORE it is saved to the server.
| This method MUST return the metadataXML to work properly. The return value MUST be compliant with current mode. In single selection mode a metadata XML object must be returned. In multiple selection (bulk) mode an array with SAME length of current selected items (ctx.activeObjects.length) MUST be returned. |
| Relying on the return value, any operation MUST BE synchronous. |
The syntax is the following:
preSave( ctx );
Method |
|
Parameter |
|
Returns |
|
|
See Context Object properties for the ObjectPanel for info on Context Objects methods available here. |
Example Single mode
// options object...
{
preSave: function( ctx ) {
// Let's check a particular metadata...
const metadataXML = ctx.activeObject.getMetadataXML();
// Some operations..
// Return the new metadata.
return metadataXML;
}
}Example Bulk mode (even works in single mode)
// options object...
{
preSave: function( ctx ) {
// Get metadata as array
const xml = ctx.activeObjects.map( activeObject => {
const metadataXML = activeObject.getMetadataXML()
// custom metadata manipolations
return metadataXML;
});
// Return the new metadata as array.
return xml;
}
}validate
Method called before saving and after preSave. In this method, it is possible to validate the metadata before it is saved.
The syntax is the following:
validate( ctx );
Method |
|
Parameter |
|
Returns |
|
|
See Context Object properties for the ObjectPanel for info on Context Objects methods available here. |
|
The Context methods showError and showWarning can be used to provide feedback to end user. |
Example
// options object...
{
validate: function( ctx ) {
// Let's validate the metadata...
var metadataXML = ctx.activeObject.getMetadataXML();
// Some operations.
// Return the validation result.
if (!isValid) {
ctx.showError('You must fill in the required fields!');
return false;
}
return true;
}
}postSave
Method called after saving.
The syntax is the following:
postSave( ctx );
Method |
|
Parameter |
|
Returns |
|
|
See Context Object properties for the ObjectPanel for info on Context Objects methods available here. |
Example
// options object...
{
postSave: function( ctx ) {
// For example, we can refresh Metadata
ctx.activeObject.refreshMetadata();
}
}onClose
Method called when the objectpanel is closed. This happens when a document is closed, when a different element is selected, or when the objectPanel tab is hidden ( in case of closeOnHide set to true).
The syntax is the following:
onClose( ctx );
Method |
|
Parameter |
|
Returns |
|
|
See Context Object properties for the ObjectPanel for info on Context Objects methods available here. |
Example
// options object...
{
onClose: function( ctx ) {
// For example, we can set a specific metadata to "unlock it".
}
}onUpdatesAvailable
Method called when metadata changes are detected.
The syntax is the following:
onUpdatesAvailable ( ctx );
Method |
|
Parameter |
|
Returns |
|
|
See Context Object properties for the ObjectPanel for info on Context Objects methods available here. |
Example
// options object...
{
onUpdatesAvailable: function( ctx ) {
// For example, we can read the metadata and update the metadata values.
}
}onEvent
Method called when an event on the current document is received.
The syntax is the following:
onEvent ( evt, ctx );
Method |
|
Parameter |
|
Parameter |
|
Returns |
|
|
See Context Object properties for the ObjectPanel for info on Context Objects methods available here. |
Example
// options object...
{
onEvent: function( evt, ctx ) {
// For example, we can read the metadata and update the metadata values.
var eventName = evt.name;
var eventInfo = evt.info;
if (eventName === 'set_attributes') {
ctx.activeObject.refreshMetadata(null, true);
var metadataXML = ctx.activeObject.getMetadataXML();
}
}
}onApplicationStatusChange
Method called when the application status change from online to offline or vice versa (triggered only when using the offline functionality).
The syntax is the following:
onApplicationStatusChange(ctx, status);
Method |
|
Parameter |
|
Parameter |
|
Returns |
|
|
See Context Object properties for the ObjectPanel for info on Context Objects methods available here. |
Example
// options object...
{
onApplicationStatusChange: function( ctx, status ) {
// For example, we can check the application status
if (status.isOnline) {
....
}
}
}Full working example
(function() {
var types = ["EOM::CompoundStory", "EOM::Story"];
var template = 'custom/story.html';
var options = {
refreshOnShow: true,
closeOnHide: true,
getToolbar: function( ) {
var actions = [];
actions.push ({
name: "action1",
action: function (ctx) {},
label: "Action 1",
icon: 'icon-globe'
});
actions.push ({
name: "action2",
action: function (ctx) {},
label: "Action 2",
icon: 'icon-file'
});
return {
'options': {
'hideRefreshButton': true
},
'actions': actions
};
},
preFillForm: function(ctx) {
console.log("preFillForm");
var metadataXML = ctx.activeObject.getMetadataXML();
var lock = $(metadataXML).find('locked').text();
if (lock && lock != ctx.getCurrentUserInfo().name) {
ctx.showWarning('Metadata already in use by ' + lock);
ctx.activeObject.setReadonly(true);
} else {
if (!lock) {
$(metadataXML).find('metadata').append('<locked>' + ctx.getCurrentUserInfo().name + '</locked>');
ctx.activeObject.setMetadataXML(metadataXML);
// The saveMetadata is not triggering preSave, validate and postSave is this case
ctx.activeObject.saveMetadata();
}
ctx.activeObject.setReadonly(false);
}
},
postFillForm: function(ctx, callback) {
console.log("postFillForm");
// Some operations..
},
preSave: function(ctx) {
console.log("preSave");
// Let's check a particular metadata..
var metadataXML = ctx.activeObject.getMetadataXML();
// Some operations..
// Return the new metadata.
return metadataXML;
},
validate: function(ctx) {
console.log("validate");
return true;
},
postSave: function(ctx) {
console.log("postSave");
// For example, we can refresh Metadata
// ctx.activeObject.refreshMetadata();
},
onClose: function(ctx) {
console.log("onClose");
//ctx.activeObject.refreshMetadata();
var metadataXML = ctx.activeObject.getMetadataXML();
var lock = $(metadataXML).find('locked').text();
// For example, we can set a specific metadata to "unlock it".
if (lock && lock == ctx.getCurrentUserInfo().name) {
$(metadataXML).remove('locked');
ctx.activeObject.setMetadataXML(metadataXML);
ctx.activeObject.saveMetadata();
}
},
onUpdatesAvailable: function(ctx) {
console.log("onUpdatesAvailable");
ctx.activeObject.refreshMetadata(null, true);
var metadataXML = ctx.activeObject.getMetadataXML();
},
onEvent: function(evt, ctx) {
console.log("onEvent");
var eventName = evt.name;
var eventInfo = evt.info;
if (eventName === 'set_attributes') {
ctx.activeObject.refreshMetadata(null, true);
var metadataXML = ctx.activeObject.getMetadataXML();
}
},
onApplicationStatusChange: function( ctx, status ) {
// For example, we can check the application status
if (status.isOnline) {
console.log("application is online");
} else {
console.log("application is offline");
}
}
};
eidosmedia.webclient.extensions.objectpanel.register(types, template, options);
})();Context Object (ctx parameter)
Basic structure of the Context Object
The Context object is made of a specific list of properties, and a number of publicly available methods.
{
application: {
getId: function()
},
area: {
getType: function(),
getName: function(),
getContext: function()
},
component: {
getType: function()
},
activeObject: {
// Methods of the single object.
},
activeObjects: [{activeObject}] // An array of activeObject
selection: [ ] // Array of objects. See below.
}| Parameter | Value type | Description | Values |
|---|---|---|---|
application.getId() |
String |
Returns the application Id. |
"swing", … |
area.getType() |
String |
Returns the area type. |
"main" (for the main views), "editor" |
area.getName() |
String |
Returns the area name. |
"explorer", "dashboard", "myarea", "liveblogmanagement" (for "main" areas). "story" (for editors). |
area.getContext() |
String |
Returns the area context. |
"story-editor", "report-editor", "dwp-editor", "topic@editor", "topic@search", "topic@binder", "topicplan@editor", "topicplan@search", "topicplan@binder", "topicitem", "upload", "diagram-workflow", "search", "planning-calendar" |
component.getType() |
String |
Returns the component type. |
"toolbar", "grid", "objectpanel"… |
activeObject |
Object |
Returns an object with a set of methods. Refer to : Methods of the single object for the list of methods. |
|
activeObjects |
Array |
Returns an array of activeObject(s). In bulk selection mode all selected items are returned here as array. In single selection mode array length is 1. Each activeObject is coupled with one selected item. Methods of the single object operate to that item. |
|
selection |
Array of Object |
Returns an array with the currently selected items. Each item has the same set of methods available. Refer to : Methods of the single object for the list of methods. |
|
Each context has a different value for these properties. |
Methods available in the Context Object
Further details on the methods available in the Context Object can be found in the Context Object Methods reference.
Context Object properties for the ObjectPanel
The Object Panel context has the following values:
| Parameter | Values | Description |
|---|---|---|
component.getType() |
"objectpanel" |
|
component.getId() |
String |
The id of the ObjectPanel DOM Element ( e.g. '#em-metadata-area' ) |
activeObject.getId() |
String |
Return the ID of the current object |
activeObject.getInfo() |
JSON |
Return the info of the current object |
activeObject.getType() |
JSON |
Return the type of the current object |
selection |
JSON Array |
Not available (empty array) |
Additional methods in the Context Object for Object Panel.
| Method | Available in |
|---|---|
activeObject.getUniqueMetadataId() |
preFillForm - postFillForm - preSave - postSave - onClose |
activeObject.setReadonly() |
preFillForm - postFillForm - preSave - postSave - onClose |
activeObject.showLoading() |
preFillForm - postFillForm - preSave - postSave - onClose |
activeObject.hideLoading() |
preFillForm - postFillForm - preSave - postSave - onClose |
activeObject.getMetadataXML() |
preFillForm - postFillForm - preSave - validate - postSave - onClose |
activeObject.setMetadataXML() |
preFillForm - onClose |
activeObject.getImage() |
onImageProcessing |
activeObject.setFieldValue() |
postFillForm - preSave |
activeObject.getFieldValue() |
postFillForm - preSave |
activeObject.refreshMetadata() |
postFillForm - postSave - onClose |
activeObject.saveMetadata() |
preFillForm - postFillForm - onClose |
activeObject.notifyMetadataChange() |
postFillForm |
activeObject.refreshPanel() |
onUpdatesAvailable - onEvent |
getUniqueMetadataId()
Return the same unique id used in the HTML panel whenever a -<%=uniqueMetadataId%> has been used to generate a unique Id.
The syntax is the following:
var uniqueId = ctx.activeObject.getUniqueMetadataId(); // e.g "5";
var uniqueId = ctx.activeObject.getUniqueMetadataId(); // e.g "5";
// In this way we ensure that the only the current custom panel is referenced
$('#myCustomPanel-' + uniqueId) // ...setReadonly()
Creates a readonly layer over the object Panel. The syntax is the following:
ctx.activeObject.setReadonly( [value] );
Value can be true (default) or false.
showLoading(), hideLoading()
Shows or hides a loading element. The syntax is the following:
ctx.activeObject.showLoading( options);
{object} options - An object containing an optional message to display during the loading process, a color and backgroundColor of the text message.
ctx.activeObject.hideLoading( );
getMetadataXML()
Return the current metadata XML as a document object.
setMetadataXML( metadataXML )
Sets the the new metadata XML ( only in the preFillForm and onClose method ).
getImage()
Returs a Promise resolved with the current active object image raw data
setFieldValue( data-id, value)
Sets programmatically a value to the field having the data-id provided. Value MUST be in the format expected by DTD.
Use always this method to set programmatically a value to be compatible with bulk mode.
getFieldValue( data-id )
Get the current value from the field having data-id. The returned field value is in the format expected by DTD.
Use always this method to get programmatically a value to be compatible with bulk mode.
refreshMetadata()
Refresh the current Metadata.
|
This will cause a reload of the objectPanel, and consequently a call to "preFillForm" and "postFillFrom" methods. |
refreshPanel()
Refresh the current Object panel.
saveMetadata()
Saves the current Metadata. Before saving, the "preSave" method is called. After saving, the "postSave" method is called. In bulk mode this method saves metadata for all selected objects even if called from a particular activeObject.
notifyMetadataChange()
This method allows to notify that a metadata has changed.
How to configure object panels in external folder
Additional object panels may be made available to Swing application by defining one or more nested components in Swing web context in server.xml. (for further details on Tomcat 9.x Resources configuration, please refer to Resources configuration).
This is an example of the external object panels configuration.
<Context docBase="com.eidosmedia.webclient.web-app"
path="/swing" reloadable="false">
<Resources
className="org.apache.catalina.webresources.StandardRoot">
<PreResources
className="org.apache.catalina.webresources.DirResourceSet"
base="/methode/meth01/extension/objectpanels" readOnly="true"
webAppMount="/config/templates/objectpanel" />
</Resources>
</Context>