How can I extend a horizontal list with several elements?

Ask for Help
1

I want to create a matrix that changes colour depending on whether a value is reached or exceeded.
My problem is that I can’t make the grid big enough.

image
image426×896 23.3 KB

Is it possible to expand the table on the right with several columns?
There should be about 15 more columns. In other words, you should be able to swipe to the right.

2

Not possible unless you’re creating some sort of grid in a 3rd party app (like quickcharts or charts.js) that is then displayed in an image/webview component (depending on the platform utilized.)

3

Thank you for the answer. Looking forward to a new tutorial from you ^^

4

You could dynamically generate an html table with the appropriate formatting and display that on the screen. This won’t allow you to interact with the matrix, but it would be useful for display purposes.

5

Thanks unfortunately some calculations have to take place through the cells for it to work.
I had imagined it something like this:

image
image1389×680 29.1 KB

image
image1369×659 36.6 KB

thank you for the support

6

Still should be doable. It’s just a matter of using IF columns and Template columns to build out each <td> tag for each cell (with some inline CSS styling based on the calculated value), then wrapping it in a <tr> tag for each row, and finally wrap the whole thing in a <table> tag. Then display it using a rich text component.

Not an easy setup, but doable.

1 Like
7

That’s too high for me, after all, I have now bought a book on HTML and CSS.
Thank you all

8

I found something in the CODEBOOK APP.
For dynamic uses replace values in a Temp.Col.



#customers {
  font-family: Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

#customers td, #customers th {
  border: 1px solid #ddd;
  padding: 4px;
text-align: right;
}

#customers tr:nth-child(even){background-color: #f2f2f2;}

#customers tr:hover {background-color: #f2f2a2;}

#customers th {
  padding-top: 9px;
  padding-bottom: 9px;
  text-align: center;
  background-color: #04AA6D;
  color: white;
}


Items for sale:



  


    Item
    Price
    QTY
   Total
  

  

    Digital Air Fryer
    $120.00
    1
    $120.00
  

  

    Slot Toaster
    $14.99
    2
    $29.98
  

  

    Webcam
    $159.99
    5
   $799.95
  

  

    Printer
    $199.99
    1
    $199.99
  

  

    Monitor
    $155.99
    3
   $467.97
  





Not so pretty but should work
9

Hi @Robert_Petitto, it may be a stupid question, How charts.js can be integrated in glide pages using web view component? I have worked only with quickscharts only but want to start using charts.js. Appreciate your help!

10

What I usually do is work on a function in Github. Define your input variables, setup a variable to store your HTML, CSS and JS code, and return it as URI.

Here’s a sample function I made a while ago.

2 Likes