Learn how Scrivito CMS can help you deliver amazing digital experiences
See Scrivito CMS in action

SDK Cheat Sheet

SDK Cheat Sheet

This cheat sheet includes code templates for use not only in your app but also in the browser console. To get started and benefit the most from it, see Working in the Browser Console.

Variables: o CMS object, w widget, x CMS object or widget, a array, i image object

Pages and resources

// Load a page or pages o = Scrivito.Obj.get("f3d1e8a4c2342b83") a = Scrivito.Obj.get(["id1", "id2"]) o = Scrivito.Obj.getByPermalink("blog") o = Scrivito.Obj.getByPath("/blog/2016-02-17")
// Determine an attribute value and wait for the result Scrivito.load(() => console.log(Scrivito.Obj.root().id())) Scrivito.load(() => console.log(Scrivito.Obj.root().get("title")))
// Create a blogpost Scrivito.getClass("BlogPost").create({ title: "Hello world!" })
// Create an Image object and upload an image file to it Scrivito.getClass("Image").createFromFile(file, { title: "Beautiful!" })

Updating attributes

x.update({ title: "New post" }) o.update({ tags: [...o.get("tags"), "tech", "conference"] }) o.update({ _path: "/en/about" }) x.update({ colorEnum: "blue" }) x.update({ metaRobotsMultienum: ["noindex", "nofollow"] }) x.update({ authorReference: o }) x.update({ galleryReferencelist: [...x.get("galleryReferencelist"), i] }) x.update({ homeLink: new Scrivito.Link({ obj: o }) }) x.update({ links: [...x.get("links"), new Scrivito.Link({ url: "http://example.org" })] }) x.update({ publishedAt: Date.now() }) x.update({ html: "<p>Lorem ipsum</p>" })
// Prepend a widget list with a new widget const TextWidget = Scrivito.getClass("TextWidget") x.update({ body: [ new TextWidget({ text: "World" }), ...x.get("body") ] })
// Populate a widget list with nested widgets const SectionWidget = Scrivito.getClass("SectionWidget") const HeadlineWidget = Scrivito.getClass("HeadlineWidget") x.update(body: [ new SectionWidget({ content: [new HeadlineWidget({ headline: "Hello world!" })], }) ])
// Update objects after fetching them using a search objs = await Scrivito.load(() => Scrivito.Obj.where("_path", "startsWith", "/lang/de").take() ); objs.forEach(o => o.update({_language: "de"}));

Searching objects

// Find all objects except various binary ones, e.g. for generating a sitemap a = [...Scrivito.Obj.all().andNot("_objClass", "equals", ["Image", "Download"])]
// Find the most recently uploaded image i = Scrivito.getClass("Image").all().order("_lastChanged", "desc").first()
// Find blogposts that don't have a permalink a = [...Scrivito.getClass("BlogPost").where("_permalink", "equals", null)] a = [...Scrivito.Obj.where("_objClass", "equals", "BlogPost").and("_permalink", "equals", null)]
// Find blogposts whose title contains 'brand' a = [...Scrivito.getClass("BlogPost").where("title", "contains", "brand")]
// Find blogposts containing at least one GoogleMapsWidget a = [...Scrivito.getClass("BlogPost").where("_objClass", "equals", "GoogleMapsWidget")]
// Find the most recently changed blogpost o = Scrivito.getClass("BlogPost").all().order("_lastChanged", "desc").first()
// Print ID, title, tags, and permalink of all blogposts for (var obj of Scrivito.getClass("BlogPost").all()) {  console.log(obj.id(), obj.get("title"), obj.get("tags"), obj.permalink()); }
// Find all instances of a specific widget type for (var obj of Scrivito.Obj.all()) { for (var w of obj.widgets()) { if (w.objClass() == "ImageWidget") console.log(obj.objClass(), obj.id(), w.objClass(), w.id()); } }
// Find all objects that link to a specific image a = [...Scrivito.Obj.where("*", "linksTo", i)]
// Find all objects that have been modified ("new", "edited", "deleted") a = [...Scrivito.Obj.where("_modification", "equals", "edited")]

Bulk operations

// Change all headline widgets of a page for (var w of o.widgets()) { if (w.objClass() == "HeadlineWidget") w.update({ headline: w.get("headline").toUpperCase() }) }
// Convert all LandingPages to regular Pages for (var obj of Scrivito.getClass("LandingPage").all()) { obj.update({_objClass: 'Page'}); }
// Replace all images contained in blogposts for (var obj of Scrivito.getClass("BlogPost").all()) { for (var w of obj.widgets()) { if (w.objClass() == "ImageWidget") w.update({ image: i }) } }

React component templates (basic widget setup)

Defining a widget class

// src/Widgets/MyWidget/MyWidgetClass.js import * as Scrivito from 'scrivito'; Scrivito.provideWidgetClass('MyWidget', { attributes: { text : 'string', background: ['enum', { values: ['dark', 'light'] }], }, });

Defining a widget component

// src/Widgets/MyWidget/MyWidgetComponent.js import * as React from 'react'; import * as Scrivito from 'scrivito'; Scrivito.provideComponent('MyWidget', ({ widget }) => <div className={ widget.get('background') }> <Scrivito.ContentTag tag='h1' content={ widget } attribute='text' /> </div> );

Providing the editing configuration for a widget (optional)

// src/Widgets/MyWidget/MyWidgetEditingConfig.js import * as Scrivito from 'scrivito'; Scrivito.provideEditingConfig('MyWidget', { title: 'My Widget', description: 'A widget for my usage', properties: ['text', 'background'], attributes: { text: { title: 'Text for widget', description: 'Enter some descriptive text for this widget', }, background: { title: 'Background style', description: 'Choose a dark or a light background for this widget', }, }, });

Deleting the example content

Publishing the working copy after executing the code below will remove everything.

// To remove all content from a working copy, // run in your browser console: Scrivito.load(() => { return [...Scrivito.Obj.all()]; }).then(objs => { objs.forEach(o => { console.log(`Deleting ${o.id()}...`); o.destroy(); }); console.log("Done deleting all objs."); });

After the above code has been executed, you will receive an error until you define at least a page with the path “/” in your project. Also, for making searches work, a search results page is required:

Scrivito.getClass("Homepage").create({ _path: "/" }); Scrivito.getClass("SearchResults").create({ title: "Search Results" });