xCP 2.1 Developer Guide

EMC®®® Documentum®®®
xCelerated Composition
Platform
Version 2.1
Developer Guide
EMC Corporation
Corporate Headquarters:
Hopkinton, MA 01748-9103
1-508-435-1000
www.EMC.com

Legal Notice
Copyright © 2009–2014 EMC Corporation. All Rights Reserved.
EMC believes the information in this publication is accurate as of its publication date. The information is subject to change without
notice.
THE INFORMATION IN THIS PUBLICATION IS PROVIDED "AS IS." EMC CORPORATION MAKES NO
REPRESENTATIONS OR WARRANTIES OF ANY KIND WITH RESPECT TO THE INFORMATION IN THIS PUBLICATION,
AND SPECIFICALLY DISCLAIMS IMPLIED WARRANTIES OF MERCHANTABILITY OR FITNESS FOR A PARTICULAR
PURPOSE.
Use, copying, and distribution of any EMC software described in this publication requires an applicable software license.
For the most up-to-date listing of EMC product names, see EMC Corporation Trademarks on EMC.com. Adobe and Adobe PDF
Library are trademarks or registered trademarks of Adobe Systems Inc. in the U.S. and other countries. All other trademarks used
herein are the property of their respective owners.
Documentation Feedback
Your opinion matters. We want to hear from you regarding our product documentation. If you have feedback about how we can
make our documentation better or easier to use, please send us your feedback directly at IIGDocumentationFeedback@emc.com.

Table of Contents
Chapter 1 Custom Widget............................................................................................... 7
Overview ......................................................................................................... 7
Setting up the development environment ........................................................... 7
Creating a custom widget.................................................................................. 8
JavaScript content file ................................................................................... 8
Widget definition file ...................................................................................... 8
Packaging custom components JAR file ............................................................15
Custom JavaScript functions.............................................................................17
JavaScript content file ..................................................................................17
Function XML file ..........................................................................................18
Importing custom widgets in xCP Designer ........................................................20
Debugging and using development mode ..........................................................21
Chapter 2 Markups .........................................................................................................23
Overview .........................................................................................................23
Container Editor ...............................................................................................24
<pe:composite> ............................................................................................24
<pe:section>.................................................................................................27
Component Editor ............................................................................................30
<pe:label> ....................................................................................................30
<pe:textfield>................................................................................................31
<pe:checkBox>.............................................................................................33
<pe:radio>....................................................................................................35
<pe:radioGroup>...........................................................................................36
<pe:dropDown> ............................................................................................38
dropDown Source......................................................................................41
Mapping of the dropDown Source...............................................................43
<pe:xcpId> ...................................................................................................43
<pe:expressionPropertyEditor>......................................................................44
<pe:artifactSelector> .....................................................................................47
<pe:boxModelPropertyEditor>........................................................................50
<pe:sizePropertyEditor> ................................................................................51
<pe:dataServiceInstancePropertyEditor>........................................................53
<pe:dataTypePropertyEditor> ........................................................................55
<pe:setProperty> ..........................................................................................57
<pe:expression>........................................................................................59
<pe:layoutData>...............................................................................................60
<pe:gridData>...............................................................................................61
<pe:gridLayout>............................................................................................62
<pe:rowData>...............................................................................................63
<pe:rowLayout>............................................................................................63
<pe:fillLayout> ..............................................................................................64
<pe:horizontalAlignment> ..............................................................................64
EMC Documentum xCelerated Composition Platform Version 2.1 Developer Guide 3

Table of Contents
<pe:propertyStore> ..........................................................................................65
<pe:propertySheetTab> ....................................................................................66
<pe:dataRef>...................................................................................................67
Usecase ..........................................................................................................68
schema-representation .....................................................................................71
Chapter 3 Type Adoption ................................................................................................77
Overview .........................................................................................................77
Adopting types .................................................................................................77
Editing and configuring Adopted Types ..............................................................78
Deploying adopted types ..................................................................................79
Runtime behavior .............................................................................................79
Chapter 4 Troubleshooting - Custom Widget..................................................................81
Blank page editor canvas..................................................................................81
Custom widget does not appear in Widgets palette.............................................81
Timing issues at runtime ...................................................................................82
Style issues .....................................................................................................82
Caching issues.................................................................................................82
4 EMC Documentum xCelerated Composition Platform Version 2.1 Developer Guide

Preface
This guide describes how to develop your customized widgets and use markups for the xCP
Designer. It also explains how you can adopt data types from the Documentum repository to the
xCP application using type adoption feature.
Intended Audience
The information in this guide is for developers who develop customized widgets, use markups, and
adopt data types. It assumes you have knowledge of ExtJS and JavaScript.
Revision History
The following table lists changes in this guide.
Revision Date Description
March 2014 Initial publication

Chapter 1
Custom Widget
This chapter contains the following topics:
• Overview
• Setting up the development environment
• Creating a custom widget
• Packaging custom components JAR file
• Custom JavaScript functions
• Importing custom widgets in xCP Designer
• Debugging and using development mode
Overview
xCP Designer is shipped with a comprehensive set of widgets, which provide you various options
and choices when you put together an application. However, the existing widgets might not meet all
your requirements, requiring the need to create a customized widget. In this scenario, you can build
your own widgets.
To build a new widget you must have knowledge of ExtJS and JavaScript. xCP widgets are based on
the Sencha ExtJS framework. To use customized widgets, they must be bundled into a JAR file and
imported into xCP Designer.
Each custom widget can be built with the following components:
• JavaScript Class File: (Required) Provides the instantiation and behavior of the widget.
• Widget XML: (Required) Outlines the properties or metadata about an instance of the widget.
• Localization Properties File: (Optional) In this file, widget related strings are externalized.
• CSS Class: (Optional) Customizes look and feel of the widget.
Setting up the development environment
The development environment for developing a custom widget, must include the following:
• JavaScript IDE, such as IntelliJ IDEA (recommended), Eclipse, or Aptana
• An application server, such as Tomcat or tc Server
• Java Runtime
• Supported browser with a debugger

