Creating hyperlinks that trigger workflows in a dynamic rich text element

morgan · 2020-06-04T02:29:07.235Z

I am building a legal application that has a lot of text. That text needs to be formatted perfectly and I am using bubble’s rich text editor which is functioning perfectly for our needs in terms of formatting.

Each of the legal “blurbs” need to have further references in them. What I need it to do is show a hyperlink for each of the references and trigger a workflow that shows a popup and the reference content.

I am familiar with javascript to bubble triggering a workflow from an html block with hyperlink but this is different as it needs to be triggered from a block of user generated legal text in a rich text editor.

I’ve explained it in the video…would love some help on this!

sudsy · 2020-06-04T23:27:31.965Z

morgan:

Each of the legal “blurbs” need to have further references in them.

Hi @morgan,

Nice visual explanation.

How many total “references” might there be on a page of your app? Tens? Hundreds? More?

You say the references are coming from “another database”. Does that mean a separate table within the same Bubble database or a separate database external to Bubble?

Just thinking through performance considerations.

morgan · 2020-06-05T09:55:01.004Z

Hey there, thanks for trying to assist.
In answer to your questions there are hundreds of “blurbs” and thousands of “references” all written and formatted in microsoft word with very specific formatting that I have been able to transfer into bubble via google docs by lawyers so html is not an option, it needs to reference the text they are writing.

Yes I am referring to one table for “blurbs” and another table within the same bubble app for “references”.

Performance is not really the issue as I am only showing a page “blurb” at a time that mau contain 10 up to or so references.

I hope I’ve explained it well enough for someone to assist.

sudsy · 2020-06-05T13:44:28.745Z

morgan:

one table for “blurbs” and another table within the same bubble app for “references”.

Got it.

morgan:

I am only showing a page “blurb” at a time that mau contain 10 up to or so references.

Got it. (I thought perhaps multiple blurbs might need to be combined into a single document at some point.)

The “token replacement” part should be doable in pure Bubble. I can try to put together a demo later. Displaying the tooltip/popover would likely require a plugin or JS library.

In any event, the desired functionality can certainly be achieved. I will post back when I have something to share.

sudsy · 2020-06-08T18:08:12.157Z

sudsy:

I will post back when I have something to share.

Ok, here’s what I came up with…

Dynamic Data Merge (with edit mode link)

Overview

This general approach has a number of potential uses where a user-facing data merge is desired. The basic steps are as follows:

The text with placeholder tokens (raw blurb in this case) is parsed using regex to extract the tokens into a list.
A single DB search is used to fetch all references whose “Id is in token list”.
A “do every” workflow then simply replaces the tokens with the fetched reference data.

Please Note

For the tokens, I used the reference id surrounded by underscores (instead of square brackets as your video showed) solely to make selecting them in the RTI (Rich Text Input) easier. In other words, double-clicking the token selects the entire token, which makes applying styles much quicker.
I used a simple alert to display the reference details, but of course, the details could be shown using a tooltip, popover, or any other method.

morgan · 2020-06-09T00:03:47.889Z

Hey Steve, that is fantastic mate!!!
I’m happy to pay for your time to do that. What’s the best way to get in contact?
My email is morgan@incling.com.au btw

I’m super impressed with your example. Would like to discuss with you as there are some more questions.

sudsy · 2020-06-09T01:44:56.510Z

Hi @morgan, I’m glad you think it might be useful.

Also, just FYI, the solution does not depend on the repeating groups; rather, all data resides in custom states. The RG’s are there simply as “windows” into the data.

And as I indicated initially, the link click behavior will require some JS - be it a plugin, open source library, or inline script.

I will contact you privately to discuss further.

system · 2020-08-13T02:29:07.123Z

This topic was automatically closed after 70 days. New replies are no longer allowed.