Diversifying Website Content Using Object Classes

The content of a Scrivito website is stored as CMS objects. Pages, binaries (e.g. images or PDF files), other types of autonomous content (e.g. products) are all represented as CMS objects. The Scrivito SDK lets you render their content without having to consider the underlying basic functionality, i.e. fetching the content, making it editable, and storing it, because the SDK takes care of all this.

All CMS objects are instances of an object class. Object classes let you diversify website content with respect to its presentation or functionality. A landing page most probably looks and works different from a news page, for example. By using individual object classes, you can attach custom layout, attributes (properties), and business logic to the CMS objects based on these classes.

You can define object classes directly in your JS application using Scrivito.provideObjClass. Scrivito derives them from Obj which is the built-in base class of all CMS object instances. Obj gives them a powerful set of basic functions like fetching the content, making it editable, and storing it. Through its class methods, Obj also makes retrieval and search functionality available globally.

Scrivito includes a couple of prebuilt object classes, but you can also build your own ones. A NewsPage class, for example, could include a tags attribute to associate articles with specific topics and let visitors filter the articles by those topics. Once an object class for a specific page type has been defined, it is available to editors wanting to create a page of this type using Scrivito's in-place editing interface. You can also create pages programmatically on the console or by running a script, of course.

Scrivito lets you compose pages by placing widgets on them. Widgets are graphical components specialized in handling a dedicated type of content i.e. headlines, images, forms, etc. Widgets are not autonomous points of reference in the CMS like pages, binaries, etc. but are part of a particular page. Widgets can also be shared across different page types, duplicated, moved around and more.

The Widget class has similar functionality as the Obj class in that it lets you customize how individual types of content should be handled, presented, and edited. For this, widget classes can be created with unique attributes and rendering functionality. Analogous to the creation of object classes for CMS objects, custom widget classes can be created using Scrivito.provideWidgetClass(). Scrivito derives them from Widget.

You can also customize the built-in widget classes, simply by redefining them. Widgets of the ImageWidget class, for example, handle and display image objects. Scrivito takes care of the basic functioning like fetching, scaling or cropping them, but you can add as much functionality to them as you want, provide them with a caption or a tooltip, rotate them via CSS, etc.

CMS object and widget classes can be equipped with attributes for adding content to the actual pages and widgets. Scrivito offers various attribute types for handling all of the data types commonly used on websites: simple text, HTML markup, date values, links, and many more. For making pages ready to accept widgets, just provide their class with an attribute of the widgetlist type.

The Scrivito SDK includes helper React components that not only render the contents of an attribute according to its type, but also let you edit attribute values in place or in the details dialogs. For example, in Edit mode, the value of a date attribute can be set using a date/time picker.

Obj and Widget are the SDK's base classes for creating individual CMS object and widget classes. Such classes let you customize and diversify the look and functionality of your website. All editable content, be it on pages or in widgets, is stored in attributes you can add to your object and widget classes as needed.