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. Fire up your app, open the console, and try something like this:

Copy
Scrivito.currentPage().get("title")

Next, as another example, perform a  search to determine the number of “Page” objects in your CMS:

Copy
Scrivito.Obj.where("_objClass", "equals", "Page").count()

Most probably, you’ll get an error message saying “Scrivito data not yet fully loaded”; please retry and see below for the explanation.

Select the content 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,
  • the working copy to be addressed is selected,
  • and the Scrivito UI is in editing mode.

Try this and see the selected main menu item change:

Copy
Scrivito.currentPage().update({ title: "Hello!" })

For the Scrivito Example App, 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”.

Make Scrivito available as a global

In order to make the Scrivito SDK API available in the browser console, it needs to be set as a global variable. In an existing application, 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:

Copy
import * as Scrivito from 'scrivito';
window.Scrivito = Scrivito;

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. In this case, a corresponding message is displayed; retrying is the easiest:

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.loadScrivito.connect 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:

Copy
await Scrivito.load(() => /* access CMS content */)

Example: Fetch the ten CMS objects that have been changed most recently.

Copy
await Scrivito.load(() => Scrivito.Obj.all().order('_lastChanged').take(10))

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:

Copy
// Make 'load' available without the Scrivito prefix
window.load = Scrivito.load;

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

Copy
await load(() => Scrivito.Obj.getByPermalink('cool-page'))

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