# Pages Missing Components

**URL:** <https://community.glideapps.com/t/pages-missing-components/56093>\
**Category:** Feature Requests\
**Created:** [December 27, 2022, 8:09pm UTC](https://community.glideapps.com/t/pages-missing-components/56093 "2022-12-27T20:09:42Z")\
**Posts on this page:** 18\
**Page:** 5

<div class="post-metadata">

**Author:** ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)\
**Post date:** [April 18, 2023, 1:43am UTC](https://community.glideapps.com/t/pages-missing-components/56093/82 "2023-04-18T01:43:47Z")

</div>

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

> [@How would you describe a helper table?](https://community.glideapps.com/t/how-would-you-describe-a-helper-table/54497/16):
>
> @erwblo - I saw Bob Petitto mention something about golf last night… … which reminded me of one of my most “extreme” uses of a Helper Table. I have a Golf App that tracks scores in PGA Tour events, pulling in scores via an API every 5 minutes when an event is on. When the scores hit my App, they go into a table that looks like so: GolferID should be obvious, Raw is a comma separated list of their scores - 72 holes for a 4 round tournament. I use a 7…

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:

```auto
<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:

```auto
<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.

---

<div class="post-metadata">

**Author:** ![Alexey\_Baranov1](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/alexey_baranov1/32/43581_2.png) [@Alexey\_Baranov1](https://community.glideapps.com/u/Alexey_Baranov1)\
**Post date:** [April 18, 2023, 3:15pm UTC](https://community.glideapps.com/t/pages-missing-components/56093/83 "2023-04-18T15:15:02Z")

</div>

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)

---

<div class="post-metadata">

**Author:** ![Curtis](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/curtis/32/59826_2.png) [@Curtis](https://community.glideapps.com/u/Curtis)\
**Post date:** [May 9, 2023, 8:41pm UTC](https://community.glideapps.com/t/pages-missing-components/56093/84 "2023-05-09T20:41:53Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Robert\_Petitto](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/robert_petitto/32/25193_2.png) [@Robert\_Petitto](https://community.glideapps.com/u/Robert_Petitto)\
**Post date:** [May 9, 2023, 8:43pm UTC](https://community.glideapps.com/t/pages-missing-components/56093/85 "2023-05-09T20:43:25Z")

</div>

> [@drascon](#):
>
> the hint component only displays ONE text source now

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

---

<div class="post-metadata">

**Author:** ![Curtis](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/curtis/32/59826_2.png) [@Curtis](https://community.glideapps.com/u/Curtis)\
**Post date:** [May 9, 2023, 8:45pm UTC](https://community.glideapps.com/t/pages-missing-components/56093/86 "2023-05-09T20:45:57Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Robert\_Petitto](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/robert_petitto/32/25193_2.png) [@Robert\_Petitto](https://community.glideapps.com/u/Robert_Petitto)\
**Post date:** [May 9, 2023, 8:47pm UTC](https://community.glideapps.com/t/pages-missing-components/56093/87 "2023-05-09T20:47:30Z")

</div>

> [@Curtis](#):
>
> - Relations
> - List Relation
> - Inline Lists
> - Independent screen configuration per item - for lists
> - Set Checkbox/Switch as a Required Field

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.

---

<div class="post-metadata">

**Author:** ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)\
**Post date:** [May 10, 2023, 12:15am UTC](https://community.glideapps.com/t/pages-missing-components/56093/89 "2023-05-10T00:15:34Z")

</div>

> [@Curtis](#):
>
> Independent screen configuration per item - for lists

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.

---

<div class="post-metadata">

**Author:** ![Gdclavijo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/gdclavijo/32/13069_2.png) [@Gdclavijo](https://community.glideapps.com/u/Gdclavijo)\
**Post date:** [May 10, 2023, 2:05am UTC](https://community.glideapps.com/t/pages-missing-components/56093/90 "2023-05-10T02:05:12Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![drascon](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/drascon/32/20070_2.png) [@drascon](https://community.glideapps.com/u/drascon)\
**Post date:** [May 10, 2023, 9:10pm UTC](https://community.glideapps.com/t/pages-missing-components/56093/91 "2023-05-10T21:10:04Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Gdclavijo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/gdclavijo/32/13069_2.png) [@Gdclavijo](https://community.glideapps.com/u/Gdclavijo)\
**Post date:** [May 10, 2023, 11:12pm UTC](https://community.glideapps.com/t/pages-missing-components/56093/92 "2023-05-10T23:12:08Z")

</div>

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

![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/c/0/c084244acca9a90bdc8c13919422cfee928b4acd.png)

---

<div class="post-metadata">

**Author:** ![drascon](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/drascon/32/20070_2.png) [@drascon](https://community.glideapps.com/u/drascon)\
**Post date:** [May 10, 2023, 11:39pm UTC](https://community.glideapps.com/t/pages-missing-components/56093/93 "2023-05-10T23:39:00Z")

</div>

```auto
<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

---

<div class="post-metadata">

**Author:** ![Gdclavijo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/gdclavijo/32/13069_2.png) [@Gdclavijo](https://community.glideapps.com/u/Gdclavijo)\
**Post date:** [May 11, 2023, 12:17am UTC](https://community.glideapps.com/t/pages-missing-components/56093/94 "2023-05-11T00:17:53Z")

</div>

Thanks a lot @drascon

---

<div class="post-metadata">

**Author:** ![Anibal\_Hornos](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/anibal_hornos/32/46395_2.png) [@Anibal\_Hornos](https://community.glideapps.com/u/Anibal_Hornos)\
**Post date:** [June 23, 2023, 9:48pm UTC](https://community.glideapps.com/t/pages-missing-components/56093/95 "2023-06-23T21:48:38Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Curtis](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/curtis/32/59826_2.png) [@Curtis](https://community.glideapps.com/u/Curtis)\
**Post date:** [July 7, 2023, 1:28pm UTC](https://community.glideapps.com/t/pages-missing-components/56093/96 "2023-07-07T13:28:50Z")

</div>

Segmented Choice Component

---

<div class="post-metadata">

**Author:** ![Terence\_Vrugtman](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/terence_vrugtman/32/29358_2.png) [@Terence\_Vrugtman](https://community.glideapps.com/u/Terence_Vrugtman)\
**Post date:** [August 9, 2023, 4:13am UTC](https://community.glideapps.com/t/pages-missing-components/56093/97 "2023-08-09T04:13:17Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Jeff\_Hager](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jeff_hager/32/43_2.png) [@Jeff\_Hager](https://community.glideapps.com/u/Jeff_Hager)\
**Post date:** [August 9, 2023, 7:42am UTC](https://community.glideapps.com/t/pages-missing-components/56093/98 "2023-08-09T07:42:21Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![david](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/david/32/62831_2.png) [@david](https://community.glideapps.com/u/david)\
**Post date:** [August 20, 2023, 11:41pm UTC](https://community.glideapps.com/t/pages-missing-components/56093/99 "2023-08-20T23:41:39Z")

</div>

Most of these are shipped.

---

<div class="post-metadata">

**Author:** ![system](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/system/32/53398_2.png) [@system](https://community.glideapps.com/u/system)\
**Post date:** [August 27, 2023, 11:41pm UTC](https://community.glideapps.com/t/pages-missing-components/56093/100 "2023-08-27T23:41:57Z")

</div>

Closed on August 27, 2023, 11:41pm UTC

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

[Previous page](https://community.glideapps.com/t/pages-missing-components/56093.md?page=4)