Login / Register  search  syndication  about

          Kris Halsrud's Blog

Kris Halsrud on development and Integration with CRM and Development

Expanding the Area Category Issue picklist popup screen in the SalesLogix Web Client

 In the SalesLogix web client, the Area Category Issue list at Tickets is a SalesLogix control called the DependencyLookupControl.  This control is contained in the Sage.SalesLogix.Web.Controls.dll assembly file.  There is also some external client side scripting that works in conjunction with the server code to control the behavior of the lookup.

The way the control renders is by looping through the dependencies defined in the control at design time and then rendering them as drop down lists at run time in a dialog. The standard lookup control has some very small drop down items.  I was recently asked how to modify the look of this dialog to make it larger.  The key is being able to work with the exposed client side libraries since the server side control code is compiled in the Sage assembly.

The client code library is in a file called  sage-controls-dependencylookup.js that is located in the jscript/sage-control folder.  This is the readable version of the code but the code that is actually used by the web site is the minified sage-controls.js file.  This is an aggregated file of all of the other control script files but minified together.

Lets take a look in the sage-controls-dependencylookup file so we can see the code clearly.

 In the standard file there is a Show function defined as such:


DependencyLookup.prototype.Show = function () {
    if (this.CanShow()) {
        if (this.panel == null) {
            var lookup = document.getElementById(this.PanelId);
            lookup.style.display = "block";
            this.panel = new YAHOO.widget.Panel(this.PanelId, { visible: false, width: this.Size, fixedcenter: true, constraintoviewport: true, /*x:250, y:200,*/underlay: "shadow", draggable: true, iframe: true, modal: false });
            this.panel.render();
            if ((this.CurrentIndex == 0) || (this.LookupControlsIdea != undefined)) {
                this.Init();
            }
            for (var i = 0; i < this.CurrentIndex; i++) {
                if (this.LookupControlsIdea != undefined) {
                    var text = document.getElementById(this.LookupControlsIdea.TextId);
                    var seedVal = "";
                    if (i > 0) {
                        seedVal = this.GetSeeds(i);
                    }
                    if ((text.value != "") || (seedVal != "") || (i == 0)) {
                        this.LookupControlsIdea.CurrentValue = text.value;
                        var listId = this.LookupControlsIdea.ListId;
                        var list = document.getElementById(listId);
                        if (list.options.length == 0) {
                            this.LookupControlsIdea.LoadList(seedVal);
                        }
                    }
                }
            }
        }
        this.panel.show();
    }
};

Using the code we can add a little bit of our own at the end to inject our desired behavior.

First we want to get the client Id of the list control on the deployed page so we can then start to work with the various DOM element. To do this we can use the following:

var parentListId = this.LookupControlsIdea.TextId.replace("_Text","_List");

We are getting the DOM Text element name and then changing the end from _TEXT to _LIST.  This allows us to get the list controls rendered Id. Then from this we can get the element:

var parentList = document.getElementById(parentListId);

Now with the control referenced we can set the size:

if(parentList) {parentList.size="20";parentList.style.width="250px";}

This will expand each list as they are added to the page but we also need to expand the panel the lists sit on.  To Do this we can get the panel like so:

var panel = document.getElementById(this.PanelId);

Finally we can then set the panels width:

if(panel) panel.style.width="800px";

There it is.  Lets look at it all together:

DependencyLookup.prototype.Show = function () {
    if (this.CanShow()) {
        if (this.panel == null) {
            var lookup = document.getElementById(this.PanelId);
            lookup.style.display = "block";
            this.panel = new YAHOO.widget.Panel(this.PanelId, { visible: false, width: this.Size, fixedcenter: true, constraintoviewport: true, /*x:250, y:200,*/underlay: "shadow", draggable: true, iframe: true, modal: false });
            this.panel.render();
            if ((this.CurrentIndex == 0) || (this.LookupControlsIdea != undefined)) {
                this.Init();
            }
            for (var i = 0; i < this.CurrentIndex; i++) {
                if (this.LookupControlsIdea != undefined) {
                    var text = document.getElementById(this.LookupControlsIdea.TextId);
                    var seedVal = "";
                    if (i > 0) {
                        seedVal = this.GetSeeds(i);
                    }
                    if ((text.value != "") || (seedVal != "") || (i == 0)) {
                        this.LookupControlsIdea.CurrentValue = text.value;
                        var listId = this.LookupControlsIdea.ListId;
                        var list = document.getElementById(listId);
                        if (list.options.length == 0) {
                            this.LookupControlsIdea.LoadList(seedVal);
                            var parentListId = this.LookupControlsIdea.TextId.replace("_Text","_List");
                            var parentList = document.getElementById(parentListId);
                            var panel = document.getElementById(this.PanelId);
                            if(parentList) {parentList.size="20";parentList.style.width="250px";}
                            if(panel) panel.style.width="800px";
                        }
                    }
                }
            }
        }
        this.panel.show();
    }
};

 The result is a change from this:

 

To this:

 

Very similar to the Show function is the SelectionChanged function that needs to also be changed like so:

