xCP 2.1 Developer Guide

EMC®®® Documentum®®®

xCelerated CompositionPlatform

Version 2.1

Developer Guide

EMC CorporationCorporate Headquarters:

Hopkinton, MA 01748-91031-508-435-1000www.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 withoutnotice.

THE INFORMATION IN THIS PUBLICATION IS PROVIDED "AS IS." EMC CORPORATION MAKES NOREPRESENTATIONS ORWARRANTIES OF ANY KINDWITH RESPECT TO THE INFORMATION IN THIS PUBLICATION,AND SPECIFICALLY DISCLAIMS IMPLIED WARRANTIES OF MERCHANTABILITY OR FITNESS FOR A PARTICULARPURPOSE.

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 PDFLibrary are trademarks or registered trademarks of Adobe Systems Inc. in the U.S. and other countries. All other trademarks usedherein 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 canmake our documentation better or easier to use, please send us your feedback directly at [email protected].

Table of Contents

Chapter 1 Custom Widget............................................................................................... 7Overview ......................................................................................................... 7Setting up the development environment ........................................................... 7Creating a custom widget.................................................................................. 8JavaScript content file ................................................................................... 8Widget definition file ...................................................................................... 8

Packaging custom components JAR file ............................................................15Custom JavaScript functions .............................................................................17JavaScript content file ..................................................................................17Function XML file ..........................................................................................18

Importing custom widgets in xCP Designer ........................................................20Debugging and using development mode ..........................................................21

Chapter 2 Markups .........................................................................................................23Overview .........................................................................................................23Container 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> ............................................................................................38dropDown Source......................................................................................41Mapping 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> ...................................................................................................67Usecase ..........................................................................................................68schema-representation .....................................................................................71

Chapter 3 Type Adoption ................................................................................................77Overview .........................................................................................................77Adopting types .................................................................................................77Editing and configuring Adopted Types ..............................................................78Deploying adopted types ..................................................................................79Runtime behavior .............................................................................................79

Chapter 4 Troubleshooting - Custom Widget..................................................................81Blank page editor canvas..................................................................................81Custom widget does not appear in Widgets palette.............................................81Timing issues at runtime ...................................................................................82Style issues .....................................................................................................82Caching issues.................................................................................................82

4 EMC Documentum xCelerated Composition Platform Version 2.1 Developer Guide

PrefaceThis guide describes how to develop your customized widgets and use markups for the xCPDesigner. It also explains how you can adopt data types from the Documentum repository to thexCP application using type adoption feature.

Intended Audience

The information in this guide is for developers who develop customized widgets, use markups, andadopt 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

OverviewxCP Designer is shipped with a comprehensive set of widgets, which provide you various optionsand choices when you put together an application. However, the existing widgets might not meet allyour requirements, requiring the need to create a customized widget. In this scenario, you can buildyour own widgets.

To build a new widget you must have knowledge of ExtJS and JavaScript. xCP widgets are based onthe Sencha ExtJS framework. To use customized widgets, they must be bundled into a JAR file andimported 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 environmentThe 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 widgetTo create a custom widget, you need to create these files:

• JavaScript Content File• Widget Definition XML File

JavaScript content fileIn the JavaScript file, include all the code required for the user interface to work at runtime. You canextend various ExtJS components while adding the required functionalities. The JavaScript file shouldcontain 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 extendsExt.form.Text, which is an ExtJS widget. widget.myWidgetXType is an alias. An alias must bespecified in the <xtype of widget> format for the widget to be recognized by the system. The xtype ofa widget is specified in the widget’s definition XML file.

Widget definition fileThe Widget definition file contains the widget definition and its properties in XML format. Themodel_schema.xsd file defines the structure of the widget definition file. The elements of the widgetdefinition file are explained below.

<Widget> elementSyntax<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 ashttp://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 widgetproperties.

• version – Specify the numeric version string.

<Name> elementSyntax<name>My Custom Widget</name>

Description

Name of the widget shown in the widgets palette of the Page Editor.

<Description> elementSyntax<description>Description explaining what this widget does.</description>

Description

Description of the widget shown as a tooltip in the widgets palette.

<Icon> elementSyntax<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 xCPDesigner. 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 forthe 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> elementSyntax<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 islocales/content/<country code>.

<Category> elementSyntax<category>xcpPalette:Custom</category>

Description

Determines the section of the widgets palette under which the widget should appear. Specify any ofthe following values:

• xcpPalette:Navigation• xcpPalette:Layout• xcpPalette:Input• xcpPalette:Selection• xcpPalette:List• xcpPalette:Text• xcpPalette:Presentation• xcpPalette:Action• xcpPalette:Custom

<Configuration> elementSyntaxpropertyInfo name="propertyName" hidden="true">

Description

Defines the set of attributes for the widget. These attributes collectively determine the JSON that isgenerated 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 onlyone 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 particularname-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 ofxCP 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 expressioneditor. Configure the expression editor using the<expression> element.

<constraint><validator type="maxLength"maxLength="60"/></constraint>

Defines the limit of the value. You can define onlymaxLength. In order to use it, a second attributemaxLength has to be defined.

<defaultvalue>My default value</defaultvalue>

Defines the default value to be used as the value of theproperty. <defaultvalue> element can be used alongwith the hidden attribute of <propertyInfo> element.

<expression><setterFunName>myCustomSetValue

</setterFunName><contextTree><include>PRIMARY_CONTEXT</include><include>APP_CONTEXT</include><include>WIDGET_CONTEXT</include><include>DATASOURCE_OUTPUT</include><include>SINGLE_OBJECT_DATA_

SERVICE_OUTPUT</include>

This element is used if <type> of the property is set toEXPRESSION.

The <setterFunName> element specifies theJavaScript function used to store the data.TheJavaScript function specified in this element must bedefined either in the custom JavaScript file or the baseJavaScript class it extends.

The <contextTree> element determines from wherethe value for the expression can be selected. Theoptions are:


Custom Widget

Element Syntax Description</contextTree></expression> • APP_CONTEXT – Specifies the context of the

application, such as name of the application andlogged in user.

• PRIMARY_CONTEXT – Specifies the primarycontext of the page. For example, the primarycontext for View Customer page would be theCustomer and its attributes can be used as part ofthe expression. For example, Customer.firstName.

