Working in the Browser Console

Working 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 Scrivito-based app, you can use the JS 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 CMS user,
  • the working copy to be used is selected,
  • and the Scrivito UI is in editing mode.

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

With every Scrivito-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 Scrivito 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 Scrivito Example 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 Scrivito 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 Scrivito Example App, the above assignment is done in the “Globals.js” file.

CMS object data is loaded asynchronously

The Scrivito SDK fetches CMS 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 CMS:

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 CMS object data is present, we recommend using Scrivito.load. Scrivito.connect, in contrast, is intended for connecting stand-alone React components to Scrivito in the app.

Using Scrivito.load

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

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

Save yourself some typing

If you frequently use the browser console to access CMS content, 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!