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.
Choose a member to preview. 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. 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. 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.
The dashboard allows gym organizers to view and manage their classes and attendees. Log in to the gym system using your credentials. Navigate to the "My Classes" section. Click on a class to view its details. The details will include information about the class, such as the type of training. 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. 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.