DropDownDefinition

Jan 17, 2012 at 4:55 PM

Hi,

First of all thanks much for this very helpful library.

Is it possible to get a code example for the dropdowndefinition ? I have some problem to work with it

Eric.

Coordinator
Jan 19, 2012 at 8:33 AM
Edited Jan 19, 2012 at 2:13 PM

emarchal78, thanks for your feedback! I really appreciate it and this keeps me working on this project.

You can find DropDownDefinition usage example under Source Code tab, in RibbonWebPart.cs file of FluentRibbon.Elementary project.

It is defined as follows:

// ...

new DropDownDefinition()
{ 
    Id = "DropDown",
    InitialValueJavaScript = "return window.fluentDropDownSelectedItem || '';",
    ControlsSize = ControlSize.Size16x16,
    Controls = new ControlDefinition[]
    {
        new ButtonDefinition()
        {
            Id = "DropDownItem1",
            Title = "Choice 1",
            CommandJavaScript = "window.fluentDropDownSelectedItem = 'Choice 1'; SP.Ribbon.PageManager.get_instance().get_commandDispatcher().executeCommand(Commands.CommandIds.ApplicationStateChanged,null);"
        },
        new ButtonDefinition()
        {
            Id = "DropDownItem2",
            Title = "Choice 2",
            CommandJavaScript = "window.fluentDropDownSelectedItem = 'Choice 2'; SP.Ribbon.PageManager.get_instance().get_commandDispatcher().executeCommand(Commands.CommandIds.ApplicationStateChanged,null);"
        }
    }
},

// ...

What's happening here:

  1. window.fluentDropDownSelectedItem global variable is used for tracking the current state of selection
  2. Each time a button inside the dropdown is clicked, we're assigning the corresponding value to our global variable
  3. Each time a button inside the dropdown is clicked, we're firing ApplicationStateChanged event to re-calculate the current value of the dropdown based on our InitialValue script

I admit it looks a bit complicated and I'm already thinking about wrapping it into something more convenient. At the very least, the rather ugly long call to ApplicationStateChanged command could be wrapped into some lovely function, like "FluentRibbonUpdateState()".

Thus, probably in future releases the syntax will be simplified, but right now you should use the existing functionality.

Please, feel free to ask any additional questions, if you have any problems with the implementation!

Feb 26, 2012 at 6:31 AM
Edited Feb 26, 2012 at 6:32 AM

I trid this and it works fine for a single dropdown, but as soon as you add a second one, and you change the value of one during runtime, It populates the default value for both! I'm assuming is because the global variable.

Not complaining, this is a great project, I'll try to fix this with jQuery.

Thanks,

Feb 26, 2012 at 6:33 AM

Anyone knows if there is a way to dynamically add options in the dropdown?

Coordinator
Feb 26, 2012 at 2:17 PM

Hi FedericoAX,

Thanks for your feedback! Here are the answers to your questions:

  1. Yes, definitely you can use two dropdowns on the same page, and in this case you will need to fix the javascript for using two variables instead of one, i.e. window.fluentDropDown1_SelectedItem and window.fluentDropDown2_SelectedItem
  2. To generate dropdown options dynamically, you can use two different approaches:
    • Use RibbonController or RibbonLayoutsPage or ContextualWebpart and create ribbon definition dynamically server-side. This approach is ok if you display ribbon on a specific page, or in a webpart, or if you're using DelegateControl for adding ribbon tab throughout the portal.
    • If you customize ribbon for a list, or if you need to generate options client-side, you have to use PopulateDynamically attribute. Unfortunately this is not available in FluentRibbon yet. I'll try to add it as soon as possible, but I can't garantee any fixed period of time for this to be done.
Feb 26, 2012 at 3:20 PM

Well,

First of all thank you fore replying so fast,

If option 2 using PopulateDynamically is not available yet in FluentRiboon yet, I guess I have to use Option 1.

Maybe is me but when I try to create an object type ControlDefinitions[] to assign it in the DropDown Controls property, I get syntax errors.

Perhaps you can provide a snipet on how could I do that with RibbonContoller?

Thanks,

Coordinator
Feb 26, 2012 at 3:37 PM
Edited Feb 26, 2012 at 3:43 PM

The code would look something like this (not tested):

var dropDownDefinition = new DropDownButtonDefinition()
{
    Id = "TestDropDown",
    InitialValueJavaScript = "return window.fluentDropDown1_SelectedItem || '';",
    ControlsSize = ControlSize.Size16x16
};

var tabDefinition = new TabDefinition()
{
    Id = "TestRibbon",
    Title = "Test",
    Groups = new GroupDefinition[]
    {
        new GroupDefinition()
        {
            Id = "TestGroup",
            Title = "Test group",
            Template = GroupTemplateLibrary.SimpleTemplate,
            Controls = new ControlDefinition[]
            {
                dropDownDefinition
            }
        }
    }

};

var dropDownOptions = new List<ControlDefinition>();

if (needToShowButton1)
{
    dropDownOptions.Add(new ButtonDefinition()
    {
        Id = "DropDownItem1",
        Title = "Choice 1",
        CommandJavaScript = "window.fluentDropDown1_SelectedItem = 'Choice 1'; SP.Ribbon.PageManager.get_instance().get_commandDispatcher().executeCommand(Commands.CommandIds.ApplicationStateChanged,null);"
    });

}

// ... etc

dropDownDefinition.Controls = dropDownOptions.ToArray();

// now definition is ready, let's add the customization to the page

new RibbonController.AddRibbonTabToPage(tabDefinition, this.Page, true);

Feb 26, 2012 at 4:06 PM

Thanks a lot Omlin!

I was right that it was me, I never thought about that trick,to create a list and then make it an array, but that did it! Maybe it was late last night (about 1am)!

If you ever come to LA! I'll buy you a beer buddy!