Reusability and passing data to ejs includes/partials

Wappler General How To
#1

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 ?

#2

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.

#3

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

1 Like
#4

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.

#5

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

#6

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

2 Likes
#7

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

1 Like
#8

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
#9

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
#10

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:

    image
    image710×682 29.6 KB

  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
#11

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

1 Like
#12

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
#13

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

image
image2084×927 48.8 KB

#14

Is it saved under the /partials folder?

#15

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

#16

I couldn’t find “Insert Server Side Binding” button (step 3). Where can I find it?

Edit: found it clicking in a blank area in Code View.

#17

Does this parameters can be used on a server connect action

#18

Yes of course if they are query parameters you define them under input / $_GET and if they are passed in the route then under PARAMS

1 Like
#19

will try this. Thanks

#20

Can you take a look to this? I dont understand if I am doing something wrong.