NextGen Consulting

IT Consulting CRM BSS OSS

Upgrading AmdocsCRM Smart Client Form (Part One)

Upgrading AmdocsCRM Smart Client form (Part One)        

One of the common business requirement is to upgrade an out of the box form and either add more functionality or merely change its appearance to enhance the end user experience when interacting with this form.  In the following example I shall illustrate how easy it is to make such enhancement.    

I will show how a simple OOB (out of the box) form can be enhanced using form inheritance capability of the AmdocsCRM Smart Client.        

I shall also demonstrate how user experience can be greatly enhanced by combining several separated forms into a single form by exploiting Java SWING panel elements.        

Let’s look at an OOB Create Case form:    

          

The above form was re-designed to provide better UI usability:        

Re-designed Create Case:    

              

 Note that the entire UI arrangement was changed:      

  •  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  

     

         

 and define our new package:     

    

      

       

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;       

       

  We are left only with the default ‘root’ panel (all other panels were moved to unused controls);       

        

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

                  

  

About these ads

13/05/2010 - Posted by | Amdocs, CRM, CRM, Smart Client, Technology, Uncategorized

2 Comments »

  1. […] part one I have demonstrated the first steps in upgrading an original, out of the box, Smart Client create […]

    Pingback by Upgrading AmdocsCRM Smart Client form (Part Two) « NextGen Consulting | 01/06/2010 | Reply

  2. Hello from Vyatka River!!! Thank you for information! Itґs a good idea for next full revision…
    Write more!!! :)))

    Comment by Success | 08/06/2010 | Reply


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

Join 78 other followers

%d bloggers like this: