Customize Edit UI/UX

#4 Call Toolbars Commands from JavaScript

Resources

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:

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

<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>

Source Code of 160-cms-run-commands.jsfunction openAndCancelRefreshAfterwards(tag, event, action, params) {
  // Prevent the click from propagating, so the link won't execute href
  event.preventDefault();

  // This workflow step will run on every action, just to log what's happening
  const workflowToLog = {
    command: 'all',   // Run on every command/action
    phase: 'all',     // Run before and after
    code: (wfArgs) => {
      console.log("Toolbar asked to to something - here are the details.", wfArgs);
    }
  }

  // This is the workflow step we will register to stop page refresh
  const workflowToDisableRefresh = {
    command: 'refresh',   // The command name it's for
    phase: 'before',      // The workflow-step should run before the command is executed
    code: (wfArgs) => {   // The code which should be run
      console.log('Toolbar asked to refresh, will return false to stop it. These are the arguments we got.', wfArgs);
      return false;       // Return false to stop this command from happening
    }
  };

  $2sxc(tag).cms.run({ action: action, params: params, workflows: [workflowToLog, workflowToDisableRefresh]})
    .then(function(data) {
      console.log("after run", data);
      return false;
    });
  
}

More Stuff

You can do much more - like change icons, call call-parameters etc. Read the how-to and the specs for this.

Customize Toolbars Workflows

#4 Call Toolbars Commands from JavaScript

Basic HelloWorld Input Field

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 })