Reusability and passing data to ejs includes/partials

Using this for several pages. This example is a page for displaying users and CRUD.

Index page displays the user table and includes partials (modal, header).
modal.ejs has it’s own include which is the form to be rendered.
Both these partials are passed data on page load.

Header.ejs/Modal.ejs data. Works as intended.
<%- await include('/settings/partials/header', Object.assign({title: "Users",btnText: "Add User"}, locals)) %>

<%- await include('/partials/modal', Object.assign({formPath:"/settings/users/partials/userForm"}, locals)) %>

modal.ejs hardcoded to perform create user.
<%- await include('/settings/users/partials/userForm', Object.assign({formAction: "/api/v1/user/create"}, locals)) %>

I would like to replace :

  • ‘/settings/users/partials/userForm’ with a variable that allows me to use any form. <%=formPath %> holds that value but page breaks.

  • “/api/v1/user/create” with a variable to insert the api/sc call

Have tried with various methods resulting in either breaking the page or “breaking” the variable.value
Maybe it could be fixed with the correct escaping etc.

What is the formatting to insert {{variable}} or <%= variable =%> into the include strings without breaking the page ?

This is the App Connect (client side) notation.

This is the server side notation similar to <?php $variable ?>

I have found the server side notation to have a longer execution time that using App Connect.

The problem is that I cannot seem to find the right syntax for them to be placed into the include string.

modal.ejs with include string to load correct form:
<%- await include('{{formPath}}', Object.assign({}, locals)) %>

How to get the include to interpret the {{formPath}} variable ?
Have tried without curly brackets, with or without parenthesis

That piece of code is evaluated on the server before rendering on the browser. App connect is not available for you so handlebars evaluation will not work.

What about using <%= formPath%> ?

It can also hold the path if passet through <%- await include('/partials/modal', Object.assign({formPath:"/settings/users/partials/userForm"}, locals)) %>

But if i try to put that in the include the page will not even save

Check this post. There is an example similar to what you are trying.

2 Likes

I’ll have a look.
Thanks JonL :+1:t2:

1 Like

That did it :wink:

Simply define it in routes.json

  "data": {
    "formPath": "/settings/users/partials/userForm"
  }

And use it in the view:

  <div class="modal-body">
    <%- await include(formPath) %>
  </div>

Awesome @JonL :slight_smile:

1 Like

Thank you, JonL !

That is a very useful Mini Tutorial on routing & using dynamic data to update page views while also leaving nothing to chance by specifying the JS and CSS files to use specifially for that view.

I’ve bookmarked this very useful info!

1 Like

I’m not sure why you guys are doing so difficult as data bindings in partials as parameters are already available. So there is no need to hand code this.

It works just like the rest of the Server Side Data Bindings in NodeJS:

So you just:

  1. Define a input data for your partial by using “Define Template Data” on its root node:

  2. Then when using this partial - just enter its data in the properties inspector:
    image

  3. in the partial itself you can just bind the parameters, by selecting a text place and:
    image
    image

That’s all!

2 Likes

Ooops. Over engineering again :slight_smile:
Will definitely check this out @George.
Thanks :+1:t2:

1 Like

To be honest I feel that getting data from the route is quicker and simpler for this use case. Where your route will define extra params specific to that route and not to other.
However it’s a shame this is not supported from the UI.

I would like to replace :

‘/settings/users/partials/userForm’ with a variable that allows me to use any form. <%=formPath %> holds that value but page breaks.

If the form can change dynamically he will have to create a specific Server Connect just to identify which form he needs to pass. On the contrary if he sets this info directly in the route it will save him a lot of time.

1 Like

@George why does your screenshot show Define Template Data in your partial but mine doesn’t?

Is it saved under the /partials folder?

Subfolder in /partials. Let me move it to the root.