Multipage Changelog

[ming]

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!

[ming]

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.

[Matt_Carroll]

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!

[ming]

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.

[Darya_Verzhbinsky]

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.

[Darya_Verzhbinsky]

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.

[Darya_Verzhbinsky]

A short one: we added the ability to dynamically set the Page when navigating via Go to page (it no longer is restricted to a dropdown, although that is still an option). This is available now in cloud 3.107 and will be out to on-prem 3.108-edge sometime next week.

This will make hooking up a dynamic page in navigation component (see previous post) more seamless – can now just do {{ item.id }} in Go to page option:

[Isabella_Borkovic]

We have shipped page headers and sidebars on cloud 3.111! Page headers and sidebars will also be available in 3.111 edge, which will be released in a couple of weeks.

With this update, you can now add page-specific headers and sidebars to Multipage apps. If both a global header/sidebar and a page-specific header/sidebar exist, the page-specific one will override the global version for that page.

You can add a page header/sidebar either through the ‘Add UI or Logic tab’ (left) or the ‘Component Tree’ tab (right).

[ming]

Multiplayer editing in multipage apps are now in Beta on cloud! Fill out this form to get access.

[Darya_Verzhbinsky]

Hey all! We have a list of smaller updates to multipage that we wanted to highlight to everyone.

Updated navigation component

We made some updates to the navigation component so it automatically hooks into the Pages object on creation and gets updated automatically when you add new pages. This is available in cloud as of 3.123 and is out to on-prem 3.123-edge.

See this earlier post about some of how this works under the hood: Multipage Changelog - #8 by Darya_Verzhbinsky.

Updated state tab

We made some updates to the state tab, where now clicking on items that aren’t on the current page will navigate you to the relevant page. We are also now grouping items in the state tab dropdown by page to make it clearer how things are organized. This is available in cloud as of 3.126 and will be out to on-prem 3.126-edge sometime this week.

Updated code search

We have updated the code search tab in a very similar way to the state tab. We have grouped the results by page, and also now navigate you to the correct page when you click on a search result. This is available in cloud as of 3.123 and is out to on-prem 3.123-edge.

[Darya_Verzhbinsky]

Also, forgot to put this in previous post:

Multiplayer for multipage apps

Multiplayer for multipage is now out to all cloud customers. See this post for more information on this: Multipage Changelog - #10 by ming.

Multiplayer as a product isn't supported for on prem right now.

[Matt_Carroll]

Hi all,

Here's a summary of some updates that have landed recently to make working with URL parameters easer in multipage:

Set URL Parameters event handler action

We added this new event handler action as an alternative way to push data from your app to URL parameters. This is available starting in version 3.114.

Persist URL Parameters automatically

We added this option to automatically carry over all URL parameters during page-to-page navigation. This makes working with URL parameters at the app level easier. This is available starting in version 3.108

Pass data with Variable

This is actually an alternative to URL parameters for sharing data between pages. You may find this more convenient if your use case doesn't require deep linking. This is available in version 3.117.

Bug fixes

We fixed a number of bugs, including handling reserved URL parameters properly, preventing queries from being triggered twice during navigation.

[Isabella_Borkovic]

Another couple of updates for yah!

Breadcrumbs component

We have updated the breadcrumbs component so that you can now navigate to a page within the same app, similar to how the navigation component already does it. This is available in cloud as of 3.126, with on-prem releases to follow.

If you want the breadcrumb to correctly highlight the page item, you should set the Current breadcrumb item to be based on the current page, {{ retoolContext.currentPage }}.

---

Page-scoped custom keyboard shortcuts

Multipage users now have the ability to add page-scoped keyboard shortcuts, accessible through the page inspector! This is available in cloud as of 3.126, with on-prem releases to follow.

You can still add global custom keyboard shortcuts through the Custom shortcuts tab in the App settings tab; page-scoped keyboard shortcuts will override globally-scoped keyboard shortcuts.

---

VS Code Extension
Retool's VS Code extension is now available in public beta for multipage apps! You can access it through the three-dot menu at the top of your app to edit queries directly in VS Code. This is available in cloud as of 3.122, with on-prem releases to follow.