Multipage Changelog

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!

Learn more about Multipage here!

6 Likes

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.
splitPane

1 Like

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!

3 Likes

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.

enableMultipage

3 Likes

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.

7 Likes

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: page1
    • title: 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 on defaultPage:

  • switch1 is hidden on page1:

  • 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 be Mapped
    • Then set Data source to fx 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.

11 Likes