NextGen Consulting

•  Many unnecessary items were removed from initial screen (form) layout.
  The screen is less crowded, more logically arranged for easier readability
• Caller details were moved to the lower part of the form, since usually this information is automatically populated from the CIM (Customer Interaction Manager)
• Removed items remained accessible only when needed
• ‘Case type’, ‘Case Indicators’, ‘parent-child’ and ‘contract’  were re-arranged vertically for easier human eye capture.
• All buttons were moved to the lower part of the screen
• The lower part of the form is used in three different ways:

–     The default form (displayed above)
–     Clicking the +/- (shown in red circle) expands the notes field to capture the full lower part space:
           

  
–     Clicking the ‘Details’ link replaces completely the lower part of the screen to reveal other items which previously occupied expensive portions on the main form;
                 

–     Clicking the ‘Notes’ hyperlink takes the user back to display the ‘Notes’ again, either in their short or expanded form.        

Customizing a New Layout
The new layout was achieved without changing the original (out of the box) logic, but merely adding minimal code to support the enhanced appearance.         

The necessary steps to re-arrange an OOB form are:         

1. Create a new Smart Client project in your Eclipse Smart Client Designer IDE.
   Make sure to include AmdocsCRMSource.jar in the project’s class path.
2. Using the Eclipse package explorer, identify the original (out of the box) form’s package name (com.amdocs.crm.isupport.kcase) and full Logical Form Name (LFN) com.amdocs.crm.isupport.kcase.casecreate in the jar file AmdocsCRMSource.jar.

3.        Open the selected form’s layout (right click the OOB form’s name ‘CaseCreate.uiff’ and select ‘Open’)           

4.       Click the ‘Derive Form’ button
             
           to open the form inheritance dialog:        

Note that the base form full logical name (package + form name) is already
selected and can not be changed (marked in red ellipse): com.amdocs.crm.isupport.kcase.CaseCreate
        

5.       Fill the necessary parameters in the New Derived Form dialog:        

Source Folder:       Browse to the source folder in your project.          

Package:                    This should be your customized package name.
                                         It is a good convention to keep the original package name structure,
                                          however, replace the company name part with your company name.
                                         Thus, our package name will be com.nextgen.crm.isupport.kcase         

Form Name:           It is a good practice to use same name as the original, adding an ‘X1’
                                          prefix to emphasize the customization level: X1CaseCreate
                                           (next inheritance layer for this form will use X2CaseCreate etc).
Design Notes:       Add a short description for your customization.           

6.      Click ‘Finish’.          

7.      Look at your source folder in your project at the package explorer:          

8.    A new package was added, plus four files that represent your newly inherited form:       

1. X1CaseCreate.java – new java class file, which extends the original OOB form
    logic. You may leave this form as is (no additional code), override methods or members in the original class, or add your new logic here.
2. X1CaseCreate_en_US.properties and X1CaseCreate_en.properties
   resource bundle files that stores all your localized strings.
3. X1CaseCreate.uiff – an xml file that extends the original CaseCreate.uiff xml file.
   the .uiff is an XML file which defines the UI layout and form related dataset.

9.      In order to direct the application to use our inherited form at run-time, we need to define a version selector object.  A version selector is an xml file that must have similar Logical File Name (original package and form name) of the form we are about to override. The version selector file allow defining an expression that evaluates in memory application values at run time (usually they represent cached database field value i.e. login_name = ‘yuvalr’) and a target Logical File Name that represent the form to use if the expression evaluated to ‘true’.
A version selector may contain several entries of expressions – LFNs (they are evaluated until one evaluates to ‘true’.      

• We shall create a new package in our source folder. The new package name should be exactly as the original OOB form package: com.amdocs.crm.isupport.kcase  
  

Under our new package we define the following XML file: CaseCreate.uifvs          

<?xml version=”1.0″ encoding=”ASCII”?>
<VersionSelection designerVersion=”7.5″>   
  <Rows>  
    <Version
       exprDescription=”Default Version”
       expression=””
       physicalName=”com.nextgen.crm.isupport.kcase.X1CaseCreate”     
       type=”form”/>
  </Rows>
</VersionSelection>          

In the package Explorer it looks like this: 
         

Note the following;          

• The version selector file should be named exactly as the original inherited form name.

• The version selector file should be located at package which has exactly the same as the original (inherited) package name.
• The package should reside in our project source folder
• Our version selector file contains only a single ‘default’ row, which includes:
  • Version description
    exprDescription=”Default Version”
  • An empty expression (empty expression always defaults to true).
    expression=””
  • A target phisical target file name “com.nextgen.crm.isupport.kcase.X1CaseCreate”

At runtime, when the application looks for the original form, a version selector mapping class is evaluated (remember: the version selector has similar name and package as the original form).          

Since its default entry (row) is always evaluated to true, the application use our inherited physical target form (X1CaseCreate).          

• We still need to make sure that the application finds our version selector before it finds the original form, otherwise the original form will be used and the application will never be able to evaluate our version selector.

To make sure the version selector is used before the original form, we need to set the project’s class order in a way that it looks for our customizations (source folder) before the original oob class (located in AmdocsCRMSource.jar).          

• We open our project’s properties dialog and select the ‘Order and Export’ tab:
  

Note that the .uifgenjava folder contains the final source code. This ‘final’ source is automatically created by an application generator utility. It is then build, complied and run.          

10.      Now it is time to see if our inherited form indeed used by the application;
            we shall add a form event handler. We use the ‘form_load’ event handler and add our own code in its stub to print our inherited form name to the console.       

11.       Double click X1CaseCreate.uiff.
             The default view tab (designer) displays the inherited UI layout – it still looks like the original form:
                    

• On the ‘Controls’ UI layout pane, select the ‘Form’
• On the lower ‘Properties’ pane, select the ‘Events’ tab – it shows available form events. Select the selection icon in the ‘value’ column. The Application Code Editor is opened and displays the ‘form_load’ event handler stub that is automatically added to our inherited class.
• We add to the ‘form_load’ event handler the following line of code:
  System.out.println(“…  X1CaseCreate   …”);

12.       Let’s run the application and try to create a Case.       

If our form is used, the console should display the text
‘…  X1CaseCreate   …’          

Indeed – our inherited form is now invoked.          

13.     Now it is time to modify the layout.
           In the UI designer view, we first move all main panel components to the unused controls area;       

 If we run the application now and try to create a new Case, an empty form will be displayed.          

14.     Now it is time to modify the layout.
           First we change the root panel into two main sections:          

• Main form area
• Lower buttons area
  

We now add two card panels (crdMain and crdButtons) under root, one for each main area:         

Within each of the card panes we add a panel (pnlMain and pnlButtonsMain) 
A ‘Card Panel’ allows adding several panels underneath. Only one panel can be displayed under a Card panel at a time.
This capability will allow us in future to expand functionality at a will, by adding more panels and swap them as necessary. Currently we use only one default panel under each card.         

(To be continued. )