Using Custom Buttons In A Toolbar

11/8/2016

Sometimes you want to provide custom features in a 2sxc-app, but visualize them just like a 2sxc-toolbar. Here's how:

Understanding Buttons

A 2sxc button in a toolbar is basically a configuration like

{
command: {
action: "custom",
customCode: 'alert("custom button!")',
params: { id: 57 }
},
icon: "...",
title: "...",
// etc.
}

which is parsed by getButton(...) to generate some HTML. The full specs of this are documented in the 2sxc wiki about buttons.

To create your own custom button, you need two things

a button configuration like shown above
your JavaScript function which should be called

You can then use your custom config in a standalone button using the ...manage.getButton(...) command, or build it into a larger configuration with many buttons.

Understanding Custom Code

The custom code is run when the button is clicked, and it will have 3 variables predefined for you:

settings - the command and parameters which were given into the button when clicked and also contains the params that you specified when creating the button
event - the click-event
sxc - the sxc-controller of the current module, which knows what module you are on, and has a .manage property to do other things. You can read about it in the wiki here.

Code Example with 2 custom buttons and 2 standard buttons

<div class="sc-element">
    custom js action
    <ul class="sc-menu" data-toolbar='{"groups": [
        { "buttons": [
            { 
                "command": { 
                    "action": "custom", 
                    "customCode": "alert(\"custom button!\")"
                },
                "icon": "icon-sxc-code", 
                "title": "my custom code"
            },{
                "command": {
                    "action": "custom", 
                    "customCode": "someCustomAction(settings, event, sxc);"
                }, 
                "icon": "icon-sxc-code", 
                "title": "my custom code"
            },
            "layout", 
            "more"
        ]}, {
            "buttons": "layout,more"
        }
    ], "debug": true}'></ul>
</div>

Discover More

If you want to know more, best read about custom buttons in the 2sxc wiki or play around with the tutorial app.

Love from Switzerland,
iJungleboy

Daniel Mettler grew up in the jungles of Indonesia and is founder and CEO of 2sic internet solutions in Switzerland and Liechtenstein, an 20-head web specialist with over 800 DNN projects since 1999. He is also chief architect of 2sxc (see github), an open source module for creating attractive content and DNN Apps.