Support for nested/sub layouts

Feature Request
,
1

Probably too soon to ask but it would be great if Nodejs projects could support nested layouts sometimes called sub-layouts.

Makes more sense now that we have SPA for nodejs.

2

Could you give a few examples of nested layouts?

And maybe how would you like them to work also on combination with SPA and/or partial refreshes.

3

Sure.

Imagine a marketing site. You would have a main layout with a header and a footer. Content would go inside the main layout. Now you have product features, pricing, about us and similar one-page layouts that would have this layout.

Now imagine that you have also a forum like discourse. It would have the main layout as you want to keep header and footer but you would need a different sub-layout for it.

Also a blog would have the main layout for header and footer. But also several sub-layouts for single post, list of posts, categories etc.

Another example. Say you have web-app with a dashboard. Two main layouts. One for login, register, remember screens that are not SPA.
A second layout that houses the app dashboard which has several sub-apps(think of a CRM). Each feature(leads, contacts, analytics, mail, collaboration, etc) has its own layout as an MPA. Within each feature every thing is an SPA that has its own layout. Some have a sub header, others a sidebar, etc. And each of them renders different content. You would also have a completely different layout for user/app settings that would need a completely different layout.

Right now I do this by having a content page that calls dynamically partials.

So I have 3 routes that share the same main layout and point to the same content page. Inside this content page that I use as a sub-layout I call partials dynamically from additional data fields I add to the json route.
This is OK but isn’t compatible with current SPA routing because it only handles one main layout and doesn’t integrate with content pages that act as sub-layouts.

1 Like
4

So to achieve this with the current layout system, just allowing new layouts to be based on other main layout should be enough?

1 Like
5

Yes. More or less.

From a content page you can choose a layout. But a layout currently will always be at the top level.

If this is implemented from a UI perspective I would expect to open a layout page and be able to select a parent layout or blank if it’s top-level.

1 Like
6

If unclear yet @george here is a short post about nested layouts in RoR. He explains it much better than I do :slight_smile:

1 Like
8

I don’t think the way it works in Rails will work with ejs templates. The ejs templates only allows child templates, we work around it in the route by not loading the content page, but loading the main page and then setting a variable content that contains the content page that should be loaded. I think you already do the same with partial pages, you pass the partial that you want to load at a specific route by setting the data on that route and load the partial dynamically.

I will investigate if the other way around would be possible, but I think the way you already do it with partials will be the way to do it within Wappler.

1 Like
9

I understand. Indeed it’s one of ejs limitations. EJS was built with simplicity in mind. And I can see why Rails approach would be quite complicated to implement using it.

I know you guys will proceed with the approach that makes more sense now and for the future. For me using routing data seemed straightforward but I realized the SPA router isn’t compatible yet with this approach. It also involves manually editing the routes.json

But if you guys streamline this approach via UI and make the SPA router compatible with content pages working as layouts that is peachy! :slight_smile:

Thanks for the explanation.

10

Hi guys,

Will this be an option eventually? Unfortunately I am missing on SPA and hybrid rendering “niceties” due to this.

11

Although with a low count of votes this is one of those features people don’t know they need.

2 Likes
12

Hey forum,

I know most of you don’t have a clue of what I am proposing here. Probably because I explain myself like an amoeba.

But still vote for this. You will be able to thank me later when your projects become more DRY and maintainable. It’s a guarantee.

When this is implemented you will ask yourselves how could you have lived without it for so long.

4 Likes
13

For sure a vote from me on this one.

1 Like
14

Another way to explain this a bit more structured.

grandparent header
    parent header
        child header
        child content
    parent content
    parent footer
grandparent content
grandparent footer
15

Only recently getting back into Wappler and I can already see a need for it. Voted

1 Like
16

Also feel the need for this and look forward to the implementation with impatience

1 Like
20

@BiBo this has nothing to do with the nested templates in NodeJS which Jon is referring to :slight_smile:

1 Like
21

I’m also missing this feature, coming from a Laravel world.

I have a “main” master page with the top/header navigation bar, and for logged in users I present a dashboard which is basically the main master page with a sidebar as well.

It would be awesome to create a “dashboard” master page (containing the sidebar) based on the “main” master page. The alternative is attaching a “sidebar” partial to every dashboard page, but it doesn’t look as nice from a development point-of-view.

1 Like
22

Hi,

Is any plan for this will apply to the next version?