• UI_EVENTS – Specifies the UI events applicablefor the context. For example, to subscribe towarnings that occur in the application page,uievent.Application.xcp.show_warning.warn-ing_message.

• SESSION_PARAMETERS – Specifies thesession variable applicable for the context. Forexample, for a shopping site, a shopping cart may beimplemented as a session parameter and you can usesessionparameters.ns.shoppingcartto access session parameter.

• FRAGMENT_INPUT– Specifies fragment inputsif the page is a fragment. For example, a mapfragment accepts latitude as input. You can usefragment input inside fragment layout and bind tothe widgets. A text field inside fragment needsto show the latitude, then it can be configured asInputs.latitude.

• GLOBAL_CONTEXT– Specifies theshortcut context. APP_CONTEXT,SESSION_PARAMETERS, UI_EVENTS isvalid in multiple places and this may result induplication. You can specify the context once asGLOBAL_CONTEXT and this can then be appliedto all the relevant contexts.

• PAGE_CONTEXT – Specifies the shortcutcontext. In a page, APP_CONTEXT,SESSION_PARAMETERS, _EVENTS,PRIMARY_CONTEXT, WIDGET_CONTEXT,SINGLE_OBJECT_DATA_SERVICE_OUTPUT,FRAGMENT_INPUT are valid contexts. Thismight result in duplication of these contexts in pagelevel contexts. You can specify the context once asPAGE_CONTEXT and can be applied to all thespecified contexts.

• WIDGET_CONTEXT – Specifies the context ofother widgets on the page. If the value is specified,you can use the data stored in other widgets on thepage. For example, you can use data from otherwidgets as prefix or suffix for this widget.


Custom Widget

Element Syntax Description

• DATASOURCE_INPUT – Specifies the contextreferenced from an input of a Data Source Instance.

• DATASOURCE_OUTPUT – Specifies thecontext referenced from an output of a Data SourceInstance.

• SINGLE_OBJECT_DATA_SERVICE_OUT-PUT – Specifies the context referenced from anoutput of a Data Source Instance, if the output doesnot contain any repeating attributes.

<expressionProperties> elementSyntax<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 followingchildren elements:

• propertyInfo— The name attribute of the <propertyInfo> element corresponds to the name ofthe property defined in the <configuration> element. The most common usage is to get the valuefrom 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 functioncan be used to get the value from the widget and this.getValueFromSelectionModel functioncan be used for widgets that allow selection. If there are any functions defined in your widgetJavaScript 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 informationcan 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 forapplication parameters.

Special <propertyInfo> elementThere are special <propertyInfo> elements used for specific use cases. These property name keywordsappear 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 ornot. 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 representthe repeating attribute. One drop-down list allows you to specify a new line as a separator to separatemultiple 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, anddisabled. All these properties must have their type set to EXPRESSION. The expression editor isplaced 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><type>EXPRESSION</type><expression>

<setterFunName>setHidden</setterFunName><contextTree>

<include>PRIMARY_CONTEXT</include><include>APP_CONTEXT</include>


Custom Widget

<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></propertyInfo>

Packaging custom components JAR fileOnce you have created the JavaScript content and Widget definition XML files, you can package themwith 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.0Ant-Version: Apache Ant 1.7.1Created-By: 20.5-b03 (Sun Microsystems Inc.)Copyright: EMC CorporationVersion: 1.0Build-Version: 1.0.0000.0001Built-By: John DoeBuilt-Date: 2012-05-17 00:12:43Component-Bundle: my-custom-widgetBundle-Version: 1.1Bundle-Name: MyCustomWidgetBundle-SymbolicName: MyCustomWidgetNAMESPACE: mcw

The Component-Bundle attribute, which is case-sensitive, is a mandatory attribute. The value of thisattribute is the identifier of the JAR file. Also, the value is used as the name of a base folder for theJAR 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 definedin 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 tolocalize the property labels of the custom widget in xCP Designer. You need to specify theID of the locale string in the properties file and specify the locale specific string. The samplemy-custom-widget.propertiesfile is as follows:name=My Custom Widgetdescription=My sample custom widgetLOCALE_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} andthe 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 isdefined 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"type="text/javascript"nls="xcp/widget/custom/MyCustomWidget-strings.js"/>

<content src="content/xcp/widget/tree/designer/ContentTree.js"type="text/javascript"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 functionsYou 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 fileThe 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 themyCustomFunction 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 fileThe 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 ashttp://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> elementSyntax<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> elementSyntax<namespace>abcompany.functions</namespace>

Description

The value of this element must match with the namespace of the JavaScript function. It is used togenerate the caller of the custom function.

<categoryName> elementSyntax<categoryName>String</categoryName>

Description

Determines the category of the function by its return type. Specify any of the following values:

• String• Mathematical• Date

<returnType> elementSyntax<returnType isRepeating="false">STRING</returnType>

Description

Determines the type of data to be expected as an outcome of the custom function. The expressioneditor uses this information to perform validation. The isRepeating attribute identifies whetherthe 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> elementsSyntax<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 requiredattribute is set as False, xCP Designer cannot read the subsequent parameters for which therequired attribute is set as True.

The <type> element, a child element of <param> element, defines the type of the parameter. It has theisRepeating 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 thefunction input.

Importing custom widgets in xCP DesignerImport a custom widget as a library from the application model of xCP Designer. The xCP DesignerHelp provides information on how to import a library.

After you have imported a custom widget, it appears in the widgets palette under a specific categoryas 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, resolvethe JavaScript errors for your custom widget.

Debugging and using development modeYou can debug a custom widget at design-time and runtime.

Debugging at design-time1. 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 runtime1. 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 thefollowing 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


• Overview• Container Editor• Component Editor• <pe:layoutData>• <pe:propertyStore>• <pe:propertySheetTab>• <pe:dataRef>• Usecase• schema-representation

OverviewMarkup-driven widget property editor is used to develop widgets with specified custom propertyeditors. Property editor markup helps you define the property editors and its behavior for a customwidget.

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 differentmarkups, data provision for different artifacts, expression execution and validation.

• You can generate property editors and property validators that can be associated with customwidgets.

• 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:compositeid="unique ID">Start Sequence

<pe:setPropertyname="Enable | Visible"> specifies the expression orvalue 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 SequenceStart 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 aresupported:


Markups

• FillLayout: Specifies equal-sized widgets in a single row or column. For more information, seefillLayout, page 64.

