Sales Center: Modifying the user interface of an editor

Samples > IBM Sales Center samples: Actions, dialogs, editors and requests

Modify the user interface of an editor

Hide user interface objects

On the Identity page, the Publish check box, Device Type list and the Address line 3 field will be hidden.

Change the text on a label

On the Identity page, the text Telephone number 1 will be replaced with Day Telephone.

Move widgets between pages in an editor

The Web Access section will be moved from the Details page to the Identity page.

The Logon ID field will be moved into the newly placed Web Access section.

This page describes how to import the sample and describes how each of the modifications listed above are implemented.
A screen capture of the default Identity page follows:

A screen capture of the modified Identity page follows:

A screen capture of the default Details page follows:

A screen capture of the modified Details page follows:

Import the sample

Import the sample modifyui plug-in from the following ZIP file. The resulting directory structure should look like the following screen capture:

Hide user interface objects

There are two approaches to hiding a user interface object:

Approach 1: Set the object's value to null in the system configurator file.

This approach involves less code, but is not applicable to all situations.

This approach is not applicable when the id for the composite definition to which the object belongs is dynamically resolved. Since the id is not known at coding time, you cannot set its value to null.

In the following example, this approach is used to hide the Device Type and Publish rows on the Identity page.

Approach 2: Create a new definition for the user interface without the object to hide.

This approach involves more code, but applies in all situations.

In the following example, this approach is used to hide the Address line 3 row on the Identity page because the row belongs to a composite definition that has a dynamically resolved id.

You can determine that the composite definition has a dynamically resolved id by doing the following:

Find the ID of the object to hide.

In this sample, the ID of the Address line 3 row is customerAddressLine3Row in the com.ibm.commerce.telesales.ui.impl.customer plug-in.

Find the ID of composite definition to which that object belongs.

In this sample, the customerAddressLine3Row object belongs to the customerPrimaryAddressCompositeDefinition.default composite definition. In the com.ibm.commerce.telesales.ui.impl.customer plug-in you can see that the customerAddressLine3Row object actually belongs to a few instances of customerPrimaryAddressCompositeDefinition, that differ based on locale. In this sample only the default definition is changed for simplicity. Support for these different locales is the reason that dynamic ID binding is required; until run time, the IBM Sales Center does not know which locale is being used and therefore which composite definition to display.

Search within the plug-in for that ID, looking for a dynamicIdBinding tag. The existence of this tag means that the ID for the composite definition is dynamically resolved, so you cannot just set the ID to null to hide the user interface objects inside the composite definition.

In this sample, you can find the following dynamic ID binding: <dynamicIdBinding dynamicId="com.ibm.commerce.telesales.ui.impl.customerAddressCompositeDefinition" concreteId="com.ibm.commerce.telesales.ui.impl.customerPrimaryAddressCompositeDefinition"/>

Approach 1: Set the object's value to null in the system configurator file.
In this approach, to prevent an object from displaying in the user interface, its value is set to null in the system configurator. In this sample, the following two lines can be found in the system configurator file, located in the config/config.ini file of the plug-in:
com.ibm.commerce.telesales.ui.impl.customerTelephoneType1Row=null
com.ibm.commerce.telesales.ui.impl.customerPublishTelephone1Row=null
To find the identifiers of each row, for example, com.ibm.commerce.telesales.ui.impl.customerTelephoneType1Row, use widget hover logging. Widget hover logging will help you find the identifiers of the label and field in the row, for example customerTelephoneType1Label and customerTelephoneType1Field. You will also find that the label and field are defined in the fragment.xml file of the com.ibm.commerce.telesales.ui.impl.customer plug-in. In that fragment.xml file, you can see that the label and field are grouped together into one row:
<row id="customerPublishTelephone1Row">
<control controlId="customerPublishTelephone1Label"
dataId="indentedRequiredLabelGridData"/>
<control controlId="customerPublishTelephone1Field"
dataId="requiredFieldGridData"/>
</row>
In the example above, to hide the label and field, you could set both the customerTelephoneType1Label
and customerTelephoneType1Field
to null, or as described above, set the entire row to null.
Approach 2: Create a new definition for the user interface without the object to hide.
In this approach, to prevent an object from displaying in the user interface, you redefine the user interface.
In this sample, the following text in plug-in.xml is the new definition for the customerPrimaryAddressCompositeDefinition.default user interface composite definition:
<extension
point="com.ibm.commerce.telesales.widgets.compositeDefinitions">
<gridCompositeDefinition
id="customerPrimaryAddressCompositeDefinition.default"
layoutId="com.ibm.commerce.telesales.ui.impl.standardGridLayout">        
<row
id="com.ibm.commerce.telesales.ui.impl.customerPrimaryAddressGroupLabelRow">                
<control
controlId="com.ibm.commerce.telesales.ui.impl.customerPrimaryAddressGroupLabel"

               
dataId="com.ibm.commerce.telesales.ui.impl.headerLabelGridData"/>        
</row>        
<row
referenceId="com.ibm.commerce.telesales.ui.impl.customerNicknameRow"/>     
       
