App Inventor and HTML/JavaScript with Input Parameters


App Inventor and Dynamic Table Layout

Thank you Christopher for being the sponsor of the App Inventor 2 version!

It was asked in the App Inventor Forum, how to display a table in App Inventor without knowing how many rows will be supplied. And let me add to this requirement, without knowing how many columns will be supplied!
App Inventor together with embedded HTML/JavaScript can do that!
Thank you Craig! Your JavaScript example helped me to set up this solution.

You can use this example for your projects without need to adjust anything in the HTML document. And: it works with any desired number of rows and/or columns! Well, if you do not like the colors etc., there are lots of possibilities you can adjust with CSS in the header of the HTML document.

New You also might be interested in my editable(!) dynamic table layout example!

App Inventor Blocks

Using the WebViewString property!

The new WebViewString property helps to simplify the example and we can pass parameters to the HTML file stored as asset inside of the app, which was not possible before. Also there is probably no size limit to display the table anymore (someone wants to test this with a very large table?)


Screenshot


HTML/JavaScript

<!doctype html>
<head>
  <meta name="author" content="puravidaapps.com">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>Table Layout</title>
  <!--more layout possibilities see here: http://www.w3schools.com/css/css_table.asp-->
  <style type="text/css">
   table       { border-collapse:collapse; }
   table,th,td { border:1px solid green; }
   th          { background-color:green; color:white; }
  </style>
</head>

<body>
  <div id="myTable"></div>
  <script>
    // get the table to display from the window.AppInventor object and split at new line
    var urlArray = window.AppInventor.getWebViewString().split("\n");

    var doc = document;
    var fragment = doc.createDocumentFragment();

    for(i=0;i<urlArray.length;i++){
      var tr = doc.createElement("tr");
      // split at comma
      var rowArray = urlArray[i].split(",");

      for(j=0;j<rowArray.length;j++){
        if ( i == 0) { var td = doc.createElement("th"); }
        else         { var td = doc.createElement("td"); }
        td.innerHTML = rowArray[j];
        tr.appendChild(td);
        fragment.appendChild(tr);
      }
    }
    var table = doc.createElement("table");
    table.appendChild(fragment);
    doc.getElementById("myTable").appendChild(table);
  </script>
</body>
</html>

Do you need help with your App Inventor project?

I can help you: for one hour I charge 25 USD.
Please contact me at info [at] puravidaapps [dot] com for details!
For questions about App Inventor, please use the App Inventor forum. Thank you.

Questions and Answers

Q1: How would you use this example and populate it with a list of lists?
A: So your question is: how to convert a list of lists into a table in csv format? This is very easy: just use the list to csv table block for that.

Q2: Hi Taifun, the new dynamic table tutorial was tested by me and and i got an ammount of 19763 rows by 58 columns of data, then it starts to lag the device a lot (1Gb RAM 1.2Ghz CPU), just a simple tablet.
A: Great! Thank you for your feedback.

Q3: This does not work on other mobiles when they run my App. When I set development to false my App can not find the table.html file. Please tell me how does this file get loaded onto the android_asset directory.
A: During development, you have to use the development path, for production (apk file) you have to use the production path. Therefore make sure to set the flag development to false before building your app.

The directory /AppInventor/assets is only available on your development device. These are temporary files used by the companion app. While building the app, the assets are stored inside the app, which is the /android_asset directory. Only on your development device the temporary directory is still there and you can access it, so this is why there is some kind of confusion.

So if you do not set the flag development to false before building your app, you will still be able to run the apk file on your development device, but nobody else, because other people do not have the temporary directory on their device. Hope that helps.

Q4: I found a minor problem of the table generate. There is a small rectangle appear at left bottom corner, see screenshot
.

A: Make sure, the csv table does not end with \n (new line character), else you get that small rectangle in the last row of the table. Alternatively you also can remove the last character (here the new line character) like this, see screenshot below.
.

Download


If you find this example helpful and you are using it in one of your projects,
be nice and donate a small amount!

Donation amount:

or donate some mBTC to Bitcoin Address:
1Jd8kXLHu2Vkuhi15TWHiQm4uE9AGPYxi8
Bitcoin

Thank you! Taifun
 

Download aia file for App Inventor
Back to top of page ...

Creative Commons License
This work by Pura Vida Apps is licensed under a Creative Commons Attribution-ShareAlike 3.0 Unported License
with attribution (name=Pura Vida Apps and link to the source site) required.


Home | Snippets | Tutorials | Extensions | News | Forums | Links | Search | Contact