DependencyLookup.prototype.SelectionChanged = function (index) {
    if ((index + 1) < this.CurrentIndex) {
        this.LookupControls[index + 1].LoadList(this.GetSeeds(index + 1));
        var parentListId = this.LookupControls[index + 1].TextId.replace("_Text", "_List");
        var parentList = document.getElementById(parentListId);
        if (parentList) { parentList.size = "20"; parentList.style.width = "250px"; }
        for (var i = index + 2; i < this.CurrentIndex; i++) {
            this.LookupControlsIdea.ClearList();
            var parentListId = this.LookupControlsIdea.TextId.replace("_Text", "_List");
            var parentList = document.getElementById(parentListId);           
            if (parentList) { parentList.size = "20"; parentList.style.width = "250px"; }
        }
    }
};

Now the thing to remember is you also need to add your code to the minified sage-controls.js file in the same way you did above in order to actually see this change.

What's This?
  
Bookmark and Share

About Kris Halsrud

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


Related Content
   Infor CRM (Formerly Saleslogix) Embedding quickforms on quickforms
 I recently had a client who needed to have a lot of elements on a form.  They wanted a kind of
Posted on May 20, 2015 by Kris Halsrud to Kris Halsrud's Blog
 
   Infor CRM (Formerly Saleslogix) Allowing quickforms to be used within the Web Browser control in the web client
 The Infor CRM web client has a "browser control" that allows you to embed another smart p
Posted on May 18, 2015 by Kris Halsrud to Kris Halsrud's Blog
 
   Infor CRM (Formerly Saleslogix) Problem with Multiple Timezone Controls in the Web Client
I just ran into an issue on 8.1.3 that I hadn't seen before.  A client wanted the time zone cont
Posted on May 11, 2015 by Kris Halsrud to Kris Halsrud's Blog
 
   How do I remove users from my Infor CRM system (formerly SalesLogix)?
I had an Administrator ask me for the steps they needed to take in order to remove a user from the Infor
Posted on May 08, 2015 by Dale Richter to Infor CRM Questions & Answers
 
   Using Global Script functions in InforCRM
I recently had a project that required me to be able to check if a user belonged to a particular team.
Posted on May 05, 2015 by Jason Buss to Jason Buss' Blog
 
Comments

 

Harry said:

"this.LookupControlsIdea.TextId.replace" is giving error as "is null or not an object"

please suggest...

August 17, 2012 6:41 AM
 

Kris Halsrud said:

Stupid site changed the code an put light bulbs in place of [ i ].  It should say

this.LookupControls [ i ].TextId.replace (without the spaces)

August 17, 2012 9:14 AM
 

Harry said:

thanks.... :)

while creating new ticket... dependency lookup values are blank and at same time "Category" & "issue" listbox height is not same as height of "Area".

if all the 3 fields r not blanked den den it will display properly..

can u please tell me why is it so...

thanks again for u help.. :)

August 20, 2012 1:41 AM
 

Harry said:

hey i had tried below code... and it works...!!!  

for (var i = 0; i < this.CurrentIndex; i++) {

var parentListId = this.LookupControlsIdea.TextId.replace("_Text", "_List");

                           var parentList = document.getElementById(parentListId);

                           var panel = document.getElementById(this.PanelId);

                           if (parentList) { parentList.size = "20"; parentList.style.width = "250px"; }}

                           if (panel) panel.style.width = "800px";

If u have another better solution den plz.. post it.

August 20, 2012 2:48 AM
 

harshad said:

hi Kris Halsrud,

can we make this control realizable? so user can re-size it as per he's screen resolution

Please suggest

August 22, 2012 3:01 AM
 

Kris Halsrud said:

Harshad, the YAHOO.widget.Panel that this is based on is not resizable.

August 22, 2012 9:02 AM
 

Scorpile said:

This isn't working on SLX8.1... sad

January 12, 2015 7:46 AM
 

Kris Halsrud said:

Scorpile, the control rendering has changed in 8.1.  The client side code is now all consolidated into the minified sage.js file.  There is a way to extend or change the behavior but it is not by modifying the base.  Instead you write your own extension that modifies the base, similar to the mobile architecture.

January 12, 2015 8:39 AM
 

Gary Jeffery said:

Hi Kris

Can you post a simple example of how that works for 8.1 please?

Regards

Gary

May 11, 2015 11:42 AM
 

Kris Halsrud said:

Gary I dont have an exact sample for this, but here is a post on modifying the duration control.  You could look at the standard DependencyLookup.js file to see what attributes need to be modified to make it work.  customerfx.com/.../modifying-the-duration-control-drop-down-in-the-infor-crm-formerly-saleslogix-activity-area.aspx

May 11, 2015 1:20 PM
 

Scorpile said:

I've found an easier solution is to force width using the control's id.  And it works on all SLX Web versions, even 8.1.

Just add the following CSS:

#MainContent_AddPortalTicket_dplArea_Area_List

{

width:  300px !important;

font-size: 90% !important;

}

#MainContent_AddPortalTicket_dplArea_Category_List

{

width:  300px !important;

font-size: 90% !important;

}

#MainContent_AddPortalTicket_dplArea_Issue_List

{

width:  300px !important;

font-size: 90% !important;

}

May 21, 2015 9:05 AM

Leave a Comment

(required)  
(optional)
(required)  
Add
All contents Copyright © 2015 Customer FX Corporation
Customer FX Corporation
2324 University Avenue West, Suite 115
Saint Paul, Minnesota 55114
Tel: 800.728.5783

  Follow @CustomerFX on twitter
Follow the best news, tips, and articles
  Subscribe to Customer FX on youtube
Watch SalesLogix tutorial videos from Customer FX
Login / Register