Dynamic Flyout Menu in Unified Interface (UCI)

The Dynamic Flyout menu does not render in UCI. Follow these steps to reproduce the issue and find the solution at the end.

Using Ribbon Workbench, create a Flyout button. 

Configure the commands as shown in the screenshots below:

Flyout Button

Social Command

Populate Query Command

Display Rule (this will only show the button on existing records not new records)

Publish the Ribbon

JavaScript Web Resource

Create a JavaScript web resource with this code and publish:

function populateSocialMenu(commandProperties) {

    var commandId = 'mypub.phonecall.Command.Social';

    var menuXml = '<Menu Id="new.new_dslschema.Button18.Button.Menu">';

    menuXml += '<MenuSection Id="new.new_dslschema.Section19.Section" Sequence="10" DisplayMode="Menu16">';

    menuXml += '<Controls Id="new.new_dslschema.Section19.Section.Controls">';

    menuXml += '<Button Alt="Facebook" Command="' + commandId + '" Id="vrp.vrp_customerproduct.Button.FacebookButton" LabelText="Facebook" Sequence="10" TemplateAlias="o1" ToolTipTitle="Facebook" ToolTipDescription="Facebook" />';

    menuXml += '<Button Alt="Twitter" Command="' + commandId + '" Id="vrp.vrp_customerproduct.Button.TwitterButton" LabelText="Twitter" Sequence="20" TemplateAlias="o1" ToolTipTitle="Twitter" ToolTipDescription="Twitter" />';

    menuXml += '</Controls>';

    menuXml += '</MenuSection>';

    menuXml += '</Menu>';

    commandProperties["PopulationXML"] = menuXml;

}

function onSocialMenuItemClick(commandProperties) {

    debugger;

    alert(commandProperties.SourceControlId + ' clicked');

}

Result

As expected, the normal web refresh form will show the dynamic menu.

However, the UCI does not show the menu. It shows “No Options Available”.

 

Solution

Update the JavaScript code as following:

function populateSocialMenu(commandProperties) {

    var entityName = Xrm.Page.data.entity.getEntityName();

    var isUCI = Xrm.Internal.isUci();

    var page = "Form";

    var commandId = 'mypub.phonecall.Command.Social';

    if (isUCI) {

        commandId = entityName + "|NoRelationship|" + page + "|" + commandId;

    }

    var menuXml = '<Menu Id="new.new_dslschema.Button18.Button.Menu">';

    menuXml += '<MenuSection Id="new.new_dslschema.Section19.Section" Sequence="10" DisplayMode="Menu16">';

    menuXml += '<Controls Id="new.new_dslschema.Section19.Section.Controls">';

    menuXml += '<Button Alt="Facebook" Command="' + commandId + '" Id="vrp.vrp_customerproduct.Button.FacebookButton" LabelText="Facebook" Sequence="10" TemplateAlias="o1" ToolTipTitle="Facebook" ToolTipDescription="Facebook" />';

    menuXml += '<Button Alt="Twitter" Command="' + commandId + '" Id="vrp.vrp_customerproduct.Button.TwitterButton" LabelText="Twitter" Sequence="20" TemplateAlias="o1" ToolTipTitle="Twitter" ToolTipDescription="Twitter" />';

    menuXml += '</Controls>';

    menuXml += '</MenuSection>';

    menuXml += '</Menu>';

    commandProperties["PopulationXML"] = menuXml;

}


Now the UCI will also show the dynamic menu.

 

Important Note

Take special care of spaces and new lines in JavaScript code as those will also break the menu in UCI.