Crazy JavaScript error with smaller ribbons

So I had a really scary JavaScript error the other day when I tried to open the ribbon in a narrow browser window. I was testing scaling on some other components and happened to glance at the console only to see this:

ScriptResource.axd?d=P2SUeEg20lfXoIr5o67Q50QUYR8OiKSB6joDn1Xpddad4Ijf0Vz7eE2Pxamg-tsvBHFAKp7aho5FHb…:237 Uncaught Error: Sys.ArgumentNullException: Value cannot be null.
Parameter name: element
    at Function.Error$create [as create] (ScriptResource.axd?d=P2SUeEg20lfXoIr5o67Q50QUYR8OiKSB6joDn1Xpddad4Ijf0Vz7eE2Pxamg-tsvBHFAKp7aho5FHb…:237)
    at Function.Error$argumentNull [as argumentNull] (ScriptResource.axd?d=P2SUeEg20lfXoIr5o67Q50QUYR8OiKSB6joDn1Xpddad4Ijf0Vz7eE2Pxamg-tsvBHFAKp7aho5FHb…:279)
    at Function$_validateParameterType [as _validateParameterType] (ScriptResource.axd?d=P2SUeEg20lfXoIr5o67Q50QUYR8OiKSB6joDn1Xpddad4Ijf0Vz7eE2Pxamg-tsvBHFAKp7aho5FHb…:171)
    at Function$_validateParameter [as _validateParameter] (ScriptResource.axd?d=P2SUeEg20lfXoIr5o67Q50QUYR8OiKSB6joDn1Xpddad4Ijf0Vz7eE2Pxamg-tsvBHFAKp7aho5FHb…:130)
    at Function$_validateParams [as _validateParams] (ScriptResource.axd?d=P2SUeEg20lfXoIr5o67Q50QUYR8OiKSB6joDn1Xpddad4Ijf0Vz7eE2Pxamg-tsvBHFAKp7aho5FHb…:84)
    at Sys$UI$DomEvent$addHandler (ScriptResource.axd?d=P2SUeEg20lfXoIr5o67Q50QUYR8OiKSB6joDn1Xpddad4Ijf0Vz7eE2Pxamg-tsvBHFAKp7aho5FHb…:4033)
    at CUI_Controls_SplitButton$P_2 [as $P_2] (cui.debug.js?rev=LNokRxOfvBD%2F71Uob6cwpA%3D%3D:15160)
    at CUI_Controls_SplitButton$AH_0 [as $AH_0] (cui.debug.js?rev=LNokRxOfvBD%2F71Uob6cwpA%3D%3D:15140)
    at CUI_Controls_SplitButton$createDOMElementForDisplayMode [as createDOMElementForDisplayMode] (cui.debug.js?rev=LNokRxOfvBD%2F71Uob6cwpA%3D%3D:15069)
    at CUI_Controls_SplitButton.CUI_Control$getDOMElementForDisplayMode [as getDOMElementForDisplayMode] (cui.debug.js?rev=LNokRxOfvBD%2F71Uob6cwpA%3D%3D:2112)

At the same time the entire tab in the ribbon went completely blank.

Blank Files ribbon tab
I’m wouldn’t consider myself an expert, but this seems wrong somehow.

After digging around a bit it turned out that the reason for the gigantic error simply was that one of my custom ribbon buttons was missing an Image16by16 attribute. This attribute describes which image to use as an icon for the button when there is not enough room in the ribbon to display the full size icon (from the attribute Image32by32).

<CommandUIDefinition Location="Ribbon.Documents.New.Controls._children">
  <SplitButton Command="TemplateHub.Ribbon.Cmd.Find"
    Id="TemplateHub.Ribbon.New"

    Image16by16="_layouts/15/1033/Images/formatmap16x16.png?rev=23"
    Image16by16Left="-1"
    Image16by16Top="-77"

    Image32by32="/_layouts/15/1033/images/formatmap32x32.png?rev=23"
    Image32by32Left="-69"
    Image32by32Top="-35"

    LabelText="New from Template"
    PopulateDynamically="true"
    PopulateOnlyOnce="false"
    PopulateQueryCommand="TemplateHub.Ribbon.Cmd.Populate"
    Sequence="15"
    TemplateAlias="o1"
    ToolTipDescription="Create a new document based on a template in the template hub."
    ToolTipTitle="New from Template"/>
</CommandUIDefinition>

Lesson learned. Always include both attributes as well as positioning if using a sprite image. Oddly enough the attributes are all described as “Optional” in the spec though…

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.