Changing the Regarding Picklist on the Activity Dialog from a Single-Select to a Multi-Select Picklist in Infor CRM

I’ve mentioned before how customizing the activity dialog in the Infor CRM (Saleslogix) Web client is not like other forms. The Activity Editor dialog is a Javascript/Dojo widget, not an ASP.NET based QuickForm you can edit in the Application Architect. Let’s take a look at how you might change one of the existing controls to work differently. In this case, we will be changing the Regarding picklist control from a single-select to a multi-select picklist.

Before we look at the code, I will be using my Custom Loader Module that I have blogged about previously. Visit the link below, download the bundle and install it. The module that bundle installs allows us to simply drop a Javascript file into a folder without the need to wire it up in the master page.

Get the Custom Loader Module
Note: I’ll include instructions at the end of this article to show how to wire this code up without using the Custom Loader Module.

Once the Custom Script Loader Module is installed, if you look in the SlxClient portal in AA, under SupportFiles, you’ll see a new folder named Custom. Inside that folder there is a folder named Modules. We’re going to be placing our custom code there in a new sub-folder. For customizing the ActivityDialog, there’s a few different ways that can be done. You’ll typically see that done via an inheritance-like way where you override a method. We’re going to be using one of my favorite methods, using Dojo’s aspect module. Aspect lets you piggyback before, after, or around another method in another class. We’re going to create a method that runs before the postCreate function in the ActivityDialog runs. We’re basically attaching more code that runs before the code in that method runs, like an extension of that function.

Under the SupportFiles\Custom\Modules folder, create a new folder named ActivityRegarding. Then, inside that folder, create a new text file named “main.js” and paste in the code below:

define([
    'dojo/aspect', 
    'dojo/dom-construct', 
    'Sage/UI/Controls/MultiSelectPickList',
    'Sage/MainView/ActivityMgr/ActivityEditor',
    'Sage/MainView/ActivityMgr/HistoryEditor'
], 
function (aspect, domConstruct, MultiSelectPickList, ActivityEditor, HistoryEditor) {
     
    function customizeEditor() {
        // get rid of existing single select picklist
        this.pk_Regarding.destroyRecursive();
        
        // create new multi-select picklist
        this.pk_Regarding = new MultiSelectPickList({
            id: this.id + '_pk_Regarding',
            label: this.regardingText,
            shouldPublishMarkDirty: false, 
            canEditText: true, 
            itemMustExist: false,
            maxLength: 255
        });
        
        // crete a new div so multi-select renders correctly
        var div = new dijit.layout.ContentPane({
            class: 'remove-padding picklist',
            style: 'overflow: hidden;',
            label: this.regardingText
        });
        
        // add to dialog
        domConstruct.place(this.pk_Regarding.domNode, div.domNode, 'only');
        this.regardingContainer.addChild(div, 'first');
        this.regardingContainer.startup();
    }
     
    // add to activity editor
    aspect.before(ActivityEditor.prototype, 'postCreate', customizeEditor);
    // add to history editor
    aspect.before(HistoryEditor.prototype, 'postCreate', customizeEditor);
    
});

This is what the code is doing. First, the original regarding picklist is defined in the widget’s template, which is HTML that actually gets loaded in as a string and created at runtime. This makes it a bit tricky to modify, so instead, we’re just letting it get created normally and then, once it’s all created, we are destroying it. The reason why we have to do this is, instead of just change some properties to make it multi-select, is because the single-select picklist and the multi-select picklist are two completely different widget types. You can’t just tell a single-select widget to “turn on” multi-select. Instead, we have to create a completely new widget of that type.  Once we create that new MultiSelectPicklist widget and set it’s properties, we place it in a new div. We have to do this so the multi-select picklist renders correctly. The styling for the multi-select pick lists assumes the control is in a parent div with a “picklist” class added to it. If it isn’t, things won’t look right at all. Then, we add it all to the dialog. One thing to note, is that w’re just reassigning the new widget to the same attach node as the original (that is the part in the code where we assign the new widget to “this.pk_Regarding”). This makes it so all the rest of the built-in, out of the box code for binding the picklist, setting the picklist itself, wiring of events for the picklist, etc, all works normally, just with our new widget instead of the original one.

The end result will look like this:

If you’re not using my Custom Loader Module, which you should be, it makes things so much easier, then you can create a new folder named “CustomActivity” in the SupportFiles\jscript folder. Place the code above in a file there named main.js. Then edit the base.master file and add the following (before the </script> and </asp:Content> tags):

require({ 
    packages: [ 
        { name: 'CustomActivity', location: '<%= HttpContext.Current.Request.ApplicationPath + "/jscript/CustomActivity" %>' }
    ]}, 
    ['CustomActivity/main']
);

Good luck.

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 since 2001 and believes in sharing with the community. He loves C#, Javascript, Python, 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!