Possible to display content page data (e.g. page_title) in the layout page?

This is something different … it’s used as per the articles i sent you.

1 Like

No probs Teo, thanks for the responses - I’ll run with var to get it working for now. Thank you!

var was just and example. You can access other components on your page as well - such as server connect - {{content.serverconnect1.data.somethig_goes_here}}

1 Like

@mgaussie you can also set data on the route and use that on the layout page.

Your content page is loaded through a route. In that route you can set data specific to that route and then in your layout you can reference that data.

Say I have two content pages(page1 and page2) and a layout(main)

{
      "path": "/page1",
      "page": "/page1",
      "layout": "main",
      "data": {
        "id": "page1_id"
      },
      "routeType": "page",
      "name": "Page 1"
},
{
      "path": "/page2",
      "page": "/page2",
      "layout": "main",
      "data": {
        "id": "page2_id"
      },
      "routeType": "page",
      "name": "Page 2"
},

And this is the body of my layout:

<body class="application" is="dmx-app" id=<%= id %>>
  <!-- Application container -->
  <div class="container-fluid container-application">
    <!-- Content -->
    <div class="main-content position-relative">
      <!-- Page content -->
      <%- await include(content, locals) %>
      <!-- Footer -->
      <%- await include('/partials/_footer') %>
    </div>
  </div>
  <!-- Scripts -->
  <%- await include('/partials/_bodyjs') %>
  <script src="/bootstrap/4/js/popper.min.js"></script>
  <script src="/bootstrap/4/js/bootstrap.min.js"></script>
</body>

As you can see I’m setting the id attribute of the body dynamically.

So when I go to /page1 it will render the main layout the content page1 and set the id to page1_id as per route data. When I go to page2 it will render main layout, content page2 and set the id to page2_id.

This is a great way of passing very small pieces of data from the content page via routing to the layout with minimal overhead and maintenance.

Wappler doesn’t support this natively from the UI but there is a FR open for this.

1 Like

This looks perfect @JonL.

I already have the appropriate page title in the data:

{
      "path": "/contact-finder",
      "page": "contact-finder",
      "layout": "main",
      "name": "Contact Finder",
      "exec": "/api/security/user_secure",
      "data": {
        "page_title": "Contact Finder"
      }
    }

In the routes.json file.

I am struggling a little bit with what I would write to dynamically call ‘page_title’ this on the layout page.

With your example, it looks like you are setting the App ID as per Wapplers UI.

Would you mind recommending how I would write the code to capture the page_title and apply it to a simple H3 header tag? I’ve tried a few different variations and it tens to break the page.

I wonder why you just don’t follow the docs:

Because what I am trying to do is not relevant to that article, as mentioned a number of times and even confirmed in this post by Teo!!

But if I understand correctly you want to display tge content page title in the layout page?

That is exactly what the article is about.

And of course it can be dynamic by just assigning a server connect action to the route and picking the page title from there.

I’m trying to display the content page title in the UI of the layout page, not as the HTML Page Title as SS rendered. This is different as per Teo’s response:

Also as per my responses in this article I don’t want to use the SC approach, it’s far too heavy for a simple dynamic work or two.

<h3> <%= page_title %> </h3>

Additionally @mgaussie I just use this approach because it’s easy for me and I started using this in 3.0 beta before the SC data was implemented.

That being said the overhead from retrieving it from a SC instead of the route is negligible. So you can perfectly follow the approach George and Teodor comment. The route and the SC are being processed on the server and then the data you want is being passed directly from the server to the browser.

Yes. Using a SC for that has some additional calls and loops but as said it is negligible.

Thanks @JonL

I did actually try this, and I have just tried it again - it breaks the page entirely for me. Not sure why, I’ve copied exactly as written. I’ll keep playing around. I have a few suggestions as you rightly say, I’ll be able to implement one of them. Thank you for your help.

What error do you get?

Hard to describe - the page just goes white with a heap of plain black text! No console errors.

I know what the problem is - I tested a page that I had not included the SS Data ‘page_title’ in and I get this failure. When I then added the page title as data for the route it works fine. So I just need to make sure each page has a title, or find some way of including a fallback/condition.

Try this.

<h3> <%= typeof page_title !== 'undefined' ? page_title : '' %> </h3>

But that will still render the h3 tag if page_title is not present in the route.

Or you could try this if you don’t want to render the h3 tag at all if page_title is not present

<%if (typeof page_title !== 'undefined') { %>
<h3> <%= page_title %> </h3>
<% } %>

For reference Wappler uses EJS templating with Express for nodejs. So if you want to dig into these options you can have a look at.

https://ejs.co

1 Like

Perfect, thank you so much @JonL!

1 Like

Hey @JonL

This is working well for me: <%=_(‘page_title’,locals)%>

I have one issue, I’m not sure if you’ve had the same issue. As I switch between pages, the title isn’t reloading. E.g. if I go from Account (with the correctly displayed ‘Account’ page title) to ‘Upgrade’ with Upgrade as the page title in the route, then it doesn’t actually change unless I refresh the page.

Any thoughts around this? Have you had the same issue and resolved it?

I am afraid I haven’t faced that issue. Is it inside a view?

Ok, no problem at all - I’ll keep digging.

It’s not no, it’s in the layout page header.

Is the site a SPA by chance. If that is the case, I have not been able to make it work either.

1 Like

Not strictly, no but I am using the templating engine and as the layout isn’t reloading the attribute isn’t changing (the title)