Modifying the Edit Address Dialog in the Infor CRM Web Client

In the Infor CRM web client, we have gotten asked how to modify the address dialog that comes up when you click the pencil icon on the address control, like on the Account details screen.

As usual things are a little more complicated than it seems. The Edit address screen is actually two different things based on where you are launching it from.

From the addresses tab on the account or contact screen you can edit an address listed in the grid.  From the grid, it launches a custom smart part under portal/support files/smartparts/address called AddEditAddress.

However, from the address control on the detail screen, the edit address screen is actually a client side dojo widget that is part of the minified core client side library.

In order to modify this dojo widget you can’t modify the core client side library. Instead you would have to inject code into the site that modifies the behavior of the core library.

Alternatively you could do things I have already blogged about here and here.

It is possible to modify the client side widget, and that is what we will focus on in this article. What I am going to discuss is the scenario where we want to change the County field to be a pick list instead of a text field.

 

Add custom javascript to extend the Address control

The first step is going to be to create out custom javascript that will modify the core libraries.  We need to create 2 files.  A main file to act as our launching point and then a separate file that actually contains the code that will modify the address widget.

  • Add a new folder under the supportfiles/jscript folder to hold your customizations. In my case I will call it “CFX”.
  • In this new folder add a new javascript file “main.js”
  • Modify the conent of this new main.js file as such (again using CFX as my customization name):
define([
    'CFX/CustomAddressModule'    
],
function (CustomAddressModule) {    
    var customAddressModule = new CustomAddressModule();        
    customAddressModule.initialize();            
});
  • In the new folder create another new javascript file called “CustomAddressModule.js”.
  • Modify the conent of this new CustomAddressModule.js file as such (again using CFX as my customization name):
/*globals Sage, dojo, dojox, dijit, Simplate, window, Sys, define */
define('CFX/CustomAddressModule', [
            'dojo/_base/declare',
            'dojo/ready',
            'dojo/aspect',
            'dojo/_base/lang',
            'Sage/UI/Controls/Address',
            'Sage/UI/Controls/DropDownSelectPickList'
],
function (declare,
            ready,
            aspect,
            lang
        ) {
    
    var customAddressModule = declare('CFX.CustomAddressModule', null, {
       initialize: function () {            
            lang.extend(Sage.UI.Controls.Address, {                
                postCreate: function () {
                    var control = this;                    
                    for (var i = 0; i < control.fields.length; i++) {
                        if (control.fields[i].name == 'county') {                            
                            control.fields[i].pickList = {
                                canEditText:'false',
                                itemMustExist:'false',
                                minChars:'0',
                                pickListName:'County',
                                required:'false',
                                sort:'true',
                                storageMode:'text'
                            };
                            control.fields[i].xtype = 'picklistcombo';                                                                         
                        }
                    }
                }
            });
        }        
    });
    return customAddressModule;

});

What this code does is extends the standard Sage.UI.Controls.Address widget using the dojo lang.extend library.
Using this we extend the postCreate event of the address widget.
Inside our extended method, we loop through the control variable’s field collection looking for the object with the name of ‘county’
When we find it we change the xtype from the standard ‘textfield’ to be a picklist by setting it to ‘picklistcombo’.
Finally we add a new object to the object’s pickList attribute. This attribute defines the picklist to be used along with the other attributes of that picklist.
In our example we are using a pick list called “County”.

Modify the master files
With our javascript files created we need to now wire them up within the client so that they actually get invoked. They way these customizations get wired up in the web site changes based on if you are running 8.2 or 8.3.

In a 8.2x Environment

  • Log into the Application Architect as admin
  • Open the project explorer Control+Alt+E
  • In the project explorer tree, expand out the VFS/Portal Manager/SlxClient/Support Files/Masters
  • Double click on the file base.master.
  • The file will open to the right (you will get an error about root level is invalid, just ignore and click OK.)
  • Do a search (control+F) and look for “var dojoConfig”
  • You will see code like:
        var dojoConfig = {
            parseOnLoad: true,
            async: true,
            isDebug: false,
            locale: '',
            paths: { 'Sage': '../../../jscript/Sage'},
            deferredOnError: function (e) {
                if (dojo.config.isDebug) {
                }
            }
  • Change the “paths:” line to be:
            paths: { 'Sage': '../../../jscript/Sage', 'CFX': '../../../jscript/CFX' },
  • Do a search for “Sage/UI/Alarms/JobNotificationButton”
  • Add a comma at the end of that line and then add a new line.
  • On that new line type “CFX/main” (with the quotes)
  • The finished code should look like:
            "Sage/TaskPane/ActivityTaskPaneActions",
            "Sage/UI/Alarms/JobNotificationButton",
            "CFX/main"
        ],
  • Save your changes to the base.master file.

