Table of Contents

Introduction to the 2sxc JavaScript APIs

you are here (click to zoom) - discover the stack

The JS APIs let you do many things such as:

  1. get or create data of the current App from the headless REST APIs or the VisualQuery
  2. call custom backend WebAPI controllers
  3. provide a custom edit experience

This is very simple, but you need to know some basics.

Step 1: Activate the JS APIs

If you are logged in as SiteAdmin or SystemAdmin, all the JS APIs are already loaded. So if you only want to customize the edit experience for admins, you can skip this step.

If you need to use the JS APIs on public pages, you must first activate them.

In 2sxc v14 or newer you would do this:

@inherits Custom.Hybrid.Razor14
@{
  // Tell the page that we need the 2sxc Js APIs
  Kit.Page.Activate("2sxc.JsCore"); 
}

This will load and activate the standard JavaScript APIs and let you get data using the Data Service and the Query Service.

If your public / anonymous users also need CMS features (such as open the edit dialog), you would replace the "2sxc.JsCore" with "2sxc.JsCms". To even create visible toolbars (which requires some CSS) use "2sxc.Toolbars". Read more about activating page features here.

For older versions consult the activate instructions.

Step 2: Get the Current Sxc Object

Once you've activated the JS APIs, there will be a window.$2sxc(...) function/object. It's primary purpose is to get you an Sxc object.

Tip

A page can contain many 2sxc Apps and Modules. For your code to work easily, it needs to get an Sxc object for the current App.

There are a few ways to get the current Sxc object:

  1. Using the module ID with inline code: const sxc = $2sxc(17);
  2. Using the module ID with inline code and Razor: const sxc = $2sxc(@CmsContext.Module.Id);
  3. Using any html tag in the DOM: <a onclick='alert($2sxc(this))'>layout</a>

There are more ways to do this - see How to get Sxc.

Step 3: Use the Sxc to get Data or Perform CMS Actions

Once you have the Sxc object of the current App, you can do all kinds of things.

Edit this page