Working with the Web Builder SDK in the Browser Console

Working with the Web Builder SDK in the Browser Console

Modern web browsers are equipped with a set of valuable tools that help designers and developers with resolving all kinds of issues around web pages and applications. Usually the tools can be accessed via a menu item titled “Web developer”, “Developer tools”, or the like.

One of the available tools is the browser console, sometimes also called web console or JavaScript console. It lets you view the output that is logged using console.log(), examine error messages and find their cause, and, last but not least, execute JavaScript code.

With a Web-Builder-based app, you can use the Web Builder JS SDK – also known as “Scrivito” or “Scrivito SDK” – in the console to view, manipulate or create content, perform bulk operations, test your app, etc. However, there is one condition that needs to be met. Fire up your app, open the console, and try something like this:

Most probably, you’ll get an error message saying “Are you trying to access the Scrivito API? Switch your JavaScript console to the application frame first”.

Select the application frame

If the user interface is being displayed, the top-level frame contains exactly that, the UI. So, for working with the application, select the scrivito_application context first.

If you want to alter or create content in the console, make sure that

  • you are logged in as a Web Builder user,
  • the working copy to be used is selected,
  • and the Web Builder UI is in editing mode.

Try this and see the selected main navigation element of the page change:

With every Web-Builder-based application, you can find the attributes of any CMS object or widget type in their “*ObjClass.js” and “*WidgetClass.js” files in the subdirectories of “src/Objs” and, respectively, “src/Widgets”. In the above example, we updated the title attribute of the current page.

Make “Scrivito” available as a global variable

For accessing the Web Builder SDK API more easily in the browser console, the corresponding JS object can be set as a global variable. In an existing application like the JustRelate Portal App, this will probably already be in place. However, when setting up a new application from scratch, you need to take care of this.

Typically, the Web Builder SDK API is imported into your application as an NPM package. You can then set it as a global variable on the browser window:

After that, you can simply use the Scrivito class to issue commands, etc. For the Portal App, the above assignment is done in the “Globals.js” file.

CMS object data is loaded asynchronously

The “Scrivito” SDK fetches content asynchronously, causing objects and widgets to be “undefined” if their data is not yet available.

As another example, perform a search to determine the number of Page objects in your Web Builder instance:

Most probably, if this command is executed for the first time, you’ll get an error message stating “Scrivito data not yet fully loaded”:

If you want to perform “Scrivito”-related actions in the console and need to ensure that all content object data is present, we recommend using Scrivito.load. Scrivito.connect, in contrast, is intended for connecting stand-alone React components to the Web Builder in the app.

Using Scrivito.load

In order to have the take care of loading the content, just use Scrivito.load in combination with await, like so:

As another example, the following determines the ten objects that have been changed most recently.

Save yourself some typing

If you frequently use the browser console to access content objects, you might want to put the following shortcut into your application to save yourself some typing:

You can then use a shorter syntax in the browser console:

Check out the SDK Cheat Sheet for API usage examples, or the SDK API documentation for details!