The goal is that js code can open 2sxc dialogs. The dialogs themselves won't work yet, because the APIs are missing, but that will be implemented later.

Get JS to load

  1. Define a folder where the 2sxc js etc. will be stored. I recommend /system/sxc/...
  2. Copy the latest js and dist folder into that
  3. Add script tags to the page to load the /js/2sxc.api.min.js and /dist/inpage/inpage.min.js - then verify that the page loads and includes these scripts

Tell the 2sxc JS its Context

Normally CMS pages containing 2sxc will have a meta-header with the name _jsApi. It would then pick up context information from there. You can either also add such a meta-header, or tell $2sxc in your own code the values it needs. To do this, do something like this:

$2sxc.env.load({
  page: 2742,
  rvt: '...', // this is your request verification token, if used
  api: '/api/sxc/', // the api base path
  uiRoot: '/system/sxc/`, // the path above the js/dist which contains everything
});

You should now have a loading $2sxc which has env-variables. You can check this by running this in the console:

$2sxc.env.api() // this should give you the api path you just added

Open Your First Dialog

To open a dialog you must first create an sxc-object containing some context-information (zone, app, etc.) and then run a command. The API is still work-in-progress. Put this in a script tag on your page, and replace the zone, app etc. IDs with real IDs which exist in your test-DB.

var sxc = $2sxc({ zoneId: 128, appId: 1364, pageId: 4427, moduleId: 9771 });
sxc.manage.run('app'); // this should open the app-administration
sxc.manage.run('edit', { entityId: 127298 }); // this would try to edit item 12798

If everything works, you should see the dialog trying to open - but also have a bunch of errors in the console because network requests will try to access the Web API which doesn't exist yet.