How to pass javascript variable into liquid fetch in portal ?

[huuhung]

Hi everyone !

I have a problem.

How to pass javascript variable into liquid fetch in portal ?

Please help !

Thanks !

[hardikv]

Hi @huuhung 

You can pass js variable like this:

value="{{proj}}"

--------------------------
If you like this post, give a Thumbs up. Where it solved your query, Mark as a Solution so it can help other people!

[chleverenz]

Hi @huuhung ,

the solution from @hardikv  works only, if your variable is stored in a liquid variable. It does not work at clientside javascript, because you pass in the variable at the client and the liquid is executed at the server.

So, either you know the value of proj on the server or you have to take another approach:

Either using the new fetch api call (currently preview) described unter https://docs.microsoft.com/en-us/powerapps/maker/portals/read-operations 

or create a new template, a pagetemplate and a page as decribed here:

https://colinvermander.wordpress.com/2017/04/17/dynamics-365-portals-use-liquid-to-return-json-or-xm... and the basics are described here (there is html rendered, but you can render json of course, too):

https://docs.microsoft.com/en-us/powerapps/maker/portals/liquid/template-tags#fetchxml

I use this approach very frequently so the portal has some "api services" andpoints for me which are queryable via javascript.

Hope this helps,

  Christian

[chleverenz]

Ah, and another more general hint: do not forget to pass in no-lock="true" in the fetch (if its ok for you). This dramatically enhances performance on all systems and prevents locks on the database...

[huuhung]

Thanks for reply !

I also entered {{proj}} but it's not work 😞

[huuhung]

Thanks for reply !

Can I do it like this?
{% assign test = proj %}
Because if I pass the value directly to the variable test then in the fetchxml sentence will be {{test}} then it work

[chleverenz]

Hi @huuhung ,

I'm afraid you can't.

The model of execution is diffrent: liquid code is executed on the webserver and the javascript is executed in the browser. So you need either to use the read web api (did not try yet) or set up a dedicated page which only serves json. Yo can pass in your proj with something like fetch("/myjsonpage/?proj=abcdef").then(function(result)...

and on the page carrying the code for the fetch you can read the parameter via {% assign myproj = request.params["proj"] %}

you should check whether a proj was passed in and then either return nothing or all, whatever fits to your needs.

Keep on portalling,

  Christian

[huuhung]

I pass "proj" parameter when there is an onchange event on select tag to get the value and then put the proj variable in the fetch statement

[huuhung]

[chleverenz]

Hi @huuhung ,

i attached a few files and images which may help. First, i created a template called levchr-dependenfetchservice with the content of fetchservicetemplate.txt. I set the contenttype to application/json which makes debugging for me easier 🙂

Then i created a pagetemplate for that webtemplate and from that pagetemplate a webpage. I can access that webpage now with a parameter called id. the call ist something like /dependenfetchservice/?id=936b419f-9f4b-e111-bb8d-00155d03a715 and the output is something like:

Then i created another template (which would take your function) which consumes that service.

The output of the service is mapped to an optionlist which is put in the targetselect. The code is also attached in fetchpagetemplate.txt .

The output after selecting an account was somthing like:

May be this example helps you to figure out how to select the project related stuff (which i of course do not have 🙂

Have fun,

  Christian

PS !Important! untick the "use header and footer" box for the servicetemplate. If you forgetto do that, you get an html page instead of a json output...