Moving a user interface element between dialogs or editor pages

The contents of dialogs and editor pages can be customized extensively, including moving controls or groups of controls around the interface.

About this task

To move user interface elements around the interface:

Procedure

Create a new plug-in to contain your customizations. For our examples in the following steps, we will assume a plug-in named "extensions".
Determine the ID of the user interface elements you want to move.

If you are moving a control:

Use the system configurator extension point to create a system property where the name of the property is the fully-qualified ID of the control you are removing, and the value of the property is null. All instances of the control that are used in the Sales Center user interface will be removed. For example: com.ibm.commerce.telesales.ui.impl.customerUserNameRow=null removes the Logon ID row of a grid composite from its current location in the Customer name section of the customer editor.

Define a new composite with the control you are moving. For example, to define a new Web access composite with the editable Logon Id field, you need to declare the following composite definition. Note the use of referenceId (an attribute of the row element in the compositeDefinitions extension point) to reuse the rows from the original composite definitions. Also note that com.ibm.commerce.telesales.ui.impl.customerWebUserNameRow is being replaced with com.ibm.commerce.telesales.ui.impl.customerUserNameRow.


   <extension
point="com.ibm.commerce.telesales.widgets.compositeDefinitions">
      <gridCompositeDefinition
         id="customerWebRegistrationCompositeDefinition"
        
layoutId="com.ibm.commerce.telesales.ui.impl.standardGridLayout">
         <row
referenceId="com.ibm.commerce.telesales.ui.impl.customerWebRegistrationGroupLabelRow"/>
         <row
referenceId="com.ibm.commerce.telesales.ui.impl.customerUserNameRow"/>
         <row
referenceId="com.ibm.commerce.telesales.ui.impl.customerChallengeQuestionRow"/>
         <row
referenceId="com.ibm.commerce.telesales.ui.impl.customerChallengeAnswerRow"/>
      </gridCompositeDefinition>
   </extension>

For reference, here is the original composite definition that we are overriding and reusing controls from:


   <extension
point="com.ibm.commerce.telesales.widgets.compositeDefinitions">
      <gridCompositeDefinition
id="customerWebRegistrationCompositeDefinition"
layoutId="standardGridLayout">
         <row id="customerWebRegistrationGroupLabelRow">
            <control
controlId="customerWebRegistrationGroupLabel"
dataId="headerLabelGridData"/>
         </row>
         <row id="customerWebUserNameRow">
            <control controlId="customerWebUserNameLabel"
dataId="requiredLabelGridData"/>
            <control controlId="customerWebUserNameField"
dataId="requiredFieldGridData"/>
         </row>
         <row id="customerChallengeQuestionRow">
            <control controlId="customerChallengeQuestionLabel"
dataId="requiredLabelGridData"/>
            <control controlId="customerChallengeQuestionField"
dataId="requiredFieldGridData"/>
         </row>
         <row id="customerChallengeAnswerRow">
            <control controlId="customerChallengeAnswerLabel"
dataId="requiredLabelGridData"/>
            <control controlId="customerChallengeAnswerField"
dataId="requiredFieldGridData"/>
         </row>
      </gridCompositeDefinition>
   </extension>

Override the existing composite definition using the system configurator. For example:


com.ibm.commerce.telesales.ui.impl.customerWebRegistrationCompositeDefinition=extensions.customerWebRegistrationCompositeDefinition

If you are moving a composite:

Redeclare the original definition. You cannot use the system configurator to remove the original composite because you will reuse it on the page you are moving it to. The form composite definition has relativeControlId references which will be not valid if the control is removed. As an example, to remove the Web Access composite from the Details page, redeclare the composite as follows:


   <extension
point="com.ibm.commerce.telesales.widgets.compositeDefinitions">
     
      <formCompositeDefinition
         id="customerDetailsCompositeDefinition"
         layoutId="standardFormLayout">
         <control
controlId="com.ibm.commerce.telesales.ui.impl.customerPreferencesComposite">
            <leftAttachment
               offset="0"
               numerator="0"/>
            <rightAttachment
               offset="-15"
               numerator="50"/>
         </control>
         <control
controlId="com.ibm.commerce.telesales.ui.impl.customerContactComposite">
            <topAttachment
               offset="15"
              
relativeControlId="com.ibm.commerce.telesales.ui.impl.customerPreferencesComposite"/>
            <leftAttachment
               numerator="0"
               offset="0"/>
            <rightAttachment
               numerator="50"
               offset="-15"/>
         </control>
         <control
controlId="com.ibm.commerce.telesales.ui.impl.customerDemographicsComposite">
            <leftAttachment
               offset="15"
              
relativeControlId="com.ibm.commerce.telesales.ui.impl.customerPreferencesComposite"/>
            <rightAttachment
               numerator="100"
               offset="-15"/>
         </control>
         <control
controlId="com.ibm.commerce.telesales.ui.impl.customerEmploymentComposite">
            <topAttachment
               offset="15"
              
relativeControlId="com.ibm.commerce.telesales.ui.impl.customerDemographicsComposite"/>
            <leftAttachment
              
relativeControlId="com.ibm.commerce.telesales.ui.impl.customerPreferencesComposite"
               offset="15"/>
            <rightAttachment
               offset="-15"
               numerator="100"/>
         </control>
      </formCompositeDefinition>
   </extension>

To ensure your new declaration of the composite will be used, override the existing composite definition using the system configurator. For example:
```
com.ibm.commerce.telesales.ui.impl.customerDetailsCompositeDefinition=extensions.customerDetailsCompositeDefinition
```

To add composite that you are moving to the new page, redeclare the destination composite to include the composite you are moving. Continuing our example, to move the Web Access composite to the identity page, you need redeclare the customer identity page composite to include the web registration composite (using the referenceId to reuse the old definition):


   <extension
