How to add, nest and manage pages in Noloco

What is a page?

A page in Noloco is a section of your project that is assigned a specific (or dynamic) URL. For example, your might have a home page (url = '/') a settings page (url = '/settings') and a profile page with a dynamic profile ID (url = '/profile/:profileId')

Unlike most other website or web-app builders, pages in Noloco are not completely flat. You can nest pages just like you can nest elements. That means you build complex interfaces with shared elements such as navbars and footers or implements tabs and sub-sections, where you can directly link to those tabs or restrict a certain region of an app to loged in users.

How to change the current page?

The page tree can be found on the Elements tab, just above the Element Tree. By default it is collapsed and only shows you the currently selected page. Clicking it will open the tree where you can click any individual page to select it. This will let you edit any page properties such as the title and URL.

The selected page and all of its parents are highlighted slightly with the ability to clone the page or delete the page exposed.

Page tree

How to add a page?

To add a new page click the Add page button in the page menu. You will need to specify certain options before adding the page.

Property: where is the page going?

There are 3 types of options here:

  • It will be a top-level page Select this if you don't want the page to be nested under any other page and the page shares no data or elemetns with any other page

  • It will be embedded at the current element Select this if you do want the page to be nested under another page so that it will share elements and data with the parent page. Just like adding any new element make sure you have selected the right parent element

  • Select a parent page Select this if you do want the page to be nested under another page so that it will share elements and data with the parent page and you have already added a page group or child page to the parent/wrapper page.

Property: Page name

This will be the name you use to identify the page in the builder. This won't affect the SEO page title

Property: Must be logged in?

Set this to true if you want users who are not logged in to be redirected to the login page. This is particularly useful for wrapper pages for portals.

Property: Page data type

Should this page link to one piece of data, like a particular user or document? This will allow you to specify an identifying property in the URL. Specify the data type of that data here, i.e. User or Document for example.

Property: Identifying property in the URL

If you specified a page data type above, this will allow you to choose from the unique fields in that data collection. Each collection has an id and uuid but if you added a unique username field for example, that would also appear as an option.

Property: URL Path

This is the relative URL that users will use to navigate to that page. If this page is a sub-page, this path will get appended to the end of the parent's path. The page path must be unique per page group. You can leave the path blank to act as a wrapper page (for your navbar etc) or set it to / to catch all pages