Measurable Success «10 Checkpoints for Future-Proof Enterprise CMS» White Paper
Measurable Success - White Paper

Efficiently Maintaining Common Page Attributes

Efficiently Maintaining Common Page Attributes

The Scrivito Example App includes several page types reflecting the varying requirements the different pages of a website need to meet. The Homepage, a standard Page, BlogPost or LandingPage – they all look different, and some of their attributes are unique to them, but they also have several in common.

In this guide, we are going to show you how the Example App handles attributes common to several page types in the endeavor to avoid redundancy and allow adding further ones easily.

Common attributes

In the Example App, the attributes several page types have in common have been put together in two files, which are imported into the object classes as needed:

src/Objs/Page/PageObjClass.js
import metadataAttributes from "../_metadataAttributes";
import defaultPageAttributes from "../_defaultPageAttributes";

const Page = Scrivito.provideObjClass("Page", {
  attributes: {
    ...defaultPageAttributes,
    childOrder: "referencelist",
    ...metadataAttributes,
  },
  extractTextAttributes: ["navigationSection", "body"],
});

In this example, the metadataAttributes mainly cover properties relevant to Facebook and Twitter, whereas the defaultPageAttributes deal with configurable navigation images and styles and the main page content:

src/Objs/_defaultPageAttributes.js
const defaultPageAttributes = {
  body: ["widgetlist", { only: "SectionWidget" }],
  navigationBackgroundImage: [
    "reference",
    { only: ["Image", "Video", "Download"] },
  ],
  navigationBackgroundImageGradient: ["enum", { values: ["yes", "no"] }],
  navigationHeight: [
    "enum",
    {
      values: ["small", "medium-height", "full-height"],
    },
  ],
  navigationSection: "widgetlist",
  title: "string",
};

export default defaultPageAttributes;

Having common attributes in one place not only eases their maintenance but also ensures that they are named consistently, which makes using them in the application code less error prone.

Common default content

The Example App not only defines default page and metadata attributes, it also provides some of them with initial content, and makes them editable via properties dialogs. This is achieved by means of a common editing configuration. Here’s the part that initializes the body attribute (a widgetlist) as well as two attributes related to the navigation:

src/Objs/_defaultPageEditingConfig.js
// …
export const defaultPageInitialContent = {
  body: [
    new SectionWidget({
      content: [new HeadlineWidget({ style: "h1" })],
    }),
  ],
  navigationHeight: "small",
  navigationBackgroundImageGradient: "no",
};

This file, “_defaultPageEditingConfig.js” gets imported into the editing configuration of all page types that import the “_defaultPageAttributes.js” file into their respective class definition, as shown above.

Providing further attributes

The advantages of centrally maintaining attributes that are used across several page types should be clear now: To introduce further attributes, one can simply add them to the “_defaultPageAttributes.js” and the “_defaultPageEditingConfig.js” files. Of course, this doesn’t make these new attributes functional as no business logic has been provided for them so far. In other words: The attributes require code in the app to make them effect what they’re supposed to.

To try out what we have elaborated on here and also provide some business functionality, take a look at Scheduling and Expiring Page Content in which two attributes, validFrom and validUntil, are added to the default page attributes to give editors a means to specify a validity period for pages.