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:
- 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:
- 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.
- 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’)
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:
- 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.
- X1CaseCreate_en_US.properties and X1CaseCreate_en.properties
resource bundle files that stores all your localized strings.
- 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”?>
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
- An empty expression (empty expression always defaults to true).
- A target phisical target file name “com.nextgen.crm.isupport.kcase.X1CaseCreate”
- Version description
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).
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:
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. )