Hooking ButtonItem up to an action

[Amything 122]

Hey, I can't for the life of me figure out how to hook up a Plugin Options button to an Action.

In my PluginOptions I have:

    public class PluginOptions : EditableOptionsBase
    {

        public PluginOptions()
        {
            TestButton = new ButtonItem
            {
                Caption = "My test button",
            };
        }

        public ButtonItem TestButton { get; set; }

How can I define a function to in Plugin to execute when the button is pressed?

 

[softworkz 5066]

@Amything - you cannot have buttons when using the Emby SDK Documentation: Simple Plugin UI  template.

This is only for super-simple cases when you only have a few values that need to be configured. In this case, the PluginOptions class is defining serving a dual purpose: it defines both, the UI and your persisted option values. This model is not suitable for interactive UI, where the UI class is typically separate from the class for storage.

For interactive UI, you need to look at the EmbyPluginUiDemo in the SDK which demonstrates the use of the full UI model. Each view has two parts: 1. the UI class (similar to PluginOptions) defining the UI and a controller class (PluginPageView,  PluginDialogView or PluginWizardView).

In the UI class, you can create a button like this:

    this.Button1 = new ButtonItem("Button Text 1")
                      {
                          Data1 = "ButtonCommand1",
                          Data2 = null,
                          Icon = IconNames.add_circle_outline,
                      };

And in the view(controller) class, you override the RunCommand method to handle your button click:

        public override async Task<IPluginUIView> RunCommand(string itemId, string commandId, string data)
        {
            switch (commandId)
            {
                case "ButtonCommand1":

                    var myUI = (MyUI)this.ContentData;
                    myUI.Caption1.Text = "Button 1 clicked2";
                    return this;

 

Let me know when you got any more questions!

[Amything 122]

Thanks for the quick response! The SimpleUI stuff is really cool btw, I noticed the ButtonItem was not in the docs and now I see why

[softworkz 5066]

No, this is in the docs  Emby SDK Reference: ButtonItem and it's officially supported. 

(just not in the SimpleUI case)

Edited November 24, 2024 by softworkz

[sjtuross 9]

On 11/24/2024 at 8:35 AM, softworkz said:

For interactive UI, you need to look at the EmbyPluginUiDemo in the SDK which demonstrates the use of the full UI model. Each view has two parts: 1. the UI class (similar to PluginOptions) defining the UI and a controller class (PluginPageView,  PluginDialogView or PluginWizardView).

This is really cool, especially the plugin Tab UI from my perspective. I tried it today and noticed a minor issue: if I click the back button on the plugin page, all the tabs disappear. I’m not sure where the bug is coming from.

[softworkz 5066]

7 hours ago, sjtuross said:

I tried it today and noticed a minor issue: if I click the back button on the plugin page, all the tabs disappear. I’m not sure where the bug is coming from.

Oh right, I see it. It wasn't always like that, will look into it. Probably it comes from a general UI change.

But that's one of the advantages of the PluginUI: If things like this happen, it's on us to fix it, no longer will all plugin developers have to fix it in their plugin javascript files.
Over time, so many plugin UI pages have become broken by things like that (or very often just visual glitches), that we wanted to provide a stable way for creating UI that will last without change.

7 hours ago, sjtuross said:

This is really cool

Yea, also because it drastically reduces the effort to provide configuration UI. With the legacy method, you had to perform so many steps for adding just a single option value:

• Add the value as property to your options class
• Create HTML markup for adding an appropriate html element and add it to your html template
• Add javascript code to the js file for setting the html element value on load
• Add javascript code to the js file for retrieving the html element value and including it in the data on save
• Write javascript code for conditional hiding and saving depending on other html element values (if needed)
• For dropdowns with dynamic options:
  • Implement an API service 
  • Implement an API endpoint to provide those option values
  • Write javascript code to invoke this API on load
  • Parse the result and populate the dropdown options of the select element

With PluginUI, it's just this:

• Add the value as property to your options class
• For conditional display/enablement: Add an attribute to the property
• For dynamic dropdown values: Add a second property with the values and an antribute to the property pointing at them

(grey means optional)