In this article, we cover how pages and folders are the building blocks of the presentation information architecture.

Topics covered here:

• Organizing folders and pages
• Collaborative and tenanted modes
• Folders
• Pages

Organizing folders and pages

FORGE is a headless CMS:

As the presentation manager of a headless CMS, FORGE Page Builder provides digital producers with a powerful tool to:

• Organize folders and pages
• Define the front-end information architecture, regardless of technology and implementation.

Create top-level folders as children of the root folder ~.

Each top-level folder can correspond to a different front-end, but that's not mandatory. It's up to producers to organize the presentation elements — folders and pages — in the most supportive way for your front-end information architecture.

Each folder is a container for pages and other child folders.

Reference scenario

In the reference scenario, the goal is to deliver a website (www.alphaweb.net) and an app (AlphaApp) – so let's start creating two folders: website and app.

Collaborative and tenanted modes

The FORGE Page Builder instance can be configured — ask administrators to change this configuration — with two visibility/editing behaviors based on users permissions:

• Collaborative mode: Producers see all folders and pages, but they can only edit folders and pages that their authorization groups allow.
• Tenanted mode: Producers can only see folders and pages that their authorization groups allow.
  The Tenanted mode applies to multi-tenant scenarios, when the same FORGE Page Builder instance serves many organizations and teams.

See Permissions for more information on authorization groups.

Folders

The tilde (~) in front of URLs means that these URLs point to the root of your web application. E.g., in the reference scenario, ~ stays for www.alphaweb.net. 

The root folder ~ allows you to set the following metadata:

• Theming: How each element of the page looks.
• SEO: Parameters for the SEO of the child pages.
• Permissions: The authorization groups a user must have to see the folder.
• Variables: Placeholders of information valued at rendering time that make a page's behavior dynamic.

All child folders and pages inherit the above metadata.

For each child folder and page, you can:

• Override the theming.
• Override ‌SEO.
• Add permissions to restrict‌ visibility.
• Override inherited variables and add some new ones.

All child pages inherit their parent's folder properties; administrators can override the inherited properties and add new ones.

Reference scenario

In the reference scenario, consider the following choices:

• For the language en-gb, set the header's background color and footer to orange (#ff7900) for all pages under the website and app folders.
  For the language fr-fr, set the header's background color and footer to azure (#00d4f4) for all pages under the website and app folders.
  
  By setting the background color values to folder _a-big-fan-of-alpha, you set by default the same values to the child folders (website and app).
• Set up that all pages under website and app folders have the same value for the variable @pagetitle.
  Thanks to the folder-children inheritance mechanism, it's possible to assign a default title to existing and new child pages. Based on the design of each page, producers can overwrite the title.

Moreover, assign dedicated permissions in addition to the inherited ones (the Lead Producers authorization group):

• For the website folder, set that only the editorial team members with the presentation-website authorization group have access to view the folder website.
  
• For the app folder, set that only the editorial team members with the presentation-app authorization group have access to view the folder app.
  

Pages

Pages and folders share the same metadata types:

• Theming
• SEO
• Permissions
• Variables

For each page, you can:

• Override the theming inherited from its parent folder.
• Override the SEO inherited from its parent folder.
• Add permissions to restrict the visibility inherited from its parent folder.
• Override the inherited variables inherited from its parent folder and add some new ones.

On the other hand, pages and folders differ in their content. 

While folders contain other folders and pages, pages contain templates, layouts, and modules, which are the page's information architecture.

The next article The page gives a detailed explanation about templates, layouts, and modules. Before you dig into the details, you need to know what page building blocks are available, based on which type of page you create.

Page types

FORGE Page Builder provides a set of built-in templates, layouts, and modules, which are the assets that compose the information architecture of a page. You can define custom assets, too: see Assets customization for more information on the assets extensibility.

When creating a page, you have to decide which set of assets you want to use for that page. It's a choice at creation time: you won't be able to modify it later.

Each available set of assets corresponds to a page type. So, when creating a page, you choose the page type to select which templates, layouts, and modules (refer to The page to learn about templates, layouts, and modules) you'll use for defining the information architecture of that page.

Reference scenario

In the reference scenario, use the Deltatre type (the out-of-the-box one) for website:

And use the React-fe page type (a custom one) for app:

Index page

New created folders are empty.

When a folder is the root of a specific front-end, it's convenient to add its index page by using the Add index page button.

Reference scenario

In the reference scenario, create

• (folder) website
  • (page) index
  • (folder) archive 
    • (page) alpha-news-old
• (folder) app
  • (page) index
  • (folder) archive
    • (page) alpha-news-old

Under the website folder, pages are of Deltatre type, and under the folder app pages are of type React-fe: