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

Wappler General Need Help
19

@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