Working with Pages

This article provides a overview of the key aspects when working with Pages during the development of your Knack app.

What are Pages?

Knack utilizes pages and views to construct your live app. A view serves as a visual component, such as a form, grid, or search, that interacts with records in your database. On the other hand, a page is responsible for consolidating multiple views into a single page.

Your Live App has the ability to include multiple pages that can be easily navigated by your users through menus and links.

workingwithpages1

 

Where do I access Pages?

To access your pages in the Builder, simply click on the Pages tab located in the left column of the page. Your pages are conveniently listed in the page tree on the left side of the page.

By clicking on any page in the list, you can easily view existing views, add new views, and update the settings for both the page and the views listed on the page.

Here is an example page tree from the Inventory Manager sample app:

workingwithpage2

 

Page Types

There are various page types, each with its unique capabilities and applications. 

  • Start Page: A starting point into your app. A start page can be either a parent page or a standalone page.

  • Parent Page: A page that has other pages (child pages) that it links to.

  • Child Page: A child page is linked to another page and cannot exist on its own.

  • Login Page: A page with a login view that password protects its child pages by requiring users to log in for secure access.

  • Detail Page: This page is designed to display detailed information about a single record in your app. It is commonly linked to by grid, list, and search views.

  • Single Record Page: A child page is capable of displaying Details Views, Edit Forms, or connected records when it has knowledge about a single record.

  • User Page: A user page is specifically designed to manage administrative user tasks. Unlike other pages, user pages are not included in the Page Menu. 

    • User Pages have their own dedicated User Menu. For additional information on user pages, see our article here.

 

 

Managing Pages

Adding a Page

To add a page, simply click on the green "+" button located next to the "All Pages" label on the left side of the page.

workingwithpage3

 

Editing a Page

To edit a page, simply click on the down arrow icon next to the page's name and choose "Settings" from the dropdown menu.

workingwithpage4

 

Copying and Linking to an Existing Page

If you find yourself managing numerous pages in your Live App, you can efficiently save time by duplicating pages or reusing existing pages by incorporating links.

Copying a Page

To copy any of the start pages in your page tree, locate the desired start page and click on the downward arrow icon to access the "Copy" option.

workingwithpage5

 

When you click on "Copy," a prompt will appear asking you to enter a name for the copied page. After selecting "Copy Page," the page will be added to the page tree and the Live App.

This will include all associated views and child pages from the copied start page.

workingwithpage6

Note: Copying pages is only possible for Start, Login, and User start pages. See this section above for details on page types.

 

Linking to an Existing Page

Reusing child pages can be a valuable tool when working with complex detail layouts or forms within your app. By linking existing pages to views that display records from the same grid, you can easily avoid the need to set up these layouts or forms from scratch.

This saves time and effort while maintaining the functionality and design of your app.

As an example, when you want to add new columns to a grid, you have the option to click on the “Actions” tab and then select "Link to another page." From there, you can choose any other child pages to connect to:

workingwithpage7

When you add a link to the grid or other views, a new link will be created that directs users to an existing page in your app. It's important to note that adding these links does not create copies of the pages, but rather establishes connections to them.

If you make any edits to the original page that is linked, it will impact all views that are linked to that page.

Note: If you're unable to find a specific page you want to link to, it's important to note that only pages displaying records from the same table are eligible for linking.

For instance, in a Contacts grid, you can only link to an existing Contacts child page and any grandchild page created from that child page.

Tip: To learn more about using Action Links, see our article here. 

 

 

Collapsing/Expanding Pages

If your page tree becomes too large to fit neatly on your screen, the start pages will collapse and only display the currently selected page. To view all the child pages listed beneath a start page, simply click on the small grey arrows to the left of the collapsed start page's name. 

workingwithpage8

 

Deleting a Page

To delete a page, simply click on the down arrow icon next to the page's name and choose the "Delete" option from the dropdown menu. A confirmation prompt will appear, asking you to confirm the deletion: 

workingwithpage9
 workingwithpage10

 

Caution: Deleting a page is a permanent action that will result in the removal of all associated views and child pages.
 
 
 

