It took some time to understand server side data, I figured I’d share my documentation to help others
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 :
- (This adds an exec to your app/config/routes.json ):
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 %>
Step 8. For each method replace ejsVarKey with the key here
- Result:
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:
- In server action:
-
In routes.json
-
On the page:
Last updated: