Hi,
I have a vertical scroll arrangement layout. inside I have 20 HorizzontalArrangement in each of which I have 4 buttons whose names are neatly B01, B02, B03, B04,
B05, B06, B07, B08 etc ....
There are therefore 80 buttons.
With a SQL query I extract data from a database and based on these I have to change the properties of some of these buttons.
Is it possible to parameterize the name of the buttons or do I have to test them all to identify the ones to be modified?
To be clearer, the file I extract from the query is a sequence of 0.1. If the seventh value is 1 I know that I have to modify the attributes of the button placed in the third position of the second row (button called B07).
Thanks
80 buttons is not a nice interface. Why not use ListView instead of buttons?
Hello Biagio
That is a lot of buttons - what would the attribute changes be?
Hi, I have to foresee 20 rows with 4 buttons for each row to visually select a time on a table. I have already simulated it and it is the interface suitable for my purpose. With listview I would have to put one per line and it would be unfriendly
Hello Chris,
background color and enable/disable.
...did you try the sample project?
... Once you understand that example, I will post a more advanced version that changes the button attributes.
I'm going to show @ChrisWard's secret technique here for the benefit of the rest of us browsers.
<!DOCTYPE html>
<html lang="en-GB">
<head>
<title>Buttons80</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
<style>
body {margin: 4px; width: 100%;}
body {background-color: #FFFFFF;}
table {width: 100%;}
table {table-layout: auto;}
table {font-family: Arial, Helvetica, sans-serif;}
table {border-collapse: collapse;}
tr {border: 6px solid; border color: #FFFFFF;}
tr:nth-child(even) {background-color: #3C3C3C;}
tr:nth-child(even) {color: #E2E2E2;}
tr:nth-child(odd) {background-color: #3C3C3C;}
tr:nth-child(odd) {color: #E2E2E2;}
tr {Height: 54px;}
tr {font-size: 18px;}
td:hover {background-color: #0000FF;}
td {vertical-align: middle;}
td {padding: 4px;}
td {border: 6px solid;}
td {border-color: #FFFFFF;}
</style>
<script>
function Clicked(result) {window.AppInventor.setWebViewString(result);} //For App Inventor
//function Clicked(result) {alert(result);} //uncomment for Browser
</script>
</head>
<body>
<div style="overflow-x:auto;">
<table>
<col style='25%'>
<col style='25%'>
<col style='25%'>
<col style='25%'>
<tr><td onclick="Clicked('1')" style="text-align:center">B01</td><td onclick="Clicked('2')" style="text-align:center">B02</td><td onclick="Clicked('3')" style="text-align:center">B03</td><td onclick="Clicked('4')" style="text-align:center">B04</td></tr>
<tr><td onclick="Clicked('5')" style="text-align:center">B05</td><td onclick="Clicked('6')" style="text-align:center">B06</td><td onclick="Clicked('7')" style="text-align:center">B07</td><td onclick="Clicked('8')" style="text-align:center">B08</td></tr>
<tr><td onclick="Clicked('9')" style="text-align:center">B09</td><td onclick="Clicked('10')" style="text-align:center">B10</td><td onclick="Clicked('11')" style="text-align:center">B11</td><td onclick="Clicked('12')" style="text-align:center">B12</td></tr>
<tr><td onclick="Clicked('13')" style="text-align:center">B13</td><td onclick="Clicked('14')" style="text-align:center">B14</td><td onclick="Clicked('15')" style="text-align:center">B15</td><td onclick="Clicked('16')" style="text-align:center">B16</td></tr>
<tr><td onclick="Clicked('17')" style="text-align:center">B17</td><td onclick="Clicked('18')" style="text-align:center">B18</td><td onclick="Clicked('19')" style="text-align:center">B19</td><td onclick="Clicked('20')" style="text-align:center">B20</td></tr>
<tr><td onclick="Clicked('21')" style="text-align:center">B21</td><td onclick="Clicked('22')" style="text-align:center">B22</td><td onclick="Clicked('23')" style="text-align:center">B23</td><td onclick="Clicked('24')" style="text-align:center">B24</td></tr>
<tr><td onclick="Clicked('25')" style="text-align:center">B25</td><td onclick="Clicked('26')" style="text-align:center">B26</td><td onclick="Clicked('27')" style="text-align:center">B27</td><td onclick="Clicked('28')" style="text-align:center">B28</td></tr>
<tr><td onclick="Clicked('29')" style="text-align:center">B29</td><td onclick="Clicked('30')" style="text-align:center">B30</td><td onclick="Clicked('31')" style="text-align:center">B31</td><td onclick="Clicked('32')" style="text-align:center">B32</td></tr>
<tr><td onclick="Clicked('33')" style="text-align:center">B33</td><td onclick="Clicked('34')" style="text-align:center">B34</td><td onclick="Clicked('35')" style="text-align:center">B35</td><td onclick="Clicked('36')" style="text-align:center">B36</td></tr>
<tr><td onclick="Clicked('37')" style="text-align:center">B37</td><td onclick="Clicked('38')" style="text-align:center">B38</td><td onclick="Clicked('39')" style="text-align:center">B39</td><td onclick="Clicked('40')" style="text-align:center">B40</td></tr>
<tr><td onclick="Clicked('41')" style="text-align:center">B41</td><td onclick="Clicked('42')" style="text-align:center">B42</td><td onclick="Clicked('43')" style="text-align:center">B43</td><td onclick="Clicked('44')" style="text-align:center">B44</td></tr>
<tr><td onclick="Clicked('45')" style="text-align:center">B45</td><td onclick="Clicked('46')" style="text-align:center">B46</td><td onclick="Clicked('47')" style="text-align:center">B47</td><td onclick="Clicked('48')" style="text-align:center">B48</td></tr>
<tr><td onclick="Clicked('49')" style="text-align:center">B49</td><td onclick="Clicked('50')" style="text-align:center">B50</td><td onclick="Clicked('51')" style="text-align:center">B51</td><td onclick="Clicked('52')" style="text-align:center">B52</td></tr>
<tr><td onclick="Clicked('53')" style="text-align:center">B53</td><td onclick="Clicked('54')" style="text-align:center">B54</td><td onclick="Clicked('55')" style="text-align:center">B55</td><td onclick="Clicked('56')" style="text-align:center">B56</td></tr>
<tr><td onclick="Clicked('57')" style="text-align:center">B57</td><td onclick="Clicked('58')" style="text-align:center">B58</td><td onclick="Clicked('59')" style="text-align:center">B59</td><td onclick="Clicked('60')" style="text-align:center">B60</td></tr>
<tr><td onclick="Clicked('61')" style="text-align:center">B61</td><td onclick="Clicked('62')" style="text-align:center">B62</td><td onclick="Clicked('63')" style="text-align:center">B63</td><td onclick="Clicked('64')" style="text-align:center">B64</td></tr>
<tr><td onclick="Clicked('65')" style="text-align:center">B65</td><td onclick="Clicked('66')" style="text-align:center">B66</td><td onclick="Clicked('67')" style="text-align:center">B67</td><td onclick="Clicked('68')" style="text-align:center">B68</td></tr>
<tr><td onclick="Clicked('69')" style="text-align:center">B69</td><td onclick="Clicked('70')" style="text-align:center">B70</td><td onclick="Clicked('71')" style="text-align:center">B71</td><td onclick="Clicked('72')" style="text-align:center">B72</td></tr>
<tr><td onclick="Clicked('73')" style="text-align:center">B73</td><td onclick="Clicked('74')" style="text-align:center">B74</td><td onclick="Clicked('75')" style="text-align:center">B75</td><td onclick="Clicked('76')" style="text-align:center">B76</td></tr>
<tr><td onclick="Clicked('77')" style="text-align:center">B77</td><td onclick="Clicked('78')" style="text-align:center">B78</td><td onclick="Clicked('79')" style="text-align:center">B79</td><td onclick="Clicked('80')" style="text-align:center">B80</td></tr>
</table>
</div>
</body>
</html>
2 Likes
Here are a couple of blocks-only alternatives, with fewer components ...
They have the advantage of usability over larger table sizes without hardwired limits.
1 Like
Oh well, here goes with the advanced method that can change "button" attributes and disable buttons. (To enable a button, remove it from the list of disabled buttons - I have left that for Biagio todo 
Biagio - look how very few Blocks and Components are required and how small the project is (7.8KB)
BUTTONS_80io.aia (8.4 KB)
In this version of the project, I have a Clock Timer Block that randomly produces fake incoming SQL button numbers every second. Those buttons have their colour changed (to green) and they are added to a list of disabled buttons. When a button is tapped (WebViewStringChange), the list of disabled buttons is checked - if the tapped button is not in that list, it's command is executed, simulated in this example by displaying an alert.
EDIT: Updated to change terms/names to buttons (was "cells").
You can make the project a little smaller by generating this long list dynamically in a loop from 1 to 80. That you wanted to make such a list manually ...
1 Like
- It's not made manually, it's automated with my own desktop program.
- It will be replaced by a set of commands, the Block list for which also does not need to be made manually but with each command being bespoke, it will need to start as a text file.
Hi Patryk
I know that is what you meant, it's just not what is required The actual commands are bespoke, each unique, so they would not be assembled via Blocks. I have tried to keep the example as close to the actual process as possible so that Biagio can understand it, given that it is an entirely different approach to the familiar App Inventor buttons.
First of all thanks to all of you for your help and I apologize for my English.
My idea was something similar to Patrick_F's. I don't really like the idea of interacting through a web page. My buttons are linked to an input file which determines whether they are enabled or disabled (the color is only used to highlight it) but each one is also linked to a record of a table which I will access when pressing. In practice I should now insert 80 buttons and therefore 80 "When.Button.Click" blocks. In each one, manually insert an index and then call a procedure that is the same for all. If I can parameterize the name of the button from this I automatically obtain the index and therefore in a single block.
But I understand that this is a limitation of AppInventor. I've seen that the internal name of a button is something like: com.google.appinventor.components.runtime.Button@d38592d with the last variable part.
My project is a reservation system for my club's tennis courts.
The button matrix is made up of all the hours that can be booked. Each row represents an hour and each button on the row is a tennis court. Now there are 4 but in the future they will be 5.
In this way the user would have the situation of the whole day and by clicking on a green button (enabled) book the field.
I hope I was clear.
Why not say this right at the beginning......
I didn't think it was important