Enhance your dynamic blocks with Shoelace free web components

Guides & Help Docs
,
1

Hi all!

Wondering if you can display progress bars, progress rings, QR codes or a copy to clipboard features in your dynamic blocks without coding too much? It’s possible thanks to Shoelace.

First of all, a demo of what can be achieved:
https://test-play.softr.app/shoelace-in-blocks

Note that the progress bar, progress ring, QR code et copy to clipboard have dynamic data, coming directly from Airtable.

Shoelace.style is a free web components library. One very good point with Shoelace is that these web components are not htta hard to use in yout Softr projects.

First of all, jsut copy paste this snippet code below in your settings (app level) => custom code => header.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.11.2/cdn/themes/light.css" />
<script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.11.2/cdn/shoelace-autoloader.js"></script>

Now let’s dive in on how the demo page was made.

The page is made of a list-details block with one Shoelace component in it (“Details” component) and a table block with 4 Shoelace components in it (Progress bar, progress ring, QR code, copy to clipboard).

1. The “details” component in the list-details block

In Airtable, create a formula field in yout corresponding table.
The formula will look like this:

CONCATENATE("<sl-details summary=","Description",">", Notes,"</sl-details>")

Description is the title that is displayed and “Notes” is actually a dynamic value => a field in my table called “Notes”.

Now go to Softr, add in your list-details block an embed field. And choose as the value the field where is your formula. And that’s it!
There is also a QR code component in the list-details => this is treated below.

2. The progress bar, progress ring, QR code, and copy to clipboard in the table block

The process is exactly the same => Create a formula field for each of the SHoelace component you want to display in your table block (or any dynamic block, it also works with list blocks).

For the progress bar, in my use case, the formula field is:

CONCATENATE("<sl-progress-bar value='", Progress_Value, "'>", "</sl-progress-bar>")

Progress_Value is the dynamic data coming from the field (number field) named “Progress_Value”. This can also be a formula field so you can use the (numeric) result of a calculation.

For the progress ring, the formula field is:

CONCATENATE("<sl-progress-ring value='", Progress_Value, "' style='--size: 40px;'></sl-progress-ring>")

Progress_Value is the dynamic data coming from the field (number field) named “Progress_Value”

For the QR code, the formula field is:

CONCATENATE("<sl-qr-code value='", {QR code url}, "' size='66'></sl-qr-code>")

QR code url is the dynamic data coming from the field (url field) named “QR code url”

For the copy to clipboard, the formula field is:

CONCATENATE("<sl-copy-button value='", Notes, "'>", "</sl-copy-button>")

Notes is the dynamic data coming from the field (text field) named “Notes”

And that’s pretty much it. Simple, well designed and customizable (refer to the documentation to customize the look of the Shoelace web components. This is the only part where you would need a better understanding of code (css mainly).

Enjoy!

Ps: below, you will find a screenshot of some of my fields so you can visualize better how the Airtable table looks like, for the example of the progress bar and of the progress ring.

Airtable_screenshot_guide
Airtable_screenshot_guide810×489 72.2 KB

8 Likes
2

Propre !

3

Thanks again @matthieu_chateau - this solves a question I posed on the Slack channel a while ago.

I’m not a coder, but this looks easy enough to implement (even for me!), and then I’m going to have a play around with the Airtable formula to see if I can get the --indicator-color property to display Green/Amber/Red as the progress bar fills up…

1 Like
4

Nice one @matthieu_chateau!

For QR codes & graphs (especially in list details blocks), I’ve used:

1 Like
5

QuickChart is definitely the best to create any chart, from the most simple to the most complex!

6

that’s awesome

7

I have tried the copy to clipboard code, and it practically works, but the icon gets formatted weirdly in my list details block.

weird copy to clipboard button
weird copy to clipboard button1138×484 26 KB

There is a lot of spacing above and below the actual icon.

8

What type of field do you use in Softr? Embed field?
What type of content are you trying to copy to? Text?
What type of list-details block is it?

9

List detail block “List details page with side image”.

Yes, I am just trying text I hardcoded into the Airtable formula - just trying to smoke-test it without complicating it too much:

CONCATENATE("<sl-copy-button value='", "copy me", "'>", "</sl-copy-button>")

In Softr, I am mapping to a text field.

Thanks @matthieu_chateau for your continued support!

10

Oh, I see. It has to be an embed. :slight_smile:

11

Okay, it copies simple text fine.

But when I try to change the text to copy from “copy me” to the html code snippet, the whole thing falls apart.

Here is my Airtable formula…
CONCATENATE('<sl-copy-button value="', '<div id= "vouchtube-videogrid" data-bid="blahblahblah" data-rows="{grid_rows}" data-bgcolor="{background_color}"/> <script async type="text/javascript" src="https://blah.vouchtube.com/video-grid/videogrid.min.js"/>', '">', '</sl-copy-button>')

What it ends up copying is just this:
<div id=

That’s it.

12

There is a problem with the Airtable formula.
This is treated as a code because the Airtable formula doesn’t format “<” and “>” and the quotes correctly to be just a text string. This formula will be treated as a code otherwise.

This Airtable formula should do the trick:

CONCATENATE(
  '<sl-copy-button value="',
  '&lt;div id=&quot;vouchtube-videogrid&quot; data-bid=&quot;blahblahblah&quot; data-rows=&quot;',
  {grid_rows},
  '&quot; data-bgcolor=&quot;',
  {background_color},
  '&quot;/&gt; &lt;script async type=&quot;text/javascript&quot; src=&quot;https://blah.vouchtube.com/video-grid/videogrid.min.js&quot;&gt;&lt;/script&gt;',
  '">',
  '</sl-copy-button>'
)
13

Of course, this works. Makes perfect sense. :slight_smile:
Thank you @matthieu_chateau