<row
referenceId="com.ibm.commerce.telesales.ui.impl.customerAddressLine1Row"/>        
<row
referenceId="com.ibm.commerce.telesales.ui.impl.customerAddressLine2Row"/>        
<row
referenceId="com.ibm.commerce.telesales.ui.impl.customerCityRow"/>        
<row
referenceId="com.ibm.commerce.telesales.ui.impl.customerProvinceRow"/>        
<row
referenceId="com.ibm.commerce.telesales.ui.impl.customerCountryRow"/>        
<row
referenceId="com.ibm.commerce.telesales.ui.impl.customerPostalCodeRow"/>
</gridCompositeDefinition>
</extension>
The preceding text is very similar to the definition in the com.ibm.commerce.telesales.ui.impl.customer plug-in, with two differences:

The customerAddressLine3Row has been removed

The string com.ibm.commerce.telesales.ui.impl. has been added to ids referenced outside of the modifyui plug-in. This text is required to fully qualify the ids since the modifyui plug-in is not in the same namespace as the com.ibm.commerce.telesales.ui.impl.customer plug-in. You can see the same text in the config.ini file for the same reason.

To notify the IBM Sales Center to use the customerPrimaryAddressCompositeDefinition.default definition from the modifyui plug-in instead of the default, the following text is required in config.ini:
com.ibm.commerce.telesales.ui.impl.customerPrimaryAddressCompositeDefinition.default=modifyui.customerPrimaryAddressCompositeDefinition.default

Change the text on a label

To change the text that displays on a label, create a new properties file that contains the text to display.
In this example, the file resources.properties contains the text CustomerContactPage.customerTelephoneNumber1 = Day Telephone.
In the plugin.xml file, the extension to the com.ibm.commerce.telesales.resources.resources plug-in specifies the name of the properties file, prefixed with the plug-in name:
<extension
point="com.ibm.commerce.telesales.resources.resources">    
<resourceBundle baseName="modifyui.resources">
</extension>
Move widgets between pages in an editor

This section demonstrates moving two user interfaces, the Web Access section and the Logon ID field and label between pages in an editor.
Move the Web Access section from the Details page to the Identity page
Create a new Identity page
To move the Web Access section to the Identity page, a new declaration of the Identity page is required. The code below demonstrates how to create a new declaration by use the existing declaration using referenceId values and adding an extra control. Since the control is already defined (customerWebRegistrationComposite), it does not have to be redefined in this plug-in. Its id value is used as the controlId. There are two different declarations because there are two different Identity pages, one for a B2B scenario, and one for everything else:
<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 the config.ini file, the following text specifies that this new declaration of the Identity page should be used instead of the default Identity page:
com.ibm.commerce.telesales.ui.impl.customerIdentityCompositeDefinition.default=modifyui.customerIdentityCompositeDefinition.default
com.ibm.commerce.telesales.ui.impl.customerIdentityCompositeDefinition.B2B=modifyui.customerIdentityCompositeDefinition.B2B
Modify the Details page
To remove the Web Access section from the Details page, the Details page is redefined. Unlike the Hide user interface objects section above, you cannot just set the Web Access section to null because the Web Access section displays on the Identity page, and some relativeControlId references to the Web Access section will not display properly if its id is set to null. The following text shows the declaration of the Details page without the Web Access section:
<extension
point="com.ibm.commerce.telesales.widgets.compositeDefinitions">
<formCompositeDefinition
id="customerDetailsCompositeDefinition" 
       
layoutId="com.ibm.commerce.telesales.ui.impl.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>
In the config.ini file, the following text specifies that this new declaration of the Details page should be used instead of the default Details page:
com.ibm.commerce.telesales.ui.impl.customerDetailsCompositeDefinition=modifyui.customerDetailsCompositeDefinition
Move the Logon ID field to the newly placed Web access section
After the Web access section moved to the Identity page, the Identity page displays two logon ID fields: a required input field in the Customer name section, and a non-editable field in the Web access section. In this part of the sample, the non-editable field is hidden and the required input field is moved into the Web access section.
This part requires two steps, hiding the required input Logon ID field and label and displaying it in another location.
The following line in the config.ini file hides the original Logon ID field and label: com.ibm.commerce.telesales.ui.impl.customerUserNameRow=null
The following text from the plugin.xml file shows a new composite definition for the Web access section including the Logon ID row, called 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>
The preceding text is very similar to the customerWebRegistrationCompositeDefinition grid composite definition in com.ibm.commerce.telesales.ui.impl.customer with the following exceptions:

The removal of the non-editable Logon ID field, which has the ID customerWebUserNameRow.

The addition of the required input Logon ID field, which has the ID customerUserNameRow originally in the Customer name section.

The addition of the text com.ibm.commerce.telesales.ui.impl. to fully qualify each ID referenced outside the modifyui plug-in.

In the config.ini file, the following text specifies that this new declaration of the Web Access section should be used instead of the default Web Access section:
com.ibm.commerce.telesales.ui.impl.customerWebRegistrationCompositeDefinition=modifyui.customerWebRegistrationCompositeDefinition

+
Search Tips | Advanced Search