(888) 685-3101 ext. 2

The address control in InforCRM 8.2 (and other versions) is implemented as a semi-dynamic Javascript widget. I say semi-dynamic because while the widget is driven by configuration, the configuration is very much hard-coded. In this post I will examine how to do common customizations of this dialog.

address

A little bit of background

The address control is implemented in 2 parts:

  • Sage.SalesLogix.Web.Controls.AddressControl, the C# code which is going to generate the HTML as well as some of the client script (including the field configuration)
  • Sage.UI.Controls.Address, the Javascript widget which is going to drive the interaction

This widget uses 2 templates:

  • Address.html – the text area shown on the detail page
  • AddressEdit.html – the template for the dialog

Bear in mind you cannot modify those templates – they are compiled into the product. If you look at the AddressEdit.html file you will see the form is built dynamically based on the fields property of the Address control. Therefore our work will consist mainly of manipulating that property.

Obtaining a reference to the dijit

This is always the first step.
Now you have 2 options. One is to make a form-specific customization – e.g. if you just want to change the address widget on the account detail screen, then load your code on that form (using
ScriptManager.RegisterStartupScript) and grab the dijit using its client-side id:

ScriptManager.RegisterStartupScript(this, GetType(), "CustomizeAddress", String.Format(@"
dojo.ready(function() {{
  setTimeout(function() {{
    var control = dijit.byId('{0}');
    if(control) {{
      // do some stuff with control now
    }}
  }});
}});
", address.ClientID), true);

The 2nd option is more useful, in my opinion – it comes into play if you want to make customizations to all address dialogs shown through the app regardless of the form. To do that we can monkey-patch the Address control prototype so that our code is loaded whenever that control is instantiated.
I am going to put this code in a new file, CustomizeAddressDialog.js, and load that file via a module – CustomizeAddressDialogModule. Check out Including Custom Javascript in Saleslogix if you are not familiar with that technique.

require(['dojo/aspect', 'Sage/UI/Controls/Address'],
    function (aspect, Address) {        
       aspect.after(Address.prototype, 'postCreate', function() {
          var control = this;
          // do some stuff with control now
       });
    });

This is nice because you don’t have to worry about customizing every form… but it will affect every address control in the app (including Lead) so something to keep in mind. If that is a problem you could always register it as a module just on the pages that you want to modify.

Removing fields

Here you just need to remove the field from the fields array. Here is a common use case, remove the “Address Type” field added in 8.2 (many users feel it is confusing because it makes double usage with the Description field):

for(var i=0; i < control.fields.length; i++) {
  if(control.fields[i].name == 'addressType') {
    control.fields.splice(i, 1);
    break;
  }
}

Modifying fields

Same idea as in the previous code, but we need to change the field object, usually the xtype property (which determines the type of widget created). Here is another common use case, to change the City dropdown into a text box (this would go in the same loop as the one above):

if(control.fields[i].name == 'city') {
  control.fields[i].xtype = 'textfield';
}

Adding fields

Adding a field is a lot harder because the C# control would need to have support for it in order for data binding to work, so we quickly get stuck here. Ideally the code-behind control should create additional hidden fields dynamically based on the custom properties registered on the Address entity but until that happens we’ll only be able to come up with hack solutions here.

Putting it together

Module:

using Sage.Platform.Application;
using System.Web;
using System.Web.UI;

namespace Custom.Modules
{
    public class CustomizeAddressDialogModule : IModule
    {
        public void Load()
        {
            Page page = HttpContext.Current.Handler as Page;
            if (page == null)
                return;
            ScriptManager.RegisterClientScriptInclude(page, page.GetType(), "CustomizeAddressLeads",
                HttpContext.Current.Request.ApplicationPath + "/Custom/js/Address/CustomizeAddressDialog.js");

        }
    }
}

Javascript:

require(['dojo/aspect', 'Sage/UI/Controls/Address'],
    function (aspect, Address) {
        aspect.after(Address.prototype, 'postCreate', function () {
            var control = this;
            for (var i = 0; i < control.fields.length; i++) {
                if (control.fields[i].name == 'city' || control.fields[i].name == 'state') {
                    control.fields[i].xtype = 'textfield';
                }
                else if (control.fields[i].name == 'addressType') {
                    control.fields.splice(i, 1);
                    i--;
                }
            }
        });
    });

In conclusion

We can see the control is not very difficult to do basic customizations with, though more advanced customizations are not currently possible without a hack.
I hope this is helpful and if you do some cool address customizations or have any trick to add be sure to mention them in the comments.

Share This