Pulling cell value into a text display with a softr Custom code block

Ask the community
1

Hi there,

I want to pull a cell value from Airtable and insert it into a text sentence at the top of my page.

E.g. “You are currently ______ (under/over) budget on this project” and have it dynamically fill based on the logged in users email (which will pull the record ID - like with a conditional filter on a table block)

I’m sure it’s easy to do with a custom code block but I’m new to scripting!

2

Could you do it by creating a formula field in Airtable to concatenate the static text, and the numeric value held in another field?

Then, in Softr, choose a dynamic block you prefer (maybe a table block) and only display one field’s contents (the formula field above). Use the logged in users email to only show the record that matches it.

3

I am trying to do something similar, but instead add the cell value associated with the user in Airtable to a hyperlink. Surely this can be done with a variable in Softr using the custom block? I have seen some posts that allude to a solution, but nothing that shows exactly how it can be done. This would be extremely useful for so many use cases.

4

Thanks @MarkSchofield that worked perfectly for my needs! It would be nice to be able to somehow do this in a custom code block to just be the text (and not in the table format) but it works to dynamically create the text string.

If anyone wants the formula - put this into a formula field:

CONCATENATE(“Your appointment is “,{on time/delayed},” at the present time.”)

Here the extra space at the end of the first “static text " and the beginning of the second " static text” helps to make it read correctly when presented to the user.
Obviously, reference the {field name} you are using

1 Like
5

Similarly, you can use Airtable URL formulas to format strings to make a URL link to a displayed user’s name.

I appreciate this isn’t a solution using a script variable. I found it to be a useful workaround and included it, as described earlier, in a dynamic block styled to make it look like on-page text.

6

how did you style the block to look like on-page text?

7

I don’t have access to my site back-end just now to check to-be-certain as I’m travelling … I played with the block styling to remove any lines etc. chose the correct alignment to match other on-page text etc. I may have used some CSS for extra tweaks. It definitely wasn’t much more than no-code/low-code as I’m not much of a coder :slight_smile:

8

Thanks!

9

I tried doing what you suggested and was close to making it work but there seems to be a limitation with the dynamic lists and tables. I used CONCATENTATE to build some HTML and then pulled it into the table using both Rich Text and Embed. Neither worked. The same piece of code works fine when I used the custom code block. The HTML code does depend on a script which I added to the header section.

This is the script added to the header.

<script src="https://checkoutlib.billsby.com/checkout.min.js" data-billsby-company="XXXXXX"></script>

This is the code that works fine in the custom code block, but not when I pull it from Airtable into a dynamic table or list.

<a href='javascript:void(0)' data-billsby-type='account' data-billsby-customer='XXXXXXXXX'>Manage account</a>

Maybe it is the HTML code used by the dynamic lists and tables that prevents code from being used? Not sure if I am pushing too far on what Softr can be used for in this use case and should be looking at other platforms.

10

You can try this on a list detail page with custom code block:

<div id="firstName"/>
<script>
    const wait = setInterval(function () {
        if (window.records !== undefined) {
            clearInterval(wait);
            document.getElementById("firstName").innerText = window.records[Object.keys(window.records)[0]].record.fields.firstName;
        }
    },100)
</script>

You will have to get the value record.fields.firstName that you want to present. In this case firstName coming from airtable on the list detail block which you will have to hide using display:none;

This way you can use the data coming from airtable in a div on top of the page for example.

1 Like