Custom button: Must show both icon and title!

CRM form has a toolbar that contains most needed built in buttons such as SAVE, CLOSE and etc. It also allows you to create your own action buttons too. This is pretty straight forward. Usually, we are allowed to have icon and title for those buttons along with tooltip.

If we add number of custom buttons, there could be a space problem since width of the toolbar is limited. CRM is doing something smart to show only icon when there is an issue of space. You will sometimes notice that you see both icon and title only when a form is maximized.

Even if we add more custom buttons through ISV, we can hide them according to the current status of the form when loading. We discussed it here. However, this doesn’t release any space.  In fact, hiding some of the custom buttons through JavaScript doesn’t solve the space issue. This results in showing only the icons for the custom buttons while a lot of free space is visible.

If we need to show both icon and title necessarily, there is no simple recommended way. However I tried one out-of-box method that worked for me. This is not a Microsoft supported way.

It contains below three steps.

1) Create images that contains icon and text both

Even you are not a graphic designer; there is an easy way to do this. Just add the custom button (with title) to another test entity and get a screen print which will give you the chance of creating a nice image that got the CRM look and feel. Then load this to usual CRM image folder. (Program Files\Microsoft Dynamics CRM\CRMWeb\_imgs)

2) Change ISV entry

Now you need to do two changes to ISV entry as below.

<!--Original -->
<Button JavaScript="ReadySale();" Icon="/_imgs/ico_18_sales.gif" PassParams="1">
  <Titles>
     <Title LCID="1033" Text="Ready for Sale" />
  </Titles>
  <ToolTips>
     <ToolTip LCID="1033" Text="Ready for Sale" />
  </ToolTips>
</Button>

<!--Changed entry -->
<Button JavaScript="ReadySale();" Icon="/_imgs/ico_18_sales_EXT.gif" PassParams="1">
   <ToolTips>
        <ToolTip LCID="1033" Text="Ready for Sale" />
   </ToolTips>
</Button>

You need to replace the image name with your new one and remove the title tag. Obviously, if you keep the title tag, you will see the title twice if form toolbar stretches with enough space.

3) Ignore style of the button on loading

Now we should understand that CRM styles are applied to each and every component of the toolbar. So usually it doesn’t allow you to keep long text along with the icon. So you need to remove relevant style from the tag in onload event.

var _list = document.getElementsByTagName('LI');
var m = 0;
while (m < _list.length)
{
  if (_list[m].getAttribute('title') == 'Ready for Sale') 
  {
   var str = _list[m].outerHTML;
   var str1 = str.replace("ms-crm-Menu-ButtonFirst", "");
   _list[m].outerHTML = unescape(str1);
  }
  m = m + 1;
}

Mission accomplished!