Error Showing Content - please login as admin for details.

Customize Edit UI/UX

#4 Call Toolbars Commands from JavaScript

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.

Resources

Commands and Workflows

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

The feature is needed for anonymous users to use the Edit Form. Register your site here https://patrons.2sxc.org/ to get access to the feature.

Simple Setup, Custom Link

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

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

<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, 'new', { contentType: 'UiEmptyHelloWorld'})">👉 Run open command</a>
</div>

<script>

  function openAndCancelRefreshAfterwards(tag, action, params) {

    // 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.cms.run({ tag: tag, action: action, params: params, workflows: [workflowToLog, workflowToDisableRefresh]})
      .then(function(data) {
        console.log("after run", data);
        return false;
      });
  }
</script>

<!-- unimportant stuff, hidden -->
<!-- unimportant stuff, hidden -->