• RowLayout: Specifies widgets in a row or rows, with size options. For more information, seerowdata, page 63 and rowLayout, page 63.

• GridLayout: Specifies widgets in a grid. For more information, see gridData, page 61 andgridLayout, page 62.

Layout Data: Layout data is the preference data of the editor given to its container layout. This allowseditor 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 withlayout data.

AttributeAttribute Required

/OptionalDescription Type

id Optional A unique identifier for the editor. ID

ElementElement Description

artifactSelector Specifies the editor that is used for selecting different types of artifacts.

boxModelPropertyEditor

Specifies the boxModelProperty editor.

checkBox Specifies the checkbox editor.

composite Specifies the composite editor.

dataRef Specifies that the property is databound.

dataServiceInstancePropertyEditor

Specifies to select the data service instances added to the current page.

dataTypePropertyEditor

Specifies the drop-down editor that is pre-populated with different datatypes.

dropDown Specifies the drop-down editor.


Markups

expressionPropertyEditor

Specifies the expression property editor.

label Specifies the label editor.

layout Specifies various layouts.

layoutData Specifies layout preference data for its parent container’s layoutcalculation.

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.

sizePropertyEditor

Represents size property editor which is a composite editor having atext 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<propertySheetConfiguration>

<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<propertySheetConfiguration>


<pe:composite><pe:layout>

<pe:rowLayout type="HORIZONTAL" /></pe:layout>


Markups

<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 horizontal direction isused.

Exposed Editor Methodsboolean 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:sectionid="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 SequenceStart 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


Markups

</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:section>

DescriptionSpecifies the section editor. Section is a container like composite with title and collapsible capability.




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


artifactSelector

Specifies an artifactSelector editor that is used for selecting different types of

artifacts.

boxModelPropertyEditor

Specifies the boxModelPropertyEditor.


Markups

checkBox Specifies the checkbox editor.


dataRef Specifies that the property is databound. It is used for setting links.

dataServiceIn-stancePropertyEditor

Specifies the editor that is used to select the data service instances added to the

current page.

dataTypePropertyEditor

Specifies a drop-down editor that is pre-populated with different data types.

dropDown Specifies the dropDown editor.

expressionPropertyEditor

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.

sizePropertyEditor

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<propertySheetConfiguration>


<pe:section collapsible="true" title="Section Title" id="section_id" ><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:section>



Markups

Exposed Editor Methodsboolean isEnabled();returns true, if the section is enabled otherwise returns false

boolean isVisible();returns true, if the section is visible otherwise returns false

Component Editor

<pe:label>

Syntax<pe:labelid="unique ID of the editor"text="text for the label"><pe:layoutData> pe:layout-data </pe:layoutData><pe:setProperty> pe:set-property-bean </pe:setProperty><pe:dataRef> pe:data-ref-bean </pe:dataRef>

</pe:label>

Description

Specifies the label editor that is used to display a label field.




text Optional Text for the editor. String


Markups



layoutData Specifies the layout data for the container.



<pe:propertySheetTab name="General Tab" id="general_tab"><pe:composite>

<pe:layout><pe:gridLayout columns="2"></pe:gridLayout>

</pe:layout><pe:section title="Basics" collapsible="true">


</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.

Exposed Editor Methodsboolean isVisible();returns true, if the label is visible otherwise returns false

<pe:textfield>

Syntax<pe:textFieldid="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


<pe:setProperty> pe:set-property-bean </pe:setProperty><pe:dataRef> pe:data-ref-bean </pe:dataRef>

</pe:textfield

DescriptionSpecifies the editor that is used for taking key inputs.




label Optional A label for the editor. String

property Required Specifies reference to property

information.

String

reCreateWidgetOnChange

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







Markups





</pe:layout><pe:textField property="reference" label="Name"/>



The above example creates a text field editor.

<pe:checkBox>

Syntax<pe:checkBoxid="unique ID"property="reference to property info"reCreateWidgetOnChange="re-rendered after value change thattakes true | false"label="label for the editor">Start Sequence


<pe:setProperty> pe:set-property-bean </pe:setProperty><pe:dataRef> pe:data-ref-bean </pe:dataRef>

</pe:checkBox>

Description

Specifies the checkbox editor and renders it to the UI.


Markups






info.

String


Optional Determines whether the widget

is rendered again after a value

change.


Boolean








</pe:layout>

<pe:checkBox id="loadChkBx" property="loadOnStart" label="Load on Start" />

</pe:composite></pe:propertySheetTab>


Exposed Editor Methodsboolean isEnabled();returns true, if the checkbox editor is enabled otherwise returns false


Markups

boolean isVisible();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:radioid="Id of the radio option"label="Label of the radio optionvalue="Value of the radio option"isSelected="Default value for the selection of the radiothat takes true | false">

<pe:layoutData> pe:layout-data </pe:layoutData></pe:radio>

Description

Specifies radio button.





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


layoutData Specifies layout data for the container.


<pe:propertySheetTab name="General Tab" id="general_tab"><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></pe:propertySheetTab>


Exposed Editor Methodsboolean isEnabled();returns true, if the radio is enabled otherwise returns false

boolean isVisible();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:radioGroupid="unique ID"


Markups

property="reference to property info"reCreateWidgetOnChange="re-rendered after value change that takes true | false"label="label of the editor">Start Sequence


<pe:setProperty> pe:set-property-bean </pe:setProperty><pe:dataRef> pe:data-ref-bean </pe:dataRef>Start Sequence

<pe:radioReference> pe:radio-reference </pe:radioReference><pe:radio> pe:radio-bean </pe:radio>

End Sequence</pe:radioGroup>

Description

Specifies radio-group bean.






info.

String




change.


Boolean






Markups


radioReference Specifies reference to the radio editor.

Exposed Editor Methodsboolean isEnabled();returns true, if the radio group is enabled otherwise returns false

boolean isVisible();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:dropDownid="unique ID"property="reference to property info"reCreateWidgetOnChange="re-rendered after value change thattakes true | false"label="label of the drop-down editor">Start Sequence


<pe:setPropertyname="Enable | Visible | Clear | Value">pe:set-property-bean </pe:setProperty><pe:dataRef> pe:data-ref-bean </pe:dataRef><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






info.

String




change.


