How to build a dynamic partial?

In my nodejs content page, I have 4 tables with same content inside. The only changes in this bootstrap table is that the repeat array is filtered based on a value. Now, I want to build these tables as a partial and send the filter value as a parameter for this partial. Remember, that there are multiple calls for this single partial in the same content page. How can I achieve this in NodeJS ?

From what I know, you can’t. The binding inside the partial is sort of static.
So if you want to include the same partial 4 times on the same page, you will have to create 4 partials.

OR, you can keep the binding part on the page, and rest of the tbody can come from the partial.
But in this case, all tables would expect same column names in the parent binding query, just different data.

Where does the filter come from?

By filter, I meant the “where” function.

Eg: array.where(“field1”,“value”,"==")

Sorry I should have been more specific. Where does the filter value come from? Is it dynamic? Or does it come from a set of known values?

Its coming from a server action, its dynamic.

I haven’t tried this but the basics are explained here.

You need to pass to the partial(which is rendered server-side) your filter value coming from the SC loaded on route(and not via AJAX component).

Is that even possible? The link is for rendering content page from what I see.
I have a similar use case comping up shortly. If you could point to where it says that we can pass values to partials server-side, I might try it out.

EJS partials take parameters.

<%- include("example",{title:"hello"}) %>

You can use title in your partial and it will contain “hello”. You just need to make sure that any dynamic info passed to the partial is available on the server before rendering the partial. So App Connect SC api call won’t work as it’s AJAX.

You can also make use of app.locals to read server data in the partial if you want.

You can find the info in the include section of EJS docs and generic expressJS docs.

Damn. That looks like the solution to the original problem.
Will definitely see if I can make it work for my upcoming problem. Although, unlike this, my data source is different and not based on filters - but still a cool thing to learn.

To be honest, I have barely read anything about NodeJS or ExpressJS. Wappler just took all the complexity away from setting the server side of things, so never bothered learning all this - unless I get stuck somewhere. I even bought a course, but never got around to watching it.
Guess low/no-code makes me a less informative developer. :sweat:

1 Like

Doesn’t really seems to be working ? Could you share a screenshot or an example ?

What have you tried?

Can’t really use this Wappler partial code.

Awesome, @JonL!!!

If I generate a form in the parent page and copy it to the partial, it works.

But if I pass the object data to the partial in the include statement, when I run Bootstrap Form Generator I cannot see my object.

Is there a way to define the partial “parameters” in order to use them inside the partial?

Edit: answered here Bindings missing inside partials by @sid

Actually, it seems like it is possible to use one partial several times on one page and show different results.

You just put each partial inside the repeat. And place the data you need in the parameters of the repeat.

Here is a simple example.

Partial itself:

<p dmx-text="title">Enter your content here</p>

Yes. It has always been possible. The trick here is that binding should be same, like you have discovered.
Working with partials is not really everyone is comfortable with… understanding the binding thing to make is re-usable on same page is even more complex. :sweat_smile:

Cool that you got it working. :+1:

Indeed, it can be tricky. :upside_down_face:

To take advantage of partials you need to understand the server-side of it, how to use it in a hybrid environment(frontend+backend) and what the UI is capable of and its limitations regarding what it is aware of. I understand it might not be easy for everyone and that is why @sid mentioned is not for everyone. But it’s a pretty powerful feature.

Eventually everything makes sense but until the switch clicks in the brain it might take some time.