2sxc UI - cms.run commands
In some cases you need to call a CMS command without using the toolbar - like in SPAs and in situations where a normal HTML button should call edit.
You can also use this to trigger Workflows (new in 12.10).
You can register custom before
and after
code to run, change specs or prevent the action from executing.
Read the workflow docs or the
toolbar docs to learn more about this.
Important: Usually only editors see these toolbars - so saving won't work.
Hover over the various boxes to see the result - like this:

Important: The feature "Public Use of Edit Form" is disabled
If you want this demo to run for anonymous users you would need it. Register your site on patrons.2sxc.org to get access to the feature.Simple Setup, Custom Link
Output
The following command will open an edit dialog.
When you click it and close the dialog again, the page will not refresh.
Instead, you'll see console messages that a custom JS took over the process.
đŸ‘‰ Run open command
Instead, you'll see console messages that a custom JS took over the process.
đŸ‘‰ Run open command
More Stuff
Source Code of this file
Below you'll see the source code of the file. Note that we're just showing the main part, and hiding some parts of the file which are not relevant for understanding the essentials. Click to expand the code
@inherits Custom.Hybrid.Razor14 <!-- unimportant stuff, hidden --> <div @Sys.PageParts.InfoWrapper()> @Html.Partial("../shared/DefaultInfoSection.cshtml") <div @Sys.PageParts.InfoIntro()> <h2>2sxc UI - cms.run commands</h2> <p> In some cases you need to call a CMS command without using the toolbar - like in SPAs and in situations where a normal HTML button should call edit. You can also use this to trigger Workflows (new in 12.10). You can register custom <code>before</code> and <code>after</code> code to run, change specs or prevent the action from executing. <a href="https://r.2sxc.org/js-workflow" target="_blank">Read the workflow docs</a> or the <a href="https://docs.2sxc.org/how-to/customize-edit-ux/toolbars.html" target="_blank">toolbar docs</a> to learn more about this. </p> </div> </div> <div class="alert alert-warning"> Important: Usually only editors see these toolbars - so saving won't work. Hover over the various boxes to see the result - like this: <br> <img loading="lazy" src="@App.Path/ui/assets/hover-example.jpg" width="100%"> </div> @Html.Partial("../shared/WarnAnonymousIfFeatureIsOff.cshtml") </hide> <h2>Simple Setup, Custom Link</h2> <div class="alert alert-primary" style="width: 50%;"> The following command will open an edit dialog. When you click it and close the dialog again, the page will <em>not refresh</em>. <br> Instead, you'll see console messages that a custom JS took over the process. <br> <a href="#" onclick="openAndCancelRefreshAfterwards(this, event, 'new', { contentType: 'UiEmptyHelloWorld'})">👉 Run open command</a> </div> @* JS needed for the tutorial *@ <script src="@App.Path/ui/160-cms-run-commands.js" @Kit.Page.AssetAttributes()></script> <!-- unimportant stuff, hidden --> @* 2sxclint:disable:no-inline-script *@ @* Footer *@ @Html.Partial("../Shared/Layout/FooterWithSource.cshtml", new { Sys = Sys })