Sales Center: Moving a user interface element between dialogs or editor pages

Develop > Presentation layer > Customize IBM Sales Center > Controls

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

To move user interface elements around the interface:

Procedure
Create a new plug-in to contain the customizations. For our examples in the following steps, we will assume a plug-in named "extensions".

Determine the ID of the user interface elements 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, 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 we 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 the 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>
In this example, there are two definitions because there is a default and a B2B definition.
To ensure the 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
Redeclare the original definition. You cannot use the system configurator to remove the original composite because we 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 the 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>
In this example, there are two definitions because there is a default and a B2B definition.
To ensure the 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
Related concepts

Controls
Dialogs
Editors
System configurator
Managed composites and widget managers
Overview of customizing IBM Sales Center

Related tasks

Modify a dialog
Modify a page in an editor
Declare a control
Declare a composite definition
Declare a managed composite
Declare a table definition
Determine the ID of a user interface element in an editor page or dialog
Remove a control

Related reference

controls
managedComposites

+
Search Tips | Advanced Search