How to make a Dynamic Listview Using WebViewer - JSON

howto
tutorial

#1

First of all, I know I could charge you for this as an extension, but to advance in knowledge I prefer to give it for free …

What I need …?

  1. The Fabulous ef.js https://ef.js.org
  2. The amazing Materialice CSS http://materializecss.com/
  3. An Html File with the template that we will fill with data

Everything is included in the file that I am going to deliver
What I Do not Need: Jquery

I have put in the AIA, the 3 files that are needed, wants to say that you can program an offline app.

First you need to create an array in JSON, the array can be easily created with 1 function that I added,

the array is like this:

“icon”: “url of your image”
“title”: “Title in bigger size and darker font”
“a”: "Line1"
“b”: "Linea2"
“c”: "Line3"
“d”: "Line4"
“return”: “value that will return when you click”

The example was made in appinventor but it must work anywhere.
you will have to correct the location of the files

If you examine the html file you will learn to make any dynamic component, not just a list view, but Menus, Buttons, cards, and anything, you can even edit the html file and put the template to your liking.

If you are going to create an online APP, you do not need to create a JSON array, you can build an API and do a GET to bring the string in JSON, in this example I create a JSON, to show how it would be Offline, but if it’s online you do not need to create arrays, you can import them

@Taifun @CarlosPedroza27 @Andres_Cotes

listview.aia (34.7 KB)


#2

Felicitaciones Buen trabajo


#3

thank you for your contribution

to create the arrays looks somehow cumbersome… let’s assume, you have a list of 100 items… you don’t want to use the make_array procedure 100 times, do you? Therefore you might want to think about using a list of lists and convert the complete list directly into the target format …

Taifun


Trying to push the limits! Snippets, Tutorials and Extensions from Pura Vida Apps by Taifun.