Displaying data from AirData Query response on UI

Hi guys,

I have a situation where I need to access three or more columns from airdata on behalf of a value passed from a textbox from UI. Afterwards, I need to display the query resultset on another page in different label controls. For e.g the query would look something like:

select column1,column2,column3 from airdata where column1=“Values comes here”.

Now, I have successfully created the AirData Query data flow and if I open the debugger, data seems to be returning fine from Airdata. However, I’m not sure how exactly I can display the result set on the UI. Is there a specific technique for that?

Any help would be appreciated! Thanks.

1 Like

Hello, and welcome to the Airkit community!

It sounds like you have your data flow working right. Let’s say we have a simple table called customer_info:

Next create a data flow that returns the full set of data from a piece of data - say the phone number, like this:

Now go the the web flows and create a variable on your web page called customer_data of type customer_info, add a field for the phone number with a binding of customer_phone and a submit button.

In a new web page, create another variable of type customer_info also called customer_data. For this example, you could create a simple header that uses the first name of the returned object. Create a text filed on that page, and in the control properties of the text, type this: "Hello, {{customer_data.first_name}}".

With that set up, go back to the first page with the button on it. On the action of the submit button, call the data flow, passing the customer_phone input as the variable and binding the return to customer_data. Then add another action that navigates to your new page and pass it the customer_data variable.

If you preview the app, you should see that the data you collect on the first page sends the info to the second page:

Hope this helps! Please let us know if you run into any problems.

Depending on precisely what you’re looking to do, it might help to look into adding the result of an AirData query into a repeater. There’s a doc on querying AirData here, and a doc on inserting repeating elements into your UI here.

1 Like

Excellent point, @aldren. Another approach worth checking out is that you could bind the results of the data flow to a session variable (like session.customer_info) so that you don’t need to create the customer_data variable on the first or second pages, or pass it from one to the other. It will be available to all views.

Here’s a video of me walking through how to take data from an Airdata request and passing it to a repeater on the UI. From there, you can style your container list/repeater into nice tables etc. Is this what you’re looking for @Haris.Khan1?

You can also find the .zip file or my export attached.
Display_Data_from_Airdata_Query-2022-06-10T18_04_32.391Z-full.branch.zip (17.7 KB)

Hi folks,

Thank you so much for the detailed help on this @ismaen and @ackerman ! So, essentially my desired outcome is exactly the same as @ismaen mentioned. I need to display a list of results in a repeater or table like structure. I followed the video that you just posted, however, I’m facing an issue here:

When I try to access the field name from session list object and bind it to a label inside a container just like you did, the intellisense doesn’t automatically pick up the “item.Customer_Name” for me.

Also, if I anyhow neglect this and bind the label to item.Customer_Name (Customer_Name is my column name in AirData), the app still doesn’t show any data on the UI upon clicking the submit button. Just a blank screen.

Am I missing something here? Any guidance would be appreciated. Thanks again!

Hey @Haris.Khan1, glad these were helpful! If auto complete is not working on the session variable, I would double check two things - first that you returned the list at the bottom of your data flow (check @ismaen’s video from 1:00 to 1:15). If that looks good, make sure that on the submit button in your UI that you’ve bound the return of the data flow to a session variable. Check out the video from 1:30 to 2:00. He opens up the global variables panel and created a variable called Contacts that was a list of the data object type Contacts.

If both of those things seem in tact, could you look in the Airkit console output in the preview for any errors? If you see any, please click on the error and and take a screen shot for us to check.

If you don’t see that by default to the right of the previewed app, click the double arrows at the far right top of the preview screen to expand it:

Hi @ackerman , I just double-checked both of the items that you mentioned and yes, both of those steps are exactly the same as in the video. I created a global list variable and also made sure to bind the output of data flow to that variable. Data flow seems to be running fine even after transformation. However, no data shows up on UI. This seems like a binding problem with label as it somehow just doesn’t pick up “item.Customer_Name” perhaps. Checked the console output for errors too. Attaching screenshot:

@Haris.Khan1 can you send screenshots with your configuration of your container list from studio?

Hi @ismaen and @ackerman , thanks for the help. That got the job done. I figured out I was entering “item.Customer_Name” with quotation marks while binding it to the label and that was the reason why it wasn’t showing up. Removing the quotation marks did the job done!

Also, is there a way that we can display the resultset in a tabular form instead of a repeater list? My requirements specifically relates to a table result view so I was looking for an option where I can show 3 or 4 columns from my Airdata store in a table view for every row in the result set.

1 Like

Hey @Haris.Khan1, that’s great that you found that and got it working! We don’t have a tabular component in the studio, but you can pretty easily display the results in what looks like a tabular view. I’ve demonstrated in this video, and attached a zip that you can import into the studio to work with as well. Hope this helps!

Displaying_tabular_results.zip (17.3 KB)

1 Like