Pages Missing Components

Feature Requests
82

This one is quite complicated, I talked a bit about how it is generated below:

There are actually 3 separate tables there, all dynamically generated. But it takes more than 100 computed columns to do it. Here is what the generated HTML looks like for the first one:

<table class="scorecard">
  <thead>
    <tr>
      <th colspan="11">Scorecard</th>
    </tr>
    <tr>
      <th></th>
      <th>1</th><th>2</th><th>3</th><th>4</th><th>5</th><th>6</th><th>7</th><th>8</th><th>9</th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr>
    	<td class="parRow">Par</td>
      <td class="parRow">4</td><td class="parRow">5</td><td class="parRow">4</td><td class="parRow">3</td><td class="parRow">5</td><td class="parRow">4</td><td class="parRow">3</td><td class="parRow">4</td><td class="parRow">4</td>
      <td class="parRow">36</td>       
    </tr>
    <tr>
   <td>R1</td>
  <td><div class="par">4</div></td><td><div class="birdie">4</div></td><td><div class="par">4</div></td><td><div class="par">3</div></td><td><div class="birdie">4</div></td><td><div class="bogie">5</div></td><td><div class="par">3</div></td><td><div class="par">4</div></td><td><div class="birdie">3</div></td>
  <td>34</td>       
</tr><tr>
   <td>R2</td>
  <td><div class="par">4</div></td><td><div class="birdie">4</div></td><td><div class="par">4</div></td><td><div class="bogie">4</div></td><td><div class="birdie">4</div></td><td><div class="par">4</div></td><td><div class="par">3</div></td><td><div class="par">4</div></td><td><div class="birdie">3</div></td>
  <td>34</td>       
</tr><tr>
   <td>R3</td>
  <td><div class="par">4</div></td><td><div class="birdie">4</div></td><td><div class="eagle">2</div></td><td><div class="par">3</div></td><td><div class="birdie">4</div></td><td><div class="par">4</div></td><td><div class="birdie">2</div></td><td><div class="birdie">3</div></td><td><div class="par">4</div></td>
  <td>30</td>       
</tr><tr>
   <td>R4</td>
  <td><div class="par">4</div></td><td><div class="birdie">4</div></td><td><div class="par">4</div></td><td><div class="par">3</div></td><td><div class="birdie">4</div></td><td><div class="par">4</div></td><td><div class="bogie">4</div></td><td><div class="par">4</div></td><td><div class="par">4</div></td>
  <td>35</td>       
</tr>
  </tbody>
</table>

And the CSS that it uses:

<pre><span><style>
table.scorecard {
  font-family: Arial, Helvetica, sans-serif;
  border: 3px solid #a9a9a9;
  background-color: #1c4587;
  width: 100%;
  text-align: center;
  border-collapse: collapse;
  table-layout: fixed;
}
  
table.scorecard td, table.scorecard th {
  border: 1px solid #fff;
  padding: 3px 2px;
}
table.scorecard tbody td {
  font-size: 12px;
  color: #fff;
  height: 25px;
}
table.scorecard tbody tr:nth-child(even) {
  background: #0B6FA4;
}
table.scorecard thead {
  background: #1c4587;
}
table.scorecard td.parRow {
  font-size: 13px;
  border: 1px solid #fff;
  background: #000;
  color: #fff;
  height: 20px;
}

table.scorecard thead th {
  font-size: 14px;
  font-weight: bold;
  color: #fff;
  text-align: center;
  border-left: 1px solid #fff;
}

table.scorecard td:first-child {
  background: #000;
  font-weight: bold;
}

table.scorecard td:last-child {
  background: #000;
  font-weight: bold;
}

table.scorecard tfoot {
  font-size: 13px;
  font-weight: bold;
  color: #FFFFFF;
  background: #A40808;
}

.eagle  {
  border-radius: 50%;
  display: inline-block;
  vertical-align: middle;
  width: 20px;
  height: 20px;
  border: 4px double #fff;
  color: #fff;
  font: 12px Arial, sans-serif;
}

