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 & resources

Copy
// 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")
Copy
// 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")))
Copy
// Create a blogpost
Scrivito.getClass("BlogPost").create({ title: "Hello world!" })
Copy
// Create an Image object and upload an image file to it
Scrivito.getClass("Image").createFromFile(file, { title: "Beautiful!" })

Updating attributes

Copy
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: Scrivito.getByPermalink("shakespeare") })
x.update({ galleryReferencelist: Scrivito.getClass("Image").all() })
x.update({ homeLink: new Scrivito.Link({ obj: Scrivito.Obj.root() }) })
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>" })
Copy
// Prepend widgets to a widget list
const TextWidget = Scrivito.getClass("TextWidget")

x.update({
  body: [
    new TextWidget({ text: "World" }),
    ...x.get("body")
  ]
})
Copy
// 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!" })],
  })
])

Searching objects

Copy
// Find all objects except various binary ones, e.g. for generating a sitemap
a = [...Scrivito.Obj.all().andNot("_objClass", "equals", ["Image", "Download"])]
Copy
// Find the most recently uploaded image
i = Scrivito.getClass("Image").all().order("_lastChanged", "desc").first()
Copy
// 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)]
Copy
// Find blogposts whose title contains 'brand'
a = [...Scrivito.getClass("BlogPost").where("title", "contains", "brand")]
Copy
// Find blogposts containing at least one GoogleMapsWidget
a = [...Scrivito.getClass("BlogPost").where("_objClass", "equals", "GoogleMapsWidget")]
Copy
// Find the most recently changed blogpost
o = Scrivito.getClass("BlogPost").all().order("_lastChanged", "desc").first()
Copy
// 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());
}
Copy
// 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());
  }
}
Copy
// Find all objects linking to a specific image
a = [...Scrivito.Obj.where("*", "linksTo", i)]
Copy
// Find all objects that have been modified ("new", "edited", "deleted")
a = [...Scrivito.Obj.where("_modification", "equals", "edited")]

Bulk operations

Copy
// Change all headline widgets of a page
for (var w of o.widgets()) {
  if (w.objClass() == "HeadlineWidget") w.update({ headline: w.get("headline").toUpperCase() })
}
Copy
// Convert all LandingPages to regular Pages
for (var obj of Scrivito.getClass("LandingPage").all()) {
  obj.update({_objClass: 'Page'});
}
Copy
// 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

Copy
// 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

Copy
// 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)

Copy
// 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 sample content

See Creating New Content Based on the Example App for detailed instructions.

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

Copy
// 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 finished, 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:

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