# ⚡ Rich Text \> Actions!

**URL:** <https://community.glideapps.com/t/rich-text-actions/27273>\
**Category:** Ask for Help\
**Created:** [May 26, 2021, 8:05pm UTC](https://community.glideapps.com/t/rich-text-actions/27273 "2021-05-26T20:05:28Z")\
**Posts on this page:** 20\
**Page:** 1

<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 26, 2021, 8:05pm UTC](https://community.glideapps.com/t/rich-text-actions/27273/1 "2021-05-26T20:05:28Z")

</div>

Looks like you can now add actions to Rich Text!  
 ![Screen Shot 2021-05-26 at 4.01.06 PM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/e/b/eb26f22ee43ef3d3cede34d5c3fb833d02a8f6a6.png)

---

<div class="post-metadata">

**Author:** ![Manu.n](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/manu.n/32/11679_2.png) [@Manu.n](https://community.glideapps.com/u/Manu.n)\
**Post date:** [May 26, 2021, 8:08pm UTC](https://community.glideapps.com/t/rich-text-actions/27273/2 "2021-05-26T20:08:48Z")

</div>

great it’s good

---

<div class="post-metadata">

**Author:** ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)\
**Post date:** [May 26, 2021, 8:10pm UTC](https://community.glideapps.com/t/rich-text-actions/27273/3 "2021-05-26T20:10:07Z")

</div>

Great!!! thats what i need now!

---

<div class="post-metadata">

**Author:** ![SantiagoPerez](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/santiagoperez/32/16807_2.png) [@SantiagoPerez](https://community.glideapps.com/u/SantiagoPerez)\
**Post date:** [May 26, 2021, 8:25pm UTC](https://community.glideapps.com/t/rich-text-actions/27273/4 "2021-05-26T20:25:15Z")

</div>

Awesome!!!

---

<div class="post-metadata">

**Author:** ![Lucas\_Pires](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/lucas_pires/32/64863_2.png) [@Lucas\_Pires](https://community.glideapps.com/u/Lucas_Pires)\
**Post date:** [May 26, 2021, 8:32pm UTC](https://community.glideapps.com/t/rich-text-actions/27273/5 "2021-05-26T20:32:05Z")

</div>

[https://media.giphy.com/media/ynRrAHj5SWAu8RA002/giphy.gif(image larger than 4096KB)](https://media.giphy.com/media/ynRrAHj5SWAu8RA002/giphy.gif)

---

<div class="post-metadata">

**Author:** ![Joe\_Gabriele](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/joe_gabriele/32/57595_2.png) [@Joe\_Gabriele](https://community.glideapps.com/u/Joe_Gabriele)\
**Post date:** [May 26, 2021, 9:19pm UTC](https://community.glideapps.com/t/rich-text-actions/27273/6 "2021-05-26T21:19:47Z")

</div>

I mainly use Rich Text for just inserting CSS, but know you can also add HTML too.

What sort of uses do you see for Actions on Rich Text? Just a more customized Action Text element?

---

<div class="post-metadata">

**Author:** ![ehdubya](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/ehdubya/32/24087_2.png) [@ehdubya](https://community.glideapps.com/u/ehdubya)\
**Post date:** [May 26, 2021, 9:21pm UTC](https://community.glideapps.com/t/rich-text-actions/27273/7 "2021-05-26T21:21:36Z")

</div>

Yeah this is awesome but, how could this be used? Any use cases come to mind?

---

<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:** [May 26, 2021, 9:26pm UTC](https://community.glideapps.com/t/rich-text-actions/27273/8 "2021-05-26T21:26:33Z")

</div>

- Action Text is nice because you can assign actions to it, but you can’t do any formatting to the text.
- Text is nice because you can apply some formatting, but you can’t assign any actions to it.
- Now with Rich text you can do both.

For example, to get this sort option, I had to create two inline lists with the cards style layout so I could right align the text and still have it perform an action. A lot of hoops to jump through for something trivial. Now I can eliminate unnecessary relations, inline list, etc. and just switch to a Rich Text box that can do pretty much anything.

![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/d/a/da465d1351c6551fa588294f47aa6a5a7a247c89.png)

---

<div class="post-metadata">

**Author:** ![Joe\_Gabriele](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/joe_gabriele/32/57595_2.png) [@Joe\_Gabriele](https://community.glideapps.com/u/Joe_Gabriele)\
**Post date:** [May 26, 2021, 9:38pm UTC](https://community.glideapps.com/t/rich-text-actions/27273/9 "2021-05-26T21:38:47Z")

</div>

Awesome, thanks for that example! Seems like this will help us do a lot more custom work, easier!

---

<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 27, 2021, 3:14am UTC](https://community.glideapps.com/t/rich-text-actions/27273/10 "2021-05-27T03:14:48Z")

</div>

> [@Joe\_Gabriele](#):
>
> I mainly use Rich Text for just inserting CSS, but know you can also add HTML too.
> 
> What sort of uses do you see for Actions on Rich Text? Just a more customized Action Text element?

I can make these tables clickable, that’s what I can do!

 ![Screen Shot 2021-05-27 at 11.13.09 AM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/6/3/6305bbf7c7fde2aaf886359a2dae90a7aa18cedc.png)

---

<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 27, 2021, 12:12pm UTC](https://community.glideapps.com/t/rich-text-actions/27273/11 "2021-05-27T12:12:50Z")

</div>

Those are some of the prettiest html tables I’ve seen in Glide. Care to share the structure?

---

<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 27, 2021, 1:35pm UTC](https://community.glideapps.com/t/rich-text-actions/27273/12 "2021-05-27T13:35:05Z")

</div>

Sure!

One thing that isn’t obvious from the screen shot is that two of those tables are collapsable:

That’s done in the usual way, using HTML `<details><summary>` tags. Although getting it to play nicely with the tables was a bit fiddly.

Anyway… I used [HTML Table Styler ▦ CSS Generator | 𝗗𝗜𝗩𝗧𝗔𝗕𝗟𝗘.𝗖𝗢𝗠](https://divtable.com/table-styler/) to come up with the basic table structure and CSS, and then butchered the CSS until I got it looking how I wanted. My CSS-fu is not very strong, so I suspect there is a lot of bloat there that could be jettisoned 😂

Here’s the table structure for the middle table (Devices):

```auto
<details>
  <summary>
    <div class="redTable outerTableFooter">
      <div class="tableFootStyle">
        <div class="links">Devices</div>
      </div>
    </div>
  </summary>
<div class="divTable redTable">
<div class="divTableHeading">
<div class="divTableRow">
<div class="divTableHead">Name</div>
<div class="divTableHead">Status</div>
<div class="divTableHead">Last Updated</div>
</div>
</div>
<div class="divTableBody">
{jl-table-rows}
</div>
</div>
</details>

```

`{jl-table-rows}` (as the name suggests), is a joined list column that pulls in the table rows for each individual device. The Device table has a template column that looks like:

```auto
<div class="divTableRow">
<div class="divTableCell">{name}</div>
<div class="divTableCell">{status}</div>
<div class="divTableCell">{updated}</div>
</div>

```

All 3 tables use the same CSS (obviously):

```auto
<pre><span><style>
summary {list-style: none}
summary::-webkit-details-marker {display: none; }
details summary { 
  cursor: pointer;
}
div.redTable {
  border: 2px solid #A40808;
  background-color: #EEE7DB;
  width: 100%;
  text-align: center;
  border-collapse: collapse;
}
.divTable.redTable .divTableCell, .divTable.redTable .divTableHead {
  border: 1px solid #AAAAAA;
  padding: 3px 2px;
}
.divTable.redTable .divTableBody .divTableCell {
  font-size: 13px;
}
.divTable.redTable .divTableRow:nth-child(even) {
  background: #F5C8BF;
  color: #000000;
}
.divTable.redTable .divTableRow:nth-child(odd) {
  color: #000000;
}
.divTable.redTable .divTableRow .divTableCell:nth-child(1) {
  text-align: left;
}
.divTable.redTable .divTableHeading {
  background: #A40808;
}
.divTable.redTable .divTableHeading .divTableHead {
  font-size: 16px;
  font-weight: bold;
  color: #FFFFFF;
  text-align: center;
  border-left: 2px solid #A40808;
}
.divTable.redTable .divTableHeading .divTableHead:first-child {
  border-left: none;
}

.redTable .tableFootStyle {
  font-size: 13px;
  font-weight: bold;
  color: #FFFFFF;
  background: #A40808;
  border-left: 2px solid #A40808;
}
.redTable .tableFootStyle {
  font-size: 20px;
  border-left: 2px solid #A40808;
}
.redTable .tableFootStyle .links {
  text-align: center;
  border-left: 2px solid #A40808;
}
.redTable .tableFootStyle .links a{
  display: inline-block;
  background: #FFFFFF;
  color: #A40808;
  padding: 2px 8px;
  border-radius: 5px;
  border-left: 2px solid #A40808;
}
.redTable.outerTableFooter {
  border: 1px solid #A40808;
}
.redTable.outerTableFooter .tableFootStyle {
  padding: 3px 5px; 
}
/* DivTable.com */
.divTable{ display: table; }
.divTableRow { display: table-row; }
.divTableHeading { display: table-header-group;}
.divTableCell, .divTableHead { display: table-cell;}
.divTableHeading { display: table-header-group;}
.divTableFoot { display: table-footer-group;}
.divTableBody { display: table-row-group;}

```

And that’s it!  
I’ve been using this technique to build tables for a while now, and really happy with the results I’ve been getting. The nice thing about the joined list approach is that you can feed that through a multi-relation to produce dynamic (filterable) tables, as well as dynamic record counts by doing rollups through the relation 🙂

---

<div class="post-metadata">

**Author:** ![Mns\_Glide](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/mns_glide/32/2514_2.png) [@Mns\_Glide](https://community.glideapps.com/u/Mns_Glide)\
**Post date:** [May 27, 2021, 1:39pm UTC](https://community.glideapps.com/t/rich-text-actions/27273/13 "2021-05-27T13:39:19Z")

</div>

Thanks for sharing

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [May 28, 2021, 1:11pm UTC](https://community.glideapps.com/t/rich-text-actions/27273/14 "2021-05-28T13:11:12Z")

</div>

Gonna share my use case below.

I have some apps with the need for having multiple inline lists sourcing from the same table, which obviously will show different sides of the same dataset.

The native “See all” links to a screen with the same configurations for all inline list so it limited me from showing the exact configuration I had for the original inline lists.

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

So I created my own see all, use different “Link to screen” actions to configure whatever I want.

```auto
<div class="see-all-custom">→ See all</div>
<pre><span><style>
.see-all-custom {
font-weight: 600;
font-size: 0.875rem;
line-height: 1.0625rem;
color: rgb(236, 169, 176);
position: relative;
float: right;
}

```

---

<div class="post-metadata">

**Author:** ![Joe\_Gabriele](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/joe_gabriele/32/57595_2.png) [@Joe\_Gabriele](https://community.glideapps.com/u/Joe_Gabriele)\
**Post date:** [May 28, 2021, 3:07pm UTC](https://community.glideapps.com/t/rich-text-actions/27273/15 "2021-05-28T15:07:09Z")

</div>

Ah… I think this is definitely something I could use!!! I hated how the current See All just goes to the List view!

What kind of visibility could you add when you want it to only display after showing X number of things in your list, just how the current See All works?

Or do you just limit the list to X and always have See All link? Might be weird if you limit it to display 6 items and one user only has 3 items in total.

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [May 28, 2021, 3:15pm UTC](https://community.glideapps.com/t/rich-text-actions/27273/16 "2021-05-28T15:15:29Z")

</div>

I have a rollup to count the number of items in the inline lists to deal with that 😉

---

<div class="post-metadata">

**Author:** ![Joe\_Gabriele](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/joe_gabriele/32/57595_2.png) [@Joe\_Gabriele](https://community.glideapps.com/u/Joe_Gabriele)\
**Post date:** [May 28, 2021, 3:25pm UTC](https://community.glideapps.com/t/rich-text-actions/27273/17 "2021-05-28T15:25:43Z")

</div>

Genius!

---

<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 28, 2021, 3:33pm UTC](https://community.glideapps.com/t/rich-text-actions/27273/18 "2021-05-28T15:33:17Z")

</div>

Great idea, @ThinhDinh

---

<div class="post-metadata">

**Author:** ![V88](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/v88/32/90054_2.png) [@V88](https://community.glideapps.com/u/V88)\
**Post date:** [May 28, 2021, 7:47pm UTC](https://community.glideapps.com/t/rich-text-actions/27273/20 "2021-05-28T19:47:26Z")

</div>

Do you have a way of only showing the first X items in a list? I could never do that without using RANK in the Google Sheet.

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [May 28, 2021, 11:09pm UTC](https://community.glideapps.com/t/rich-text-actions/27273/21 "2021-05-28T23:09:02Z")

</div>

I have tried ranking using computed columns in the past but never succeeded. Wish there’s a rank option for rollups.

[Next page](https://community.glideapps.com/t/rich-text-actions/27273.md?page=2)