Modifying the appearance of the Name Control dialog in the SalesLogix 7.5.4 Web Client

Similar to the lookup control in the SalesLogix Web Client, the Name Control is a custom composite user control.  While a lot of this code is in the Sage web control assembly, there is a large part of the behavior of the control that is handled by client side libraries.  The client side library for the control is in the VFS.

The code for this client library is under Portal Manager…Sage SalesLogix…Support Files…JScript…Sage-Controls.  There are two files involved:

• Sage-Controls-NamePanel.JS
• Sage-Controls.JS

The Sage-Controls is a composite of all of the other script files and is minified.  This is the file that is actually used by the deployed web site.

 

If we look in the human-readable Sage-Controls-NamePanel.js file we can see a function called Name_PanelShow() that looks like:

 

 

function NamePanel_Show() {
        if ((this.panel == null) || (this.panel.element.parentNode == null))
        {
            var dlgDiv = document.getElementById(this.nameDivId);
            dlgDiv.style.display = "block";
            this.panel = new YAHOO.widget.Panel(this.nameDivId, { visible:false, width:"300px", height:"210px", /*x:250, y:200,*/ fixedcenter:true, constraintoviewport:true, underlay:"shadow", draggable:true });
            this.panel.render();
        }
        this.panel.show();
        document.getElementById(this.ClientId + "_first").focus();
}

This function control how the Name dialog opens when clicking the Edit icon next to the name control.  We could for instance make the window a different size like this:

 

function NamePanel_Show() {
        if ((this.panel == null) || (this.panel.element.parentNode == null))
        {
            var dlgDiv = document.getElementById(this.nameDivId);
            dlgDiv.style.display = "block";
            this.panel = new YAHOO.widget.Panel(this.nameDivId, { visible:false, width:"300px", height:"400px", /*x:250, y:200,*/ fixedcenter:true, constraintoviewport:true, underlay:"shadow", draggable:true });
            this.panel.render();
        }
        this.panel.show();
        document.getElementById(this.ClientId + "_first").focus();
}

To make this change actually take effect, you need to modify the minified sage-controls.js file.  The easiest way to do this is to search for “NamePanel_Show()”.  Since it is minified there are no line breaks or spacing but if you make the equivalent change , when you save these files and deploy, your name control will open with a larger size..