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

[mgaussie]

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.

[George]

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

Sever Side Rendering with NodeJS

In this update you can use full Server Side data rendering for NodeJS! Your NodeJS template based web sites can fully empower now Server Connect for dynamic Server Side Data Rendering! What is Server Side Rendering Server side rendering is great for sharing content on platforms like Facebook, Twitter, LinkedIn and others which can’t read dynamic javascript content. The specific meta tags for each platform, as well as the general ones like title, description, author etc. can be rendered on th…

[mgaussie]

@George

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!!

[George]

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.

[mgaussie]

@George

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

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:

@Teodor

Ah, that’s a different thing.
Example: If you have a variable on your content pages called var1 then you can add this on your layout page:

{{content.var1.value}}

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.

[JonL]

<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.

[mgaussie]

@JonL

<%= page_title %>

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.

[JonL]

What error do you get?

[mgaussie]

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.

[JonL]

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

[mgaussie]

Perfect, thank you so much @JonL!

[mgaussie]

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?

[JonL]

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

[mgaussie]

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

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

[ben]

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

[mgaussie]

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

[jimed99]

@mgaussie

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?

Stumbled into this today - I take it the answer is it’s not possible to with SPA/Internal page settings or did I again miss a post?

[brad]

Are you using Node.js templating?

Sever Side Rendering with NodeJS

In this update you can use full Server Side data rendering for NodeJS! Your NodeJS template based web sites can fully empower now Server Connect for dynamic Server Side Data Rendering! What is Server Side Rendering Server side rendering is great for sharing content on platforms like Facebook, Twitter, LinkedIn and others which can’t read dynamic javascript content. The specific meta tags for each platform, as well as the general ones like title, description, author etc. can be rendered on th…

[jimed99]

I have, with one exception - I manually added my the data into the fields on the content pages.

And now reading this - I’m betting the answer is to have the table setup for the server interaction which like Ben described here https://community.wappler.io/t/dynamic-page-title-from-sc/31268/3 which will reset the title.

[sbecks]

I know this is an old thread but it looks like one without a definitive conclusion! I have the same issue:

On a Node JS page the page name is shown here twice, it comes from server side template variables. The top one is in the layout page, bottom is in the content page:

When I change page (using an internal link) I get:

The pageName changes in the content page but not in the layout page. I’m using <%=_('pageName',locals)%>
I’ve tried using this in the layout page:
<%=_('content.pageName',locals)%>

I broadly get why it’s not working, but for all other data it seems possible to access it across layout/content/includes etc. It seems like there surely must be a way to access the new content page name on the layout page from the server side data? I’ve searched and searched and can’t find a definite answer!

I can work around by adding in server connects to get the same data in but it seems like a duplication and I’m bumping into issues because of this approach.

Is there any way to get this to work, or is it just not possible?