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.

1 Like
85

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

7 Likes
86

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

1 Like
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.
1 Like
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

1 Like
94

Thanks a lot @drascon

1 Like
95

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

96

Segmented Choice Component

1 Like
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.

1 Like
99

Most of these are shipped.

100

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.