I have been struggling with this, any help would be greatly appreciated. I have attached a gif for easy reference (click on the gif to see clearly). Here is what I’m doing:
Created a server action called “userOrders”, added an “API Action” component in the action step, connected to my API, making a GET to pull data
Now, on my page orders.html, I have added a Server Connect component and I have chosen this “userOrders” action
Now, in the browser, I logged in to my app, and it took me to the order.html and I can see in console that the Server Component has used the linked “userOrders” server action and pulled data from my API successfully.
But, this data, in wappler, I’m unable to add it to my table that has repeat children (followed this doc that covers displaying data from a server connect - https://docs.wappler.io/t/displaying-dynamic-data-on-your-pages/2871). When I chose the table cell, and try to link dynamic data from the server connect component, the fields that my API returns are not available at all, so I’m unable to link it.
Please advise how I can achieve this? Any hacks.
I think when I’m trying this in wappler, the orders.html page is unauthenticated (header token is a session variable in my API action from the login page), so the server connect component in the page is not able to display the fields.
But I did click on “Define API Schema” and added a valid header token and was able to fetch the fields. Are these fields not passed to the server connect component in the page so that I can link them as dynamic data and display them?
You should see the data. I’m not an API expert - fortunately there are others here who are - but it looks like it’s set up correctly. You coul d try restarting Wappler to see if it helps.
Thanks @TomD, API fetch is all good, data is there. My issue is displaying this on my page through the server connect component by dynamically linked the data in a table (with repeat children),.
I did, but no luck. I think have a big gap in understanding the abilities and possibility w.r.t server vs client components. “API Action” component can be added on both server as well as client side…
Ahh yes, I missed that in your original post…sorry about that. I’m assuming you saved the file as well. I suppose as a troubleshooting step you could assign the results from the api connection using a Set Value command and output that to see if it shows up in the editor on the client side.
And then, if you are just bumping into a bug, report it, and to keep moving you can type the value you need directly into the editor instead of selecting it via the GUI.
I’ve not yet had a need to use the api action on the client side. I prefer to push as much as possible to the server to keep the heavy lifting away from potentially slower clients. Also keeps token and keys away from users.
Login page works perfectly, and in the login page's form, I have added dynamic events to display an alert about wrong login credentials (if unauthorised), or display an alert about successful login and goto my next page orders.html.
I have the second page orders.html which fetches records for the logged-in user
In this page, as per my original post, I have added a server connect component that's linked to the server action "Security/userOrders"
This server action "Security/userOrders", makes an API call to GET the records for the logged-in user, and the response is a json object with all the data
In this action step, I pass the token (that I saved in my login page as a session variable) in the header of the API call {{'Bearer '}}{{$_SESSION.SID}}
The problem here is that in wappler, the token is not passed from the login page to the orders page. So, when I click on "Define API Schema", the header field is empty
When I go to my orders page, click on the Table Body to add the expression connecting to my server connect (that's wired to the above server action), I'm able to see the schema.
Now, I open each of my table cells, and I'm able to link them to dynamic data (fields from the api schema). This means, I'm able to solve the original issue of this thread.
When I test my app on the browser, the data is getting displayed in my orders page as expected. Because, I firstly login, which passed a token to the orders page. This page fetches the data (sends the token in the header of the api call) for the logged-in user and displays it perfectly.
But, in wappler, because the token is not passed between the pages, the data doesn't gets displayed in the page for me to further design how the table has to be rendered.
Unlike database, where the connection (via FTP) is maintained at a project level, when dealing with API, there is not project level settings to save this kinda authentication details (like a token). Or any means to pass the token between pages out-of-the-box during development/design in order to truly build the pages with dynamic data. I believe this feature request is related to this limitation - App connect component to access Server Sessions
As a hack, this is what I did to overcome this limitation. I added an additional header hardcoding my token (left bottom of the below screenshot), so that this page is authenticated and data is displayed in my design panel, so that I can continue with designing this page dynamically with real data. I will have to remember to remove this hard-coded header in production from all such pages.
Here is my takeaway from trying Wappler for the past few days:
If you are building your web app connecting to database, then it's a breeze, as there are a bunch of server connect components for all things like (from the docs):
In spite of the above limitations, I think I will still go pro with Wappler, I think it's still the king ! I hope there will be better API support (out-of-the-box), as microservices architecture is a happening thing.
Hi @KaseyL, over the last 5 months, my wappler skills have increased to a great extend. I have managed to call & use API responses in my page successfully.
If you can be provide more details on where you are stuck with some sample code or screenshots, I might be able to assist you better.
With what you have described, you have difficulty passing API responses from server to client-side.
On server-side, ensure you have got the API working (right URL, passing method, query & headers if any etc), most importantly schema is defined and you saved it. Ensure you have output enabled in the API call.
On client-side, you have added a serverconnect, and then “select server action” and choose your server action (one dealing with the API). What do you see in your browser dev tools (network tab)?
All the best, have a little patience & you will go a long way.
Awesome, glad to hear things have progressed well for you!
So what I am attempting to do seems very similar to what you were doing above. I am using a 3rd party Auth management system called Backendless. Because auth is managed by a 3rd party source I will need to process the JSON output and do something with it, like eventually query more user settings, but for now, I would like to just display the username on a redirect page. Here is the flow I am looking to achieve:
User comes to login page, fills it out and submits the form.
API Action sends login info to 3rd party auth tool and confirms or denies user
Upon confirmation I need to process output JSON to find name
Send name to Front-end
Server Action then redirects user to app ‘homepage’ where it displays their name
So far I have successfully completed up to step 3. Using the server action I have confirmed the user and see the output. Using the ‘Define Schema’ I can process the output and pull out only the name. After that, I’m kind of at a loss as to what to do.
I’m struggling with sending data to the front-end because this is called only when form info has been submitted - is there a way to tie the server connect and form together? Or do they have to be called separately so I would be making two different API calls?
If you named your form as "login_form", I assume you are seeing the name as output on your browser network tab under "login_form"?
If so, in your front-end, for a paragraph, the data picker should show "login_form", and under that you should see the output to bind it. It will look like this:
...
from all such pages.
! I hope there will be better API support (out-of-the-box), as microservices architecture is a happening thing.