Boolean



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 fromredirectStyle 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 actionflow instances which are part of the page is listed in the dropdown. Provider data is mapped for labeland value MODEL.label and MODEL.name respectively.

Exposed Editor Methodsboolean isEnabled();returns true, if the dropdown is enabled otherwise returns false

boolean isVisible();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 specifiedby 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 modelsDATA_ACTION_INSTANCES-> Returns data action contract modelsACTION_FLOW_INSTANCES-> Returns action flow instance modelsPROCESS_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 isa 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 isa logical entity.


Markups

Element

providerId - Specifies pre-defined data source provider ID. providerID is a simple enumeration ofvalues for setting provider.

Mapping of the dropDown Source<pe:mapping> - Maps the data from the provider tolabel 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 iscom.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:layoutData> pe:layout-data </pe:layoutData>

</pe:xcpId>

Description

Specifies an editor similar to text field editor, but you cannot have the same ID for two widgets on asame page.


Markups




label Required A label for the editor. String








</pe:layout><pe:xcpId label="ID" id="id_for_editor"/>



In the above example, an ID text field editor is created.

<pe:expressionPropertyEditor>

Syntax<pe:expressionPropertyEditorid="ID of the editor"


Markups

property="reference to property info where expression details are defined"reCreateWidgetOnChange="re-rendered after value changethat takes true | false"label="label for the editor"name="name for the editor">Start Sequence

<pe:layoutData> layout preference data for its parent container’slayout calculation </pe:layoutData>

End Sequence<pe:setPropertyname="Enable | Visible | Clear"> specifies the

expression or value to compute the property </pe:setProperty><pe:dataRef> pe:data-ref-bean </pe:dataRef><pe:dataType>

<pe:expression>Expression which defines the type ofthe data</pe:expression>

</pe:dataType></pe:expressionPropertyEditor>

Description

Specifies expression property editor. Expression editor is used to populate the data on the runtimeusing expression.





property Required Reference to property info where

expression details are defined

String




change.


Boolean

name Optional Name for the editor. String


Markups



layoutData Specifies layout preference data for its parent container’s layout calculation.


dataType Defines the type of data.

SampleFollowing is the sample for propertyInfo reference of an expression editor:<propertyInfo name="Name of the expression property info">

<type>EXPRESSION</type><expression repeatingValue="false" >

<valueType> STRING | INTEGER | FLOAT |DATETIME | BOOLEAN | BINARY</valueType>

<setterFunName>setWidgetValue</setterFunName><contextTree>

<include>PAGE_CONTEXT</include></contextTree><enableExplicitEventSubscription>true

</enableExplicitEventSubscription></expression>

</propertyInfo>

In the property Info, if the repeatingValue is set as true, expression editor takes an array of values. Ifit 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 anexpression in the pe:dataType, sub tag of pe:expressionPropertyEditor.Expression specified insidethis tag should return STRING | INTEGER | FLOAT | DATETIME | BOOLEAN | BINARY.

Example 1: PropertyInfo Configuration<propertyInfo name="expressionProperty">

<type>EXPRESSION</type><expression repeatingValue="false" >

<valueType> STRING</valueType>

<setterFunName>setWidgetValue</setterFunName><contextTree>

<include>PAGE_CONTEXT</include></contextTree><enableExplicitEventSubscription>true

</enableExplicitEventSubscription></expression>

</propertyInfo>


Markups

Example 2: Property Sheet Configuration<propertySheetConfiguration>



</pe:layout>

<pe:expressionPropertyEditor property="expressionProperty"label="Expression" id="expressionId">

</pe:expressionPropertyEditor>



<pe:artifactSelector>

Syntax<pe:artifactSelectorid="ID of the selector"property="reference to property info"reCreateWidgetOnChange="re-rendered after value change that takestrue | false"label="label for the selector"type="artifact types that takes ALL_MODELS | BO_MODEL |FOLDER_MODEL | DOC_MODEL | PAGES | PICKLIST_MODELS">

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><pe:options> pe:option APP_PAGE | INSTANCE_PAGE </pe:options>

</pe:artifactSelector>

Description

Specifies an artifactSelector editor that is used for selecting different types of artifacts.


Markups



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





Boolean

type Required Specifies the type. Possible values

are:

• ALL_MODELS - Returns allthe business object (BO),folder, and document models.

• BO_MODEL – Returns onlyBO models.

• FOLDER_MODEL – Returnsonly folder models.

• DOC_MODEL – Returns onlycontent models.

• PAGES – Returns Pagesbased on the following optionprovided:APP_PAGE – Returns onlyapplication pages.INSTANCE_PAGE – Returnsonly instance pages.

• PICKLIST_MODELS –Returns only BO models.

("BO_MODEL"| "DOC_MODEL" |"FOLDER_MODEL" |"ALL_MODELS" |"PICKLIST_MODELS" |"PAGES")


Markups




options Specifies options. For example, application page, instance page.


ExamplePage Selector<propertySheetConfiguration>





</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:artifactSelector>



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<propertySheetConfiguration>


<pe:layout><pe:gridLayout columns="2">


Markups

</pe:gridLayout></pe:layout><pe:section title="Basics" collapsible="true">


</pe:layout><pe:artifactSelector property="reference"

type="FOLDER_MODEL" label="Folders"/></pe:section>



In the above example, a folder artifact selector is created that shows all the folder models. Thereference value of the selected page is persisted into the widget property.

Exposed Editor Methodsboolean 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:boxModelPropertyEditordescription="description of the editor"id="ID of the editor"label="label for the editor"name="name of the editor"property="reference to property info"reCreateWidgetOnChange="re-rendered after value change that takes 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>

</pe:boxModelPropertyEditor>


Markups

DescriptionSpecifies a boxModelPropertyEditor.



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





Boolean





<pe:sizePropertyEditor>

Syntax<pe:sizePropertyEditorid="ID of the editor"property="reference to property info"reCreateWidgetOnChange="re-rendered after value change that takes true | false"label="label for the editor"name="name of the editor"


Markups

description="description of the editor"required="required field">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>

</pe:sizePropertyEditor>

DescriptionRepresents size property editor which is a composite editor having a text field and a drop-down.The drop-down contains auto and pixel values.










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






Markups






</pe:layout><pe:sizePropertyEditor property="reference" label="Height"/>



This example creates a size property editor with height as input.

Exposed Editor Methodsboolean isEnabled();returns true, if the text editor part of size property editor is enabled

