Aeropage Documentation

Users, Portals & Members

Design a Portal Dashboard

Create the Dashboard

Learn process of building a custom dashboard interface, how to add a navigation block and customize its appearance. How to browse records and select using active records - amd add additional blocks and customize their visibility. This video provides a step-by-step guide to creating a functional and visually appealing dashboard interface.

⁠

Create your Portal

Open it in the editor…

Choose a member to preview.

Navigation

In Template - turn off the template blocks.

Add block - import the Sidebar Navigation block from the library.

Customize the design if needed.

Add a block to show some cards.

Primary Blocks

Add a block from the library or another page in the project.

If the block is a repeater it can lead to a second level of blocks.

Configure the data source and design of the cards as needed.

Right click the block and add it to the default block list.

Now the block appears in the navigation.

Set the block to hidden so it only appears in the magic frame.

Secondary Blocks

Add or create a block to show details.

Insert some variables from the active record for the cards shown in primary block.

On the primary block, add two actions…

Set Active Record - will change which details show.

Set Variable (selectedBlock) - will change which block shows in the magic frame.

Now when the cards in the primary block are clicked, they will show the secondary block with the relevant details.

Blocks and Navigation

I walk you through the process of building a custom dashboard interface. I start by explaining the initial setup and login process. Then, I demonstrate how to add a navigation block and customize its appearance. Next, I show you how to browse and join classes using active records. Finally, I explain how to add additional blocks and customize their visibility. This video provides a step-by-step guide to creating a functional and visually appealing dashboard interface.

⁠

Introduction

The dashboard allows gym organizers to view and manage their classes and attendees.

Accessing the Dashboard

Navigate to the "My Classes" section.

Viewing Class Details

Click on a class to view its details.

The details will include information about the class, such as the type of training.

Viewing Attendee Details

To view the attendees of a class, add a "Cards" component to the dashboard.

Create a query on the attendees table in Airtable.

Filter the attendees based on the current class.

The filtered attendees will be displayed in the cards component.

Interacting with Attendee Details

Duplicate the class details block and rename it to "Attendee Details".

Set the active record to the clicked attendee and set the visible block to "Attendee Details".

Customize the attendee details block to display relevant information, such as name and email.

Use text components and text variables to insert attendee data.

Consider using unbound inputs for additional functionality, such as sending messages to attendees.

Sending Messages to Attendees

Create a form-like structure with input fields and a button.

Use variables to capture input values.

Configure the button action to send a message or add a record to the messages table.

Consider setting up an automation to send emails based on the messages.

Navigating Back to Class Details

Modify the block ID of the "Back" button to navigate back to the class details instead of the classes section.

Conclusion

The attendees dashboard provides gym organizers with the ability to view and manage their classes and attendees.

The dashboard can be customized to include additional features and functionalities based on specific requirements.

Create the Dashboard

Blocks and Navigation

Want to print your doc?
This is not the way.

Try clicking the ⋯ next to your doc name or using a keyboard shortcut (

CtrlP

) instead.