Building a Page

Adding a Start Page

Every Live App must have at least one start page.

In the example below, the Live App includes three start pages: one for Current Inventory, one for Incoming Purchases, and one for Outgoing Orders:

workingwithpage11

 

The first time you visit the Pages section, you'll be prompted to create your first start page:

 

You can add as many additional start pages as you need by clicking the “+" button in the left column:

This brings up a new window that will guide you through adding your page.

Start pages are independent of any other page in your app. This means that when adding a view using the view menu on a start page, you'll be able to add a view for any of the tables in your database.

Start pages can add links to the page menu and can also be embedded as independent apps.

Tip: The page menu is the navigation menu your users see in the Live App. See our article here for more on the page menu.

 

 

Adding a Child Page

A child page is generated from a link on a parent page. It cannot exist as an independent page.

Users have the ability to navigate to various child pages by clicking on links and menus within each view. For instance:

  • a Menu can display links to one or more child pages.

  • a Grid or List can link to a child page to show more details about each record displayed.

  • a Details view can link to a child page to edit the same record or insert child records.

You can view child pages by clicking on the page in the page tree or from the links below each view:

workingwithpage12

In this example, the View Purchase Details page is a child of the Incoming Purchases page.

You'll often add child pages automatically when adding pages and views through the Quick Start wizard. For example, if you are adding a Grid view, you'll have options for adding child pages:

workingwithpage13

 

 


Page Settings

To customize additional options for a page, simply click on the downward arrow icon next to the page's name and choose "Settings" from the dropdown menu.

workingwithpage14

 

When you click on it, the Page settings will open in a modal popup.

workingwithpage15

Name

The page name will be visible in menus and links throughout your Live App.

Page URL

Knack generates a unique URL for each page by incorporating the information you provide here, along with any necessary record identifiers.

The Page URL is generated based on the app name, so to access the Companies page, the URL would be:

image alt text

 

Every view linking to the above page will be automatically updated to use this new URL. 

Note: To ensure compatibility, please make sure to manually update any links that you have entered outside of the app. Additionally, it is important to note that page URLs must consist of lowercase alphanumeric characters only.

 

 
Page Menu

Every start page you add is automatically included in the Page Menu by default. If you wish to exclude a particular page from the menu, simply uncheck the box labeled "Display the Page Menu when viewing this page."

A page without page menu looks like this:

image alt text

 

The Contact Directory sample app comes with three start pages. In this case, we choose not to include the Companies page in the page menu, but we still provide a link for it.

When users view the Companies page in the Live App, they will see a menu with only two links.

 

Icon

Each start page has the option to customize its own icon, which will be displayed next to its name in the page menu. Simply click on the "add icon" link to choose your desired icon, and it will automatically appear in the menu:

 

Show a link to print this page

You have the option to include a print link in your live app pages, which will be conveniently located in the upper right section of the app.

 

When you click on the print link, it will generate a printer-friendly version of the page that can be sent to the print function of your browser.

Note: The print link will be disabled if you’re also using the modal popup option. See our article here for information on printing PDFs.

 

Display the page in a modal popup

Enabling this feature will allow your entire page to be displayed in a modal popup. This is particularly useful in situations where you want to easily view or modify records without the need to open a completely new page.

 

Note: In order for a page to be displayed as a modal popup, a Knack page must already be rendered underneath it. This allows you to still use the URL to navigate to this app from outside your Live App.

However, instead of loading the page as a modal popup, it will load the full page.

 

Pages & User Logins

To manage login access for different roles in your Live App, you have the ability to control access to each page individually. By adding a user login to a page, users will be required to log in before they can view any of the views on that page.

Tip: See our article here for more information on adding or managing login access for pages.

Page Rules

Page rules are a powerful tool that allows you to automate actions based on specific conditions as soon as a user accesses a page. For instance, imagine you have an event registration form with limited availability.

With page rules, you can easily hide the registration form when the availability reaches zero, ensuring a seamless user experience.

Tip: See our article here for more information on setting up page rules.