The Scrivito Portal App can serve as a basis for implementing many and varied websites, not just customer portals. In this guide, we are going to show you how to remove the default content and start from scratch with just a homepage. On this occasion, we’re also going to explain how to use the layout areas.

For this tutorial, you don’t need to download or clone the Portal App and execute it locally because we won’t touch any files in the codebase. Just open your Portal App in the browser.

Let’s get started right away!

In the Interface Builder, a website is represented by its homepage object. Typically, a content object of the “Homepage” type is equipped with several attributes from which the app code obtains various global styling and layout settings, site-specific access keys for third-party services like Facebook, etc.

First, when opening your Portal App in the browser, make sure to have “scrivito/” in the URL path as the first element after the hostname for having the editing interface available. Of course, you can also use the editing interface on edit.scrivito.com, or jump in via the JustRelate Console.

Then, create a working copy for applying the changes we’re going to make in the course of this guide. You can do this by setting the display mode to “Edit” using the switch on the top bar, or by clicking “New” in the “Working copies” sidebar.

Next, on the “Sites” sidebar, click “Add site” and provide the name, homepage type, and the language of the site you wish to create.

Afterwards, if you select the new site via the “Sites” sidebar, an empty page with just one widget list for the page content will be displayed. We will take care of the layout of this page later.

A website consisting of more than just a homepage cannot be deleted via the “Sites” sidebar or the main menu. You would have to do this object by object, starting at the deepest level of the page hierarchy. However, we can use a script to delete the objects belonging to a particular site. To determine the objects to delete, we require their site ID which can be taken from the properties of any page belonging to the site in question.

To proceed, open your browser’s JavaScript console and change the context from top to scrivito_application_scrivito. Then, in the script below, replace the DEFAULT-SITE-ID placeholder with the ID of the site to remove. Now, run the script and watch the pages disappear. A similar version of this script along with many other usage examples can also be found in the SDK Cheat Sheet.

Rerun this script to also remove the other default site the Portal App comes with.

The first thing that should be done after creating a new website is to specify its title on the “General” tab in the page properties. Later, this title shows up in, for example, the “Breadcrumbs” widget, making it easier to navigate back to the homepage from any subpage. Then, choose the other layout areas you wish to include on your pages.

As an example, we’ve enabled the “Left navigation” layout option, placed a “Vertical navigation” widget inside the corresponding widget list, and switched “Show link to parent page” on in this widget’s properties.

Now, to create a subpage underneath the homepage, click the light blue handle of the “Left navigation” widget, followed by “Add page”. You will be presented with a dialog that lets you select the type of the new page. Wherever such a light blue handle can be seen, it’s for managing the subpages of the current page.

Several other layout widgets are available for bringing the site layout areas to life, e.g., the “Top navigation” or the “Breadcrumbs” widget mentioned above.