otherwise returns false

boolean isVisible();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:dataServiceInstancePropertyEditorid="ID of the selector"label="label for the selector"name="name of the editor"reCreateWidgetOnChange="re-rendered after value change that takes true | false"property="reference to property info">


<pe:setProperty> pe:set-property-bean </pe:setProperty>


Markups

<pe:dataRef> pe:data-ref-bean </pe:dataRef>

</pe:dataServiceInstancePropertyEditor>

DescriptionSpecifies an editor that is used to select the data service instances added to the current page.





name Optional Name for the editor. String


info.

String




change.


Boolean







<pe:layout><pe:gridLayout columns="2">


Markups

</pe:gridLayout></pe:layout><pe:section title="Basics" collapsible="true">


</pe:layout><pe:dataServiceInstancePropertyEditor property=

"referenceToProperty" label="Data Services"/></pe:section>



In the above example, a data service instance picker is created that lists all the data services added tothe current page.

<pe:dataTypePropertyEditor>

Syntax<pe:dataTypePropertyEditor.id="unique ID"property="Reference to string property info"reCreateWidgetOnChange="re-rendered after value change that takes true | false"label="label for the editor"name="name for the editor"isNumberInput="number input">Start Sequence

<pe:layoutData> layout preference data for its parentcontainer’s layout calculation </pe:layoutData>

End Sequence<pe:setProperty name="Enable | Visible | Clear"> specifies the

expression or value to compute the property </pe:setProperty><pe:dataRef> pe:data-ref-bean </pe:dataRef>

</pe:dataTypePropertyEditor>

Description

Represents a drop-down editor that is pre-populated with different data types.


Markups






Optional Determines whether the widget isrendered again after a value change.Possible values: True or False.

Boolean


name Optional Name for the editor . String

isNumberInput Optional Determines whether if the input isa number.


Boolean


dataRef Specifies that the property is databound. It is used for settinglinks.






</pe:layout>

<pe:dataTypePropertyEditorproperty="fooDataType"label="Select a data type"


Markups

reCreateWidgetOnChange="true"id="fooDataTypeId">

</pe:dataTypePropertyEditor>



<pe:setProperty>

Syntax<pe:setPropertyid="unique ID"name="propertyName"><pe:expression language="JavaScript" >

Java script expression which gets evaluatedand 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. Itsupports various properties, for example, enablement, visibility , value, and clearing the value ofthe UI element.



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


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<propertySheetConfiguration>

<pe:propertySheetTab name="General Tab" id="general_tab"><pe:composite><pe:textField property="p1" label="Text Field"><pe:setProperty name="Enable">

<pe:expression language="JavaScript" ><![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 thesetProperty. 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<propertySheetConfiguration>


<pe:textField property="p1" label="Text Field 1"/>

<pe:textField property="p2" label="Text Field 2"><pe:setProperty name="Value">


"Prefix: " + #p1]]>


Markups


</pe:textField></pe:composite>


In the above example, change in the label updates the value of Text field 1, Text field 2 with a newvalue along with the prefix.

<pe:expression>

Syntax<pe:expression language="JavaScript" >

<![CDATA[Java script expression which gets evaluated

]]></pe:expression>

DescriptionExpression allows to express the dynamic behaviors using JavaScript expression. Any JavaScriptconstructs can be used in the expression. Expression gets evaluated when there is a change in any ofthe 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 configurationfile, prefix the property name with ‘#’.



language Optional Specifies the language to be used

for expression. Supported language

is JavaScript.

expressionLanguage




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"><pe:setProperty name="Value">


"Prefix: " + #p1 +$textField2.getValue()

]]></pe:expression>

</pe:setProperty></pe:textField>



In the above example, textfield 3 value is set using the property which is associated with p1 and bycalling 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.


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 dependingon the size of the parent composite that takes true | false"grabExcessVerticalSpace="height of the cell changes dependingon the size of the parent composite that takes true | false"horizontalSpan="number of column cells that the controlcan take up"verticalSpan="number of row cells that the controlcan 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.



grabExcessHorizontalSpace

Optional Specifies whether the width of the cell

changes depending on the size of the parent

composite.

Boolean

grabExcessVerticalSpace

Optional Specifies whether the height of the cell

changes depending on the size of the parent

composite.

Boolean


Markups

horizontalSpan

Optional Specifies the number of column cells that the

control can take up.

Integer

verticalSpan

Optional Specifies the number of row cells that the

control can take up.

Integer


horizontalAlignment

Specifies the horizontal position of controls within a cell.

verticalAlignment

Specifies the vertical position of controls within a cell.

<pe:gridLayout>

Syntax<pe:gridLayoutcolumns="number of columns"makeColumnsEqualWidth="tue | false"</pe:gridLayout>

Description

Specifies the value for grid layout.



columns Required Specifies number of columns. Integer

makeColumnsE-qualWidth

Optional Specifies if all the columns shouldbe of equal width. It takes true orfalse as a value.

Boolean


Markups

<pe:rowData>

Syntax<pe:rowDataid="unique ID"

</pe:rowData>

Description

Specifies the value for row layout.



height Required Specifies the height of the row. Integer

width Required Specifies the width of the row. Integer

<pe:rowLayout>

Syntax<pe:rowLayouttype="type of the layout that takes Horizontal | VERTICAL">Start Sequence


</pe:rowLayout>

Description

Specifies the row layout of the container.


Markups



type Optional Specifies the type. It takes

horizontal or vertical.

"HORIZONTAL" |"VERTICAL"

<pe:fillLayout>

Syntax<pe:fillLayouttype="type of the layout that takes HORIZONTAL | VERTICAL">Start Sequence


</pe:fillLayout>

DescriptionSpecifies the value for fillLayout editor.



type Optional Specifies the type. It takes

horizontal or vertical.

"HORIZONTAL" |"VERTICAL"

<pe:horizontalAlignment>

Syntax<pe:horizontalAlignment>

</pe:horizontalAlignment>

DescriptionSpecifies 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>

DescriptionStores property values into the widget which are not directly associated with an editor element. It isused to update multiple properties based on its value.





info.

String




<pe:propertySheetTab name=’General Tab’ id=’general_tab’><pe:composite>

<pe:section title=’Basics’ collapsible=’true’><pe:propertyStore id="hiddenGrp" property="store">

