Customizing Pages by Adding Attributes

Whatever your website may be composed of – the latest news, a contact form, a blog, or an image gallery – sooner or later you’ll want to rearrange something, display additional pieces of information (e.g. subheadings, author names), vary the styles used, etc. Instead of letting editors work around the limitations (e.g. by handcrafting the markup), you can offer them the options required for enhancing the look and feel or the functionality of your web pages along the corporate website design specifications.

The key to this is customizing the various page (or widget) types by adding attributes to them, each of which represents a choice that can be made regarding a specific feature and the way it is presented. If, for example, you want ArticlePages to have an author, you can add an author attribute to this class and have the view render the individual attribute values where and how you want them to show up.

Let’s take a look at the following simple imaginary ArticlePage class and component:

src/Objs/ArticlePage/ArticlePageObjClass.js

import * as Scrivito from 'scrivito';

Scrivito.provideObjClass('ArticlePage', {
  attributes: {
    title: "string",
    body: "widgetlist",
  },
});

src/Objs/ArticlePage/ArticlePageComponent.js

import * as React from 'react';
import * as Scrivito from 'scrivito';

Scrivito.provideComponent('ArticlePage', ({ page }) =>
  <div>
    <Scrivito.ContentTag tag="h2" content={ page } attribute="title" />
    <Scrivito.ContentTag content={ page } attribute="body" />
  </div>
);

All page type definitions follow this pattern; they are made up of a CMS object class and a React component that renders the class instances. (The same applies, analogously, to widget type definitions.)

As you can see, an ArticlePage is currently equipped with only two attributes, title and body. Since the body attribute is a widgetlist, it’s up to the editor to choose from the many widgets available when composing an article, e.g. headlines, text widgets, columns, images, etc. The reason for providing a dedicated title attribute instead of letting the editor add the title as a widget to the body is that we may wish to access an article’s title from within the application for more than just rendering the article. For example, the title could be used in article overviews, search results, or for a meta tag, etc. If we left it to the article’s author where and how the title shows up as a widget in the body, we would have a hard time extracting it from there.

Let’s enhance the articles a bit and add attributes for a summary and the author name, summary and author, respectively:

src/Objs/ArticlePage/ArticlePageObjClass.js

import * as Scrivito from 'scrivito';

Scrivito.provideObjClass('ArticlePage', {
  attributes: {
    title: "string",
    body: "widgetlist",
    summary: "html",
    author: "string",
  },
});

For the new attributes to have a visible effect, we need to extend the component that renders the articles accordingly:

src/Objs/ArticlePage/ArticlePageComponent.js

import * as React from 'react';
import * as Scrivito from 'scrivito';

Scrivito.provideComponent('ArticlePage', ({ page }) =>
  <div>
    <Scrivito.ContentTag tag="h1" content={ page } attribute="title" />
    <Scrivito.ContentTag
      tag="p"
      className="font-italic"
      content={ page }
      attribute="author"
    />
    <h2>TL;DR</h2>
    <Scrivito.ContentTag content={ page } attribute="summary" />
    <Scrivito.ContentTag content={ page } attribute="body" />
  </div>
);

As you can see, every attribute of an article is rendered using Scrivito.ContentTag, one of the React components provided by Scrivito’s JS SDK.

Next, you might want to refine the styling of such articles. This can be achieved using inline styles or CSS classes, or both. If you are working with the Scrivito Example App, you can use the CSS classes provided by Bootstrap, the CSS framework built into the the Example App.

You’re done, you’ve customized a page type – congratulations!

Need help?

Customizing Pages by Adding Attributes

Adding a summary and the author’s name