Creating hyperlinks for display in Softr using formulas

I find myself needing to do this quite often. You can use these formulas to create inline HTML that will display a hyperlink in list and list detail fields using an Embed field type. Just replace the field portions with the fields you want to use in the hyperlink and set the field display type to Embed in your list or list detail block.

Airtable:
CONCATENATE("<a href='", {URL Field}, "'>", {Record Name}, "</a>")

Smartsuite:
CONCAT("<a href='",[URL Field], "'>", [Record Name], "</a>")

The result is something like this:

7 Likes

Amazing! Thanks for sharing this @pford !! What a legend.

1 Like

Small update I want to bring: the rich text field type also works and is better, in most cases, as it allows to set the correct text size of the hyperlink directly within Softr. Which is not the case with the embed field type.

Though, by using the embed field in Softr the hyperlink text size can be updated within the Airtable formula field (by adding a style attribute in the formula).

4 Likes

Ah good to know! I hadn’t thought about rich text as well!

Also, someone asked if you can open the link in a new tab instead of the same one. You can modify the inline HTML with the target attribute and set it to be _blank like this:

Airtable:
CONCATENATE("<a href='", {URL Field}, "' target='_blank'>", {Record Name}, "</a>")

Smartsuite:
CONCAT("<a href='", [URL Field], "' target='_blank'>", [Record Name], "</a>")

Thanks @pford, this adds some great functionality :slight_smile:

Thought it would be worth sharing also: I’ve experimented with your formula, and having dynamic URLs in the URL field, and then used rollup fields in another table, and then used those in the Softr text fields, and it works! Multiple clickable URLs in one text field. In my use case, they allow teachers to click directly onto their student names and be taken to their student profiles:

3 Likes

Oh, even better! Great work @Matt !!!

Update: a further slight adapation, so that the links open in new tabs when clicked:

CONCATENATE("<a href='", {URL field}, "' target='_blank'>", {Display text field}, "</a>")

Great functionality -
As I test additional interaction with Table actions, the Download button captures the Hyperlink syntax and not the Display text field content. Any insights on how to just display the Text in the Field?

CONCAT("<a href='", [URL Field], "' target='_blank'>", [Display Text Field], "</a>")

Would it be possible to use an image field type rather than rich text? I would like to have an Instagram image that links to the Instagram URL for that record.

I’m brand new to this but learning a lot. I’m about three weeks into creating my website

BeachAthletes

1 Like

How can I create a hyperlink on a details page?

Hey team,

I have enjoyed using this “inline URL” method via rich text display on most of my apps, particularly within list blocks.

However, it seems that, maybe within the last 9 months, any rich text field’s URL now forces a target=“_blank” attribute, meaning my UIs all have prolific new tab-opens throughout.

Adding target=“_self” into my URL sources doesn’t seem to work, as it gets overwritten back to _blank in the blocks on load.

My only current workaround is rather hacky and slow…a custom <a class and a javascript that retroactively searches and replaces _blank with _self.

Is there a reason that these links are being forced to new tabs? Any cleaner workaround, or something simple I’m missing?

Thanks!
Seth

You can just remove the target attribute and new tabs won’t be used at all. It’s an optional attribute.

Thanks for the response, @pford! Are you referring to Rich Text field attributes, or within the formula driving the href itself?

My current experience is that the Softr blocks are enforcing a target=“_blank” onto rich text field URLs, regardless of whether I include a target=“_blank” or omit a target.