Skip to main content

Subpage Component

In this video tutorial you will understand how to create a subpage component to create a section of the page and add data without reloading it.

To begin working with the subpage component all you need to keep in mind is the below flow and its purpose:

  • Creating Subpage - to display various components on a single page

  • Creating Events - to execute actions

In the first example, we will display records on a page and use the same page to show other details such as notification messages like success/ error and new record submission form.

For this begin by creating a collection. If you haven't built your collection follow this link - https://academy.drapcode.com/docs/app-collection/create-collection.

1. Viewing Records​

To view your collection, drop a Data Table component. Bind the collection to the component and click Preview to view it.

DrapCode Builder Additional Tools

2. Creating a Subpage​

Now create a subpage to display any new element on the same page. For this the process will be to create a subpage, go to Snippets. Name the snippet and choose the Subpage option and click Create Snippet.

DrapCode Builder Additional Tools

3. Creating Event(s)​

To make sure the elements on your page run as per your use case; create events. For this go to Collection > Save Data and Snippet/Modal Popup > Show Subpage. Using these you can tell the event what action it needs to perform.

DrapCode Builder Additional Tools

4. Dropping a Subpage Component on Page​

In order to display data choose any component say, Data Table and bind the events to it. Besides you would have to now drop the Subpage Component too and mention in the Sbb Page setting what it needs to display. You can even leave this setting as blank.

DrapCode Builder Additional Tools

5. Testing the Changes​

Go to the Preview page by clicking on it. Now you can test your settings. Here you can display existing records, create new records, display notification messages, as much more, as per your use case.

DrapCode Builder Additional Tools

Conclusion​

One key benefit of the subpage component is its ability to enhance user experience by enabling dynamic content updates without requiring a full page reload, resulting in a more responsive and engaging interface.