Creating a dynamic filter using HTML code from a dynamic function field in Airtable

Custom Coding
, , ,
1

The solution I found for a dynamic filter is to insert inside the function field in airtable the HTML code of the hyperlink buttons of the URL
and displays it in the application in Softr in rich text

by combining two URL parameters

Also recordId= of the record details block.
and โ€œfilter byโ€ according to the filter of the table block.
that both have the same record ID.

I can use the url hyperlink buttons I created as a dynamic filter that opens the list details page
along with list details filtered by the same ID.
(The record details block is the parent of the table block)

And so I can edit a table with hundreds of records, in such a way that it will not bring me all the filters of the linked record, but only the relevant ones, which I took dynamically from the table in airtable

1 Like
2

@rrbb, thank you very much for the workaround! I am sure it will help our users a lot :tada:

3

@rrbb @Marine.Hovhannisyan this solution is exaclty what I have been searching for but wondering if you might be able to provide a little more instruction on how you set this up?

4

I think @rrbb will give more detailed instructions as he built this workaround, but, meanwhile, can you please clarify which parts you need more clarification on?

5

Hi @benvainer , Iโ€™d love to help.
Just tell me what you want me to expand on?
The formula for creating a hyperlink button?
Or the settings in the Softr app?
Or the idea at all?

1 Like
6

Amazing, thank you so much @rrbb !

Haha, I think Iโ€™m missing it on the whole thing maybe Iโ€™ll lay out what I think I understand and you can fill in the gaps/tell me if Iโ€™m wrong?

From what I understand generally, weโ€™re displaying different buttons dynamically based on an airtable field. When you click the different button, it changes the list detail page and the table is set to only show related items to whatever reccord is selected?

Step 1 - The hyperlink button. Is the idea to take an embed code from softr, put that in a formula field in airtable, and then look to that airtable field back in softr in some way? I guess Iโ€™m not sure what the โ€œHTML code of the hyperlink buttons of the URLโ€ refers to exactly.

And then, you mentioned a rich text field to display the buttons back in softr. Is that in a list detail block/is there something special needed to make that work?

Sorry for my lack of understanding and really appreciate the help!

1 Like
7

Great, thanks for the detail.

In general - The filter button is built by combining two URL parameters
Also recordId= of the record details block.
and โ€œfilter byโ€ according to the filter of the table

This is the formula that should be put in the function field of the button

CONCATENATE({URL},"?recordId=",{ID},"&filter-by-",{fieldName},"=",{fieldValue})

When users click a certain button:

Regarding the upper block - the block of a list of details - which is the filtering block:
The button will send it to the record page

And as for the lower block - the block of the list
The button will send it to a filtered version of the list based on the ID of the button that was clicked.
You can see the details of this software here

To explain I created text fields where I put the HTML code and CSS code

image
image1728ร—782 52.9 KB

And this is the screenshot of the table

image
image1014ร—401 14.7 KB

Right now the link led us to the list details page of the record โ€œื“ืจื•ืโ€ which is the filter of the list below

HTML:

> `<html>
> <button class="ButtonFilterActive"><b>ื“ืจื•ื</b></>
> <button class="button" onclick="window.location.href ='URL';">ืฉืจื•ืŸ</button>
> <button class="button" onclick="window.location.href ='URL';">ืฉืคืœื”</button>
> <button class="button" onclick="window.location.href ='URL';">ืฉื•ืžืจื•ืŸ</button>
> <button class="button" onclick="window.location.href ='URL';">ืขืžืง ื™ื–ืจืขืืœ</button>
> <button class="button" onclick="window.location.href ='URL';">ืžืจื›ื–</button>
> <button class="button" onclick="window.location.href ='URL';">ื™ืจื•ืฉืœื™ื</button>
> <button class="button" onclick="window.location.href ='URL';">ื—ื™ืคื”</button>
> <button class="button" onclick="window.location.href ='URL';">ื”ื’ืœื™ืœ ื”ืชื—ืชื•ืŸ</button>
> <button class="button" onclick="window.location.href ='URL';">ื”ื’ืœื™ืœ ื”ืขืœื™ื•ืŸ</button>
> <button class="button" onclick="window.location.href ='URL';">ื”ื’ืœื™ืœ ื”ืžืขืจื‘ื™</button>
> <button class="button" onclick="window.location.href ='URL';">ื”ื‘ืงืขื”</button>
> <button class="button" onclick="window.location.href ='URL';">ื’ื•ืฉ ืขืฆื™ื•ืŸ</button>
> <button class="button" onclick="window.location.href ='URL';">ื‘ื ื™ืžื™ืŸ</button>
> </html>`

CSS:


<style>
.button{
color: #0A0A0A;
border-radius: 14px;
margin-right: 3px;
margin-left: 3px;
margin-top: 3px;
margin-bottom: 3px;
border-style: solid;
padding-right: 10px;
padding-left: 10px;
padding-bottom: 6px;
padding-top: 6px;
background-color: #F5F5F5;
border-width: 2px;
border-color: #C2C2C2;
font-family: Helvetica;
}
 .button:hover{
background-color: #D31FCA;
color: #FFFFFF;
border-style: none;
}
 .button:focus{
outline: none;
}
.button:active{
transform: translateY(4px);
}
.ButtonFilterActive{
margin-right: 3px;
margin-left: 3px;
margin-bottom: 3px;
margin-top: 3px;
background-color: #9796FC;
padding-left: 6px;
padding-top: 6px;
padding-right: 6px;
padding-bottom: 6px;
border-radius: 14px;
color: #FFFFFF;
border-style: none;
font-family: Helvetica;
}
.ButtonFilterActive:hover{
cursor: default;
}
</style>

This is the result-

image
image1339ร—613 19.6 KB

This is just an example.

You need to generate this code dynamically in all the records of the table by some function fields and linked records.

1 Like
8

This is great, thank you so much for the detailed explanation @rrbb, really appreciate it!!

3 Likes