<pe:setProperty name="Value"><pe:expression>

<![CDATA[if($dsiDD.selectedObject() != null && $dsiDD.

selectedObject().get("name") != null)$dsiDD.selectedObject().get("name");

else"";

]]>


Markups


</pe:propertyStore></pe:section>



In the above example, the store property (in the property info) of the widget is updated based on theexpression evaluation. Property holds the $dsiDD dropdown’s selected object’s name.

Exposed Editor MethodsString getValue();returns the store value for the corresponding property

<pe:propertySheetTab>

Syntax<pe:propertySheetTab>id="unique ID"</pe:propertySheetTab>

DescriptionSpecifies the propertySheetTab editor.



id Required A unique identifier for the editor. ID

name Required Name for the editor. String


Markups




<pe:dataRef>

Syntax<pe:dataRefselectionName="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 visualrepresentation, but it is a logical entity.



selectionName

Optional Specifies data model name for the

data reference.

String

selectionLabel

Required Specifies data model label for the

data reference.

String


Markups


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>

</pe:artifactSelector>

UsecaseThe following example illustrates the use case of seat selection form. There are three controls inthis scenario:

• Seat type drop down list

• Serve pop-corn checkbox

• Popcorn type

Example of UI Element Definition and Wiring using Markup


Markups

In this example, the Seat type drop down list contains two options - Gold and Silver, the Servepop-corn checkbox is enabled only for Gold customers. The popcorn type drop down list is visibleonly if Serve pop-corn is checked.

• The Type drop down list does not contain any selection and hence the Serve pop-corn checkboxis disabled.

• Select the Type as Gold. The Serve pop-corn checkbox is enabled.• Check Serve pop-corn and different options to select pop-corn type is visible.• Select the Type as Silver. The Serve pop-corn checkbox is disabled and the option to selectpop-corn type is not visible.

Markup DefinitionProperty Info Definition<configuration>

<propertyInfo name="seatTypeProperty"><type>STRING</type><defaultvalue>current</defaultvalue><valueassist fixed="true">

<item><value>gold</value><label>Gold</label>

</item><item>

<value>silver</value><label>Silver</label>


</propertyInfo><propertyInfo name="servePopcornProperty">

<type>BOOLEAN</type><defaultvalue>false</defaultvalue>

</propertyInfo><propertyInfo name="popcornType">

<type>STRING</type><defaultvalue>current</defaultvalue><valueassist fixed="true">

<item><value>cheese</value><label>Cheese</label>

</item><item>

<value>salt</value><label>Salt</label>


</propertyInfo></configuration>

Property Sheet Configuration<propertySheetConfiguration><pe:propertySheetTab name="General" id="generalTab"/>

<pe:propertySheetTab name="Style" id="Style"/>


Markups

<pe:propertySheetTab name="Behaviour" id="behavior"/>

<pe:propertySheetTab name="Seat Selection" id="exprEval"><pe:section title="Seat type">


</pe:layout>

<pe:dropDown label="Type" property="seatTypeProperty" id="seatType"><pe:source>


</pe:dropDown>

<pe:checkBox property="servePopcornProperty" label="Serve pop-corn" id="servePopCorn">

<pe:setProperty name="Enable"><pe:expression language="JavaScript">

<![CDATA[ $seatType.selectedValue() == ’gold’ ]]></pe:expression>

</pe:setProperty></pe:checkBox>

<pe:dropDown property="popcornType"><pe:setProperty name="Visible">

<pe:expression language="JavaScript"><![CDATA[ $servePopCorn.isChecked() ]]>

</pe:expression></pe:setProperty><pe:source>


</pe:dropDown></pe:section>


• When you select the seat type as Gold, the dependency manager finds out Serve pop-corn checkboxhas a dependency on the Type dropdown. Then, it notifies the Serve pop-corn checkbox.

• On receiving notification from the dependency manager, the Serve pop-corn checkbox executes thescript and applies the result to the element. It also notifies the state change to dependency manager.

• The dependency manager gets the notification and then notifies the pop-corn type.

• The pop-corn type evaluates the script using script engine and applies the state and notifies back todependency manager.


Markups

schema-representationElement Schema Representation

<pe:artifactSelector>- <xs:complexType name="artifact-selector-editor-bean">

<xs:complexContent><xs:extension base="pe:persisted

-editor-bean"><xs:sequence>

<xs:element name="options" type="pe:option"maxOccurs="1"/>

</xs:sequence><xs:attribute name="type" type="pe:

artifact-types"use="required"/>

</xs:extension></xs:complexContent>

</xs:complexType>

<pe:checkBox> <xs:complexType name="checkbox-bean"><xs:complexContent><xs:extension base="pe:

persisted-editor-bean"/></xs:complexContent>

</xs:complexType>

<pe:composite> <xs:complexType name="composite-bean"><xs:complexContent><xs:extension base="pe:container-bean"><xs:sequence minOccurs="0" maxOccurs="

unbounded"><xs:element name="composite" type="pe:composite

-bean" minOccurs="0" maxOccurs="unbounded"/><xs:element name="dropDown" type="pe:dropdown

-bean" minOccurs="0" maxOccurs="unbounded"/><xs:element name="checkBox" type="pe:checkbox

-bean" minOccurs="0" maxOccurs="unbounded"/><xs:element name="radio" type="pe:radio-bean"

minOccurs="0" maxOccurs="unbounded"/><xs:element name="radioGroup" type="pe:radio

-group-bean" minOccurs="0" maxOccurs="unbounded"/><xs:element name="propertyStore" type="pe:

property-store-bean" minOccurs="0" maxOccurs="unbounded"/>

<xs:element name="textField" type="pe:textfield-bean" minOccurs="0" maxOccurs="unbounded"/>

<xs:element name="label" type="pe:label-bean"minOccurs="0" maxOccurs="unbounded"/>

<xs:element name="section" type="pe:section-bean"minOccurs="0" maxOccurs="unbounded"/>

<xs:element name="sizePropertyEditor"type="pe:size-property-editor-bean"


Markups

minOccurs="0" maxOccurs="unbounded"/><xs:element name="boxModelPropertyEditor"

type="pe:box-model-property-editor-bean"minOccurs="0" maxOccurs="unbounded"/>

<xs:element name="expressionPropertyEditor"type="pe:expression-property-editor-bean"minOccurs="0" maxOccurs="unbounded"/>

