Wednesday, August 15, 2018

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.









10 comments:

  1. This did not work for me untill I created a (hidden) flyout with a hardcoded button with the same commandid

    ReplyDelete
    Replies
    1. There should not be any need to creating a hidden button, In above code everything is fine except we need to make sure fly-out button has the same command as the button under the fly-out menu.

      Delete
    2. This comment has been removed by the author.

      Delete
  2. Xrm.Internal.isUci() is unsupported . How do you edit the command only rather than the entire menu xml if I have static menu.

    ReplyDelete
  3. Currently I am not aware about any other alternative of Xrm.Internal.isUci(). If you have a static menu, you can pass parameters to command function to decide about different actions.

    ReplyDelete
  4. Manish, what I've done is used the existence of "SourceControlId" inside the Command Properties parameter to determine if the code is running in the UCI or the classic interface.

    if(commandProperties.SourceControlId !== undefined){
    //UCI - reformat the command here.
    }
    else{
    //Classic - don't reformat the command.
    }

    Kashan, Do you have any similar instructions for dynamically populating a Split Button? As far as I can tell, the above only works for Flyout Menus.

    Also, I noticed in your example that you don't attempt to set any icons for the buttons inside the flyout menu. Do you know of a way to get that to work?

    ReplyDelete
  5. Amazing! Thank you so much!

    I add a question: How can I pass parameters? I have the same function for all buttons and I need to send a string parameter to do different actions.

    ReplyDelete
  6. Is this the support code? Chances that might break in future releases?

    ReplyDelete
  7. Casino & Resort – Henderson, NV | MapYRO
    Visit www.casino.com for gaming, dining and entertainment 사천 출장안마 at 전주 출장마사지 Casino Resort. We have more than 1,000 slot 서귀포 출장안마 machines 목포 출장샵 and 80 table games to choose from. 오산 출장안마

    ReplyDelete