Query a REST API with Form Fields in Composer app and show result


#1

I’ve set up an app with a REST API datasouce. I’m trying to figure out how to build an interface to query the API via a form for example, enter origin and destination in two fields, submit and then pull up the results. My API accepts query parameters on the entpoint ie. myapi.com?origin=TX&destination=CA and will return JSON result.

Could you please provide some direction?


#4

I created a tutorial video that shows you how to do this, check it out!


#5

Thanks Harri this is good stuff,

I have most of it working but can’t seem to return a single result (seems that I do not need a repeating list item) in the “results page” based on my API.

I have set up my endpoint to return a single result based on the 2 parameters entered (origin and destination). Below is an example of the response when using query parameters in my endpoint like: http://myendpoint.com/?origin=A&destination=B

[
{
“id”: “sample id”,
“origin”: “sample origin”,
“destination”: “sample destination”,
“max_calendar_days”: “sample max_calendar_days”,
“min_calendar_days”: “sample min_calendar_days”,
“lane_manager”: “sample lane_manager”,
“service_type”: “sample service_type”
}
]

I followed your tutorial but am a bit stuck on how to set it up to return the result as above in the second page of the app.

Thanks in advance!


#6

Did you whitelist the query params also for the GET action in the Customize HTTP actions section? It’s separate from the GET collection action.

That said, fetching a single record only works based on ID at the moment, so you would actually want to make an ALL query and have the component repeat based on the data – since your query will only return one entry, only one instance of the component will be rendered. So it’s kind of a hack but should work fine.

If you want to display more data than is available with the default components, you’d want to code a custom HTML component that takes all the fields as parameters, see http://composer-docs.appgyver.com/docs/creating-custom-components for details.