How To Create Links Which Run CMS Commands (new 2sxc 8.6)

Sometimes you want to have edit-buttons or "change-layout" buttons which don't look like 2sxc-toolbars. For example in tables showing many items, on JavaScript SPAs or when creating a dashboard-style interface which is simply different. This is now easy (requires 2sxc 8.6)...

Understanding Commands

The first thing you must know is that each CMS action performed by 2sxc - be it "edit item 27" or "open layout-switcher" or even "show table of all BlogPost items" is internally handled by a command. You can find a technical explanation and a full list of commands in the 2sxc wiki: Commands.

A in-page toolbar is technically just a list of links, calling these commands. So you too can create links which call these commands. 

Running Commands

To run a command, a few things must be known:

1. The context - because running a "show layout-switcher" or "edit the query" requires the system to know which module we're currently clicking on. 
2. The action (aka command-name)
3. The parameters needed by this action
4. The click-event (optional)

Getting the context when clicking a link is easy, because all you need to do is write $2sxc(this), which gives you a 2sxc-controller for the module you are on. Providing the action is done by you, simply by telling the manager to run the action name, like this:

$2sxc(this).manage.run("layout")

Additional parameters are then added as an additional object, like this:

$2sxc(this).manage.run("new", { contentType: "BlogPost" })

And since we're usually in a click-event, it helps to pass the event into the call, just in case the command could use it for something, like this: 

$2sxc(this).manage.run("new", { contentType: "BlogPost" }, event)

An Real Example

Imagine you had a table showing many items (using Razor) and you want to create a text-link just to edit it. Here's how:

<a onclick='$2sxc(this).manage.run({"action": "edit", "entityId": @Content.EntityId})'>edit #@Content.EntityId</a>

As you can see, this example passes the EntityId from Razor to the generated line, the rest is all simple Html and JavaScript.

More Examples in Tutorial App

We created an App showing more examples. 

• download the tutorial app in the app catalog
• browse the tutorial source code on github

Enjoy!

Daniel and the 2sic-team