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

[mgaussie]

Another bump sir @Teodor - would you mind taking a look to see if this is an issue with layout pages in general (as per the other bug report on query manager). I feel as though I’ve had this working previously, but I just can’t manage to get a Content Page title to appear on the Layout Page (header).

[George]

I think Ben explained that one:

Dynamic page title from SC

Create a database table. Title and description are self explanatory. The pathname is used to filter the data. [image] Create a server action. For the step, use a single query filtered on the PathName == URL. [image] On the page, enter the Server Connect and choose the title and description. [image]

[mgaussie]

@George

I think Ben explained that one:

Thanks @George but I don’t want to do this using a SC - that seems massive overkill.

Surely we can set a value on the content page, that is carried through to the layout page using page parameters?

[Teodor]

I believe what you are looking for is explained in:

Sever Side Rendering with NodeJS

[mgaussie]

@Teodor

I believe what you are looking for is explained in:

Nope - as in my post - I read through this. From memory, this is helpful perhaps if you want to display template data on the content page, but not content page to layout page.

[Teodor]

I am sorry but i don’t understand what exactly are you trying to do then?
Isn’t it - use dynamic data on your content pages title/description meta tags? And if yes, the tutorial i posted shows exactly this. Same does what Ben explains.

Using server connect data there is also explained here:

Using Server Connect Data for Server Side Rendering in NodeJS

You already know how to setup your pages to use Sever Side Rendering with NodeJS. In this tutorial we will show you how to use Server Connect data in your page meta tags, such as page title and description. Overview In our example we will show you a dynamic product details page, where the product title will be displayed as page title and product description will be added to the description meta tag. We have a page listing our products: [Screenshot_3] When the details button is clicked, th…

[mgaussie]

Hey Teo, as per the title, really:

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

I’d like to display dynamic data FROM a content page (e.g. a content page page_title) in the header of the layout page, not display data from the layout page in the content page.

I might be poorly communicating what I’m trying to achieve, and if I am - my apologies.

Essentially what I’m trying to achieve is to display a dynamic page title in the header of our new app, this header sits in the layout page not the content page. The page title is then determined by which content page is loaded.

[Teodor]

@mgaussie

Essentially what I’m trying to achieve is to display a dynamic page title in the header of our new app, this header sits in the layout page not the content page. The page title is then determined by which content page is loaded.

When you say title are you referring to page <title></title> tags or are you referring to some random part of your layout page?

[mgaussie]

I really need to be more precise - that’s my bad - I can see the confusion now.

I’m talking in the UI of the app itself, I have the layout page which contains a side menu and a top menu. In the top menu (UI) I’d like to display a page title that comes from the content page. e.g.:

[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}}

[mgaussie]

Thanks Teo, that will work - and apologies for the confusion on my end.

Is that the only way to make this work?

E.g. we have the server side data functionality (as per your article) - we can’t draw on this and place within the layout page as an alternative to using a var on each page?

[Teodor]

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

[mgaussie]

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

[Teodor]

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

[JonL]

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

QoL for routing panel: Add data field in the properties panel(could be an advanced tab)

Show a field with the value of key “data” { "path": "/partner/register", "url": "", "routeType": "page", "layout": "partner/auth", "page": "partner/_register", "data": { "id": "partner_register", "i18nfile": "partner_register", "js": [ "dmxAppConnect/dmxValidator/dmxValidator.js" ], "css": [ "dmxAppConnect/dmxValidator/dmxValidator.css" ] } },

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