Dynamic Listview in JavaScript Using WebViewer JSON

javascript

#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

listview.aia (34,7 KB)


Custom Listviews
(Михаил) #3

Its good solution! Can you make like solution about side menu?


#4

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


#5

i will modify to don’t need JSON,


#6

I’m going to do another, for the side menu, but your whole app would have to be on the web page, because it would have to occupy the whole screen, to be functional


(Михаил) #7

How it will be work without JSON? Taifun write about make_array procedure, but i can get JSON from server side… Its good for me


(KaFa) #8

Is it possible to use a image from the assets?

I can’t test it now… :sleepy: :sweat_smile:


#9

yes you can use a local image…
but don’t put file:// because the image will be in the same directory that the html file then only put the file name.

keep in mind that the file that I uploaded was made in appinventor

see this post too


(KaFa) #10

The WebViewer is not loading the list… I need a solution for this…

Can anyone help?


(KaFa) #11

How can I change the background of the list?
I have tried something but it works only for the background of the webviewer and not for the list.

I‘m not sure in which line I must change something…


(Kanishka Chakraborty) #12

Set Background Color to None. Place ListView in Arrangement. Set Arrangement Background to whatever you want. :grin:


(KaFa) #13

I think you don‘t know what I mean…

Have you read the topic?? I think not so… :sweat_smile:


#14

You have to edit the HTML file and put some lines inside < body> tag

Example
<style type="text/css"> .collection .collection-item {background-color:#red;}</style>

will show the list like that
image

Also you can change this style to transparent and the list will take the color from the body

<style type="text/css"> .collection .collection-item {background-color:transparent;}</style>

something like that
image