Multipage Changelog

📣 Retool Announcements 💥 Product Updates
7

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.

13 Likes