.birdie {
  border-radius: 50%;
  display: inline-block;
  vertical-align: middle;
  width: 20px;
  height: 20px;
  border: 2px solid #fff;
  color: #fff;
  padding-top: 1px;
  font: 12px Arial, sans-serif;
}

.bogie {
  border-radius: 0%;
  display: inline-block;
  vertical-align: middle;
  width: 20px;
  height: 20px;
  border: 2px solid #fff;
  color: #fff;
  padding-top: 2px;
  font: 12px Arial, sans-serif;
}

.double {
  border-radius: 0%;
  display: inline-block;
  vertical-align: middle;
  width: 20px;
  height: 20px;
  border: 4px double #fff;
  color: #fff;
  font: 12px Arial, sans-serif;
}

table.summary {
  font-family: Arial, Helvetica, sans-serif;
  border: 3px solid #a9a9a9;
  background-color: #1c4587;
  width: 90%;
  text-align: center;
  border-collapse: collapse;
  table-layout: fixed;
}
  
table.summary td, table.summary th {
  border: 1px solid #fff;
  padding: 3px 2px;
}
table.summary tbody td {
  font-size: 12px;
  color: #fff;
  height: 25px;
}
table.summary tbody tr:nth-child(even) {
  background: #0B6FA4;
}
table.summary thead {
  background: #1c4587;
}
table.summary td.subheader {
  font-size: 13px;
  font-weight: bold;
  border: 1px solid #fff;
  background: #000;
  color: #fff;
  height: 15px;
}

table.summary thead th {
  font-size: 14px;
  font-weight: bold;
  color: #fff;
  text-align: center;
  border-left: 1px solid #fff;
}

table.summary td:first-child {
  background: #000;
  font-weight: bold;
}

table.summary tfoot {
  font-size: 13px;
  font-weight: bold;
  color: #FFFFFF;
  background: #228b22;
}

Note that this sort of approach only works with Classic Apps. With new Glide Apps, unless you are on a Business or Enterprise plan, all the styling would need to be done inline.

83

Thank you very much @Darren_Murphy ! Yea, for me it’s more than complicated yet(
Seems I need to study CSS & HTML. Will look for some lessons about it in youtube)

84

Also waiting for:

  • Relations
  • List Relation
  • Inline Lists
  • Independent screen configuration per item - for lists
  • Set Checkbox/Switch as a Required Field

These are key for functionality.

85

I commiserate with you. @tristan can we have a second line for the Hint Text component? It was very handy in Classic Apps.

86

Also the old List view for calendar.
Very handy for mobile.

87
  1. Inline lists have been replaced by “collections”
  2. Relations / List relations are not making their way to new apps. Use a collection.
  3. ISC I think is going to make its way in the next few months?
  4. Agree. I’d also like to see checkbox (and rating) as a required field.
89

If you need this now, you can get the same effect by using a custom action with a separate conditional branch for each collection item.

90

Hi @drascon,. sorry, could you share finally the instruction in CSS? … thanks

91

Gladly. What is it that you’re looking for, exactly?

92

thanks @drascon… the finally CSS code in the template field that you shared to Jeff but the fixed

image

93 
<div style="background-color:#132b26;padding:10px;border-radius: 10px;">
<span style="color:#21c376">
<b>{Header}</b><br>
{Content}
</div></span>

The only change that I made was replacing the header tags with regular bold tags

94

Thanks a lot @drascon

95

Also, can we have at least 4 themes with different typographies, like in apps Appearance menu?

96

Segmented Choice Component

97

Do you know when we will get the favorite feature in Pages?

98

I don’t know what Glide’s future plans are, but I highly doubt they will bring Favorites into New Apps. Besides, it’s pretty easy to recreate the experience yourself with a user specific boolean column, a switch component, and some filters. That’s all favorites are anyway. If you wanted a heart image, I’m sure you could do something with a couple of image columns and an IF column.

99

Most of these are shipped.