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>