point="com.ibm.commerce.telesales.widgets.compositeDefinitions">
      <formCompositeDefinition
         id="customerIdentityCompositeDefinition.default"
        
referenceId="com.ibm.commerce.telesales.ui.impl.customerIdentityCompositeDefinition.default">
         <control
controlId="com.ibm.commerce.telesales.ui.impl.customerWebRegistrationComposite">
            <topAttachment
               offset="15"
              
relativeControlId="com.ibm.commerce.telesales.ui.impl.customerPrimaryContactComposite"/>
            <leftAttachment
               offset="0"
               numerator="0"/>
            <rightAttachment
               offset="-15"
               numerator="50"/>
         </control>
      </formCompositeDefinition>

      <formCompositeDefinition
         id="customerIdentityCompositeDefinition.B2B"
        
referenceId="com.ibm.commerce.telesales.ui.impl.customerIdentityCompositeDefinition.B2B">
         <control
controlId="com.ibm.commerce.telesales.ui.impl.customerWebRegistrationComposite">
            <topAttachment
               offset="15"
              
relativeControlId="com.ibm.commerce.telesales.ui.impl.customerPrimaryContactComposite"/>
            <leftAttachment
               offset="0"
               numerator="0"/>
            <rightAttachment
               offset="-15"
               numerator="50"/>
         </control>
      </formCompositeDefinition>
   </extension>

Note:In this example, there are two definitions because there is a default and a B2B definition.

To ensure your new declaration of the composite will be used, override the existing composite definition using the system configurator. For example:


com.ibm.commerce.telesales.ui.impl.customerIdentityCompositeDefinition.default=extensions.customerIdentityCompositeDefinition.default
com.ibm.commerce.telesales.ui.impl.customerIdentityCompositeDefinition.B2B=extensions.customerIdentityCompositeDefinition.B2B


   <extension
point="com.ibm.commerce.telesales.widgets.compositeDefinitions">
     
      <formCompositeDefinition
         id="customerDetailsCompositeDefinition"
         layoutId="standardFormLayout">
         <control
controlId="com.ibm.commerce.telesales.ui.impl.customerPreferencesComposite">
            <leftAttachment
               offset="0"
               numerator="0"/>
            <rightAttachment
               offset="-15"
               numerator="50"/>
         </control>
         <control
controlId="com.ibm.commerce.telesales.ui.impl.customerContactComposite">
            <topAttachment
               offset="15"
              
relativeControlId="com.ibm.commerce.telesales.ui.impl.customerPreferencesComposite"/>
            <leftAttachment
               numerator="0"
               offset="0"/>
            <rightAttachment
               numerator="50"
               offset="-15"/>
         </control>
         <control
controlId="com.ibm.commerce.telesales.ui.impl.customerDemographicsComposite">
            <leftAttachment
               offset="15"
              
relativeControlId="com.ibm.commerce.telesales.ui.impl.customerPreferencesComposite"/>
            <rightAttachment
               numerator="100"
               offset="-15"/>
         </control>
         <control
controlId="com.ibm.commerce.telesales.ui.impl.customerEmploymentComposite">
            <topAttachment
               offset="15"
              
relativeControlId="com.ibm.commerce.telesales.ui.impl.customerDemographicsComposite"/>
            <leftAttachment
              
relativeControlId="com.ibm.commerce.telesales.ui.impl.customerPreferencesComposite"
               offset="15"/>
            <rightAttachment
               offset="-15"
               numerator="100"/>
         </control>
      </formCompositeDefinition>
   </extension>

To ensure your new declaration of the composite will be used, override the existing composite definition using the system configurator. For example:
```
com.ibm.commerce.telesales.ui.impl.customerDetailsCompositeDefinition=extensions.customerDetailsCompositeDefinition
```


   <extension
point="com.ibm.commerce.telesales.widgets.compositeDefinitions">
      <formCompositeDefinition
         id="customerIdentityCompositeDefinition.default"
        
referenceId="com.ibm.commerce.telesales.ui.impl.customerIdentityCompositeDefinition.default">
         <control
controlId="com.ibm.commerce.telesales.ui.impl.customerWebRegistrationComposite">
            <topAttachment
               offset="15"
              
relativeControlId="com.ibm.commerce.telesales.ui.impl.customerPrimaryContactComposite"/>
            <leftAttachment
               offset="0"
               numerator="0"/>
            <rightAttachment
               offset="-15"
               numerator="50"/>
         </control>
      </formCompositeDefinition>

      <formCompositeDefinition
         id="customerIdentityCompositeDefinition.B2B"
        
referenceId="com.ibm.commerce.telesales.ui.impl.customerIdentityCompositeDefinition.B2B">
         <control
controlId="com.ibm.commerce.telesales.ui.impl.customerWebRegistrationComposite">
            <topAttachment
               offset="15"
              
relativeControlId="com.ibm.commerce.telesales.ui.impl.customerPrimaryContactComposite"/>
            <leftAttachment
               offset="0"
               numerator="0"/>
            <rightAttachment
               offset="-15"
               numerator="50"/>
         </control>
      </formCompositeDefinition>
   </extension>

Note:In this example, there are two definitions because there is a default and a B2B definition.

To ensure your new declaration of the composite will be used, override the existing composite definition using the system configurator. For example:


com.ibm.commerce.telesales.ui.impl.customerIdentityCompositeDefinition.default=extensions.customerIdentityCompositeDefinition.default
com.ibm.commerce.telesales.ui.impl.customerIdentityCompositeDefinition.B2B=extensions.customerIdentityCompositeDefinition.B2B