Changing Column Width of a Section using JavaScript

Hi everyone.  Well it’s been a long time since I showed you how to do something horribly unsupported so let’s do something like that today.

Background

Ad you may know, CRM allows you to pick the layout style for a section within a CRM form.  For the most part, their settings work just fine.

In January I did a short presentation on CRM User Interface tips and tricks for the XRM Virtual User’s group where I reminded everyone that even once you have picked a format for a Section, you can still change the width of the fields labels within the section.

It’s highlighted below:

Unfortunately, it has a maximum value of 250 pixels, which is usually fine, but what if I have a really, really, long label?

The Scenario

Let us pretend that I am creating a questionnaire inside CRM to gather some type of relevant data.  I either create a Questionnaire Entity or just add some question attributes to an existing Entity.  Either way, I have a lot of question text and not much room to show it and it might look something like this:

Note: This is using the default column layout for a Section.

Notice that my answers are also really small – basically Yes or No, or a short amount of textual information – and they are taking up over 50% of the Section area.

We need to fix that.

The Solution

Ok, we’re going to change the column width of both columns within the Section using JavaScript.  But let’s start with a look at the HTML that makes up our Form:

CRM uses something called a Column Group ( colgoup ) to help define how the columns of the table are to be sized.  As you can see from the picture above, the column that contains the label is 250 pixels wide and the column that contains our data entry field is 270 pixels wide.

Using the following JavaScript, we can modify those values to be more representative of both the data and the label requirements:

var tableObj = crmForm.all.new_q1_c.parentNode.parentNode.parentNode;
var col0 = tableObj.getElementsByTagName("col")[0];
var col2 = tableObj.getElementsByTagName("col")[2];

col0.width = "60%";
col2.width = "40%";

How This Works

Step 1:

First we need to get a handle to our form field’s parent table, which we do with the first line of JavaScript.  crmForm.all.new_q1_c is actually the table cell that contains the label of our first form field ( which is the attribute new_q1, by the way ).

Step 2:

Next we need to get the handle to the first and third col objects that belong to the parent table which we accomplish by using the getElementsByTagName function.

Step 3:

Once we have that information, we can set the width of the first column to 60% of the container’s space ( the table ), and set the third column width to 40%.

Your new section layout should look like this:

You can change the values for each column to meet your requirements.

Note: I actually have a question at the bottom of this list that occupies much of the form but it contains customer-specific information so I can’t show it.

Conclusion

As I mentioned, this is very unsupported and I can’t guarantee it will work in every circumstance, but it seems to fit the need I had.

Also, If you’re good with jQuery, you can probably do something very similar with less code.