In a 8.3x Environment

  • Log into the Application Architect as admin
  • Open the project explorer Control+Alt+E
  • In the project explorer tree, expand out the VFS/Portal Manager/SlxClient/Support Files/Masters
  • Double click on the file core.master.
  • The file will open to the right.
  • Do a search (control+F) and look for “var dojoConfig”
  • You will see code like:
        var dojoConfig = {
            parseOnLoad: true,
            async: true,
            isDebug: false,
            locale: '<%# Global.Locale %>;',
            paths: { 'Sage': '../../../jscript/Sage' },
            gfxRenderer: 'svg,silverlight,vml',
            deferredOnError: function (e) {
                if (dojo.config.isDebug) {
                }
         }
  • Change the “paths:” line to be:
            paths: { 'Sage': '../../../jscript/Sage', CFX'../../../jscript/CFX' },
  • Save your changes to the core.master file.
  • In the Project explorer, double click on the base.master file.
  • Do a search for “Sage/UI/Alarms/JobNotificationButton”
  • Add a comma at the end of that line and then add a new line.
  • On that new line type “CFX/main” (with the quotes)
  • The finished code should look like:
            "Sage/TaskPane/ActivityTaskPaneActions",
            "Sage/UI/Alarms/JobNotificationButton",
            "CFX/main"
        ],
  • Save your changes to the base.master file.

Modifying The AddEditAddress SmartPart
As I mentioned, there is also a smart part for editing addresses that is used on the Addresses tab (located at both the account and contact levels). This is a custom smart part
located under SupportFiles/SmartParts/Address called AddEditAddress.ascx and the code file of AddEditAddress.ascx.cs. These files would also need to be updated to change the county field from a text box to a picklist.

  • In the AddEditAddress.ascx file, look for the control with the TextBox control with the ID of “txtCounty”. Replace that TextBox control with a Picklist control, like:
<SalesLogix:PickListControl runat="server" ID="txtCounty" PickListName="County" AutoPostBack="false" NoneEditable="false" mustExistInlist="false"/>
  • In the AddEditAddress.ascx.cs find the OnAddEntityBindings method and change the County binding to be bound to the Text property to the PicklistValue property.

Change from:

BindingSource.Bindings.Add(new PropertyBinding("Country", txtCountry, "Text", "", ""));

To this:

BindingSource.Bindings.Add(new PropertyBinding("Country", txtCountry, "PickListValue", "", ""));

Modifying the Address Entity Address Display property
The address text that is displayed on the address control by default is a code derived Address entity property called FullAddress. This property is actually the result of a Address entity Business Rule called FormatFullAddress.

The code that defines the output of the FormatFullAddress rule is contained in a compiled Business Rule assembly, but we can override it by adding a Post Execute snippet to the FormatFullAddress Business Rule.

In that code snippet, we need to make sure that County is included in the rule. The following code can be used to do this:

		string str = string.Empty;
		string country = address.Country;
		string add1 = address.Address1;
		string add2 = address.Address2;
		string add3 = address.Address3;
		string add4 = address.Address4;
		string streetaddress = (
				(!string.IsNullOrEmpty(add1)? add1 + "\r\n":string.Empty) + 
				(!string.IsNullOrEmpty(add2)? add2 + "\r\n":string.Empty) +
				(!string.IsNullOrEmpty(add3)? add3 + "\r\n":string.Empty) +
				(!string.IsNullOrEmpty(add4)? add4 + "\r\n":string.Empty) 
			);			        
        	str = string.Format("{0}{1}, {2} {3}\r\n{4}{5}", 
				streetaddress, 
				address.City, 
				address.State, 
				address.PostalCode,
				string.IsNullOrEmpty(address.County) ? string.Empty : address.County + " ",
				address.Country );
        	if (string.Equals(",", str.Trim()))
        	{
            	str = string.Empty;
        	}
    
    		result = str;
ABOUT THE AUTHOR

Kris Halsrud

Kris Halsrud is a Senior Analyst / Developer for Customer FX Corporation.

6 Comments

  1. Kris,
    How do I add a lookup or picklist for 8.1 on the county? I wasn’t sure if this article applied to 8.1 as well.

    Reply
    • This is the correct way to do so in the 8.1 web client.

  2. I did do this. I am getting an error: A smart part associated with this page has failed to load: c:\inetpub\wwwroot\SlxClient\SmartParts\Address\AddEditAddress.ascx.cs(69): error CS0103: The name ‘pklCounty’ does not exist in the current context.
    I did everything as in the article. Any thoughts?

    Reply
    • There is an issue in the article.

      Here is the correct step:

      In the AddEditAddress.ascx.cs find the OnAddEntityBindings method and change the County binding to be bound to the Text property to the PicklistValue property.

      Change from:
      BindingSource.Bindings.Add(new PropertyBinding(“Country”, txtCountry, “Text”, “”, “”));

      To this:
      BindingSource.Bindings.Add(new PropertyBinding(“Country”, txtCountry, “PickListValue”, “”, “”));

  3. I did figure that out and it was the issue of my error. Now I do not have any errors, but also no values in the list. Slowly but surely I am getting this to work!

    Reply
  4. Kris,
    Great article and I did get the list to populate. I didn’t realize I had to create a picklist in the database and give that ID to the id in the code on the .ascx control. This really helped us! Thank You so much!

    Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

Subscribe To Our Newsletter

Join our mailing list to receive the latest Infor CRM (Saleslogix) news and product updates!

You have Successfully Subscribed!