An app based on Scrivito Interface Builder, e.g., the Portal App, includes several page types reflecting the requirements the various 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 your app can handle attributes common to several page types in the endeavor to avoid redundancy and allow adding further ones easily.

The attributes several page types have in common can be defined in a separate file or several ones that are then imported into the object classes as needed, as shown here for the Page class:

In this example, the defaultPageAttributes cover various common page and layout settings:

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.

Next to defining default page attributes, you can also provide some of them with initial content to make them editable via properties dialogs. This can be achieved by means of a common editing configuration. Here’s the part that initializes the title and description in the Scrivito Portal App:

This file, “defaultPageEditingConfig.tsx” gets imported into the editing configuration of all page types that import the “defaultPageAttributes.ts” file into their respective class definition, as shown above.

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.ts” and the “defaultPageEditingConfig.tsx” 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.