This thread will be used to track Multipage feature updates. If you have any questions, feedback, or bug reports please fill out this form here!
Split Pane is now supported on cloud 3.79.0! It will be on next Wednesday's 3.79.0 edge on-prem release as well
You can add one split pane to each page and the split pane will be in page scope.
Public and embedded multipage apps are supported on cloud 3.79.0 and will be supported on 3.79.0 edge on-prem!
Check out the documentation for Embed web apps here. Happy building!
Admins on cloud orgs: you can now enable multipage on your own instance without filling out the beta form! On-prem users must still use the beta form.
Have a couple features that are now out as of cloud 3.90.0
(and therefore edge-3.90.0
, which should be out next week):
- Global frames: You can now add global modals, drawers, and split panes to multipage apps.
- Duplicate page: You can now duplicate pages in multipage apps.
We have an exciting quick win ship that is out now in cloud 3.102
(and therefore edge-3.102
, which should be out in the next week or so).
We have added 2 new globals to multipage apps:
-
retoolContext.currentPage
: This will store the id of the current page of the app. -
retoolContext.pages
: This will store an array of objects, each representing a page. For now, each page object will contain the following information (if you have other attributes you’d like us to expose, please let us know!):id: string
– ex: page1title: string | null
– ex: 'Page 1'url: string
– ex: 'homePage'isCurrentPage: boolean
– whether page is current page
What this unlocks
retoolContext.currentPage
: You can use this, for instance, to conditionally hide things in a global header depending on the page:switch1
is not hidden ondefaultPage
:
switch1
is hidden onpage1
:
retoolContext.pages
: This array unlocks the ability now to hook up a navigation component directly to the pages that you have set up, so that you don’t have to hook up the pages manually:- To start, set the
Mode
of the navigation component to beMapped
- Then set
Data source
tofx
and then{{ retoolContext.pages }}
- Then configure the
Mapped menu items
how you’d like - Finally, add an event handler to properly navigate to the right page using
utils.openPage(item.id)
(see 2nd screenshot below)- Note about this: This isn’t our ideal way of setting up an event handler to dynamically go to a page. We have plans to make this more intuitive in the future, but for now, this should do the trick.
- To start, set the