Looks like you can now add actions to Rich Text!
22 Likes
great it’s good
Great!!! thats what i need now!
Awesome!!!
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?
Yeah this is awesome but, how could this be used? Any use cases come to mind?
- 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.
19 Likes
Awesome, thanks for that example! Seems like this will help us do a lot more custom work, easier!
3 Likes
Those are some of the prettiest html tables I’ve seen in Glide. Care to share the structure?
6 Likes
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 | 𝗗𝗜𝗩𝗧𝗔𝗕𝗟𝗘.𝗖𝗢𝗠 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):
<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:
<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):
<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 
27 Likes
Thanks for sharing
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.
So I created my own see all, use different “Link to screen” actions to configure whatever I want.
<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;
}
23 Likes
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.
3 Likes
I have a rollup to count the number of items in the inline lists to deal with that 
3 Likes
Genius!
1 Like
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.
I have tried ranking using computed columns in the past but never succeeded. Wish there’s a rank option for rollups.
1 Like