How to highlight a word appearing multiple times in RG

Hi there,

Imagine I have a repeating group (RG).

Each cell in the RG contains several sentences. The sentences are different in each cell, but however varied those cells may be, there is always 1 constant: they each contain the word ‘apple’. The position of that word (‘apple’) might be different from cell to cell (might be the 5th word in one cell, the 9th in another etc.). But whenever the word ‘apple’ appears I would like to have it display as a highlighted word. Note: Only the word ‘apple’, and none of the other words in the cell(s) would be highlighted.

So: Is there a way to highlight that word, and only that word, as it appears within the RG cell among the other sentences?

NOTE: if not highlighting, then I would settle for different font color/size, etc.

Thank you!

Best,
P

Is the sentence in the RG from a database.

No - from an API call.

P

Is it always the same word every time or will at least one thing be the same consistent such as a # or @? I’m wondering if you could store the API response in a field and then write a custom workflow to do the following:

  1. Store the response from the API call in a field.
  2. Truncate the text up to the word using “:truncate” (store this in a field) and then use “:truncate from end to” to store the text after the word in another field.
  3. Store the new string (which should be just the word you want) in a new field.
  4. Add [color] tags to the beginning/end (highlighting won’t work since you have to use span tags and the Text Box can’t interpret it)
  5. Store the newly formatted text in a field.
  6. Parse all three fields together in the Text Box or store it in another field and just display that one field.

That should work but only if the word is consistent or you have a way to limit the truncate commands to omit the word you want to color.

I suppose while you’re on a parsing spree you could just add the HTML tags to the whole thing, wrap the word you want in <span style="background-color: #FFFF00">some word</span> and then display all of it in an HTML element…

Either way you would have to store it in a temp table somewhere. I don’t see any way around that.

Thank you Chris.

@emmanuel, this is too clunky for such a simple function. Think you guys could add this?

Basic - if (dynamic data) appears in RG cell, allow users to modify the appearance of that data via the ‘conditional’ tab - either within the RG or the individual text cells within them!

Thank you,
P

Bubble uses Algolia to search for words in the reference section of the website.
The content is pulled in with an api.

Hi - willing to tackle the solution posed by Chris. But as mentioned it seems extremely cumbersome for such simple functionality.

@emmanuel , do you think this is something you can add in to Bubble? Or am I going to have to go the long route?

Thank you,
P

How would that work?

Hi @emmanuel ,

In the Conditional.

Here’s how: Within the RG user could click on the ‘current cell’s [text/data/etc.]’. Under ‘Conditional’ we can already select dynamic data, so no changes to Bubble required yet.

So let’s say we select ‘Current cell’s [data] contains [input A’s value]’. In this example ‘Input A’ is the dynamic data we’re interested in formatting.

Now, under ‘Select a property to change in this state’, just enable a "Formatting rules:’ button. Clicking on it brings up a subset of rules. Such as: [insert dynamic data (i.e. Input A’s value)] is RED. Or [insert dynamic data (i.e. Input A’s value)] is UNDERLINE. Etc. This would leave all the other text in the cell unaffected and change only that which is specified under these rules.

Thoughts?

Thank you,
P

A subset of rules sounds a bit scary in our interface.

Ok @emmanuel , well maybe I’m not describing it right.

Basically, Bubble already has a ‘Text’ box under conditional. Just change it to be less literal.

Currently it is too ‘literal’ – the if/then is such that if user says 'if cell contains “Cats” ’ then [Select a property to change in this state–>text box–>“make “Cats” GREEN] means that the *entire cell” text reads “Cats” [in GREEN font].

I want it to read “blah blah blah Cats [in GREEN font] blah blah blah”. Maybe just put a check box next to the text box [Select a property to change in this state–>text box] that toggles between ‘replace cell text with text in this box’ vs. ‘apply formatting to this portion of cell text only’.

Thoughts?

Thank you!
P

I’ll think about it, might be a little complicated… And not a quick win.

if i got the ask right i may have figured out a simple solution. I used the :find&replace as follows:
1- find the text i want to be searched for “using dynamic data”
2- replace it with the same exact text " using the same dynamic data" but with the rich text feature i changed the replaced text original color to the new color i want.

1 Like