How to create an action plugin?

Plugin Development
1

Good day,
I will like to ask on how to create a plugin in PG that shows up in the action panel, the docs is not helping at all. Have be on it for a week and i still dont get the result am looking for.

  var Bind = new PgComponentType('PgBind', 'Bind', {
    selector:"[data-bind]",
    sections: {
        unique_name_one: {
            name: 'Displayed Section Name One',
            default_closed: true,
            fields: {
                button_group_size: {
                    name: 'Make button large?',
                    type: 'text',
                    action: 'element_attribute',
                    live_update:true
                }
            }
        }
    }
});

Bind.addPrefix(id);
framework.addComponentType(Bind);

var action = new PgFrameworkLibSection('Directive', 'Directives');
action.setComponentTypes([Bind]);
framework.addActionsSection(action);

I created the component it reads well, but it does show my the text, select or checkbox field to manipulate in action panel.

Can anyone give me an example from top to bottom on the codes.

2

Hi @ehigiepaul,
Complicated question!

So, there are a couple of things going on with your code. Foremost, your ‘button_group_size’ field needs an ‘attribute’ property to add the value to your element. So, something like attribute: 'data-button-size'. If it is a text field, I wouldn’t do a live_update. Without seeing the whole of your framework, it is hard to make a ton more suggestions, but make sure somewhere in your plugin you have framework.has_actions = true; That will tell PG to look for action sections. I can give you a more complete code example soon - I’m on some deadlines at the moment. Sorry!
BTW - what documentation are you following? I admit to not writing up a lot for Actions - I focused more on Properties.
Bob

1 Like
3

Good :+1::+1::+1::+1: the framework.has_actions = true; works and the displays.

I will wait for your sample code and for the documentation am referring to the one on github.

I just wish we could get a full documented api for PG and sample so we developer can integrate Pg to our pipeline. Thanks and take safe. Will buzz you after the new update release.

1 Like
4

What aspects of the API documentation would you like to see improved? If you look at the PG code, several of the frameworks, like ‘960grid.js’, are great examples to work from and build your own plugin.
What else should I flesh out in the code example you give above?
Bob

5

none of the PG code framework has an action panel example but your has_action worked well. I think i can work from here to finish the plugin. Am trying to build an external application to work with pinegrow. I just need a full PG sdk or api to know what i can build and extend.

6

Actions and properties are pretty much the same. Just where they are displayed and the elements they apply to are a little different. Other than a few other hooks, there isn’t a lot more to the Pinegrow API outside of the documentation.

1 Like