<xs:element name="dataTypePropertyEditor"type="pe:data-type-property-editor-bean" minOccurs="0"maxOccurs="unbounded"/>

<xs:element name="dataServiceInstancePropertyEditor"type="pe:data-service-instance-property-editor-bean" minOccurs="0" maxOccurs="unbounded"/>

<xs:element name="artifactSelector"type="pe:artifact-selector-editor-bean"minOccurs="0" maxOccurs="unbounded"/>

<xs:element name="xcpId" type="pe:xcp-id"minOccurs="0" maxOccurs="unbounded"/>

</xs:sequence></xs:extension>

</xs:complexContent></xs:complexType>

<pe:container> <xs:complexType name="container-bean"><xs:complexContent><xs:extension base="pe:dynamic-editor-bean"><xs:sequence minOccurs="0" maxOccurs="1"><xs:element name="layout" type="pe:

layout-bean"/></xs:sequence>


</xs:complexType>

<pe:dataRef> <xs:complexType name="data-ref-bean"><xs:choice minOccurs="1" maxOccurs="1"><xs:element name="expression" type="pe:

expression"/><xs:element name="value" type="xs:string"/>

</xs:choice><xs:attribute name="selectionName" type="xs:

string"/><xs:attribute name="selectionLabel" type="xs:

string" use="required"/></xs:complexType>


Markups

<pe:dataTypePropertyEditor>

<xs:complexType name="data-type-property-editor-bean">


-editor-bean"><xs:attribute name="name" type="xs:string"/><xs:attribute name="isNumberInput" type=

"xs:boolean"/></xs:extension>


<pe:dropDown> <xs:complexType name="dropdown-bean"><xs:complexContent><xs:extension base="pe:data

-aware-editor-bean"/></xs:complexContent>

</xs:complexType>

<pe:expression> xs:complexType name="expression"><xs:simpleContent><xs:extension base="xs:string"><xs:attribute name="language" type=

"pe:expressionLanguage" default="JavaScript"/></xs:extension>

</xs:simpleContent></xs:complexType>

<pe:expressionPropertyEditor>

<xs:complexType name="expression-property-editor-bean">


-editor-bean"><xs:sequence minOccurs="1" maxOccurs="1"><xs:element name="dataType" type="pe:

editor-data-type"/></xs:sequence><xs:attribute name="name" type="xs:string"/>


</xs:complexType>

<pe:gridLayout> <xs:complexType name="grid-layout-bean"><xs:complexContent><xs:extension base="pe:base-layout-type"><xs:attribute name="columns" type=

"xs:int" use="required"/><xs:attribute name="makeColumnsEqualWidth"

type="xs:boolean" use="optional" default="false"/></xs:extension>



Markups

<pe:label> <xs:complexType name="label-bean"><xs:complexContent><xs:extension base="pe:dynamic

-editor-bean"><xs:attribute name="text" type="xs:string"

default=""/></xs:extension>


<pe:layoutData> <xs:complexType name="layout-bean"><xs:choice minOccurs="1" maxOccurs=

"unbounded"><xs:element name="gridLayout" type="pe:grid

-layout-bean" minOccurs="1" maxOccurs="1"/><xs:element name="rowLayout" type="pe:row

-layout-bean" minOccurs="1" maxOccurs="1"/><xs:element name="fillLayout" type="pe:fill

-layout-bean" minOccurs="1" maxOccurs="1"/></xs:choice>

</xs:complexType>

<pe:modelAttribute> <xs:complexType name="model-attribute-source-bean">

<xs:complexContent><xs:extension base="pe:base-source-bean"><xs:sequence><xs:element name="model" type="pe:

expressionData" minOccurs="1"/></xs:sequence>


</xs:complexType>

<pe:modelInfo> <xs:complexType name="model-info-source-bean">

<xs:complexContent><xs:extension base="pe:base-source-bean"><xs:sequence minOccurs="1" maxOccurs="unbounded"><xs:element name="providerId" type="pe:

providerId" minOccurs="1" maxOccurs="unbounded"/></xs:sequence>


</xs:complexType>


Markups

<pe:radio> <xs:complexType name="radio-bean"><xs:complexContent><xs:extension base="pe:editor-bean"><xs:attribute name="label" type="xs:string"/><xs:attribute name="value" type="xs:string"

use="required"/><xs:attribute name="isSelected" type=



<pe:radioGroup> <xs:complexType name="radio-group-bean"><xs:complexContent><xs:extension base="pe:persisted-editor-bean"><xs:sequence minOccurs="0" maxOccurs=

"unbounded"><xs:element name="radioReference" type=

"pe:radio-reference" minOccurs="0" maxOccurs="unbounded"/>

<xs:element name="radio" type="pe:radio-bean"minOccurs="0" maxOccurs="unbounded"/>



<pe:rowLayout> <xs:complexType name="row-layout-data-bean"><xs:complexContent><xs:extension base="pe:base-layout-data-type"><xs:attribute name="width" type="xs:int"

use="required"/><xs:attribute name="height" type="xs:int"

use="required"/></xs:extension>


<pe:section> <xs:complexType name="section-bean"><xs:complexContent><xs:extension base="pe:composite-bean"><xs:attribute name="title" type="xs:string"

use="required"/><xs:attribute name="collapsible" type=

"xs:boolean"default="false"/>


</xs:complexType>


Markups

<pe:selectorDataAction> <xs:complexType name="selector-data-action-source-bean"><xs:complexContent><xs:extension base="pe:base-source-bean"><xs:sequence><xs:element name="modelUrn" type=

"pe:expressionData"minOccurs="1"/>



<pe:setProperty> <xs:complexType name="set-property-bean"><xs:choice minOccurs="1" maxOccurs="1"><xs:element name="expression" type="pe:

expression"/><xs:element name="value" type="xs:string"/>

</xs:choice><xs:attribute name="id" type="xs:string"/><xs:attribute name="name" type="pe:propertyName"

use="required"/></xs:complexType>

<pe:sizePropertyEditor> <xs:complexType name="size-property-editor-bean"><xs:complexContent><xs:extension base="pe:persisted-editor-bean"><xs:attribute name="name" type="xs:string"/><xs:attribute name="description" type=

"xs:string"/><xs:attribute name="required" type=



<pe:textfield> <xs:complexType name="textfield-bean"><xs:complexContent><xs:extension base="pe:persisted

