Displaying records


Im developing an application to get orders from a datebase.
I want to display orders information, such as order date, product name, product image, person name, row by row in the same screen.
What component should I use.
Or is there a way to create components (labels, buttons, images) at runtime?


So your going for a spreadsheet type thing on your screen?
Are you using firebase???
What component are you using to get the data?


I want to display them like facebook posts.
Yes, Im using firebase.


Hmm. Would you be interested in using the list view? I doesnt look the nicest but it gets the job done


This would be a great feature, but unfortunately doesn’t exist! :cry:

This is probably the best way to do it “natively”, but as an alternative you could look at using the WebViewer and a nice HTML/CSS front end?


Good Idea @Domhnall. Although I’m not sure how to do that :stuck_out_tongue:


dynamic table layout with any number of rows and columns


I’d want some zebra striping like you can get with Bootstrap and similar frameworks. Rather than importing all that code for just one feature there are lots of other examples that will “prettify” your output. I just did a search for “css zebra striping”

Best of all though would be to give you data a material design appearance. Again, a quick Google will turn up lots of options but if you go with this:
You can follow along with the #BestPractices article by @Helios:


thank you for the suggestions…
probably one day I will prepare an updated version…

also to select one of the rows and send it back in the WebViewString would be a nice feature, it just needs another event handler like this

tr.addEventListener ("click", function() { window.AppInventor.setWebViewString(this.innerHTML);});

(see also this modified html code by Handi zufaro, screenshot below)
in the meantime feel free to adjust the example to your needs…



Thank you for all.
The best way I think is to create components at run time. for example, creating labels inside the loop of the results to display them.
But as you said, this feature is not included yet. :frowning:I will try using WebView till THUNKABLE depelop that feature.



the new version of the example is now available


Thank you so much
I will try it