How to send a query parameter to a (server side data) server action and use the output through EJS

It took some time to understand server side data, I figured I’d share my documentation to help others :slight_smile:

In this example I’m loading the server action on a content page. I want 2 things:

  • to have the output of a particular server action available even before the page is loaded. (In my example, the output is an account_id of a stripe connected account. But you can use this flow for any data that you want from the database BEFORE the page is rendered.)
  • to use the query parameter of the page (a checkout_id) for this server action.

Step 1. Create a content page and catch the query parameter, for me it’s :checkout_id

Step 2. Create a server connect, for me it’s called Checkout_get_stripe_acc
Step 3. In the server connect we want to use the the query parameter from step 1, we can do that by defining $_PARAM.checkout_id

  • (This is populated with whatever is in the url. In my example the url is /check-out/1 so the value of $_PARAM.checkout_id = 1)

Step 4. The output of the server connect can be anything you want. In my example I made a Set Value with the name sc_output and value ‘checkout $_PARAM here:’+$_PARAM.checkout_id

Step 5. On your layout or content page, load your server connect under app → Server side data :

Step 6. In your routes.json file add the following code: “data”: {“ejsVar”: “{{sc_output}}”} it should look like this:

  • The ‘ejsVar’ is the key you can request on the page. note: don’t use dashes in the name (and value?) this gave me issues before with displaying it on the page.
  • The {{sc_output}} is the variable that is being output from step 4

Step 7. Last step, to display on the page try one of these 2 methods (not sure when to use which one):

  • Use syntax: <%= locals.ejsVar %>
  • Use syntax: <%= ejsVar %>

image.png

Step 8. For each method replace ejsVarKey with the key here

Tips:

To easily get the right variable name from your server connect:


2.

Full example of using the input in the database query and using the result on page:

  1. In server action:

  1. In routes.json

  2. On the page:

4 Likes

Thank you for detailed instruction! It definitely helps to understand the mechanics of SSR in Wappler better.
Although, I want to mention some details.

You don’t have to define variables via code view (step 5).
You can define it via UI in Layout settings in “Define Template Data”, as it shown in this Docs: Sever Side Rendering with NodeJS

After that it will be possible to bind this defined variables to server data in the Page settings (App -> Server Side Data): Sever Side Rendering with NodeJS

Data will be available on both Page and Layout by the method like <%=_('yourVariableName')%>

Hey Nick, glad to see someone get something from it a year later :smiley:

You don’t have to define variables via code view (step 5).
You can define it via UI in Layout settings in “Define Template Data”, as it shown in this Docs: Sever Side Rendering with NodeJS

I believe this puts everything in the ‘meta’ object though. So it’s not technically correct. But would probably work fine.

I’m referring to this:

1 Like