-editor-bean"><xs:attribute name="type" type=

"xs:string"/><xs:attribute name="length" type=

"xs:string"/></xs:extension>


<pe:xcpId> <xs:complexType name="xcp-id"><xs:complexContent><xs:extension base="pe:editor-bean"><xs:attribute name="label" type=

"xs:string" use="required"/></xs:extension>



Chapter 3

Type Adoption


• Overview• Adopting types• Editing and configuring Adopted Types• Deploying adopted types• Runtime behavior

OverviewType adoption feature enables you to adopt data types from the Documentum repository to the xCPapplication. Using type adoption, xCP application can read or write data instances created throughDocumentum clients, such as previous versions of xCP, Documentum Administrator, Webtop, andTaskSpace, and adopted in the xCP Designer. Similarly, Documentum clients can read or write newinstances of adopted types created in an xCP application. Thus, the type adoption feature providesinteroperability between Documentum clients and xCP applications accessing data instances.

For the interoperability to work between xCP 2.x and Webtop 6.7 SP2, you must have installed DFCpatch 6.7 SP2 P09.

Use Type Adoption when:

• You have an xCP 1.x application running but you want to upgrade to Documentum 7 platform. Also,you want to build new applications using xCP 2.x where both xCP 1.x and 2.x can share the data.

• You want to use the features of xCP Designer 2.x to fulfill new business needs without refactoringany data model from xCP Designer 1.x. Also, you want to build new xCP 2.x application as areplacement for xCP 1.x application.

Adopting typesYou can not adopt the Documentum fundamental types—dm_sysobject, dm_document, and dm_folder.You can adopt only subtypes of dm_sysobject, dm_document, and dm_folder data types. When youadopt a data type that is inherited from another data type, all the super types are also adopted. Forexample, if the premium_customer type is inherited from privileged_customer type, which in turn isinherited from the customer type, when you adopt the premium_customer type, its super data types,privileged_customer, and customer types are also adopted. The adopted data types then appear in theobject models navigator. The xCP Designer Help provides information on how to adopt data types.


Type Adoption

If you provide a label for a data type during type creation using Documentum clients, the system usesthe label values. For example, consider a data type loan_customer is created with a label of LoanCustomer. When you adopt this data type in xCP, the object model appears with Loan Customer as itslabel and loan_customer as the system name. However, if you do not provide a label for a data typeduring type creation, the system uses the default label values set by the Content Server. For subtypesof dm_sysobject, the label is SysObject. For subtypes of dm_content, the label is Document. Andfor subtypes of dm_folder, the label is Folder.

If multiple types are adopted at a time and either they do not have label values or have same labelvalues, errors are shown in Problems tab of xCP Designer. In such instances, xCP Designer changesthe object model label values in appropriate manner to fix the error.

xCP Designer does not support DQL reserved words. So, when a type contains DQL reserved word asattribute name, xCP application does not adopt it. You need to change such attribute names beforeadopting types.

Editing and configuring Adopted TypesWhen data types are adopted in an xCP application, they behave like any other data types created inxCP Designer. You can modify the attributes of adopted data types, add relationships with othertypes, or attach type fragments to these data types. Permission sets can be applied. You can create aninstance of the adopted type. System name of an adopted type represents the actual type name fromthe repository and it cannot be changed in the xCP application.

You can create relationships from:

• Adopted types to adopted types

• Adopted types to regular types

• Regular types to adopted types

You can add picklists to adopted types as well. You can also configure business events for adoptedtypes.

You can create pages for:

• Create, update, and view operations

• Object selectors

• Action flows

• Page fragments

• Context menus

If adopted type is Content, you can configure Import actions.

You can use adopted types in:

• Processes as packages or attachments.

• Real-time, Full-text and Historical queries

• Task List query dataset, if it is being used as package.


Type Adoption

Deploying adopted typesWhile deploying the xCP Application, adopted types are deployed along with other object modelsto the repository.

• If an adopted type does not exist in the target repository, the system creates the type and publishes it.

• If an adopted type exists in the target repository, the system alters the type and publishes it.

All the rules of data policies apply for the adopted types as well. If data policy, other than MINIMALor MAINTAIN, is used, all the existing instances are deleted. As a best practice, use the MAINTAINdata policy while deploying adopted data type on the production environment, to avoid data loss.

Business events and alerts are triggered even if an instance of adopted type is modified outside of xCPDesigner.

Runtime behaviorAfter the adopted types are deployed, the existing instances behave same as new instances createdwithin or outside xCP Designer. When a real-time query is used, the older instances are retrieved alongwith newly created instance after adopted types are deployed. You can create, view, edit, and deleteinstances. Alerts and business events are triggered on such operations, if configured. Both old and newinstances can be related with other object instances using relate action. These instances can be attachedto packages or attachments during workflow actions.


Chapter 4

Troubleshooting - Custom Widget


• Blank page editor canvas• Custom widget does not appear in Widgets palette• Timing issues at runtime• Style issues• Caching issues

Blank page editor canvas

ProblemWhen you add a new custom widget or a custom function, a blank page editor canvas appears.

CauseIn xCP Designer, all the JavaScript files are merged into a single JavaScript file to be used by the PageEditor canvas. The newly added JavaScript file is error prone.

ResolutionRemove the library, fix the JavaScript files, and re-import the library. If pages render correctly afterimporting libraries, it means that the newly added library is syntactically correct.

Custom widget does not appear in Widgetspalette

ProblemPage editor canvas renders correctly but a newly added custom widget does not appear in the Widgetspalette.


Troubleshooting - Custom Widget

Resolution

Check the <category> element in the Widget definition XML.

Timing issues at runtime

Problem

Timing related issues at runtime.

Resolution

If there are any timing related issues at runtime, use debug messages instead of Browser breakpoints.Use the xcp.Logger.debug or console.log statements in the JavaScript code to view the messages in theapplication. To launch xCP logger at runtime, press Alt+X on the page.

Style issues

Problem

The widget is not visible even when there is no JavaScript error.

Resolution

Use the Browser developer tools to identify CSS related issues due to which the widget might notbe rendered properly.

Caching issues

Problem

The JavaScript code is modified, but the changes are not reflected in the browser in the developmentmode.

Resolution

Clear the browser cache and then refresh the browser.


Technology

xCP 2.1 Developer Guide