How can I search and replace HTML in workflow

Need help Database
1

Hello folks,

I’ve been trying for two weeks now and I can’t solve the problem.

In my app, a user can select an HTML button and add it to their repeating group.

I would like the button text to be adjusted in the workflow depending on the user input and the css classes of e.g. id_0000001 is changed to user 1+1. (So the name of the user plus an increasing number to always get an individual CSS class).

image
image303×516 16.1 KB

I have already read many posts and experimented with the toolbox. At best, I was able to generate an error message.

In the bubble database, from which the HTML is retrieved, there are the fields button text (is filled with BUTTON), the HTML incl. CSS.

I created a workflow, as soon as the user clicks on the button of his choice, a new record is created in the user database. Then, in the same workflow, I tried to modify the HTML code using JavaScript with search and replace, i.e. to change the ID and the button text.

Here is the html code:

Custom Button .id_0000001 { font-size: 17px; padding: 0.5em 2em; border: transparent; box-shadow: 2px 2px 4px rgba(0,0,0,0.4); background: dodger blue; colour: white; border-radius: 4px; width: 100%; } .id_0000001:hover { background: rgb(2,0,36); background: linear-gradient(90deg, rgba(30,144,255,1) 0%, rgba(0,212,255,1) 100%); } 
     .id_0000001:active {
       transform: translate(0em, 0.2em);
     }
 </style>

   <button class="id_0000001">BUTTON</button>
 </a>

Do you have an idea?
Thank you in advance :slight_smile:

2

fetching html from database, then find and replace pieces of strings inside it, then sticking it into the page with an html element feels like a very bad practice.
Any reason why you don’t use a button element and store a configuration for style ecc in the database?

3

hi @dorilama, thanks for your quick feedback, yes, if it were just buttons it would be ok. :slight_smile:
there will be other elements in the future.
then I would have many hide elements in the repeating group.

I could also create a workflow for each button style, unfortunately that’s not really scalable.

Do you have an idea how I can create this with javascript?
It looked so easy in the other forum posts, but I just can’t make it work.

4

what it is not scalable? All the style properties that you need are supported in bubble. It can be a bit tedious to set them (it’s only a condition anyway) but once you do it it’s done.
In a better version of bubble we would have the ability to add a class for css rules without other hacks but it’s still better than parsing string and injecting them as innerHTML.
If you are sure you want to do it with code then you should think about making a plugin so that you can handle it properly.

5

Keep in mind that the html element used with user generated content can open to security problems.