Introducing Retool's Multipage Application Feature: Now in Private Beta
Retool is excited to announce the release of our highly anticipated Multipage Application feature, currently available in private beta to a select group of testers. This new feature is designed to empower developers to build production-ready applications with multiple pages, enhancing the overall functionality, navigation, and user experience of your Retool apps. Below, we delve into the details of this game-changing update, its benefits, and the features it brings to the table.
Key Benefits of Multipage Applications
Improved Organization: With the ability to separate different functionalities into individual pages, your applications become more organized and easier to manage.
Enhanced Performance: By deferring the evaluation of page-specific code and components until the page is actually loaded, initial load times are significantly improved.
Better User Experience: The introduction of headers, sidebars, and navigation menus allows for more intuitive and user-friendly interfaces.
Flexibility in Data Handling: New methods for passing data between pages, including URL parameters, global variables, and local storage, provide greater flexibility in managing state and data flow.
Adding Pages to Your App
Page Configuration Options:
Page Title: Customize the title for each page to improve clarity and navigation.
Page URL: Set unique URLs for each page, allowing for direct linking and better SEO.
URL Search & Hash Parameters: Configure search and hash parameters to manage state and navigation.
Page Styles: Apply specific styles to each page to maintain a consistent look and feel.
Default Page: Designate a default landing page for your application.
Adding Navigation to Your App
Navigation Components:
Header or Sidebar: Incorporate a header or sidebar with navigation links to improve user accessibility.
Menu Items: Configure menu items to link directly to specific pages, streamlining the navigation process.
Adding Components to Pages
Component Management:
Drag & Drop Interface: Use the familiar "Add" tab in your IDE to drag and drop components onto the canvas.
Page-Specific Components: Components added to a page will only appear on that page, unless added to the header or sidebar.
Adding Code to Your Pages
Code Configuration:
Page Code: Evaluates only when the page is loaded and can reference components and other code specific to that page.
App Code: Evaluates when the app is loaded and serves as shared code that can be used across different pages.
Performance Enhancement: Deferred evaluation of page code and components until the page is visible results in faster initial load times for your application.
Configuring URL Parameters
URL Parameter Management:
Page-Specific URL Parameters: Each page can have its own set of URL parameters.
State Updates: URL parameters can be configured to update when component state changes.
Initial State Reference: Components can reference initial URL parameter states, allowing them to default to specified values.
Accessing and Passing Data Between Pages
Methods for Data Passing:
URL Parameters: Ideal for deep linking and sharing URLs, ensuring the app state is reflected in the URL.
Global Variables: Useful for passing data without exposing sensitive information in the URL.
Local Storage: Another secure method for managing state between pages without using URLs.
Duplicating Pages as Multipage
Conversion Tool:
Duplicate to Multipage: Use the application dropdown option to convert a single-page app to a multipage format. This feature is currently behind a separate feature flag, and testers can request it to be enabled.
Compatibility with Other Features
Integration with Existing Features:
Source Control: Maintain version control of your multipage applications.
Multiplayer: Collaborate in real-time with team members.
Custom CSS: Apply custom styles to your pages.
Custom Keyboard Shortcuts: Enhance productivity with custom shortcuts.
Performance Tab of Debug Tools: Monitor and optimize your app's performance.
Theming: Apply themes for a consistent design.
External Apps: Note that switching pages does not currently work in public/external apps.
Custom Product Pages: Multipage apps cannot yet be set as custom product pages.
Additional Tools and Features
Ease of Migration: Tools are available to easily migrate your existing single-page apps into multipage format.
Page Duplication: Quickly duplicate pages to speed up development.
Global & Page-Specific Frames: Utilize global and page-specific frames such as drawers, modals, split panes, sidebars, and headers.
Out-of-the-Box Navigation: Navigation components are automatically connected to pages, simplifying setup.
Conclusion
Retool's Multipage Application feature represents a significant advancement in the platform's capabilities, offering developers the tools needed to create more efficient, organized, and user-friendly applications. As this feature is in private beta, we welcome feedback from our testers to continue refining and enhancing this powerful tool. Stay tuned for further updates and a broader release in the near future.
For those interested in exploring the Multipage Application feature, please reach out to request access and start building the next generation of internal tools with Retool.
