Adding Custom Columns to the Lookup Dialog to Show Related Data in Infor CRM Web

I recently had a request to customize the Lookup dialog in Infor CRM (Saleslogix) to add a hyperlink column that would launch a dialog to show related data to the row in the lookup search results. For this particular request, the customer wanted to add this custom column to any product lookup that would show multiple related ERP records that would assist the user in determining if it was the correct product to select.

Initially, I wasn’t sure it was going to be doable, or at least not easy. It turns out it was actually a fairly straight forward task. This really came down to three different tasks that the code needed to accomplish:

  1. The custom column that we’d add to the Lookup dialog
  2. The code that would execute when the custom column was clicked. In this case we’ll be opening a dialog and use SData to retrieve the related records for the selected row in the lookup results
  3. Finally, automatically append this new column to the Lookup dialog grid whenever the lookup is for products

For the sample code for this article, I will make this all more generic. Instead of looking up related ERP data for a product, we’ll do the same but for accounts. For any lookup that is for accounts, we’ll append our custom column that will display all related contacts for this account (and we’ll include a hyperlink to navigate to the contact, if the user desires)

I’ve also combined all three objectives above into a single code file. This code file can easily be loaded using our Custom Loader Module. With the Custom Loader Module, all you’ll need to do is create a folder under SupportFiles\Custom\Modules named “AccountLookup” and place the code below in a file named “main.js” in that folder.

Let’s take a look at the complete code:

define([
    'dojo/_base/declare',
    'dojo/_base/lang',
    'dojo/aspect',
    'dijit/Dialog', 
    'Sage/UI/SDataLookup'
],
function (
    declare,
    lang,
    aspect,
    Dialog,
    SDataLookup
) {

    // 1) Define new column type for grid 
    var contactColumn = declare('FX.ContactColumn', null, {
        icon: '',
        defaultValue: '',
        constructor: function (args) {
            lang.mixin(this, args);
        },
        format: function (val, entity) {
            // column will call show in the object defined below
            var exec = "javascript:FX.ViewContacts.show('"  + val + "', '" + entity.$descriptor + "')";
            return '<a href="' + exec + '">Contacts</a>';
        }
    });

    // 2) Define the code that will execute when the custom column is clicked
    var __viewContacts = {
        // this function is triggered when the custom column is clicked
        show: function(accountId, accountName) {
            // define dialog 
            var dlg = new Dialog({
                title: 'Contacts for ' + (accountName || 'Account'),
                style: 'width: 400px;',
                content: '<i>Loading contacts...</i>'
            });
            
            // use SData to retrieve contacts for account 
            var service = Sage.Data.SDataServiceRegistry.getSDataService('dynamic');
            var request = new Sage.SData.Client.SDataResourceCollectionRequest(service)
                .setResourceKind('contacts')
                .setQueryArg('where', 'Account.Id eq "' + accountId + '"')
                .setQueryArg('select', 'LastName,FirstName,Title');
             
            request.read({
                success: function (results) {
                    // create content for dialog
                    var content = '';
                    results.$resources.forEach(function(contact) {
                        content += '<li>' + contact.FirstName + ' ' + contact.LastName;
                        if (contact.Title) content += ' - ' + contact.Title;
                        content += ' <a href="Contact.aspx&entityId=' + contact.$key + '" tabindex="-1" title="View Contact"><i class="fa fa-external-link"></i></a></li>';
                    });
                    content = (content == '' ? '<i>Account does not have any contacts</i>' : '<ul>' + content + '</ul>');
                    
                    // set dialog content from the SData results & show
                    dlg.set('content', content);
                    dlg.show();
                },
                failure: function (result) {
                    Sage.UI.Dialogs.showError(result);
                }
            });
        },
        
        // 3) automatically add new column to lookups that are for accounts 
        initLookupColumns: function() {
            aspect.before(SDataLookup.prototype, 'initGrid', function() {
                var col = {
                    name: 'FXViewContacts',
                    field: '$key',
                    label: '',
                    type: contactColumn,
                    sortable: false,
                    width: 5
                };
                if (this.sdataStore.resourceKind === 'accounts' && this.structure.filter(function(c) { return c.name === 'FXViewContacts' }).length === 0) { 
                    this.structure.push(col);
                }
            });
        }
    };
    
    __viewContacts.initLookupColumns();
    
    // add to window namespace so can be invoked from hyperlink
    window.FX = window.FX || {};
    window.FX.ViewContacts = __viewContacts;
});

If you pay attention to the comments in the code, you’ll see each of the three objectives defined. The custom column type is defined, the code that the custom column executes is created, and the new custom column is automatically appended to any lookup that is for accounts. The end result looks like this:

and when the custom column is clicked, the following occurs:

I think the result turned out quite nice and wasn’t too bad to pull off. This could also be done using the Dijit TooltipDialog as well to show this on hover, however, that was a little more messy and the way the custom column was implemented made it difficult to ensure the tooltip would fade out when expected and not get in the way, so the dialog made sure the info was there when the user needed it, and wouldn’t get in the way when they didn’t need it.

ABOUT THE AUTHOR

Ryan Farley

Ryan Farley is the Director of Development for Customer FX and creator of slxdeveloper.com. He's been blogging regularly about SalesLogix, now Infor CRM, since 2001 and believes in sharing with the community. He loves C#, Javascript, web development, open source, and Linux. He also loves his hobby as an amateur filmmaker.

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!