xCP 2.1 Developer Guide

6,040 views

Published on

Published in: Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
6,040
On SlideShare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
444
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

xCP 2.1 Developer Guide

  1. 1. EMC®®® Documentum®®® xCelerated Composition Platform Version 2.1 Developer Guide EMC Corporation Corporate Headquarters: Hopkinton, MA 01748-9103 1-508-435-1000 www.EMC.com
  2. 2. Legal Notice Copyright © 2009–2014 EMC Corporation. All Rights Reserved. EMC believes the information in this publication is accurate as of its publication date. The information is subject to change without notice. THE INFORMATION IN THIS PUBLICATION IS PROVIDED "AS IS." EMC CORPORATION MAKES NO REPRESENTATIONS OR WARRANTIES OF ANY KIND WITH RESPECT TO THE INFORMATION IN THIS PUBLICATION, AND SPECIFICALLY DISCLAIMS IMPLIED WARRANTIES OF MERCHANTABILITY OR FITNESS FOR A PARTICULAR PURPOSE. Use, copying, and distribution of any EMC software described in this publication requires an applicable software license. For the most up-to-date listing of EMC product names, see EMC Corporation Trademarks on EMC.com. Adobe and Adobe PDF Library are trademarks or registered trademarks of Adobe Systems Inc. in the U.S. and other countries. All other trademarks used herein are the property of their respective owners. Documentation Feedback Your opinion matters. We want to hear from you regarding our product documentation. If you have feedback about how we can make our documentation better or easier to use, please send us your feedback directly at IIGDocumentationFeedback@emc.com.
  3. 3. Table of Contents Chapter 1 Custom Widget............................................................................................... 7 Overview ......................................................................................................... 7 Setting up the development environment ........................................................... 7 Creating a custom widget.................................................................................. 8 JavaScript content file ................................................................................... 8 Widget definition file ...................................................................................... 8 Packaging custom components JAR file ............................................................15 Custom JavaScript functions.............................................................................17 JavaScript content file ..................................................................................17 Function XML file ..........................................................................................18 Importing custom widgets in xCP Designer ........................................................20 Debugging and using development mode ..........................................................21 Chapter 2 Markups .........................................................................................................23 Overview .........................................................................................................23 Container Editor ...............................................................................................24 <pe:composite> ............................................................................................24 <pe:section>.................................................................................................27 Component Editor ............................................................................................30 <pe:label> ....................................................................................................30 <pe:textfield>................................................................................................31 <pe:checkBox>.............................................................................................33 <pe:radio>....................................................................................................35 <pe:radioGroup>...........................................................................................36 <pe:dropDown> ............................................................................................38 dropDown Source......................................................................................41 Mapping of the dropDown Source...............................................................43 <pe:xcpId> ...................................................................................................43 <pe:expressionPropertyEditor>......................................................................44 <pe:artifactSelector> .....................................................................................47 <pe:boxModelPropertyEditor>........................................................................50 <pe:sizePropertyEditor> ................................................................................51 <pe:dataServiceInstancePropertyEditor>........................................................53 <pe:dataTypePropertyEditor> ........................................................................55 <pe:setProperty> ..........................................................................................57 <pe:expression>........................................................................................59 <pe:layoutData>...............................................................................................60 <pe:gridData>...............................................................................................61 <pe:gridLayout>............................................................................................62 <pe:rowData>...............................................................................................63 <pe:rowLayout>............................................................................................63 <pe:fillLayout> ..............................................................................................64 <pe:horizontalAlignment> ..............................................................................64 EMC Documentum xCelerated Composition Platform Version 2.1 Developer Guide 3
  4. 4. Table of Contents <pe:propertyStore> ..........................................................................................65 <pe:propertySheetTab> ....................................................................................66 <pe:dataRef>...................................................................................................67 Usecase ..........................................................................................................68 schema-representation .....................................................................................71 Chapter 3 Type Adoption ................................................................................................77 Overview .........................................................................................................77 Adopting types .................................................................................................77 Editing and configuring Adopted Types ..............................................................78 Deploying adopted types ..................................................................................79 Runtime behavior .............................................................................................79 Chapter 4 Troubleshooting - Custom Widget..................................................................81 Blank page editor canvas..................................................................................81 Custom widget does not appear in Widgets palette.............................................81 Timing issues at runtime ...................................................................................82 Style issues .....................................................................................................82 Caching issues.................................................................................................82 4 EMC Documentum xCelerated Composition Platform Version 2.1 Developer Guide
  5. 5. Preface This guide describes how to develop your customized widgets and use markups for the xCP Designer. It also explains how you can adopt data types from the Documentum repository to the xCP application using type adoption feature. Intended Audience The information in this guide is for developers who develop customized widgets, use markups, and adopt data types. It assumes you have knowledge of ExtJS and JavaScript. Revision History The following table lists changes in this guide. Revision Date Description March 2014 Initial publication EMC Documentum xCelerated Composition Platform Version 2.1 Developer Guide 5
  6. 6. Chapter 1 Custom Widget This chapter contains the following topics: • Overview • Setting up the development environment • Creating a custom widget • Packaging custom components JAR file • Custom JavaScript functions • Importing custom widgets in xCP Designer • Debugging and using development mode Overview xCP Designer is shipped with a comprehensive set of widgets, which provide you various options and choices when you put together an application. However, the existing widgets might not meet all your requirements, requiring the need to create a customized widget. In this scenario, you can build your own widgets. To build a new widget you must have knowledge of ExtJS and JavaScript. xCP widgets are based on the Sencha ExtJS framework. To use customized widgets, they must be bundled into a JAR file and imported into xCP Designer. Each custom widget can be built with the following components: • JavaScript Class File: (Required) Provides the instantiation and behavior of the widget. • Widget XML: (Required) Outlines the properties or metadata about an instance of the widget. • Localization Properties File: (Optional) In this file, widget related strings are externalized. • CSS Class: (Optional) Customizes look and feel of the widget. Setting up the development environment The development environment for developing a custom widget, must include the following: • JavaScript IDE, such as IntelliJ IDEA (recommended), Eclipse, or Aptana • An application server, such as Tomcat or tc Server • Java Runtime • Supported browser with a debugger EMC Documentum xCelerated Composition Platform Version 2.1 Developer Guide 7
  7. 7. Custom Widget To test the changes made in the widget, you need the following: • An xCP Designer to test the custom widget at design time. • A deployed xCP application to test the behavior of the custom widget at runtime. Creating a custom widget To create a custom widget, you need to create these files: • JavaScript Content File • Widget Definition XML File JavaScript content file In the JavaScript file, include all the code required for the user interface to work at runtime. You can extend various ExtJS components while adding the required functionalities. The JavaScript file should contain the definition of the class as follows: Ext.define("myNamespace.widgets.myCustomWidget", { extend: "Ext.form.Text", alias: "widget.myWidgetXType", myNamespace.widgets.myCustomWidget is the name of the custom widget. It extends Ext.form.Text, which is an ExtJS widget. widget.myWidgetXType is an alias. An alias must be specified in the <xtype of widget> format for the widget to be recognized by the system. The xtype of a widget is specified in the widget’s definition XML file. Widget definition file The Widget definition file contains the widget definition and its properties in XML format. The model_schema.xsd file defines the structure of the widget definition file. The elements of the widget definition file are explained below. <Widget> element Syntax <widget xmlns="http://documentum.emc.com/2010/UI-Model" id="myCustomWidgetID" xtype="myWidgetXType" version="1.0.0000.001"> Description The <widget> element has the following attributes: • xmlns – Specify the namespace of the widget as http://documentum.emc.com/2010/UI-Model. • id – Specify a unique identifier for a widget. 8 EMC Documentum xCelerated Composition Platform Version 2.1 Developer Guide
  8. 8. Custom Widget • xtype – Specify the type of the widget, which the system uses at runtime to look for widget properties. • version – Specify the numeric version string. <Name> element Syntax <name>My Custom Widget</name> Description Name of the widget shown in the widgets palette of the Page Editor. <Description> element Syntax <description>Description explaining what this widget does.</description> Description Description of the widget shown as a tooltip in the widgets palette. <Icon> element Syntax <icon src="icons/mycustomwidget_wig.png" width="16" height="16"/> <icon src="icons/mycustomwidget_24_wig.png" width="24" height="24"/> Description Specifies the location of the icon files in the packaged jar. Two types of icons are used by xCP Designer. One type is shown next to the widget in the widgets palette as illustrated in the first syntax. The other is shown when the widget is dragged onto the canvas as illustrated in the second syntax. For the icon shown next to the widget in the widget palette, the width and height must be 16, and for the icon shown when the widget is dragged, the width and height must be 24. For both the icons, the file name must end with "_wig". <Content> element Syntax <content src="content/widget/MyCustomWidget.js" type="text/javascript" nls="widget/MyCustomWidget-strings.js"/> Description Defines the location of the JavaScript files used to render the widget. It has the following attributes: • src – Specify the path of the file in the packaged jar. • type – Specify "text/javascript" to indicate that this is a JavaScript file. EMC Documentum xCelerated Composition Platform Version 2.1 Developer Guide 9
  9. 9. Custom Widget • nls – Specify the root path of the JavaScript files used for localization. The root path is locales/content/<country code>. <Category> element Syntax <category>xcpPalette:Custom</category> Description Determines the section of the widgets palette under which the widget should appear. Specify any of the following values: • xcpPalette:Navigation • xcpPalette:Layout • xcpPalette:Input • xcpPalette:Selection • xcpPalette:List • xcpPalette:Text • xcpPalette:Presentation • xcpPalette:Action • xcpPalette:Custom <Configuration> element Syntax propertyInfo name="propertyName" hidden="true"> Description Defines the set of attributes for the widget. These attributes collectively determine the JSON that is generated for the widget. This element can have the following children elements in the specified order: • <Databound> element – (Optional) Is a special type of <propertyInfo> element. There can be only one occurrence of this element. The sample <Databound> element is as follows: <databound name="initialValue"> <label>Initial Value</label> <description>Initial Value for folder</description> <type>EXPRESSION</type> <expression> <contextTree> <include>PRIMARY_CONTEXT</include> <include>APP_CONTEXT</include> <include>WIDGET_CONTEXT</include> <include>SINGLE_OBJECT_DATA_SERVICE_OUTPUT</include> <include>UI_EVENTS</include> <include>SESSION_PARAMETERS</include> <include>FRAGMENT_INPUT</include> </contextTree> <enableExplicitEventSubscription>true</enableExplicitEventSubscription> </expression> 10 EMC Documentum xCelerated Composition Platform Version 2.1 Developer Guide
  10. 10. Custom Widget </databound> • <PropertyInfo> element – (Optional) Describes the attributes and values for a particular name-value pair in the JSON. There are no limits to the number of occurrences of this element. This element contains information related to: – Presentation of the property in xCP Designer. – Property Validation Rules. – Data type of the property; such as string, integer, boolean, and expression. The sample <propertyInfo> element is as follows: <propertyInfo name="title" localizable="true"> <label>Title</label> <type>STRING</type> <constraint> <validator type="maxLength" maxLength="60"/> </constraint> <required>true</required> <defaultvalue></defaultvalue> </propertyInfo> Element Syntax Description <label>My own label</label> Specifies the label shown in the properties view of xCP Designer. <type>STRING</type> Determines the editor to be used to specify a value. The options are: • STRING – Specifies a text field. • INTEGER – Specifies a text field. • BOOLEAN – Specifies a checkbox. • EXPRESSION – Specifies an expression editor. Configure the expression editor using the <expression> element. <constraint> <validator type="maxLength" maxLength="60"/> </constraint> Defines the limit of the value. You can define only maxLength. In order to use it, a second attribute maxLength has to be defined. <defaultvalue> My default value </defaultvalue> Defines the default value to be used as the value of the property. <defaultvalue> element can be used along with the hidden attribute of <propertyInfo> element. <expression> <setterFunName> myCustomSetValue </setterFunName> <contextTree> <include>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 to EXPRESSION. The <setterFunName> element specifies the JavaScript function used to store the data.The JavaScript function specified in this element must be defined either in the custom JavaScript file or the base JavaScript class it extends. The <contextTree> element determines from where the value for the expression can be selected. The options are: EMC Documentum xCelerated Composition Platform Version 2.1 Developer Guide 11
  11. 11. Custom Widget Element Syntax Description </contextTree> </expression> • APP_CONTEXT – Specifies the context of the application, such as name of the application and logged in user. • PRIMARY_CONTEXT – Specifies the primary context of the page. For example, the primary context for View Customer page would be the Customer and its attributes can be used as part of the expression. For example, Customer.firstName. • UI_EVENTS – Specifies the UI events applicable for the context. For example, to subscribe to warnings that occur in the application page, uievent.Application.xcp.show_warning.warn- ing_message. • SESSION_PARAMETERS – Specifies the session variable applicable for the context. For example, for a shopping site, a shopping cart may be implemented as a session parameter and you can use sessionparameters.ns.shoppingcart to access session parameter. • FRAGMENT_INPUT– Specifies fragment inputs if the page is a fragment. For example, a map fragment accepts latitude as input. You can use fragment input inside fragment layout and bind to the widgets. A text field inside fragment needs to show the latitude, then it can be configured as Inputs.latitude. • GLOBAL_CONTEXT– Specifies the shortcut context. APP_CONTEXT, SESSION_PARAMETERS, UI_EVENTS is valid in multiple places and this may result in duplication. You can specify the context once as GLOBAL_CONTEXT and this can then be applied to all the relevant contexts. • PAGE_CONTEXT – Specifies the shortcut context. In a page, APP_CONTEXT, SESSION_PARAMETERS, _EVENTS, PRIMARY_CONTEXT, WIDGET_CONTEXT, SINGLE_OBJECT_DATA_SERVICE_OUTPUT, FRAGMENT_INPUT are valid contexts. This might result in duplication of these contexts in page level contexts. You can specify the context once as PAGE_CONTEXT and can be applied to all the specified contexts. • WIDGET_CONTEXT – Specifies the context of other widgets on the page. If the value is specified, you can use the data stored in other widgets on the page. For example, you can use data from other widgets as prefix or suffix for this widget. 12 EMC Documentum xCelerated Composition Platform Version 2.1 Developer Guide
  12. 12. Custom Widget Element Syntax Description • DATASOURCE_INPUT – Specifies the context referenced from an input of a Data Source Instance. • DATASOURCE_OUTPUT – Specifies the context referenced from an output of a Data Source Instance. • SINGLE_OBJECT_DATA_SERVICE_OUT- PUT – Specifies the context referenced from an output of a Data Source Instance, if the output does not contain any repeating attributes. <expressionProperties> element Syntax <expressionProperties> <propertyInfo name="value"> <label>Value</label> <getterFun> <name>this.getValueFromWidget</name> <arguments> <argument>EVALUATION_CONTEXT</argument> <argument>WIDGET_ID</argument> <argument>PROPERTY_ID</argument> </arguments> </getterFun> <changeEvents> <eventInfo name="change"/> </changeEvents> </propertyInfo> </expressionProperties> Description Defines attributes that can be used in the expression editor. This element can have the following children elements: • propertyInfo — The name attribute of the <propertyInfo> element corresponds to the name of the property defined in the <configuration> element. The most common usage is to get the value from a widget. • label — Specifies the label of the property shown in xCP Designer. • getterFun — Specifies the name and arguments of the JavaScript function to get the value. • name — Specifies the name of the function. For example, this.getValueFromWidget function can be used to get the value from the widget and this.getValueFromSelectionModel function can be used for widgets that allow selection. If there are any functions defined in your widget JavaScript file, you can use them as well. • arguments — Specifies the arguments passed into this function. Possible values for each <argument> element are: – EVALUATION_CONTEXT – (Mandatory) Specifies the context from which all the information can be retrieved. EMC Documentum xCelerated Composition Platform Version 2.1 Developer Guide 13
  13. 13. Custom Widget – WIDGET_ID – Specifies the identifier of the widget. – MODEL_ID – Specifies the identifier of the model, for example, customer model. – DATASERVICE_INSTANCE_ID – Specifies the identifier of the data service instance. – PROPERTY_ID – Specifies the identifier of the property. – PARAMETER_NAMESPACE – Specifies the namespace of the parameter and is used for application parameters. Special <propertyInfo> element There are special <propertyInfo> elements used for specific use cases. These property name keywords appear differently in the properties view of xCP Designer. The speacial <propertyInfo> elements are: • valueType – Shows a drop-down list with all available types, such as, string, integer, float, datetime, and boolean. <propertyInfo name="valueType"> <label>Data type</label> <type>STRING</type> <defaultvalue>STRING</defaultvalue> </propertyInfo> • isRepeating – Shows a checkbox that allows you to specify whether the data should be repeated or not. Use the name="isRepeating" attribute along with the hidden=”true” attribute. <propertyInfo name="isRepeating" hidden="true"> <type>BOOLEAN</type> <defaultvalue>true</defaultvalue> </propertyInfo> • repeatingAttributeFormat – Shows two drop-down lists that allow you to specify how to represent the repeating attribute. One drop-down list allows you to specify a new line as a separator to separate multiple values, and the other drop-down list allows you to specify any other separator. <propertyInfo name="repeatingAttributeFormat"> <label>Repeating Attribute Format</label> <type>OBJECT</type> </propertyInfo> There are a few properties that can specify the behavior of the widget—read-only, hidden, and disabled. All these properties must have their type set to EXPRESSION. The expression editor is placed in a Behavior tab of the properties view. • readonly – Specifies when the widget is read-only. • hidden – Specifies when the widget is hidden. • disabled – Specifies when the widget is disabled. The sample <propertyInfo> element for hidden behavior is as follows: <propertyInfo name="hidden"> <label>Hidden when</label> <type>EXPRESSION</type> <expression> <setterFunName>setHidden</setterFunName> <contextTree> <include>PRIMARY_CONTEXT</include> <include>APP_CONTEXT</include> 14 EMC Documentum xCelerated Composition Platform Version 2.1 Developer Guide
  14. 14. 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 file Once you have created the JavaScript content and Widget definition XML files, you can package them with other necessary components in a JAR file. The JAR file consists of the following components: • Manifest file • JavaScript content file • Widget definition XML file • Icon used by the custom component • Properties file used for localization The manifest file, which is case-sensitive, is located at the following path in the JAR file: META-INF/MANIFEST.MF The sample MANIFEST.MF file is as below: Manifest-Version: 1.0 Ant-Version: Apache Ant 1.7.1 Created-By: 20.5-b03 (Sun Microsystems Inc.) Copyright: EMC Corporation Version: 1.0 Build-Version: 1.0.0000.0001 Built-By: John Doe Built-Date: 2012-05-17 00:12:43 Component-Bundle: my-custom-widget Bundle-Version: 1.1 Bundle-Name: MyCustomWidget Bundle-SymbolicName: MyCustomWidget NAMESPACE: mcw The Component-Bundle attribute, which is case-sensitive, is a mandatory attribute. The value of this attribute is the identifier of the JAR file. Also, the value is used as the name of a base folder for the JAR file. Ensure that the value of this attribute is unique across applications. All the components other than manifest file reside in the base folder. Structure of the JAR file The structure of the JAR file is illustrated below: EMC Documentum xCelerated Composition Platform Version 2.1 Developer Guide 15
  15. 15. Custom Widget The folders under the my-custom-widget base folder are described below: • Config – This folder contains Widget definition XML file. • Content – This folder contains JavaScript files. The folder structure must match the <content> element defined in the Widget definition XML file. • Icons – This folder contains all icons. The folder structure must match the <icon> element defined in the Widget definition XML file. • Lib – This folder is required to package any external libraries or JARs. • Locales – This folder contains all localization files. Widget labels can be localized either at design time or at runtime. The Locales/config/my-custom-widget.properties file contains information to localize the property labels of the custom widget in xCP Designer. You need to specify the ID of the locale string in the properties file and specify the locale specific string. The sample my-custom-widget.propertiesfile is as follows: name=My Custom Widget description=My sample custom widget LOCALE_STRING_ID= Locale String You can localize any relevant string in the component definition using ${ LOCALE_STRING_ID} construct. <propertyInfo name="fieldLabel" localizable="true"> <label>${ LABEL_LOCALE_ID} </label> <type>STRING</type> <defaultvalue>Label</defaultvalue> </propertyInfo> In the above example, label string of property info is localized using ${ LABEL_LOCALE_ID} and the corresponding ID is defined in the localization file, my-custom-widget.properties file. <propertySheetConfiguration> <pe:propertySheetTab name="${General}" id="general"/> 16 EMC Documentum xCelerated Composition Platform Version 2.1 Developer Guide
  16. 16. Custom Widget </propertySheetConfiguration> In the above example, name of the property sheet tab is localized using ${General} . General is defined in the localization file, my-custom-widget.properties file. A sample custom widget localization file used at design time: Ext.namespace("xcp.Strings.widget.custom.designer.MyCustomWidget"); Ext.apply(xcp.Strings.widget.custom.designer.MyCustomWidget, { basicSectionLabel : "Basics", layoutSectionLabel: "Layout", }); A sample custom widget localization file used at runtime: Ext.namespace("xcp.Strings.widget.custom.MyCustomWidget "); Ext.apply(xcp.Strings.widget.custom.MyCustomWidget, { a_folder : "A folder", myfiledotdoc: "My file.doc", moreItems: "more items" }); Mention the above two locale files in the Widget definition XML file as follows: <content src="content/xcp/widget/custom/MyCustomWidget.js" 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 functions You can create your own JavaScript functions and import those functions in xCP Designer as libraries. A custom JavaScript function consists of these files: • JavaScript content file • Function XML file JavaScript content file The JavaScript content file contains a function definition along with the required namespace definition. In the sample JavaScript content file below, abcompany.functions is the namespace and the myCustomFunction function concatenates two strings. // myCustomFunction.js EMC Documentum xCelerated Composition Platform Version 2.1 Developer Guide 17
  17. 17. Custom Widget Ext.namespace (’abcompany.functions’); /* * Comments for myCustomFunction */ abcompany.functions.myCustomFunction = function (str1, str2) { return str1 + str2; } Function XML file The Function XML file contains the JavaScript function definition and its properties in XML format. <function> element Syntax <function xmlns="http://documentum.emc.com.com/2010/UI-Model" id="JSFunction-myCustomFunction" version="1.0.0000.001"> Description The <function> element has the following attributes: • xmlns – Specifies the namespace for a custom function as http://documentum.emc.com/2010/UI-Model. • id – Specifies a unique identifier for a custom function. • version – Specifies the numeric version string. <name> element Syntax <name>myCustomFunction</name> Description Name of the function shown in the expression editor of the Page Editor. <Description> element Syntax <description> Returns the concatenated values of the two input parameters </description> Description Description of the function shown as a tooltip in the expression editor. 18 EMC Documentum xCelerated Composition Platform Version 2.1 Developer Guide
  18. 18. Custom Widget <Content> element Syntax <content src="content/function/MyCustomFunction.js" type="text/javascript"/> Description Defines the location of the JavaScript file used to execute this function. It has the following attributes: • src – Specifies the source path of the file within the packaged jar. • type – Indicates the type as a JavaScript file. • nls – Specifies the path of other JavaScript files used for localization, for example, locales/content/<country code>/. <namespace> element Syntax <namespace>abcompany.functions</namespace> Description The value of this element must match with the namespace of the JavaScript function. It is used to generate the caller of the custom function. <categoryName> element Syntax <categoryName>String</categoryName> Description Determines the category of the function by its return type. Specify any of the following values: • String • Mathematical • Date <returnType> element Syntax <returnType isRepeating="false">STRING</returnType> Description Determines the type of data to be expected as an outcome of the custom function. The expression editor uses this information to perform validation. The isRepeating attribute identifies whether the value is a single value or a repeating value. Specify any of the following values: • STRING EMC Documentum xCelerated Composition Platform Version 2.1 Developer Guide 19
  19. 19. Custom Widget • INTEGER • FLOAT • DATETIME • BOOLEAN <params> and <param> elements Syntax <params> <param name="str1" required="true"> <type isRepeating="false">STRING</type> </param> <param name="str12" required="true"> <type isRepeating="false">STRING</type> </param> </params> Description The <params> element contains a list of parameters that a JavaScript function can consume. The <param> element contains information for each parameter. It has the following attributes: • name – (Required) Specifies the name of the parameter. • required – Specifies whether this parameter is required or not. For a parameter if the required attribute is set as False, xCP Designer cannot read the subsequent parameters for which the required attribute is set as True. The <type> element, a child element of <param> element, defines the type of the parameter. It has the isRepeating attribute that identifies whether the value is a single value or a repeating value. For <type> element, specify any of the following values: • String • Integer • Float • Datetime • Boolean • ANY If you specify ANY, xCP Designer does not verify the type of a parameter when it validates the function input. Importing custom widgets in xCP Designer Import a custom widget as a library from the application model of xCP Designer. The xCP Designer Help provides information on how to import a library. After you have imported a custom widget, it appears in the widgets palette under a specific category as defined in the Widget definition file. Drag and drop the custom widget to the layout area and 20 EMC Documentum xCelerated Composition Platform Version 2.1 Developer Guide
  20. 20. Custom Widget verify if it behaves as expected. If the Page Editor or the Palette does not show up correctly, resolve the JavaScript errors for your custom widget. Debugging and using development mode You can debug a custom widget at design-time and runtime. Debugging at design-time 1. In the layout area of a page, perform Ctrl + Shift + Click. 2. Press F12 or click on the Firebug icon to display the debug console. 3. In the Firebug console, type window.location.href and press Enter. 4. Select and copy the URL. 5. Open a Web browser, for example, Firefox or Chrome, and paste the URL. 6. Debug the script of your custom widget, as required. Debugging at runtime 1. To debug JavaScript in an xCP application, add the nominify parameter to the URL: http://<hostname>:8080/<appname>/?nominify#application/<pagename> 2. Typically, custom widget development involves multiple iterations of development and test cycles. So, to improve your productivity, perform the following steps: a. Copy the deployed application from tc Server to your local Tomcat under webapps. b. Copy libraries from tcServer/APPHOST/lib to WEB-INF/lib of your application in Tomcat. c. Copy dfc.properties and bam-server.properties from APPHOST/<customConf> to WEB-INF/classes. d. Delete the custom widget jar from WEB-INF/lib. 3. In the xCP web application deployed above, navigate to WEB-INF/web.xml and uncomment the following lines to enable the folder-based component bundle loading. <servlet> <display-name>xCP Component Servlet</display-name> <servlet-name>ComponentServlet</servlet-name> <servlet-class> com.emc.documentum.ui.model.ComponentServlet </servlet-class> <init-param> <description>Directory for development mode</description> <param-name>bundleDirectory</param-name> <param-value>/bundles</param-value> </init-param> <load-on-startup>1</load-on-startup> </servlet> Change /bundles to custom component source, for example, c:/devBundles. 4. Test the pages where custom widget is configured. If you face any issue related to the customization, perform the following steps: EMC Documentum xCelerated Composition Platform Version 2.1 Developer Guide 21
  21. 21. 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. 22 EMC Documentum xCelerated Composition Platform Version 2.1 Developer Guide
  22. 22. Chapter 2 Markups This chapter contains the following topics: • Overview • Container Editor • Component Editor • <pe:layoutData> • <pe:propertyStore> • <pe:propertySheetTab> • <pe:dataRef> • Usecase • schema-representation Overview Markup-driven widget property editor is used to develop widgets with specified custom property editors. Property editor markup helps you define the property editors and its behavior for a custom widget. The advantages of using markup to develop custom widgets are: • You do not require knowledge of Standard Widget Toolkit (SWT) for developing a custom widget. • You can define the editors and their behavior efficiently using a simple-to-use markup. • You can reuse the generic property editors in markup. • You only need to provide custom editor markup. The infrastructure handles UI rendition of different markups, data provision for different artifacts, expression execution and validation. • You can generate property editors and property validators that can be associated with custom widgets. • A pre-defined schema guides you to validate the markup. Typically, application of markups consists of the following steps: • Create widget component definition that defines the properties configuration. • Configure property editors in component definition. • Configure layout, tabs, sections, and elements. • Configure evaluation expression condition for enablement and visibility of the widget. EMC Documentum xCelerated Composition Platform Version 2.1 Developer Guide 23
  23. 23. Markups Container Editor <pe:composite> Syntax <pe:composite id="unique ID"> Start Sequence <pe:setPropertyname="Enable | Visible"> specifies the expression or value to compute the property </pe:setProperty> <pe:layout> Specifies various layouts </pe:layout> <pe:layoutData> layout preference data for its parent container’s layout calculation </pe:layoutData> All the editors mananged by the composite editor goes here. End Sequence Start Sequence <pe:composite> pe:composite-bean </pe:composite> <pe:dropDown> pe:dropdown-bean </pe:dropDown> <pe:checkBox> pe:checkbox-bean </pe:checkBox> <pe:radio> pe:radio-bean </pe:radio> <pe:radioGroup> pe:radio-group-bean </pe:radioGroup> <pe:propertyStore> pe:property-store-bean </pe:propertyStore> <pe:textField> pe:textfield-bean </pe:textField> <pe:label> pe:label-bean </pe:label> <pe:section> pe:section-bean </pe:section> <pe:sizePropertyEditor> pe:size-property-editor-bean </pe:sizePropertyEditor> <pe:boxModelPropertyEditor> pe:box-model-property-editor-bean </pe:boxModelPropertyEditor> <pe:expressionPropertyEditor> pe:expression-property-editor-bean </pe:expressionPropertyEditor> <pe:dataTypePropertyEditor> pe:data-type-property-editor-bean </pe:dataTypePropertyEditor> <pe:dataServiceInstancePropertyEditor> pe:data-service-instance- property-editor-bean </pe:dataServiceInstancePropertyEditor> <pe:artifactSelector> pe:artifact-selector-editor-bean </pe:artifactSelector> <pe:xcpId> pe:xcp-id </pe:xcpId> End Sequence </pe:composite> Description Contain other editors and apply layout to the elements present in the container. Layout: A layout controls the position and size of children in a composite. The following layouts are supported: 24 EMC Documentum xCelerated Composition Platform Version 2.1 Developer Guide
  24. 24. Markups • FillLayout: Specifies equal-sized widgets in a single row or column. For more information, see fillLayout, page 64. • RowLayout: Specifies widgets in a row or rows, with size options. For more information, see rowdata, page 63 and rowLayout, page 63. • GridLayout: Specifies widgets in a grid. For more information, see gridData, page 61 and gridLayout, page 62. Layout Data: Layout data is the preference data of the editor given to its container layout. This allows editor to get rendered in a preferred size and shape. The editor should specify the following, to alter the default layout of the container: • If the container layout is GridLayout, specify gridData. • If the container is rowLayout, specify rowData. FillLayout equally divides the space for its child element, so its behavior can not be altered with layout data. Attribute Attribute Required /Optional Description Type id Optional A unique identifier for the editor. ID Element Element Description artifactSelector Specifies the editor that is used for selecting different types of artifacts. boxModelProperty Editor Specifies the boxModelProperty editor. checkBox Specifies the checkbox editor. composite Specifies the composite editor. dataRef Specifies that the property is databound. dataServiceInstance PropertyEditor Specifies to select the data service instances added to the current page. dataTypeProperty Editor Specifies the drop-down editor that is pre-populated with different data types. dropDown Specifies the drop-down editor. EMC Documentum xCelerated Composition Platform Version 2.1 Developer Guide 25
  25. 25. Markups expressionProperty Editor Specifies the expression property editor. label Specifies the label editor. layout Specifies various layouts. layoutData Specifies layout preference data for its parent container’s layout calculation. radio Specifies the radio editor. radioGroup Specifies the radio group editor. section Specifies the section editor. setProperty Specifies the expression or value to compute the property. sizeProperty Editor Represents size property editor which is a composite editor having a text field and a drop-down. textField Specifies the text field editor that is used for taking key inputs. xcpId Specifies the xcpID editor. Example 1 <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:propertySheetTab name="General Tab" id="general_tab"> <pe:composite> <pe:layout> <pe:rowLayout type="HORIZONTAL" /> </pe:layout> 26 EMC Documentum xCelerated Composition Platform Version 2.1 Developer Guide
  26. 26. 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 is used. Exposed Editor Methods boolean isEnabled(); returns true, if the composite is enabled otherwise returns false boolean isVisible(); returns true, if the composite is visible otherwise returns false <pe:section> Syntax <pe:section id="unique ID" title="title of the section" collapsible="true | false"> Start Sequence <pe:layoutData> pe:layout-data </pe:layoutData> End Sequence <pe:setProperty> pe:set-property-bean </pe:setProperty> <pe:dataRef> pe:data-ref-bean </pe:dataRef> Start Sequence <pe:layout> pe:layout-bean </pe:layout> End Sequence Start Sequence <pe:composite> pe:composite-bean </pe:composite> <pe:dropDown> pe:dropdown-bean </pe:dropDown> <pe:checkBox> pe:checkbox-bean </pe:checkBox> <pe: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 EMC Documentum xCelerated Composition Platform Version 2.1 Developer Guide 27
  27. 27. 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> Description Specifies the section editor. Section is a container like composite with title and collapsible capability. Attribute Attribute Required /Optional Description Type id Optional A unique identifier for the editor. ID title Required Title for the editor. String collapsible Optional Specifies if the section needs to be collapsible. It takes true or false as a value. Boolean Element Element Description artifact Selector Specifies an artifactSelector editor that is used for selecting different types of artifacts. boxModel PropertyEditor Specifies the boxModelPropertyEditor. 28 EMC Documentum xCelerated Composition Platform Version 2.1 Developer Guide
  28. 28. Markups checkBox Specifies the checkbox editor. composite Specifies the composite editor. dataRef Specifies that the property is databound. It is used for setting links. dataServiceIn- stance PropertyEditor Specifies the editor that is used to select the data service instances added to the current page. dataType PropertyEditor Specifies a drop-down editor that is pre-populated with different data types. dropDown Specifies the dropDown editor. expression PropertyEditor Specifies the expression property editor. label Specifies the label editor. layout Specifies the layout editor. layoutData Specifies the layout data of the container. radio Specifies the radio editor. radioGroup Specifies the radio group editor. section Specifies the section editor. setProperty Specifies the setproperty editor. It is used to set the properties of the editors dynamically through expression. sizeProperty Editor Specifies the size property editor which is a composite editor having a text field and a drop-down. textField Specifies the textField editor that is used for taking key inputs. xcpId Specifies the xcpID editor. Example <propertySheetConfiguration> <pe:propertySheetTab name="General Tab" id="general_tab"> <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> </pe:propertySheetTab> </propertySheetConfiguration> EMC Documentum xCelerated Composition Platform Version 2.1 Developer Guide 29
  29. 29. Markups Exposed Editor Methods boolean 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:label id="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. Attribute Attribute Required /Optional Description Type id Optional A unique identifier for the editor. ID text Optional Text for the editor. String 30 EMC Documentum xCelerated Composition Platform Version 2.1 Developer Guide
  30. 30. Markups Element Element Description dataRef Specifies that the property is databound. It is used for setting links. layoutData Specifies the layout data for the container. setProperty Specifies the expression or value to compute the property. Example <propertySheetConfiguration> <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:gridLayout columns="2"> </pe:gridLayout> </pe:layout> <pe:label id="id_for_the_label" text="Display text"/> </pe:section> </pe:composite> </pe:propertySheetTab> </propertySheetConfiguration> This example creates a label field with the label Display text. Exposed Editor Methods boolean isVisible(); returns true, if the label is visible otherwise returns false <pe:textfield> Syntax <pe:textField id="ID of the text field" label="label for the text field" reCreateWidgetOnChange="re-rendered after value change that takes true | false" type="type of the text field" length="length of the text field" property="reference to property info" > Start Sequence EMC Documentum xCelerated Composition Platform Version 2.1 Developer Guide 31
  31. 31. Markups <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:textfield Description Specifies the editor that is used for taking key inputs. Attribute Attribute Required /Optional Description Type id Optional A unique identifier for the editor. ID label Optional A label for the editor. String property Required Specifies reference to property information. String reCreateWidget OnChange Optional Determines whether the widget is rendered again after a value change. Possible values: True or False. Boolean type Optional Specifies the type of the editor. String length Optional Specifies length of the text field. String Element Element Description dataRef Specifies that the property is databound. It is used for setting links. layoutData Specifies the layout data for the container. setProperty Specifies the expression or value to compute the property. Example <propertySheetConfiguration> 32 EMC Documentum xCelerated Composition Platform Version 2.1 Developer Guide
  32. 32. Markups <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:gridLayout columns="2"> </pe:gridLayout> </pe:layout> <pe:textField property="reference" label="Name"/> </pe:section> </pe:composite> </pe:propertySheetTab> </propertySheetConfiguration> The above example creates a text field editor. <pe:checkBox> Syntax <pe:checkBox id="unique ID" property="reference to property info" reCreateWidgetOnChange="re-rendered after value change that takes true | false" label="label for the editor"> Start Sequence <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:checkBox> Description Specifies the checkbox editor and renders it to the UI. EMC Documentum xCelerated Composition Platform Version 2.1 Developer Guide 33
  33. 33. Markups Attribute Attribute Required /Optional Description Type id Optional A unique identifier for the editor. ID label Optional A label for the editor. String property Required Specifies reference to property info. String reCreateWidget OnChange Optional Determines whether the widget is rendered again after a value change. Possible values: True or False. Boolean Element Element Description dataRef Specifies that the property is databound. It is used for setting links. layoutData Specifies the layout data for the container. setProperty Specifies the expression or value to compute the property. Example <propertySheetConfiguration> <pe:propertySheetTab name="General Tab" id="general_tab"> <pe:composite> <pe:layout> <pe:gridLayout columns="2"> </pe:gridLayout> </pe:layout> <pe:checkBox id="loadChkBx" property="loadOnStart" label="Load on Start" /> </pe:composite> </pe:propertySheetTab> </propertySheetConfiguration> Exposed Editor Methods boolean isEnabled(); returns true, if the checkbox editor is enabled otherwise returns false 34 EMC Documentum xCelerated Composition Platform Version 2.1 Developer Guide
  34. 34. 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:radio id="Id of the radio option" label="Label of the radio option value="Value of the radio option" isSelected="Default value for the selection of the radio that takes true | false"> <pe:layoutData> pe:layout-data </pe:layoutData> </pe:radio> Description Specifies radio button. Attribute Attribute Required /Optional Description Type id Optional A unique identifier for the editor. ID label Optional A label for the editor. String 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 EMC Documentum xCelerated Composition Platform Version 2.1 Developer Guide 35
  35. 35. Markups Element Element Description layoutData Specifies layout data for the container. Example <propertySheetConfiguration> <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> </propertySheetConfiguration> Exposed Editor Methods boolean 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:radioGroup id="unique ID" 36 EMC Documentum xCelerated Composition Platform Version 2.1 Developer Guide
  36. 36. Markups property="reference to property info" reCreateWidgetOnChange="re-rendered after value change that takes true | false" label="label of the editor"> 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:radioReference> pe:radio-reference </pe:radioReference> <pe:radio> pe:radio-bean </pe:radio> End Sequence </pe:radioGroup> Description Specifies radio-group bean. Attribute Attribute Required /Optional Description Type id Optional A unique identifier for the editor. ID label Optional A label for the editor. String property Required Specifies reference to property info. String reCreateWidget OnChange Optional Determines whether the widget is rendered again after a value change. Possible values: True or False. Boolean Element Element Description dataRef Specifies that the property is databound. It is used for setting links. layoutData Specifies the layout data for the container. setProperty Specifies the expression or value to compute the property. EMC Documentum xCelerated Composition Platform Version 2.1 Developer Guide 37
  37. 37. Markups radio Specifies the radio editor. radioReference Specifies reference to the radio editor. Exposed Editor Methods boolean 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:dropDown id="unique ID" property="reference to property info" reCreateWidgetOnChange="re-rendered after value change that takes true | false" label="label of the drop-down editor"> Start Sequence <pe:layoutData> pe:layout-data </pe:layoutData> End 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. 38 EMC Documentum xCelerated Composition Platform Version 2.1 Developer Guide
  38. 38. Markups Attribute Attribute Required /Optional Description Type id Optional A unique identifier for the editor. ID label Optional A label for the editor. String property Required Specifies reference to property info. String reCreateWidget OnChange Optional Determines whether the widget is rendered again after a value change. Possible values: True or False. Boolean Element Element Description dataRef Specifies that the property is databound. It is used for setting links. layoutData Specifies element’s layout preference data for its parent container’s layout calculation. setProperty Specifies the expression or value to compute the property. 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> EMC Documentum xCelerated Composition Platform Version 2.1 Developer Guide 39
  39. 39. Markups <item> <value>none</value> <label>None</label> </item> </valueassist> </propertyInfo> <pe:dropDown property="redirectStyle" id="redirectStyleDrop"> <pe:source> <pe:propertyValueAssist/> </pe:source> </pe:dropDown> In the above example, a dropdown is created with the values specified in the valueassist from redirectStyle property info. Example 2 <pe:dropDown property="importAFId" id="importAFId" reCreateWidgetOnChange="true"> <pe:source> <pe:modelInfo> <pe:providerId>ACTION_FLOW_INSTANCES </pe:providerId> </pe:modelInfo> </pe:source> <pe:mapping> <pe:label>MODEL.label</pe:label> <pe:value>MODEL.name</pe:value> </pe:mapping> </pe:dropDown> In the above example, a dropdown is created with the values specified in the source. All the action flow instances which are part of the page is listed in the dropdown. Provider data is mapped for label and value MODEL.label and MODEL.name respectively. Exposed Editor Methods boolean 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 40 EMC Documentum xCelerated Composition Platform Version 2.1 Developer Guide
  40. 40. Markups String selectedLabel(); returns the dropdown mapped selected label Object selectedObject(); returns the whole object in the map form holding the attribute name and value dropDown Source dropDown source defines source elements for the dropDown editor, as following: <pe:source> - Source for the dropdown <pe:modelAttribute> - Attributes of the model specified by the URN after expression evaluation <pe:model> - Syntactic notation to get the model <pe:expression>[expression returning a model URN]</pe:expression> </pe:model> </pe:modelAttribute> </pe:source> <pe:source> <pe:modelInfo> - Metadata about the type of model source <pe:providerId> BO_MODELS-> DOC_MODELS-> FOLDER_MODELS-> BO_DOC_FOLDER_MODELS-> DATA_SOURCE_INSTANCES-> Returns real time query models DATA_ACTION_INSTANCES-> Returns data action contract models ACTION_FLOW_INSTANCES-> Returns action flow instance models PROCESS_PACKAGES-> Returns package models for the given process </pe:providerId> </pe:modelInfo> </pe:source> <pe:source> <pe:propertyValueAssist/> - Reference to the property value assist provided as part of the property info </pe:source> <pe:source> <pe:selectorDataAction> - Returns the selector data action associated with the model <pe:modelUrn> - URN of the selected model after expression evaluation <pe:expression>[expression returning a model URN]</pe:expression> </pe:modelUrn> </pe:selectorDataAction> </pe:source> EMC Documentum xCelerated Composition Platform Version 2.1 Developer Guide 41
  41. 41. Markups <pe:selectorDataAction> Syntax <pe:selectorDataAction <pe:modelUrn> pe:expressionData </pe:modelUrn> [1] </pe:selectorDataAction> Description Returns selector data action by taking model URN as an expression input. Element modelUrn - Specifies model value based on an expression. <pe:modelAttribute> Syntax <pe:modelAttribute <pe:model> pe:expressionData </pe:model> </pe:modelAttribute> Description Takes model as an input based on an expression. This does not have a visual representation, but it is a logical entity. Element model - Specifies model value based on an expression. <pe:modelInfo> Syntax <pe:modelInfo> <pe:providerId> pe:providerId </pe:providerId> [1..*] </pe:modelInfo> Description Takes model as an input based on an expression. This does not have a visual representation, but it is a logical entity. 42 EMC Documentum xCelerated Composition Platform Version 2.1 Developer Guide
  42. 42. Markups Element providerId - Specifies pre-defined data source provider ID. providerID is a simple enumeration of values for setting provider. Mapping of the dropDown Source <pe:mapping> - Maps the data from the provider to label and value specified <pe:label>MODEL.categoryId | MODEL.label | MODEL.name | MODEL.type | MODEL.path | MODEL.urn | MODEL.datamodelname </pe:label> <pe:value>MODEL.categoryId | MODEL.label | MODEL.name | MODEL.type | MODEL.path | MODEL.urn | MODEL.datamodelname </pe:value> </pe:mapping> • MODEL.categoryId: Category ID of the model, for example, page category ID is com.emc.xcp.artifact.page. • MODEL.label: Label of the model. • MODEL.name: Name of the model. • MODEL.type: Type of the model which is the qualified name of the model, for example, namespace + model name. • MODEL.path: Path of the model, for example, Artifacts/Pages/<page_artifact>.page. • MODEL.urn: URN of the model. • MODEL.datamodelname: Name of the data model associated with the model. <pe:xcpId> Syntax <pe:xcpId> id="ID for the editor" label="label for the editor"> <pe: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 a same page. EMC Documentum xCelerated Composition Platform Version 2.1 Developer Guide 43
  43. 43. Markups Attribute Attribute Required /Optional Description Type id Optional A unique identifier for the editor. ID label Required A label for the editor. String Element Element Description layoutData Specifies the layout data for the container. Example <propertySheetConfiguration> <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:gridLayout columns="2"> </pe:gridLayout> </pe:layout> <pe:xcpId label="ID" id="id_for_editor"/> </pe:section> </pe:composite> </pe:propertySheetTab> </propertySheetConfiguration> In the above example, an ID text field editor is created. <pe:expressionPropertyEditor> Syntax <pe:expressionPropertyEditor id="ID of the editor" 44 EMC Documentum xCelerated Composition Platform Version 2.1 Developer Guide
  44. 44. Markups property="reference to property info where expression details are defined" reCreateWidgetOnChange="re-rendered after value change that takes true | false" label="label for the editor" name="name for the editor"> Start Sequence <pe:layoutData> layout preference data for its parent container’s layout calculation </pe:layoutData> End Sequence <pe:setPropertyname="Enable | Visible | Clear"> specifies the expression or value to compute the property </pe:setProperty> <pe:dataRef> pe:data-ref-bean </pe:dataRef> <pe:dataType> <pe:expression>Expression which defines the type of the data</pe:expression> </pe:dataType> </pe:expressionPropertyEditor> Description Specifies expression property editor. Expression editor is used to populate the data on the runtime using expression. Attribute Attribute Required /Optional Description Type id Optional A unique identifier for the editor. ID label Optional A label for the editor. String property Required Reference to property info where expression details are defined String reCreateWidget OnChange Optional Determines whether the widget is rendered again after a value change. Possible values: True or False. Boolean name Optional Name for the editor. String EMC Documentum xCelerated Composition Platform Version 2.1 Developer Guide 45
  45. 45. Markups Element Element Description dataRef Specifies that the property is databound. It is used for setting links. layoutData Specifies layout preference data for its parent container’s layout calculation. setProperty Specifies the expression or value to compute the property. dataType Defines the type of data. Sample Following is the sample for propertyInfo reference of an expression editor: <propertyInfo name="Name of the expression property info"> <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. If it is set to false, it takes single value, for example, string. ValueType determines the outcome of the types of data. This can be dynamically specified using an expression in the pe:dataType, sub tag of pe:expressionPropertyEditor.Expression specified inside this tag should return STRING | INTEGER | FLOAT | DATETIME | BOOLEAN | BINARY. Example 1: PropertyInfo Configuration <propertyInfo name="expressionProperty"> <type>EXPRESSION</type> <expression repeatingValue="false" > <valueType> STRING</valueType> <setterFunName>setWidgetValue</setterFunName> <contextTree> <include>PAGE_CONTEXT</include> </contextTree> <enableExplicitEventSubscription>true </enableExplicitEventSubscription> </expression> </propertyInfo> 46 EMC Documentum xCelerated Composition Platform Version 2.1 Developer Guide
  46. 46. Markups Example 2: Property Sheet Configuration <propertySheetConfiguration> <pe:propertySheetTab name="General Tab" id="general_tab"> <pe:composite> <pe:layout> <pe:gridLayout columns="2"/> </pe:layout> <pe:expressionPropertyEditor property="expressionProperty" label="Expression" id="expressionId"> </pe:expressionPropertyEditor> </pe:composite> </pe:propertySheetTab> </propertySheetConfiguration> <pe:artifactSelector> Syntax <pe:artifactSelector id="ID of the selector" property="reference to property info" reCreateWidgetOnChange="re-rendered after value change that takes true | false" label="label for the selector" type="artifact types that takes ALL_MODELS | BO_MODEL | FOLDER_MODEL | DOC_MODEL | PAGES | PICKLIST_MODELS"> Start Sequence <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. EMC Documentum xCelerated Composition Platform Version 2.1 Developer Guide 47
  47. 47. Markups Attribute Attribute Required /Optional Description Type id Optional A unique identifier for the artifact selector. ID label Optional A label for the artifact selector. String property Required Specifies the property attribute. String reCreateWidget OnChange Optional Determines whether the widget is rendered again after a value change. Possible values: True or False. Boolean type Required Specifies the type. Possible values are: • ALL_MODELS - Returns all the business object (BO), folder, and document models. • BO_MODEL – Returns only BO models. • FOLDER_MODEL – Returns only folder models. • DOC_MODEL – Returns only content models. • PAGES – Returns Pages based on the following option provided: APP_PAGE – Returns only application pages. INSTANCE_PAGE – Returns only instance pages. • PICKLIST_MODELS – Returns only BO models. ("BO_MODEL" | "DOC_MODEL" | "FOLDER_MODEL" | "ALL_MODELS" | "PICKLIST_MODELS" | "PAGES") 48 EMC Documentum xCelerated Composition Platform Version 2.1 Developer Guide
  48. 48. Markups Element Element Description dataRef Specifies that the property is databound. It is used for setting links. layoutData Specifies the layout data for the container. options Specifies options. For example, application page, instance page. setProperty Specifies the expression or value to compute the property. Example Page Selector <propertySheetConfiguration> <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:gridLayout columns="2"> </pe:gridLayout> </pe:layout> <pe:artifactSelector property="redirectUrl" type="PAGES" label="Pages" id="pageArtifactSelector"> <pe:options> <pe:option>APP_PAGE</pe:option> <pe:option>INSTANCE_PAGE</pe:option> </pe:options> </pe:artifactSelector> </pe:section> </pe:composite> </pe:propertySheetTab> </propertySheetConfiguration> 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:propertySheetTab name="General Tab" id="general_tab"> <pe:composite> <pe:layout> <pe:gridLayout columns="2"> EMC Documentum xCelerated Composition Platform Version 2.1 Developer Guide 49
  49. 49. Markups </pe:gridLayout> </pe:layout> <pe:section title="Basics" collapsible="true"> <pe:layout> <pe:gridLayout columns="2"> </pe:gridLayout> </pe:layout> <pe:artifactSelector property="reference" type="FOLDER_MODEL" label="Folders"/> </pe:section> </pe:composite> </pe:propertySheetTab> </propertySheetConfiguration> In the above example, a folder artifact selector is created that shows all the folder models. The reference value of the selected page is persisted into the widget property. Exposed Editor Methods boolean hasPrimaryModel(); returns true, if the selected model has a primary model otherwise returns false boolean isArtifactSelected(); returns true, if the artifact selector is selected with a model otherwise returns false String getSelectedPageURL(); returns the selected page URL in the form; modelNameSpace + primaryModelName + "/" + selectedPageName; <pe:boxModelPropertyEditor> Syntax <pe:boxModelPropertyEditor description="description of the editor" 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> 50 EMC Documentum xCelerated Composition Platform Version 2.1 Developer Guide
  50. 50. Markups Description Specifies a boxModelPropertyEditor. Attribute Attribute Required /Optional Description Type description Optional Specifies the description. String id Optional A unique ID of the editor. ID label Optional Specifies a label for the property editor. String name Optional Specifies the name of the property editor. String property Required Specifies reference to property info. String reCreateWidget OnChange Optional Determines whether the widget is rendered again after a value change. Possible values: True or False. Boolean Element Element Description dataRef Specifies that the property is databound. It is used for setting links. layoutData Specifies the layout data for the container. setProperty Specifies the expression or value to compute the property. <pe:sizePropertyEditor> Syntax <pe:sizePropertyEditor id="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" EMC Documentum xCelerated Composition Platform Version 2.1 Developer Guide 51
  51. 51. 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> Description Represents size property editor which is a composite editor having a text field and a drop-down. The drop-down contains auto and pixel values. Attribute Attribute Required /Optional Description Type id Optional A unique identifier for the editor. ID label Optional A label for the editor. String property Required Specifies reference to property info. String reCreateWidget OnChange Optional Determines whether the widget is rendered again after a value change. Possible values: True or False. Boolean name Optional Specifies name of the editor. String description Optional Specifies description of the editor. String required Optional Determines whether the field is required. Boolean Element Element Description dataRef Specifies that the property is databound. It is used for setting links. layoutData Specifies the layout data for the container. setProperty Specifies the expression or value to compute the property. 52 EMC Documentum xCelerated Composition Platform Version 2.1 Developer Guide
  52. 52. Markups Example <propertySheetConfiguration> <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:gridLayout columns="2"> </pe:gridLayout> </pe:layout> <pe:sizePropertyEditor property="reference" label="Height"/> </pe:section> </pe:composite> </pe:propertySheetTab> </propertySheetConfiguration> This example creates a size property editor with height as input. Exposed Editor Methods boolean 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:dataServiceInstancePropertyEditor id="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:layoutData> pe:layout-data </pe:layoutData> End Sequence <pe:setProperty> pe:set-property-bean </pe:setProperty> EMC Documentum xCelerated Composition Platform Version 2.1 Developer Guide 53
  53. 53. Markups <pe:dataRef> pe:data-ref-bean </pe:dataRef> </pe:dataServiceInstancePropertyEditor> Description Specifies an editor that is used to select the data service instances added to the current page. Attribute Attribute Required /Optional Description Type id Optional A unique identifier for the editor. ID label Optional A label for the editor. String name Optional Name for the editor. String property Required Specifies reference to property info. String reCreateWidget OnChange Optional Determines whether the widget is rendered again after a value change. Possible values: True or False. Boolean Element Element Description dataRef Specifies that the property is databound. It is used for setting links. layoutData Specifies the layout data for the container. setProperty Specifies the expression or value to compute the property. Example <propertySheetConfiguration> <pe:propertySheetTab name="General Tab" id="general_tab"> <pe:composite> <pe:layout> <pe:gridLayout columns="2"> 54 EMC Documentum xCelerated Composition Platform Version 2.1 Developer Guide
  54. 54. Markups </pe:gridLayout> </pe:layout> <pe:section title="Basics" collapsible="true"> <pe:layout> <pe:gridLayout columns="2"> </pe:gridLayout> </pe:layout> <pe:dataServiceInstancePropertyEditor property= "referenceToProperty" label="Data Services"/> </pe:section> </pe:composite> </pe:propertySheetTab> </propertySheetConfiguration> In the above example, a data service instance picker is created that lists all the data services added to the current page. <pe:dataTypePropertyEditor> Syntax <pe:dataTypePropertyEditor .id="unique ID" property="Reference to string property info" 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 parent container’s layout calculation </pe:layoutData> End Sequence <pe:setProperty name="Enable | Visible | Clear"> specifies the expression or value to compute the property </pe:setProperty> <pe:dataRef> pe:data-ref-bean </pe:dataRef> </pe:dataTypePropertyEditor> Description Represents a drop-down editor that is pre-populated with different data types. EMC Documentum xCelerated Composition Platform Version 2.1 Developer Guide 55
  55. 55. Markups Attribute Attribute Required /Optional Description Type id Optional A unique identifier for the editor. ID property Required Specifies reference to property info. String reCreateWidget OnChange Optional Determines whether the widget is rendered again after a value change. Possible values: True or False. Boolean label Optional A label for the editor. String name Optional Name for the editor . String isNumberInput Optional Determines whether if the input is a number. Possible values: True or False. Boolean Element Element Description dataRef Specifies that the property is databound. It is used for setting links. layoutData Specifies the layout data for the container. setProperty Specifies the expression or value to compute the property. Example <propertySheetConfiguration> <pe:propertySheetTab name="General Tab" id="general_tab"> <pe:composite> <pe:layout> <pe:gridLayout columns="2"/> </pe:layout> <pe:dataTypePropertyEditor property="fooDataType" label="Select a data type" 56 EMC Documentum xCelerated Composition Platform Version 2.1 Developer Guide
  56. 56. Markups reCreateWidgetOnChange="true" id="fooDataTypeId"> </pe:dataTypePropertyEditor> </pe:composite> </pe:propertySheetTab> </propertySheetConfiguration> <pe:setProperty> Syntax <pe:setProperty id="unique ID" name="propertyName"> <pe:expression language="JavaScript" > Java script expression which gets evaluated and sets the property mentioned in the name. </pe:expression> <pe:value> value </pe:value> </pe:setProperty> Description setproperty is used to set the properties of the UI elements dynamically through expression. It supports various properties, for example, enablement, visibility , value, and clearing the value of the UI element. Attribute Attribute Required /Optional Description Type id Optional A unique identifier for the editor. String name Required propertyName is a simple enumeration of values for setting editor properties. Enable | Visible | Value | Clear EMC Documentum xCelerated Composition Platform Version 2.1 Developer Guide 57
  57. 57. Markups Element Element Description expression Specifies JavaScript expression which gets evaluated and sets the property mentioned in the name. value Specifies the value depending on the set property type. Example: Enabling Using setProperty <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> </pe:propertySheetTab> </propertySheetConfiguration> In the above example, the enablement of the text field is controlled by the expression specified in the setProperty. Enablement requires the expression to evaluate to Boolean. Similarly, properties like visibility, value, clear the persisted data can also be controlled. Example: Setting Value Using setPropety <propertySheetConfiguration> <pe:propertySheetTab name="General Tab" id="general_tab"> <pe:composite> <pe:textField property="p1" label="Text Field 1"/> <pe:textField property="p2" label="Text Field 2"> <pe:setProperty name="Value"> <pe:expression language="JavaScript" > <![CDATA[ "Prefix: " + #p1 ]]> 58 EMC Documentum xCelerated Composition Platform Version 2.1 Developer Guide
  58. 58. Markups </pe:expression> </pe:setProperty> </pe:textField> </pe:composite> </pe:propertySheetTab> </propertySheetConfiguration> In the above example, change in the label updates the value of Text field 1, Text field 2 with a new value along with the prefix. <pe:expression> Syntax <pe:expression language="JavaScript" > <![CDATA[ Java script expression which gets evaluated ]]> </pe:expression> Description Expression allows to express the dynamic behaviors using JavaScript expression. Any JavaScript constructs can be used in the expression. Expression gets evaluated when there is a change in any of the UI element or any of the property mentioned in the expression. Expression should be wrapped with CDATA in construct. $ reference: To access other UI elements, prefix its ID with $. For example, $ checkbxId. # property: To access the property values of the properties defined in the propertyInfo configuration file, prefix the property name with ‘#’. Attribute Attribute Required /Optional Description Type language Optional Specifies the language to be used for expression. Supported language is JavaScript. expressionLanguage Example <propertySheetConfiguration> <pe:propertySheetTab name="General Tab" id="general_tab"> EMC Documentum xCelerated Composition Platform Version 2.1 Developer Guide 59
  59. 59. 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"> <pe:expression language="JavaScript" > <![CDATA[ "Prefix: " + #p1 + $textField2.getValue() ]]> </pe:expression> </pe:setProperty> </pe:textField> </pe:composite> </pe:propertySheetTab> </propertySheetConfiguration> In the above example, textfield 3 value is set using the property which is associated with p1 and by calling exposed methods in textfield2. <pe:layoutData> Syntax <pe:layoutData <pe:gridData> pe:grid-layout-data-bean </pe:gridData> <pe:rowData> pe:row-layout-data-bean </pe:rowData> </pe:layoutData> Description Specifies the layout data of the container. Element Element Description gridData Specifies the value for grid layout. rowData Specifies the value for row layout. 60 EMC Documentum xCelerated Composition Platform Version 2.1 Developer Guide
  60. 60. Markups <pe:gridData> Syntax <pe:gridData> grabExcessHorizontalSpace="width of the cell should change depending on the size of the parent composite that takes true | false" grabExcessVerticalSpace="height of the cell changes depending on the size of the parent composite that takes true | false" horizontalSpan="number of column cells that the control can take up" verticalSpan="number of row cells that the control can take up"> <pe:horizontalAlignment> BEGINNING| CENTER| END| FILL </pe:horizontalAlignment> <pe:verticalAlignment> BEGINNING| CENTER| END| FILL </pe:verticalAlignment> </pe:gridData> Description Specifies the gridData editor. Attribute Attribute Required /Optional Description Type grabExcess HorizontalSpace Optional Specifies whether the width of the cell changes depending on the size of the parent composite. Boolean grabExcess VerticalSpace Optional Specifies whether the height of the cell changes depending on the size of the parent composite. Boolean EMC Documentum xCelerated Composition Platform Version 2.1 Developer Guide 61
  61. 61. Markups horizontal Span Optional Specifies the number of column cells that the control can take up. Integer vertical Span Optional Specifies the number of row cells that the control can take up. Integer Element Element Description horizontal Alignment Specifies the horizontal position of controls within a cell. vertical Alignment Specifies the vertical position of controls within a cell. <pe:gridLayout> Syntax <pe:gridLayout columns="number of columns" makeColumnsEqualWidth="tue | false" </pe:gridLayout> Description Specifies the value for grid layout. Attribute Attribute Required /Optional Description Type columns Required Specifies number of columns. Integer makeColumnsE- qualWidth Optional Specifies if all the columns should be of equal width. It takes true or false as a value. Boolean 62 EMC Documentum xCelerated Composition Platform Version 2.1 Developer Guide
  62. 62. Markups <pe:rowData> Syntax <pe:rowData id="unique ID" </pe:rowData> Description Specifies the value for row layout. Attribute Attribute Required /Optional Description Type height Required Specifies the height of the row. Integer width Required Specifies the width of the row. Integer <pe:rowLayout> Syntax <pe:rowLayout type="type of the layout that takes Horizontal | VERTICAL"> Start Sequence <pe:layoutData> pe:layout-data </pe:layoutData> End Sequence </pe:rowLayout> Description Specifies the row layout of the container. EMC Documentum xCelerated Composition Platform Version 2.1 Developer Guide 63
  63. 63. Markups Attribute Attribute Required /Optional Description Type type Optional Specifies the type. It takes horizontal or vertical. "HORIZONTAL" | "VERTICAL" <pe:fillLayout> Syntax <pe:fillLayout type="type of the layout that takes HORIZONTAL | VERTICAL"> Start Sequence <pe:layoutData> pe:layout-data </pe:layoutData> End Sequence </pe:fillLayout> Description Specifies the value for fillLayout editor. Attribute Attribute Required /Optional Description Type type Optional Specifies the type. It takes horizontal or vertical. "HORIZONTAL" | "VERTICAL" <pe:horizontalAlignment> Syntax <pe:horizontalAlignment> </pe:horizontalAlignment> Description Specifies the horizontal position of controls within a cell. 64 EMC Documentum xCelerated Composition Platform Version 2.1 Developer Guide
  64. 64. Markups <pe:propertyStore> Syntax <pe:propertyStore id="id of the property store" property="reference to the property"> <pe:setProperty></pe:setProperty> </pe:propertyStore> Description Stores property values into the widget which are not directly associated with an editor element. It is used to update multiple properties based on its value. Attribute Attribute Required /Optional Description Type id Optional A unique identifier for the editor. ID property Required Specifies reference to property info. String Element Element Description setProperty Specifies the expression or value to compute the property. Example <propertySheetConfiguration> <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 ""; ]]> EMC Documentum xCelerated Composition Platform Version 2.1 Developer Guide 65
  65. 65. Markups </pe:expression> </pe:setProperty> </pe:propertyStore> </pe:section> </pe:composite> </pe:propertySheetTab> </propertySheetConfiguration> In the above example, the store property (in the property info) of the widget is updated based on the expression evaluation. Property holds the $dsiDD dropdown’s selected object’s name. Exposed Editor Methods String getValue(); returns the store value for the corresponding property <pe:propertySheetTab> Syntax <pe:propertySheetTab> id="unique ID" </pe:propertySheetTab> Description Specifies the propertySheetTab editor. Attribute Attribute Required /Optional Description Type id Required A unique identifier for the editor. ID name Required Name for the editor. String 66 EMC Documentum xCelerated Composition Platform Version 2.1 Developer Guide
  66. 66. Markups Element Element Description composite Specifies the composite editor. section Specifies the section editor. <pe:dataRef> Syntax <pe:dataRef selectionName="Data model name for the data reference" selectionLabel="Data model label for the data reference"> <pe:expression> [expression that returns true/false] </pe:expression> <pe:value> true | false </pe:value> </pe:dataRef> Description Specifies that the property is databound. It is used for setting links. This does not have any visual representation, but it is a logical entity. Attribute Attribute Required /Optional Description Type selection Name Optional Specifies data model name for the data reference. String selection Label Required Specifies data model label for the data reference. String EMC Documentum xCelerated Composition Platform Version 2.1 Developer Guide 67
  67. 67. Markups Element Element Description expression Specifies an expression similar to JavaScript that works on the editor elements. value Specifies the value depending on the type of set property. Example <pe:artifactSelector property="xcp_nav_url" type="PAGES" label="" id="pageArtifactSelector"> <pe:dataRef selectionName="dataModelName" selectionLabel="Data Model Label"> <pe:value>true</pe:value> </pe:dataRef> </pe:artifactSelector> Usecase The following example illustrates the use case of seat selection form. There are three controls in this scenario: • Seat type drop down list • Serve pop-corn checkbox • Popcorn type Example of UI Element Definition and Wiring using Markup 68 EMC Documentum xCelerated Composition Platform Version 2.1 Developer Guide

×