Adding Management Center support for a Commerce Composer widget

• target_folder\LOBTools\WebContent\WEB-INF\src\xml\vendor\pagelayout\widgetDefinitions\UIObjectName\WidgetObjectDefinition.xml
• target_folder\LOBTools\WebContent\WEB-INF\src\xml\vendor\pagelayout\widgetDefinitions\UIObjectName\WidgetPropertiesView.xml
• target_folder\LOBTools\WebContent\WEB-INF\src\xml\vendor\pagelayout\widgetDefinitions\WidgetGroupIdentifier\WidgetGroup.xml
• target_folder\LOBTools\src\com\vendor\commerce\pagelayout\client\lobtools\properties\PageLayoutLOB_en_US.properties
• target_folder\LOBTools\src\com\vendor\commerce\pagelayout\client\lobtools\properties\PageLayoutLOB.properties

vendor

The value for the vendor parameter within the pattern input XML file.

UIObjectName

The value for the UIObjectName parameter within the pattern input XML file.

target_folder

The folder or project that you specified as the value for the targetFolder parameter in the pattern input XML file. If you did not specify a value for the targetFolder parameter, the target_folder is the folder or project where the pattern input XML file is located.

WidgetGroupIdentifier

The value for the identifier element within the widgetGroup element within the pattern input XML file.

<?xml version="1.0" encoding="UTF-8"?>

<!-- The following code is created as example. Modify the generated code and add any additional required code.  -->

<Definitions>
  <WidgetObjectDefinition package="plm"
1  
  definitionName="plmLayoutWidget_UIObjectName" 
2
  parentDefinitionName="plmBasePageLayoutPrimaryObjectDefinition"
  baseDefinitionName="plmBaseLayoutWidget"
3
  objectType="UIObjectName"
  gridPropertiesDefinitionName="plmWidgetProperties_UIObjectName"
4
    widgetDisplayGroups="Search"
5
  iconPath="/images/pagelayouts/widgetIcons/identifier.png"
6
    <CreateService baseDefinitionName="plmBaseCreateLayoutWidget" />
    <UpdateService baseDefinitionName="plmBaseUpdateLayoutWidget" />
    <Xml name="template">
      <sequence>0</sequence>
    </Xml>		
  </WidgetObjectDefinition>
</Definitions>

UIObjectName

The value for the UIObjectName parameter within the pattern input XML file.

identifier

The value for the identifier parameter within the pattern input XML file.

• 1 The name of the definition for your custom widget object definition. By default the name is plmLayoutWidget_UIObjectName.
• 2 The names for the parent and base object definitions. The definition names must be included for Management Center to be able to retrieve the object definition for your custom widget. The JET Transformation includes the default plmBasePageLayoutPrimaryObjectDefinition definition as the value for the parentDefinitionName field and includes the plmBaseLayoutWidget definition name as the default value for the baseDefinitionName field.
• 3 The widget object type and name of the properties definition for your custom widget. By default the widget object type is the value that you set for the UIObjectName parameter in the pattern input XML file. By default, the gridPropertiesDefinitionName is plmLayoutWidget_UIObjectName.
• 4 The widget display group or groups that the widget is included within.
• 5 The filepath to the icon that is to display for your custom widget within the Add Widgets to Slots window. By default, the JET Transformation defines the icon for the widget to be /images/pagelayouts/widgetIcons/identifier.png. No actual image file is created. You must change the value for the iconPath to point to an actual image file or rename an image file to be identifier.png.
• 6 The create and update services that are needed for Management Center users to use your widget in the Commerce Composer tool.

<?xml version="1.0" encoding="UTF-8"?>

<Definitions>
1
  <GridObjectProperties definitionName="plmWidgetProperties_UIObjectName">
    <PropertyPane>
2
      <PropertyGroup name="widgetProperties" collapsable="false" 
             groupTitle="${plmPageLayoutResources.widgetPropertiesPrompt}">
        <PropertyInputText name="${plmPageLayoutResources.widgetNamePrompt}" propertyName="widgetName"
        promptText="${plmPageLayoutResources.widgetNamePrompt}" />
        <PropertyInputText propertyName="xWidgetProp_widgetOrientation" 
          promptText="${mycompanyPageLayoutResources.widgetOrientationPrompt}" />
        <PropertyInputText propertyName="xWidgetProp_numberOfContentToDisplay" 
          promptText="${mycompanyPageLayoutResources.numberOfContentToDisplayPrompt}" />
      </PropertyGroup>
3
      <PropertyGroup name="contentProperties" collapsable="false" 
            groupTitle="${plmPageLayoutResources.widgetContentPrompt}">
        <PropertyStaticText text="${mycompanyPageLayoutResources.UIObjectNameContent}" />
      </PropertyGroup>
    </PropertyPane>
  </GridObjectProperties>
</Definitions>

• 1 The GridObjectProperties element defines the properties view for including your widget within the Layout slots and widgets table in the Design Layout tab within Management Center. This properties view is defined to be a collapsible view within the table. The view can be opened and closed by clicking the triangle icon on each row of the table.
• 2 The widgetPropeties PropertyGroup defines the Widget Properties section within the properties view that is defined by the GridObjectProperties element. The properties in this section are used to determine how the widget displays in the store. Management Center users use these properties to determine the UI provider for the widget when users can determine the rendering style.

  For examples of configurable properties that you can set for your widget, review the configurable properties for the widgets that are provided by default with WebSphere Commerce. For more information, see Commerce Composer widget properties

  You can define these properties to display to users in Management Center in different ways. For instance, you can use radio buttons, check boxes, combination boxes, and more.

• 3 contentProperties PropertyGroup defines Widget Content section in the GridObjectProperties view. Management Center users use these properties to determine the actual content of the widget to be displayed in the store page.

<?xml version="1.0" encoding="UTF-8"?>
<Definitions>
  <LayoutWidgetGroup package="plm"
    definitionName="WidgetGroupIdentifierWidgetGroup"
    parentDefinitionName="plmNewPageLayoutWidgetDialog"
    identfider="WidgetGroupIdentifier" 
    displayName="${vendorPageLayoutResources.widgetGroupDisplayName_WidgetGroupIdentifier}">
  </LayoutWidgetGroup>
</Definitions>

If you did not specify the widgetGroup element within the pattern input XML file, you must create this file.

widgetGroupDisplayName_identifier=displayName

If you included the widget within widget display groups, ensure that your widget displays in the list of widgets for the appropriate display groups.

If you included the widget within widget restriction groups, ensure that the widget can be included in a layout template that is restricted to use only widgets within that widget restriction group. For more information about making a layout template that is restricted to a widget restriction group, see Creating Commerce Composer layout templates.