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.

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. If, for example, you want to add an author attribute to ArticlePages, add the attribute to the class and have the view render the attribute value where you want it to show up.

Now, let's take a look at the following imaginary ArticlePage class and component:

src/Objs/ArticlePage/ArticlePageObjClass.js

Copy

import * as Scrivito from 'scrivito';

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

src/Objs/ArticlePage/ArticlePageComponent.js

Copy

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.)

Adding author name and creation date

As you can see, an ArticlePage is currently equipped with only two attributes, title and body. Let's enhance the articles a bit and add attributes for the author name and the official creation date, author and createdAt, respectively:

src/Objs/ArticlePage/ArticlePageObjClass.js

Copy

import * as Scrivito from 'scrivito';

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

For the new attributes to have a visible effect, we need to extend the render function accordingly. We'll use a <p> tag for this:

src/Objs/ArticlePage/ArticlePageComponent.js

Copy

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

Scrivito.provideComponent('ArticlePage', ({ page }) =>
  <div>
    <Scrivito.ContentTag tag="h2" content={ page } attribute="title" />
    <p>
      Created by <Scrivito.ContentTag tag="i" content={ page } attribute="author" />
      at <Scrivito.ContentTag tag="i" content={ page } attribute="createdAt" />
    </p>
    <Scrivito.ContentTag content={ page } attribute="body" />
  </div>
);

Next, you might want to add some styling to the articles. This can be achieved using inline styles or CSS classes, or both.

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

Need help?