Bind h1,h2 to symbol field dynamically

[radikris]

Hello!

I have a symbol:

Builder.io: Drag and drop page builder and CMS

And for this input, we will bind a symbol as a reference:

Here is an example data:

Builder.io: Drag and drop page builder and CMS

As you can see, this data entry has a boolean flag, which should indicate if this is the first data or not, if true, then I want to wrap the title in h1, else (false) wrap into h2.

Of course I don’t want to do that manually by adding this tag in the data entry, I want to do that programatically in the symbol.

Here is how we bind the title to this text:

I tried something like this, but this is not working:

Hope I could explain the problem clearly, and you can help me to solve this, it is a must have for our SEO purposes.
Thanks in advance!

[logan]

Hi @radikris!

This is a really cool question. I’m glad to see a great usecase for symbols and input! Plus, including the links and screenshots made understanding this question really easy, so thank you for that.

For the input of the title itself, you won’t need a rich text / HTML input. Setting this to a short text input will prevent your editors from accidentally pasting unwanted styles or tags.

When calling the text for the title, bind this to a Custom Code block, rather than a text box.

Finally, in the code itself, you want to return a string. You can reduce the binding code you wrote down to this single line:

state.resultsItem.data.isFirstH1 ? `<h1>${state.resultsItem.data.title}</h1>` : `<h2>${state.resultsItem.data.title}</h2>`

Here is my recreation of this question in a Fiddle. The only difference is that I named the boolean data.isHero when creating the symbol. Styles are coming from the Data > Edit Content JS + CSS panel.

I hope this is helpful for you, and have a great weekend!

[radikris]

I just wanna say thank you, works like a charm, best wishes @logan , have a great weekend!