Custom Widget
To test the changes made in the widget, you need the following:
• An xCP Designer to test the custom widget at design time.
• A deployed xCP application to test the behavior of the custom widget at runtime.
Creating a custom widget
To create a custom widget, you need to create these files:
• JavaScript Content File
• Widget Definition XML File
JavaScript content file
In the JavaScript file, include all the code required for the user interface to work at runtime. You can
extend various ExtJS components while adding the required functionalities. The JavaScript file should
contain the definition of the class as follows:
Ext.define("myNamespace.widgets.myCustomWidget", {
extend: "Ext.form.Text",
alias: "widget.myWidgetXType",
myNamespace.widgets.myCustomWidget is the name of the custom widget. It extends
Ext.form.Text, which is an ExtJS widget. widget.myWidgetXType is an alias. An alias must be
specified in the <xtype of widget> format for the widget to be recognized by the system. The xtype of
a widget is specified in the widget’s definition XML file.
Widget definition file
The Widget definition file contains the widget definition and its properties in XML format. The
model_schema.xsd file defines the structure of the widget definition file. The elements of the widget
definition file are explained below.
<Widget> element
Syntax
<widget xmlns="http://documentum.emc.com/2010/UI-Model"
id="myCustomWidgetID"
xtype="myWidgetXType"
version="1.0.0000.001">
Description
The <widget> element has the following attributes:
• xmlns – Specify the namespace of the widget as
http://documentum.emc.com/2010/UI-Model.
• id – Specify a unique identifier for a widget.

Custom Widget
• xtype – Specify the type of the widget, which the system uses at runtime to look for widget
properties.
• version – Specify the numeric version string.
<Name> element
Syntax
<name>My Custom Widget</name>
Description
Name of the widget shown in the widgets palette of the Page Editor.
<Description> element
Syntax
<description>Description explaining what this widget does.</description>
Description
Description of the widget shown as a tooltip in the widgets palette.
<Icon> element
Syntax
<icon src="icons/mycustomwidget_wig.png" width="16" height="16"/>
<icon src="icons/mycustomwidget_24_wig.png" width="24" height="24"/>
Description
Specifies the location of the icon files in the packaged jar. Two types of icons are used by xCP
Designer. One type is shown next to the widget in the widgets palette as illustrated in the first syntax.
The other is shown when the widget is dragged onto the canvas as illustrated in the second syntax.
For the icon shown next to the widget in the widget palette, the width and height must be 16, and for
the icon shown when the widget is dragged, the width and height must be 24. For both the icons,
the file name must end with "_wig".
<Content> element
Syntax
<content src="content/widget/MyCustomWidget.js"
type="text/javascript"
nls="widget/MyCustomWidget-strings.js"/>
Description
Defines the location of the JavaScript files used to render the widget. It has the following attributes:
• src – Specify the path of the file in the packaged jar.
• type – Specify "text/javascript" to indicate that this is a JavaScript file.

Custom Widget
• nls – Specify the root path of the JavaScript files used for localization. The root path is
locales/content/<country code>.
<Category> element
Syntax
<category>xcpPalette:Custom</category>
Description
Determines the section of the widgets palette under which the widget should appear. Specify any of
the following values:
• xcpPalette:Navigation
• xcpPalette:Layout
• xcpPalette:Input
• xcpPalette:Selection
• xcpPalette:List
• xcpPalette:Text
• xcpPalette:Presentation
• xcpPalette:Action
• xcpPalette:Custom
<Configuration> element
Syntax
propertyInfo name="propertyName" hidden="true">
Description
Defines the set of attributes for the widget. These attributes collectively determine the JSON that is
generated for the widget. This element can have the following children elements in the specified order:
• <Databound> element – (Optional) Is a special type of <propertyInfo> element. There can be only
one occurrence of this element. The sample <Databound> element is as follows:
<databound name="initialValue">
<label>Initial Value</label>
<description>Initial Value for folder</description>
<type>EXPRESSION</type>
<expression>
<contextTree>
<include>PRIMARY_CONTEXT</include>
<include>APP_CONTEXT</include>
<include>WIDGET_CONTEXT</include>
<include>SINGLE_OBJECT_DATA_SERVICE_OUTPUT</include>
<include>UI_EVENTS</include>
<include>SESSION_PARAMETERS</include>
<include>FRAGMENT_INPUT</include>
</contextTree>
<enableExplicitEventSubscription>true</enableExplicitEventSubscription>
</expression>

Custom Widget
</databound>
• <PropertyInfo> element – (Optional) Describes the attributes and values for a particular
name-value pair in the JSON. There are no limits to the number of occurrences of this element.
This element contains information related to:
– Presentation of the property in xCP Designer.
– Property Validation Rules.
– Data type of the property; such as string, integer, boolean, and expression.
The sample <propertyInfo> element is as follows:
<propertyInfo name="title" localizable="true">
<label>Title</label>
<type>STRING</type>
<constraint>
<validator type="maxLength" maxLength="60"/>
</constraint>
<required>true</required>
<defaultvalue></defaultvalue>
</propertyInfo>
Element Syntax Description
<label>My own label</label> Specifies the label shown in the properties view of
xCP Designer.
<type>STRING</type> Determines the editor to be used to specify a value.
The options are:
• STRING – Specifies a text field.
• INTEGER – Specifies a text field.
• BOOLEAN – Specifies a checkbox.
• EXPRESSION – Specifies an expression
editor. Configure the expression editor using the
<expression> element.
<constraint>
<validator type="maxLength"
maxLength="60"/>
</constraint>
Defines the limit of the value. You can define only
maxLength. In order to use it, a second attribute
maxLength has to be defined.
<defaultvalue>
My default value
</defaultvalue>
Defines the default value to be used as the value of the
property. <defaultvalue> element can be used along
with the hidden attribute of <propertyInfo> element.
<expression>
<setterFunName>
myCustomSetValue
</setterFunName>
<contextTree>
<include>DATASOURCE_OUTPUT</include>
<include>SINGLE_OBJECT_DATA_
SERVICE_OUTPUT</include>
This element is used if <type> of the property is set to
EXPRESSION.
The <setterFunName> element specifies the
JavaScript function used to store the data.The
JavaScript function specified in this element must be
defined either in the custom JavaScript file or the base
JavaScript class it extends.
The <contextTree> element determines from where
the value for the expression can be selected. The
options are:

Custom Widget
</contextTree>
</expression> • APP_CONTEXT – Specifies the context of the
application, such as name of the application and
logged in user.
• PRIMARY_CONTEXT – Specifies the primary
context of the page. For example, the primary
context for View Customer page would be the
Customer and its attributes can be used as part of
the expression. For example, Customer.firstName.
• UI_EVENTS – Specifies the UI events applicable
for the context. For example, to subscribe to
warnings that occur in the application page,
uievent.Application.xcp.show_warning.warn-
ing_message.
• SESSION_PARAMETERS – Specifies the
session variable applicable for the context. For
example, for a shopping site, a shopping cart may be
implemented as a session parameter and you can use
sessionparameters.ns.shoppingcart
to access session parameter.
• FRAGMENT_INPUT– Specifies fragment inputs
if the page is a fragment. For example, a map
fragment accepts latitude as input. You can use
fragment input inside fragment layout and bind to
the widgets. A text field inside fragment needs
to show the latitude, then it can be configured as
Inputs.latitude.
• GLOBAL_CONTEXT– Specifies the
shortcut context. APP_CONTEXT,
SESSION_PARAMETERS, UI_EVENTS is
valid in multiple places and this may result in
duplication. You can specify the context once as
GLOBAL_CONTEXT and this can then be applied
to all the relevant contexts.
• PAGE_CONTEXT – Specifies the shortcut
context. In a page, APP_CONTEXT,
SESSION_PARAMETERS, _EVENTS,
PRIMARY_CONTEXT, WIDGET_CONTEXT,
SINGLE_OBJECT_DATA_SERVICE_OUTPUT,
FRAGMENT_INPUT are valid contexts. This
might result in duplication of these contexts in page
level contexts. You can specify the context once as
PAGE_CONTEXT and can be applied to all the
specified contexts.
• WIDGET_CONTEXT – Specifies the context of
other widgets on the page. If the value is specified,
you can use the data stored in other widgets on the
page. For example, you can use data from other
widgets as prefix or suffix for this widget.

Custom Widget
• DATASOURCE_INPUT – Specifies the context
referenced from an input of a Data Source Instance.
• DATASOURCE_OUTPUT – Specifies the
context referenced from an output of a Data Source
Instance.
• SINGLE_OBJECT_DATA_SERVICE_OUT-
PUT – Specifies the context referenced from an
output of a Data Source Instance, if the output does
not contain any repeating attributes.
<expressionProperties> element
Syntax
<expressionProperties>
<propertyInfo name="value">
<label>Value</label>
<getterFun>
<name>this.getValueFromWidget</name>
<arguments>
<argument>EVALUATION_CONTEXT</argument>
<argument>WIDGET_ID</argument>
<argument>PROPERTY_ID</argument>
</arguments>
</getterFun>
<changeEvents>
<eventInfo name="change"/>
</changeEvents>
</propertyInfo>
</expressionProperties>
Description
Defines attributes that can be used in the expression editor. This element can have the following
children elements:
• propertyInfo — The name attribute of the <propertyInfo> element corresponds to the name of
the property defined in the <configuration> element. The most common usage is to get the value
from a widget.
• label — Specifies the label of the property shown in xCP Designer.
• getterFun — Specifies the name and arguments of the JavaScript function to get the value.
• name — Specifies the name of the function. For example, this.getValueFromWidget function
can be used to get the value from the widget and this.getValueFromSelectionModel function
can be used for widgets that allow selection. If there are any functions defined in your widget
JavaScript file, you can use them as well.
• arguments — Specifies the arguments passed into this function. Possible values for each
<argument> element are:
– EVALUATION_CONTEXT – (Mandatory) Specifies the context from which all the information
can be retrieved.

Custom Widget
– WIDGET_ID – Specifies the identifier of the widget.
– MODEL_ID – Specifies the identifier of the model, for example, customer model.
– DATASERVICE_INSTANCE_ID – Specifies the identifier of the data service instance.
– PROPERTY_ID – Specifies the identifier of the property.
– PARAMETER_NAMESPACE – Specifies the namespace of the parameter and is used for
application parameters.
Special <propertyInfo> element
There are special <propertyInfo> elements used for specific use cases. These property name keywords
appear differently in the properties view of xCP Designer. The speacial <propertyInfo> elements are:
• valueType – Shows a drop-down list with all available types, such as, string, integer, float, datetime,
and boolean.
<propertyInfo name="valueType">
<label>Data type</label>
<type>STRING</type>
<defaultvalue>STRING</defaultvalue>
</propertyInfo>
• isRepeating – Shows a checkbox that allows you to specify whether the data should be repeated or
not. Use the name="isRepeating" attribute along with the hidden=”true” attribute.
<propertyInfo name="isRepeating" hidden="true">
<type>BOOLEAN</type>
<defaultvalue>true</defaultvalue>
</propertyInfo>
• repeatingAttributeFormat – Shows two drop-down lists that allow you to specify how to represent
the repeating attribute. One drop-down list allows you to specify a new line as a separator to separate
multiple values, and the other drop-down list allows you to specify any other separator.
<propertyInfo name="repeatingAttributeFormat">
<label>Repeating Attribute Format</label>
<type>OBJECT</type>
</propertyInfo>
There are a few properties that can specify the behavior of the widget—read-only, hidden, and
disabled. All these properties must have their type set to EXPRESSION. The expression editor is
placed in a Behavior tab of the properties view.
• readonly – Specifies when the widget is read-only.
• hidden – Specifies when the widget is hidden.
• disabled – Specifies when the widget is disabled.
The sample <propertyInfo> element for hidden behavior is as follows:
<propertyInfo name="hidden">
<label>Hidden when</label>
<expression>
<setterFunName>setHidden</setterFunName>
<contextTree>

Custom Widget
<include>SINGLE_OBJECT_DATA_SERVICE_OUTPUT</include>
<include>UI_EVENTS</include>
<include>SESSION_PARAMETERS</include>
<include>FRAGMENT_INPUT</include>
</contextTree>
<enableExplicitEventSubscription>
true
</enableExplicitEventSubscription>
</expression>
</propertyInfo>
Packaging custom components JAR file
Once you have created the JavaScript content and Widget definition XML files, you can package them
with other necessary components in a JAR file. The JAR file consists of the following components:
• Manifest file
• JavaScript content file
• Widget definition XML file
• Icon used by the custom component
• Properties file used for localization
The manifest file, which is case-sensitive, is located at the following path in the JAR file:
META-INF/MANIFEST.MF
The sample MANIFEST.MF file is as below:
Manifest-Version: 1.0
Ant-Version: Apache Ant 1.7.1
Created-By: 20.5-b03 (Sun Microsystems Inc.)
Copyright: EMC Corporation
Version: 1.0
Build-Version: 1.0.0000.0001
Built-By: John Doe
Built-Date: 2012-05-17 00:12:43
Component-Bundle: my-custom-widget
Bundle-Version: 1.1
Bundle-Name: MyCustomWidget
Bundle-SymbolicName: MyCustomWidget
NAMESPACE: mcw
The Component-Bundle attribute, which is case-sensitive, is a mandatory attribute. The value of this
attribute is the identifier of the JAR file. Also, the value is used as the name of a base folder for the
JAR file. Ensure that the value of this attribute is unique across applications.
All the components other than manifest file reside in the base folder.
Structure of the JAR file
The structure of the JAR file is illustrated below:

Custom Widget
The folders under the my-custom-widget base folder are described below:
• Config – This folder contains Widget definition XML file.
• Content – This folder contains JavaScript files. The folder structure must match the <content>
element defined in the Widget definition XML file.
• Icons – This folder contains all icons. The folder structure must match the <icon> element defined
in the Widget definition XML file.
• Lib – This folder is required to package any external libraries or JARs.
• Locales – This folder contains all localization files.
Widget labels can be localized either at design time or at runtime.
The Locales/config/my-custom-widget.properties file contains information to
localize the property labels of the custom widget in xCP Designer. You need to specify the
ID of the locale string in the properties file and specify the locale specific string. The sample
my-custom-widget.propertiesfile is as follows:
name=My Custom Widget
description=My sample custom widget
LOCALE_STRING_ID= Locale String
You can localize any relevant string in the component definition using ${ LOCALE_STRING_ID}
construct.
<propertyInfo name="fieldLabel" localizable="true">
<label>${ LABEL_LOCALE_ID} </label>
<type>STRING</type>
<defaultvalue>Label</defaultvalue>
</propertyInfo>
In the above example, label string of property info is localized using ${ LABEL_LOCALE_ID} and
the corresponding ID is defined in the localization file, my-custom-widget.properties file.
<propertySheetConfiguration>
<pe:propertySheetTab name="${General}" id="general"/>

Custom Widget
</propertySheetConfiguration>
In the above example, name of the property sheet tab is localized using ${General} . General is
defined in the localization file, my-custom-widget.properties file.
A sample custom widget localization file used at design time:
Ext.namespace("xcp.Strings.widget.custom.designer.MyCustomWidget");
Ext.apply(xcp.Strings.widget.custom.designer.MyCustomWidget, {
basicSectionLabel : "Basics",
layoutSectionLabel: "Layout",
});
A sample custom widget localization file used at runtime:
Ext.namespace("xcp.Strings.widget.custom.MyCustomWidget ");
Ext.apply(xcp.Strings.widget.custom.MyCustomWidget, {
a_folder : "A folder",
myfiledotdoc: "My file.doc",
moreItems: "more items"
});
Mention the above two locale files in the Widget definition XML file as follows:
<content src="content/xcp/widget/custom/MyCustomWidget.js"
nls="xcp/widget/custom/MyCustomWidget-strings.js"/>
<content src="content/xcp/widget/tree/designer/ContentTree.js"
nls="xcp/widget/custom/designer/MyCustomWidget-strings.js" mode="design"/>
The following sample shows how to use function with parameter in the JavaScript content file:
xcp.Strings.widget.custom.MyCustomWidget.moreItems
• Resources – This folder contains CSS and SASS files.
Custom JavaScript functions
You can create your own JavaScript functions and import those functions in xCP Designer as libraries.
A custom JavaScript function consists of these files:
• JavaScript content file
• Function XML file
JavaScript content file
The JavaScript content file contains a function definition along with the required namespace definition.
In the sample JavaScript content file below, abcompany.functions is the namespace and the
myCustomFunction function concatenates two strings.
// myCustomFunction.js

Custom Widget
Ext.namespace (’abcompany.functions’);
/*
* Comments for myCustomFunction
*/
abcompany.functions.myCustomFunction = function (str1, str2) {
return str1 + str2;
}
Function XML file
The Function XML file contains the JavaScript function definition and its properties in XML format.
<function> element
Syntax
<function xmlns="http://documentum.emc.com.com/2010/UI-Model"
id="JSFunction-myCustomFunction" version="1.0.0000.001">
Description
The <function> element has the following attributes:
• xmlns – Specifies the namespace for a custom function as
http://documentum.emc.com/2010/UI-Model.
• id – Specifies a unique identifier for a custom function.
• version – Specifies the numeric version string.
<name> element
Syntax
<name>myCustomFunction</name>
Description
Name of the function shown in the expression editor of the Page Editor.
<Description> element
Syntax
<description>
Returns the concatenated values of the two input parameters
</description>
Description
Description of the function shown as a tooltip in the expression editor.

Custom Widget
<Content> element
Syntax
<content src="content/function/MyCustomFunction.js" type="text/javascript"/>
Description
Defines the location of the JavaScript file used to execute this function. It has the following attributes:
• src – Specifies the source path of the file within the packaged jar.
• type – Indicates the type as a JavaScript file.
• nls – Specifies the path of other JavaScript files used for localization, for example,
locales/content/<country code>/.
<namespace> element
Syntax
<namespace>abcompany.functions</namespace>
Description
The value of this element must match with the namespace of the JavaScript function. It is used to
generate the caller of the custom function.
<categoryName> element
Syntax
<categoryName>String</categoryName>
Description
Determines the category of the function by its return type. Specify any of the following values:
• String
• Mathematical
• Date
<returnType> element
Syntax
<returnType isRepeating="false">STRING</returnType>
Description
Determines the type of data to be expected as an outcome of the custom function. The expression
editor uses this information to perform validation. The isRepeating attribute identifies whether
the value is a single value or a repeating value.
Specify any of the following values:
• STRING

Custom Widget
• INTEGER
• FLOAT
• DATETIME
• BOOLEAN
<params> and <param> elements
Syntax
<params>
<param name="str1" required="true">
<type isRepeating="false">STRING</type>
</param>
<param name="str12" required="true">
<type isRepeating="false">STRING</type>
</param>
</params>
Description
The <params> element contains a list of parameters that a JavaScript function can consume.
The <param> element contains information for each parameter. It has the following attributes:
• name – (Required) Specifies the name of the parameter.
• required – Specifies whether this parameter is required or not. For a parameter if the required
attribute is set as False, xCP Designer cannot read the subsequent parameters for which the
required attribute is set as True.
The <type> element, a child element of <param> element, defines the type of the parameter. It has the
isRepeating attribute that identifies whether the value is a single value or a repeating value. For
<type> element, specify any of the following values:
• String
• Integer
• Float
• Datetime
• Boolean
• ANY
If you specify ANY, xCP Designer does not verify the type of a parameter when it validates the
function input.
Importing custom widgets in xCP Designer
Import a custom widget as a library from the application model of xCP Designer. The xCP Designer
Help provides information on how to import a library.
After you have imported a custom widget, it appears in the widgets palette under a specific category
as defined in the Widget definition file. Drag and drop the custom widget to the layout area and

Custom Widget
verify if it behaves as expected. If the Page Editor or the Palette does not show up correctly, resolve
the JavaScript errors for your custom widget.
Debugging and using development mode
You can debug a custom widget at design-time and runtime.
Debugging at design-time
1. In the layout area of a page, perform Ctrl + Shift + Click.
2. Press F12 or click on the Firebug icon to display the debug console.
3. In the Firebug console, type window.location.href and press Enter.
4. Select and copy the URL.
5. Open a Web browser, for example, Firefox or Chrome, and paste the URL.
6. Debug the script of your custom widget, as required.
Debugging at runtime
1. To debug JavaScript in an xCP application, add the nominify parameter to the URL:
http://<hostname>:8080/<appname>/?nominify#application/<pagename>
2. Typically, custom widget development involves multiple iterations of development and test cycles.
So, to improve your productivity, perform the following steps:
a. Copy the deployed application from tc Server to your local Tomcat under webapps.
b. Copy libraries from tcServer/APPHOST/lib to WEB-INF/lib of your application in Tomcat.
c. Copy dfc.properties and bam-server.properties from APPHOST/<customConf> to
WEB-INF/classes.
d. Delete the custom widget jar from WEB-INF/lib.
3. In the xCP web application deployed above, navigate to WEB-INF/web.xml and uncomment the
following lines to enable the folder-based component bundle loading.
<servlet>
<display-name>xCP Component Servlet</display-name>
<servlet-name>ComponentServlet</servlet-name>
<servlet-class>
com.emc.documentum.ui.model.ComponentServlet
</servlet-class>
<init-param>
<description>Directory for development mode</description>
<param-name>bundleDirectory</param-name>
<param-value>/bundles</param-value>
</init-param>
<load-on-startup>1</load-on-startup>
</servlet>
Change /bundles to custom component source, for example, c:/devBundles.
4. Test the pages where custom widget is configured. If you face any issue related to the
customization, perform the following steps:

Custom Widget
a. Open the widget implementation.
b. Fix the issue in the impacted JavaScript code.
c. Use debugging tools like FireBug to identify the issue.
d. Clear the browser cache.
e. Test the application.
Repeat the above mentioned steps, till you get the resolution.
5. To fix the widget configuration in the generated page JSON, perform the following steps:
a. Open the impacted JSON located in <web-app-root>/pages/.
b. Find the custom widget configuration. You can search this by custom widget xtype.
{
"xcpId" : "custom_widget",
"xtype" : "custom_widget",
"style" : "height:20px",
"valueType" : "STRING"
"isRepeating" : false
"valueType" : "customWidget.name"
}
c. Fix the configuration
d. Fix the issue in the impacted JavaScript code.

Chapter 2
Markups
This chapter contains the following topics:
• Overview
• Container Editor
• Component Editor
• <pe:layoutData>
• <pe:propertyStore>
• <pe:propertySheetTab>
• <pe:dataRef>
• Usecase
• schema-representation
Overview
Markup-driven widget property editor is used to develop widgets with specified custom property
editors. Property editor markup helps you define the property editors and its behavior for a custom
widget.
The advantages of using markup to develop custom widgets are:
• You do not require knowledge of Standard Widget Toolkit (SWT) for developing a custom widget.
• You can define the editors and their behavior efficiently using a simple-to-use markup.
• You can reuse the generic property editors in markup.
• You only need to provide custom editor markup. The infrastructure handles UI rendition of different
markups, data provision for different artifacts, expression execution and validation.
• You can generate property editors and property validators that can be associated with custom
widgets.
• A pre-defined schema guides you to validate the markup.
Typically, application of markups consists of the following steps:
• Create widget component definition that defines the properties configuration.
• Configure property editors in component definition.
• Configure layout, tabs, sections, and elements.
• Configure evaluation expression condition for enablement and visibility of the widget.

Markups
Container Editor
<pe:composite>
Syntax
<pe:composite
id="unique ID">
Start Sequence
<pe:setPropertyname="Enable | Visible"> specifies the expression or
value to compute the property </pe:setProperty>
<pe:layout> Specifies various layouts </pe:layout>
<pe:layoutData> layout preference data for its parent
container’s layout calculation </pe:layoutData>
All the editors mananged by the composite editor goes here.
End Sequence
Start Sequence
<pe:composite> pe:composite-bean </pe:composite>
<pe:dropDown> pe:dropdown-bean </pe:dropDown>
<pe:checkBox> pe:checkbox-bean </pe:checkBox>
<pe:radio> pe:radio-bean </pe:radio>
<pe:radioGroup> pe:radio-group-bean </pe:radioGroup>
<pe:propertyStore> pe:property-store-bean </pe:propertyStore>
<pe:textField> pe:textfield-bean </pe:textField>
<pe:label> pe:label-bean </pe:label>
<pe:section> pe:section-bean </pe:section>
<pe:sizePropertyEditor> pe:size-property-editor-bean
</pe:sizePropertyEditor>
<pe:boxModelPropertyEditor> pe:box-model-property-editor-bean
</pe:boxModelPropertyEditor>
<pe:expressionPropertyEditor> pe:expression-property-editor-bean
</pe:expressionPropertyEditor>
<pe:dataTypePropertyEditor> pe:data-type-property-editor-bean
</pe:dataTypePropertyEditor>
<pe:dataServiceInstancePropertyEditor> pe:data-service-instance-
property-editor-bean </pe:dataServiceInstancePropertyEditor>
<pe:artifactSelector> pe:artifact-selector-editor-bean
</pe:artifactSelector>
<pe:xcpId> pe:xcp-id </pe:xcpId>
End Sequence
</pe:composite>
Description
Contain other editors and apply layout to the elements present in the container.
Layout: A layout controls the position and size of children in a composite. The following layouts are
supported:

Markups
• FillLayout: Specifies equal-sized widgets in a single row or column. For more information, see
fillLayout, page 64.
• RowLayout: Specifies widgets in a row or rows, with size options. For more information, see
rowdata, page 63 and rowLayout, page 63.
• GridLayout: Specifies widgets in a grid. For more information, see gridData, page 61 and
gridLayout, page 62.
Layout Data: Layout data is the preference data of the editor given to its container layout. This allows
editor to get rendered in a preferred size and shape.
The editor should specify the following, to alter the default layout of the container:
• If the container layout is GridLayout, specify gridData.
• If the container is rowLayout, specify rowData.
FillLayout equally divides the space for its child element, so its behavior can not be altered with
layout data.
Attribute
Attribute Required
/Optional
Description Type
id Optional A unique identifier for the editor. ID
Element
Element Description
artifactSelector Specifies the editor that is used for selecting different types of artifacts.
boxModelProperty
Editor
Specifies the boxModelProperty editor.
checkBox Specifies the checkbox editor.
composite Specifies the composite editor.
dataRef Specifies that the property is databound.
dataServiceInstance
PropertyEditor
Specifies to select the data service instances added to the current page.
dataTypeProperty
Editor
Specifies the drop-down editor that is pre-populated with different data
types.
dropDown Specifies the drop-down editor.

Markups
expressionProperty
Editor
Specifies the expression property editor.
label Specifies the label editor.
layout Specifies various layouts.
layoutData Specifies layout preference data for its parent container’s layout
calculation.
radio Specifies the radio editor.
radioGroup Specifies the radio group editor.
section Specifies the section editor.
setProperty Specifies the expression or value to compute the property.
sizeProperty
Editor
Represents size property editor which is a composite editor having a
text field and a drop-down.
textField Specifies the text field editor that is used for taking key inputs.
xcpId Specifies the xcpID editor.
Example 1
<pe:propertySheetTab name="General Tab" id="general_tab">
<pe:composite>
<pe:layout>
<pe:rowLayout type="VERTICAL" />
</pe:layout>
<pe:checkBox property="loadOnStart" label="Load on Start" />
<pe:checkBox property="fireEventOnChange"
label="Fire Event On Change" />
</pe:composite>
</pe:propertySheetTab>
</propertySheetConfiguration
In the example, two checkboxes are contained using composite. rowLayout in vertical direction is used.
Example 2
<pe:composite>
<pe:layout>
<pe:rowLayout type="HORIZONTAL" />
</pe:layout>

Markups
<pe:checkBox property="fireEventOnChange"
label="Fire Event On Change" />
</pe:composite>
In the example, two checkboxes are contained using composite. rowLayout in horizontal direction is
used.
Exposed Editor Methods
boolean isEnabled();
returns true, if the composite is enabled otherwise returns false
boolean isVisible();
returns true, if the composite is visible otherwise returns false
<pe:section>
Syntax
<pe:section
id="unique ID"
title="title of the section"
collapsible="true | false">
Start Sequence
<pe:layoutData> pe:layout-data </pe:layoutData>
End Sequence
<pe:setProperty> pe:set-property-bean </pe:setProperty>
<pe:dataRef> pe:data-ref-bean </pe:dataRef>
Start Sequence
<pe:layout> pe:layout-bean </pe:layout>
End Sequence
Start Sequence
<pe:composite> pe:composite-bean </pe:composite>
<pe:dropDown> pe:dropdown-bean </pe:dropDown>
<pe:checkBox> pe:checkbox-bean </pe:checkBox>
<pe:radioGroup> pe:radio-group-bean </pe:radioGroup>
<pe:propertyStore> pe:property-store-bean </pe:propertyStore>
<pe:textField> pe:textfield-bean </pe:textField>
<pe:label> pe:label-bean </pe:label>
<pe:section> pe:section-bean </pe:section>
<pe:sizePropertyEditor> pe:size-property-editor-bean

Markups
<pe:boxModelPropertyEditor> pe:box-model-property-editor-bean
<pe:expressionPropertyEditor> pe:expression-property-editor-bean
<pe:dataTypePropertyEditor> pe:data-type-property-editor-bean
<pe:dataServiceInstancePropertyEditor> pe:data-service-instance-property-editor-bean
</pe:dataServiceInstancePropertyEditor>
<pe:artifactSelector> pe:artifact-selector-editor-bean
<pe:xcpId> pe:xcp-id </pe:xcpId>
End Sequence
</pe:section>
Description
Specifies the section editor. Section is a container like composite with title and collapsible capability.
Attribute
Attribute Required
/Optional
Description Type
title Required Title for the editor. String
collapsible Optional Specifies if the section needs to be
collapsible. It takes true or false as
a value.
Boolean
Element
Element Description
artifact
Selector
Specifies an artifactSelector editor that is used for selecting different types of
artifacts.
boxModel
PropertyEditor
Specifies the boxModelPropertyEditor.

Markups
checkBox Specifies the checkbox editor.
dataRef Specifies that the property is databound. It is used for setting links.
dataServiceIn-
stance
PropertyEditor
Specifies the editor that is used to select the data service instances added to the
current page.
dataType
PropertyEditor
Specifies a drop-down editor that is pre-populated with different data types.
dropDown Specifies the dropDown editor.
expression
PropertyEditor
Specifies the expression property editor.
label Specifies the label editor.
layout Specifies the layout editor.
layoutData Specifies the layout data of the container.
radioGroup Specifies the radio group editor.
setProperty Specifies the setproperty editor. It is used to set the properties of the editors
dynamically through expression.
sizeProperty
Editor
Specifies the size property editor which is a composite editor having a text field
and a drop-down.
textField Specifies the textField editor that is used for taking key inputs.
xcpId Specifies the xcpID editor.
Example
<pe:section collapsible="true" title="Section Title" id="section_id" >
<pe:layout>
<pe:rowLayout type="VERTICAL" />
</pe:layout>
<pe:checkBox property="fireEventOnChange" label="Fire Event On Change" />
</pe:section>

Markups
returns true, if the section is enabled otherwise returns false
returns true, if the section is visible otherwise returns false
Component Editor
<pe:label>
Syntax
<pe:label
id="unique ID of the editor"
text="text for the label">
</pe:label>
Description
Specifies the label editor that is used to display a label field.
Attribute
Attribute Required
/Optional
Description Type
text Optional Text for the editor. String

Markups
Element
Element Description
layoutData Specifies the layout data for the container.
Example
<pe:composite>
<pe:layout>
<pe:gridLayout columns="2">
</pe:gridLayout>
</pe:layout>
<pe:section title="Basics" collapsible="true">
<pe:layout>
</pe:gridLayout>
</pe:layout>
<pe:label id="id_for_the_label" text="Display text"/>
</pe:section>
</pe:composite>
This example creates a label field with the label Display text.
returns true, if the label is visible otherwise returns false
<pe:textfield>
Syntax
<pe:textField
id="ID of the text field"
label="label for the text field"
reCreateWidgetOnChange="re-rendered after value change that takes true | false"
type="type of the text field"
length="length of the text field"
property="reference to property info" >
Start Sequence

Markups
End Sequence
</pe:textfield
Description
Specifies the editor that is used for taking key inputs.
Attribute
Attribute Required
/Optional
Description Type
label Optional A label for the editor. String
property Required Specifies reference to property
information.
String
reCreateWidget
OnChange
Optional Determines whether the widget is
rendered again after a value change.
Possible values: True or False.
Boolean
type Optional Specifies the type of the editor. String
length Optional Specifies length of the text field. String
Element
Element Description
Example

Markups
<pe:composite>
<pe:layout>
</pe:gridLayout>
</pe:layout>
<pe:layout>
</pe:gridLayout>
</pe:layout>
<pe:textField property="reference" label="Name"/>
</pe:section>
</pe:composite>
The above example creates a text field editor.
<pe:checkBox>
Syntax
<pe:checkBox
id="unique ID"
property="reference to property info"
reCreateWidgetOnChange="re-rendered after value change that
takes true | false"
label="label for the editor">
Start Sequence
End Sequence
</pe:checkBox>
Description
Specifies the checkbox editor and renders it to the UI.

Markups
Attribute
Attribute Required
/Optional
Description Type
info.
String
reCreateWidget
OnChange
Optional Determines whether the widget
is rendered again after a value
change.
Boolean
Element
Element Description
Example
<pe:composite>
<pe:layout>
</pe:gridLayout>
</pe:layout>
<pe:checkBox id="loadChkBx" property="loadOnStart" label="Load on Start" />
</pe:composite>
returns true, if the checkbox editor is enabled otherwise returns false

Markups
returns true, if the checkbox editor is visible otherwise returns false
boolean isChecked();
returns true, if the checkbox editor is checked otherwise returns false
<pe:radio>
Syntax
<pe:radio
id="Id of the radio option"
label="Label of the radio option
value="Value of the radio option"
isSelected="Default value for the selection of the radio
that takes true | false">
</pe:radio>
Description
Specifies radio button.
Attribute
Attribute Required
/Optional
Description Type
value Required Default value used by the
radio-group container for managing
multiple radio buttons.
String
isSelected Optional Default value for the selection of
the radio that takes true or false.
Boolean

Markups
Element
Element Description
layoutData Specifies layout data for the container.
Example
<pe:section title="Gender">
<pe:layout>
<pe:gridLayout columns="2"/>
</pe:layout>
<pe:radioGroup property="gender" id="genderRadioGrpId">
<pe:radioReference radioId="maleRadioId" />
<pe:radioReference radioId="femaleRadioId" />
</pe:radioGroup>
<pe:radio value="male" label="Male" id="maleRadioId"
isSelected="true"/>
<pe:radio value="female" label="Female" id="femaleRadioId"/>
</pe:section>
returns true, if the radio is enabled otherwise returns false
returns true, if the radio is visible otherwise returns false
boolean isSelected();
returns true, if the radio is selected otherwise returns false
String getValue();
returns the value of the radio option
<pe:radioGroup>
Syntax
<pe:radioGroup
id="unique ID"

Markups
label="label of the editor">
Start Sequence
End Sequence
Start Sequence
<pe:radioReference> pe:radio-reference </pe:radioReference>
End Sequence
</pe:radioGroup>
Description
Specifies radio-group bean.
Attribute
Attribute Required
/Optional
Description Type
info.
String
reCreateWidget
OnChange
change.
Boolean
Element
Element Description

Markups
radioReference Specifies reference to the radio editor.
returns true, if the radio group is enabled otherwise returns false
returns true, if the radio group is visible otherwise returns false
String getValue();
returns the ID of the selected radio from the radio group
<pe:dropDown>
Syntax
<pe:dropDown
id="unique ID"
reCreateWidgetOnChange="re-rendered after value change that
takes true | false"
label="label of the drop-down editor">
Start Sequence
End Sequence
<pe:setPropertyname="Enable | Visible | Clear | Value">
pe:set-property-bean </pe:setProperty>
<pe:source> pe:dataprovider-source-bean </pe:source>
<pe:mapping>
<pe:label> pe:modelProperties </pe:label>
<pe:value> pe:modelProperties </pe:value>
</pe:mapping>
</pe:dropDown>
Description
Specifies the drop-down editor.

Markups
Attribute
Attribute Required
/Optional
Description Type
info.
String
reCreateWidget
OnChange
change.
Boolean
Element
Element Description
layoutData Specifies element’s layout preference data for its parent container’s layout
calculation.
source Specifies the source for the dropdown .
mapping Maps the data from the provider to label and value specified.
Example 1
<propertyInfo name="redirectStyle">
<type>STRING</type>
<defaultvalue>current</defaultvalue>
<valueassist fixed="true">
<item>
<value>current</value>
<label>Current page</label>
</item>
<item>
<value>specified</value>
<label>Specific page</label>
</item>

Markups
<item>
<value>none</value>
<label>None</label>
</item>
</valueassist>
</propertyInfo>
<pe:dropDown property="redirectStyle" id="redirectStyleDrop">
<pe:source>
<pe:propertyValueAssist/>
</pe:source>
</pe:dropDown>
In the above example, a dropdown is created with the values specified in the valueassist from
redirectStyle property info.
Example 2
<pe:dropDown property="importAFId" id="importAFId"
reCreateWidgetOnChange="true">
<pe:source>
<pe:modelInfo>
<pe:providerId>ACTION_FLOW_INSTANCES
</pe:providerId>
</pe:modelInfo>
</pe:source>
<pe:mapping>
<pe:label>MODEL.label</pe:label>
<pe:value>MODEL.name</pe:value>
</pe:mapping>
</pe:dropDown>
In the above example, a dropdown is created with the values specified in the source. All the action
flow instances which are part of the page is listed in the dropdown. Provider data is mapped for label
and value MODEL.label and MODEL.name respectively.
returns true, if the dropdown is enabled otherwise returns false
returns true, if the dropdown is visible otherwise returns false
boolean isSelected();
returns true, if the dropdown is selected with a value otherwise returns false
String selectedValue();
returns the dropdown mapped selected value

Markups
String selectedLabel();
returns the dropdown mapped selected label
Object selectedObject();
returns the whole object in the map form holding the attribute name and value
dropDown Source
dropDown source defines source elements for the dropDown editor, as following:
<pe:source> - Source for the dropdown
<pe:modelAttribute> - Attributes of the model specified
by the URN after expression evaluation
<pe:model> - Syntactic notation to get the model
<pe:expression>[expression returning
a model URN]</pe:expression>
</pe:model>
</pe:modelAttribute>
</pe:source>
<pe:source>
<pe:modelInfo> - Metadata about the type of model source
<pe:providerId>
BO_MODELS->
DOC_MODELS->
FOLDER_MODELS->
BO_DOC_FOLDER_MODELS->
DATA_SOURCE_INSTANCES-> Returns real time query models
DATA_ACTION_INSTANCES-> Returns data action contract models
ACTION_FLOW_INSTANCES-> Returns action flow instance models
PROCESS_PACKAGES-> Returns package models for the given process
</pe:providerId>
</pe:modelInfo>
</pe:source>
<pe:source>
<pe:propertyValueAssist/> - Reference to the
property value assist provided as part of the property info
</pe:source>
<pe:source>
<pe:selectorDataAction> - Returns the selector data action
associated with the model
<pe:modelUrn> - URN of the selected model after expression evaluation
<pe:expression>[expression returning a model URN]</pe:expression>
</pe:modelUrn>
</pe:selectorDataAction>
</pe:source>

Markups
<pe:selectorDataAction>
Syntax
<pe:selectorDataAction
<pe:modelUrn> pe:expressionData </pe:modelUrn> [1]
</pe:selectorDataAction>
Description
Returns selector data action by taking model URN as an expression input.
Element
modelUrn - Specifies model value based on an expression.
<pe:modelAttribute>
Syntax
<pe:modelAttribute
<pe:model> pe:expressionData </pe:model>
</pe:modelAttribute>
Description
Takes model as an input based on an expression. This does not have a visual representation, but it is
a logical entity.
Element
model - Specifies model value based on an expression.
<pe:modelInfo>
Syntax
<pe:modelInfo>
<pe:providerId> pe:providerId </pe:providerId> [1..*]
</pe:modelInfo>
Description
Takes model as an input based on an expression. This does not have a visual representation, but it is
a logical entity.

Markups
Element
providerId - Specifies pre-defined data source provider ID. providerID is a simple enumeration of
values for setting provider.
Mapping of the dropDown Source
<pe:mapping> - Maps the data from the provider to
label and value specified
<pe:label>MODEL.categoryId | MODEL.label | MODEL.name |
MODEL.type | MODEL.path | MODEL.urn | MODEL.datamodelname </pe:label>
<pe:value>MODEL.categoryId | MODEL.label | MODEL.name |
MODEL.type | MODEL.path | MODEL.urn | MODEL.datamodelname </pe:value>
</pe:mapping>
• MODEL.categoryId: Category ID of the model, for example, page category ID is
com.emc.xcp.artifact.page.
• MODEL.label: Label of the model.
• MODEL.name: Name of the model.
• MODEL.type: Type of the model which is the qualified name of the model, for example, namespace
+ model name.
• MODEL.path: Path of the model, for example, Artifacts/Pages/<page_artifact>.page.
• MODEL.urn: URN of the model.
• MODEL.datamodelname: Name of the data model associated with the model.
<pe:xcpId>
Syntax
<pe:xcpId>
id="ID for the editor"
label="label for the editor">
</pe:xcpId>
Description
Specifies an editor similar to text field editor, but you cannot have the same ID for two widgets on a
same page.

Markups
Attribute
Attribute Required
/Optional
Description Type
label Required A label for the editor. String
Element
Element Description
Example
<pe:composite>
<pe:layout>
</pe:gridLayout>
</pe:layout>
<pe:layout>
</pe:gridLayout>
</pe:layout>
<pe:xcpId label="ID" id="id_for_editor"/>
</pe:section>
</pe:composite>
In the above example, an ID text field editor is created.
<pe:expressionPropertyEditor>
Syntax
<pe:expressionPropertyEditor
id="ID of the editor"

Markups
property="reference to property info where expression details are defined"
reCreateWidgetOnChange="re-rendered after value change
that takes true | false"
label="label for the editor"
name="name for the editor">
Start Sequence
<pe:layoutData> layout preference data for its parent container’s
layout calculation </pe:layoutData>
End Sequence
<pe:setPropertyname="Enable | Visible | Clear"> specifies the
expression or value to compute the property </pe:setProperty>
<pe:dataType>
<pe:expression>Expression which defines the type of
the data</pe:expression>
</pe:dataType>
Description
Specifies expression property editor. Expression editor is used to populate the data on the runtime
using expression.
Attribute
Attribute Required
/Optional
Description Type
property Required Reference to property info where
expression details are defined
String
reCreateWidget
OnChange
change.
Boolean
name Optional Name for the editor. String

Markups
Element
Element Description
layoutData Specifies layout preference data for its parent container’s layout calculation.
dataType Defines the type of data.
Sample
Following is the sample for propertyInfo reference of an expression editor:
<propertyInfo name="Name of the expression property info">
<expression repeatingValue="false" >
<valueType> STRING | INTEGER | FLOAT |
DATETIME | BOOLEAN | BINARY
</valueType>
<setterFunName>setWidgetValue</setterFunName>
<contextTree>
<include>PAGE_CONTEXT</include>
</contextTree>
<enableExplicitEventSubscription>true
</expression>
</propertyInfo>
In the property Info, if the repeatingValue is set as true, expression editor takes an array of values. If
it is set to false, it takes single value, for example, string.
ValueType determines the outcome of the types of data. This can be dynamically specified using an
expression in the pe:dataType, sub tag of pe:expressionPropertyEditor.Expression specified inside
this tag should return STRING | INTEGER | FLOAT | DATETIME | BOOLEAN | BINARY.
Example 1: PropertyInfo Configuration
<propertyInfo name="expressionProperty">
<expression repeatingValue="false" >
<valueType> STRING</valueType>
<setterFunName>setWidgetValue</setterFunName>
<contextTree>
<include>PAGE_CONTEXT</include>
</contextTree>
<enableExplicitEventSubscription>true
</expression>
</propertyInfo>

Markups
Example 2: Property Sheet Configuration
<pe:composite>
<pe:layout>
</pe:layout>
<pe:expressionPropertyEditor property="expressionProperty"
label="Expression" id="expressionId">
</pe:composite>
<pe:artifactSelector>
Syntax
<pe:artifactSelector
id="ID of the selector"
reCreateWidgetOnChange="re-rendered after value change that takes
true | false"
label="label for the selector"
type="artifact types that takes ALL_MODELS | BO_MODEL |
FOLDER_MODEL | DOC_MODEL | PAGES | PICKLIST_MODELS">
Start Sequence
End Sequence
<pe:options> pe:option APP_PAGE | INSTANCE_PAGE </pe:options>
Description
Specifies an artifactSelector editor that is used for selecting different types of artifacts.

Markups
Attribute
Attribute Required
/Optional
Description Type
id Optional A unique identifier for the artifact
selector.
ID
label Optional A label for the artifact selector. String
property Required Specifies the property attribute. String
reCreateWidget
OnChange
Boolean
type Required Specifies the type. Possible values
are:
• ALL_MODELS - Returns all
the business object (BO),
folder, and document models.
• BO_MODEL – Returns only
BO models.
• FOLDER_MODEL – Returns
only folder models.
• DOC_MODEL – Returns only
content models.
• PAGES – Returns Pages
based on the following option
provided:
APP_PAGE – Returns only
application pages.
INSTANCE_PAGE – Returns
only instance pages.
• PICKLIST_MODELS –
Returns only BO models.
("BO_MODEL"
| "DOC_MODEL" |
"FOLDER_MODEL" |
"ALL_MODELS" |
"PICKLIST_MODELS" |
"PAGES")

Markups
Element
Element Description
options Specifies options. For example, application page, instance page.
Example
Page Selector
<pe:composite>
<pe:layout>
</pe:gridLayout>
</pe:layout>
<pe:layout>
</pe:gridLayout>
</pe:layout>
<pe:artifactSelector property="redirectUrl" type="PAGES"
label="Pages" id="pageArtifactSelector">
<pe:options>
<pe:option>APP_PAGE</pe:option>
<pe:option>INSTANCE_PAGE</pe:option>
</pe:options>
</pe:section>
</pe:composite>
In the above example, a page artifact selector is created that shows both application and instance pages.
The redirectUrl value of the selected page is persisted into the widget property.
Folder selector
<pe:composite>
<pe:layout>

Markups
</pe:gridLayout>
</pe:layout>
<pe:layout>
</pe:gridLayout>
</pe:layout>
<pe:artifactSelector property="reference"
type="FOLDER_MODEL" label="Folders"/>
</pe:section>
</pe:composite>
In the above example, a folder artifact selector is created that shows all the folder models. The
reference value of the selected page is persisted into the widget property.
boolean hasPrimaryModel();
returns true, if the selected model has a primary model otherwise returns false
boolean isArtifactSelected();
returns true, if the artifact selector is selected with a model otherwise returns false
String getSelectedPageURL();
returns the selected page URL in the form;
modelNameSpace + primaryModelName + "/" + selectedPageName;
<pe:boxModelPropertyEditor>
Syntax
<pe:boxModelPropertyEditor
description="description of the editor"
name="name of the editor"
reCreateWidgetOnChange="re-rendered after value change that takes true | false">
Start Sequence
End Sequence

Markups
Description
Specifies a boxModelPropertyEditor.
Attribute
Attribute Required
/Optional
Description Type
description Optional Specifies the description. String
id Optional A unique ID of the editor. ID
label Optional Specifies a label for the property
editor.
String
name Optional Specifies the name of the property
editor.
String
property Required Specifies reference to property info. String
reCreateWidget
OnChange
Boolean
Element
Element Description
<pe:sizePropertyEditor>
Syntax
<pe:sizePropertyEditor

Markups
description="description of the editor"
required="required field">
Start Sequence
End Sequence
Description
Represents size property editor which is a composite editor having a text field and a drop-down.
The drop-down contains auto and pixel values.
Attribute
Attribute Required
/Optional
Description Type
reCreateWidget
OnChange
Boolean
name Optional Specifies name of the editor. String
description Optional Specifies description of the editor. String
required Optional Determines whether the field is
required.
Boolean
Element
Element Description

Markups
Example
<pe:composite>
<pe:layout>
</pe:gridLayout>
</pe:layout>
<pe:layout>
</pe:gridLayout>
</pe:layout>
<pe:sizePropertyEditor property="reference" label="Height"/>
</pe:section>
</pe:composite>
This example creates a size property editor with height as input.
returns true, if the text editor part of size property editor is enabled
otherwise returns false
returns true, if the text editor part of size property editor is
visible otherwise returns false
String getValue();
returns the text values of text editor part of size property editor
<pe:dataServiceInstancePropertyEditor>
Syntax
<pe:dataServiceInstancePropertyEditor
id="ID of the selector"
label="label for the selector"
property="reference to property info">
End Sequence

Markups
</pe:dataServiceInstancePropertyEditor>
Description
Specifies an editor that is used to select the data service instances added to the current page.
Attribute
Attribute Required
/Optional
Description Type
name Optional Name for the editor. String
info.
String
reCreateWidget
OnChange
change.
Boolean
Element
Element Description
Example
<pe:composite>
<pe:layout>

Markups
</pe:gridLayout>
</pe:layout>
<pe:layout>
</pe:gridLayout>
</pe:layout>
<pe:dataServiceInstancePropertyEditor property=
"referenceToProperty" label="Data Services"/>
</pe:section>
</pe:composite>
In the above example, a data service instance picker is created that lists all the data services added to
the current page.
<pe:dataTypePropertyEditor>
Syntax
<pe:dataTypePropertyEditor
.id="unique ID"
property="Reference to string property info"
name="name for the editor"
isNumberInput="number input">
Start Sequence
<pe:layoutData> layout preference data for its parent
container’s layout calculation </pe:layoutData>
End Sequence
<pe:setProperty name="Enable | Visible | Clear"> specifies the
expression or value to compute the property </pe:setProperty>
Description
Represents a drop-down editor that is pre-populated with different data types.

Markups
Attribute
Attribute Required
/Optional
Description Type
reCreateWidget
OnChange
Boolean
name Optional Name for the editor . String
isNumberInput Optional Determines whether if the input is
a number.
Boolean
Element
Element Description
dataRef Specifies that the property is databound. It is used for setting
links.
Example
<pe:composite>
<pe:layout>
</pe:layout>
<pe:dataTypePropertyEditor
property="fooDataType"
label="Select a data type"

Markups
reCreateWidgetOnChange="true"
id="fooDataTypeId">
</pe:composite>
<pe:setProperty>
Syntax
<pe:setProperty
id="unique ID"
name="propertyName">
<pe:expression language="JavaScript" >
Java script expression which gets evaluated
and sets the property mentioned in the name.
</pe:expression>
<pe:value> value </pe:value>
</pe:setProperty>
Description
setproperty is used to set the properties of the UI elements dynamically through expression. It
supports various properties, for example, enablement, visibility , value, and clearing the value of
the UI element.
Attribute
Attribute Required
/Optional
Description Type
id Optional A unique identifier for the editor. String
name Required propertyName is a simple
enumeration of values for setting
editor properties.
Enable | Visible | Value
| Clear

Markups
Element
Element Description
expression Specifies JavaScript expression which gets evaluated and sets the property
mentioned in the name.
value Specifies the value depending on the set property type.
Example: Enabling Using setProperty
<pe:composite>
<pe:textField property="p1" label="Text Field">
<pe:setProperty name="Enable">
<![CDATA[
$checkbxId.isChecked()
]]>
</pe:expression>
</pe:setProperty>
</pe:textField>
<pe:checkBox property="checkboxValue"
id="checkbxId" label="Check box">
</pe:checkBox>
</pe:composite>
In the above example, the enablement of the text field is controlled by the expression specified in the
setProperty. Enablement requires the expression to evaluate to Boolean.
Similarly, properties like visibility, value, clear the persisted data can also be controlled.
Example: Setting Value Using setPropety
<pe:composite>
<pe:textField property="p1" label="Text Field 1"/>
<pe:textField property="p2" label="Text Field 2">
<pe:setProperty name="Value">
<![CDATA[
"Prefix: " + #p1
]]>

Markups
</pe:expression>
</pe:setProperty>
</pe:textField>
</pe:composite>
In the above example, change in the label updates the value of Text field 1, Text field 2 with a new
value along with the prefix.
<pe:expression>
Syntax
<![CDATA[
Java script expression which gets evaluated
]]>
</pe:expression>
Description
Expression allows to express the dynamic behaviors using JavaScript expression. Any JavaScript
constructs can be used in the expression. Expression gets evaluated when there is a change in any of
the UI element or any of the property mentioned in the expression.
Expression should be wrapped with CDATA in construct.
$ reference: To access other UI elements, prefix its ID with $. For example, $ checkbxId.
# property: To access the property values of the properties defined in the propertyInfo configuration
file, prefix the property name with ‘#’.
Attribute
Attribute Required
/Optional
Description Type
language Optional Specifies the language to be used
for expression. Supported language
is JavaScript.
expressionLanguage
Example

Markups
<pe:composite>
<pe:textField property="p1" id="textField1"
label="Text Field 1"/>
<pe:textField property="p2" id="textField2"
label="Text Field 2"/>
<pe:textField property="p3" label="Text Field 3">
<![CDATA[
"Prefix: " + #p1 +
$textField2.getValue()
]]>
</pe:expression>
</pe:setProperty>
</pe:textField>
</pe:composite>
In the above example, textfield 3 value is set using the property which is associated with p1 and by
calling exposed methods in textfield2.
<pe:layoutData>
Syntax
<pe:layoutData
<pe:gridData> pe:grid-layout-data-bean </pe:gridData>
<pe:rowData> pe:row-layout-data-bean </pe:rowData>
</pe:layoutData>
Description
Specifies the layout data of the container.
Element
Element Description
gridData Specifies the value for grid layout.
rowData Specifies the value for row layout.

Markups
<pe:gridData>
Syntax
<pe:gridData>
grabExcessHorizontalSpace="width of the cell should change depending
on the size of the parent composite that takes true | false"
grabExcessVerticalSpace="height of the cell changes depending
on the size of the parent composite that takes true | false"
horizontalSpan="number of column cells that the control
can take up"
verticalSpan="number of row cells that the control
can take up">
<pe:horizontalAlignment> BEGINNING| CENTER| END| FILL </pe:horizontalAlignment>
<pe:verticalAlignment> BEGINNING| CENTER| END| FILL </pe:verticalAlignment>
</pe:gridData>
Description
Specifies the gridData editor.
Attribute
Attribute Required
/Optional
Description Type
grabExcess
HorizontalSpace
Optional Specifies whether the width of the cell
changes depending on the size of the parent
composite.
Boolean
grabExcess
VerticalSpace
Optional Specifies whether the height of the cell
changes depending on the size of the parent
composite.
Boolean

Markups
horizontal
Span
Optional Specifies the number of column cells that the
control can take up.
Integer
vertical
Span
Optional Specifies the number of row cells that the
control can take up.
Integer
Element
Element Description
horizontal
Alignment
Specifies the horizontal position of controls within a cell.
vertical
Alignment
Specifies the vertical position of controls within a cell.
<pe:gridLayout>
Syntax
<pe:gridLayout
columns="number of columns"
makeColumnsEqualWidth="tue | false"
</pe:gridLayout>
Description
Specifies the value for grid layout.
Attribute
Attribute Required
/Optional
Description Type
columns Required Specifies number of columns. Integer
makeColumnsE-
qualWidth
Optional Specifies if all the columns should
be of equal width. It takes true or
false as a value.
Boolean

Markups
<pe:rowData>
Syntax
<pe:rowData
id="unique ID"
</pe:rowData>
Description
Specifies the value for row layout.
Attribute
Attribute Required
/Optional
Description Type
height Required Specifies the height of the row. Integer
width Required Specifies the width of the row. Integer
<pe:rowLayout>
Syntax
<pe:rowLayout
type="type of the layout that takes Horizontal | VERTICAL">
Start Sequence
End Sequence
</pe:rowLayout>
Description
Specifies the row layout of the container.

Markups
Attribute
Attribute Required
/Optional
Description Type
type Optional Specifies the type. It takes
horizontal or vertical.
"HORIZONTAL" |
"VERTICAL"
<pe:fillLayout>
Syntax
<pe:fillLayout
type="type of the layout that takes HORIZONTAL | VERTICAL">
Start Sequence
End Sequence
</pe:fillLayout>
Description
Specifies the value for fillLayout editor.
Attribute
Attribute Required
/Optional
Description Type
type Optional Specifies the type. It takes
horizontal or vertical.
"HORIZONTAL" |
"VERTICAL"
<pe:horizontalAlignment>
Syntax
<pe:horizontalAlignment>
</pe:horizontalAlignment>
Description
Specifies the horizontal position of controls within a cell.

Markups
<pe:propertyStore>
Syntax
<pe:propertyStore
id="id of the property store"
property="reference to the property">
<pe:setProperty></pe:setProperty>
</pe:propertyStore>
Description
Stores property values into the widget which are not directly associated with an editor element. It is
used to update multiple properties based on its value.
Attribute
Attribute Required
/Optional
Description Type
info.
String
Element
Element Description
Example
<pe:propertySheetTab name=’General Tab’ id=’general_tab’>
<pe:composite>
<pe:section title=’Basics’ collapsible=’true’>
<pe:propertyStore id="hiddenGrp" property="store">
<pe:expression>
<![CDATA[
if($dsiDD.selectedObject() != null && $dsiDD.
selectedObject().get("name") != null)
$dsiDD.selectedObject().get("name");
else
"";
]]>

Markups
</pe:expression>
</pe:setProperty>
</pe:propertyStore>
</pe:section>
</pe:composite>
In the above example, the store property (in the property info) of the widget is updated based on the
expression evaluation. Property holds the $dsiDD dropdown’s selected object’s name.
String getValue();
returns the store value for the corresponding property
<pe:propertySheetTab>
Syntax
<pe:propertySheetTab>
id="unique ID"
Description
Specifies the propertySheetTab editor.
Attribute
Attribute Required
/Optional
Description Type
id Required A unique identifier for the editor. ID
name Required Name for the editor. String

Markups
Element
Element Description
<pe:dataRef>
Syntax
<pe:dataRef
selectionName="Data model name for the data reference"
selectionLabel="Data model label for the data reference">
<pe:expression> [expression that returns true/false] </pe:expression>
<pe:value> true | false </pe:value>
</pe:dataRef>
Description
Specifies that the property is databound. It is used for setting links. This does not have any visual
representation, but it is a logical entity.
Attribute
Attribute Required
/Optional
Description Type
selection
Name
Optional Specifies data model name for the
data reference.
String
selection
Label
Required Specifies data model label for the
data reference.
String

Markups
Element
Element Description
expression Specifies an expression similar to JavaScript that works on the editor elements.
value Specifies the value depending on the type of set property.
Example
<pe:artifactSelector property="xcp_nav_url" type="PAGES"
label="" id="pageArtifactSelector">
<pe:dataRef selectionName="dataModelName"
selectionLabel="Data Model Label">
<pe:value>true</pe:value>
</pe:dataRef>
Usecase
The following example illustrates the use case of seat selection form. There are three controls in
this scenario:
• Seat type drop down list
• Serve pop-corn checkbox
• Popcorn type
Example of UI Element Definition and Wiring using Markup

xCP 2.1 Developer Guide

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to xCP 2.1 Developer Guide

Similar to xCP 2.1 Developer Guide (20)

More from Haytham Ghandour

More from Haytham Ghandour (13)

Recently uploaded

Recently uploaded (20)

xCP 2.1 Developer Guide