How to use the Portal page template as a reusable element/reusable sidebar

Hello, Newer to Canvas and really liking it.

Regarding the Portal Page template (documentation here Standard Portal / Dashboard Page - Canvas Pages and Modules) this is perfect for our application, and we would like to use this page template on all pages.

The question is then how is it best to have this work as a reusable element? So that we only have to change the sidebar menu once, rather than on each page?

I’m just a bit unsure as the best way to go about this though as it’s a page template, rather than a block element, or whether its something that should be done in the Header Details section in the Canvas admin portal.

Hello @dann9 welcome to the forum!

Interesting way of looking at this. However, I would recommend that reusables be used for specifics pieces of content.

Example of a portal page for a project management application. This page could feature several pieces of information in sections:

  • projects
  • milestones
  • tasks

Each of the above in one reusable element each. So, on the portal page you would have 3 reusable elements.

Thanks for this information @cmarchan

Could we then instead just use the side menu feature of this Dashboard Page as a reusable element? So as to have the Sidemenu on each page? And then on this side menu have the links to the different pages, such as the projects, milestones, and tasks.

@dann9

If the content groups will be the same in all the pages where the reusable menu be used I do not see why not. I guess you will be building that reusable and place it on the left floater.

Why would you need more than one page with the same left nav menu though?

1 Like

@cmarchan yes this makes sense, now that I have used Canvas more.

1 Like

Hi, sorry to revive an old topic but I actually was looking to do the same thing as @dann9; if I understand your curiosity @cmarchan, you’re proposing to make one page (and therefore one sidebar) and just have the content section different for each link from the sidebar? In this scenario, you’d have to load each page in the background, correct?

Forgive me as I’m new to Canvas and Bubble itself.

I’m building an app with several sections, a calendar function, reporting, documentation etc. so I wanted to leverage the portal sidebar, commonly, throughout the app but I didnt want to have to have the user load the whole app in a single page, but rather move around the app, loading only that specific page’s content.

Does that make sense? And does it still make sense just to build a single page?

Thanks for any insight!

Hello @skeohane and welcome to the forum!

In short … your approach makes sense and it is better to go this way especially if you are taking your first steps with Bubble. :smiley:

Thanks @cmarchan!

Just to be clear, it’s better to just make it all one page? Sorry, just don’t want to misinterpret your advice! :grin:

Thanks for the quick reply!

Hi @skeohane

Not necessarily. I can see why my response can lead to confusion.

Navigating pages is an often-used approach. Single page apps are another. It is up to you which one you would like to implement. Think through the user journey and decide on the best one. :smiley:

Both require a light database model and straight forward logic. Also a thought-through UI of course.

Below some links on this topic and performance / UX approach in general (one is a paid resource, another an example of approaching the build of a marketplace, … and others):

1 Like

Thanks for all this!

1 Like

“Why would you need more than one page with the same left nav menu though?” I think I’m confused here as well. As a saas product, focusing on left-hand nav within the app itself, shouldn’t it be feasible to treat this left-hand nav the same as a header navigation?

Based on how I’m seeing “Convert into a reusable element” done, it should be simple enough to right click and make that selection; however, I’m somehow not able to even right-click the element to do so

Hello @letsbuildsomeapps welcome to the forum!

I guess it is up to the Bubbler. However, in Canvas the approach is to keep sections within the same page.

I am not sure I follow what is meant on your last paragraph. The convert into a RE action is done within the Bubble editor.

Yeah, I feel like I just must be doing something wrong. Within Bubble, I am attempting to select the entire dashboard navigation element to make reusable but somehow cannot. Definitely an issue in bubble not canvas, though.

Hrmm. Will have to keep working through it.

1 Like