How are component parameters wired to the setting options of an element?

[Daryl_Shaw]

Hi,
I read https://theme.co/docs/parameters#creating-your-first-parameters and https://theme.co/docs/parameters#control-types-icon but still don’t understand how to wire further parameters to elements.

There it is said:
“Next, we need to wire up our Parameters so that our controls are outputting properly. To do this, we’ll be using Dynamic Content in the form of {{dc:p:__key__}} , where __key__ is the value of the string on the left side of the : seen above.”

I understand that as long as it is about direct input in text fields, e.g. the text label of a button.
But where in the element settings do I enter the parameters that affect, for example, the icon of a button (graphic) or the color scheme?

For example I added an icon parameter to a button element as component:
“icon” : {
“type” : “fa-icon”,
“label” : “Icon”,
“initial” : “circle”
}

But I can’t replace the preset graphic icon with a string like {{dc:p:icon}}.
Where in the button properties do I have to enter {{dc:p:icon}} now?

The component/parameter tutorial to create buttons ends at the point where i would learn to wire other parameters (like colors, additional graphic icon etc.) with the options of the element.

Thanks for advice

[ruenel]

Hello Daryl,

Thanks for writing in!

While you are in the builder, enable the Breakout Mode by pressing “CTRL + ALT + B” on Windows or “Command + Option + B” for Mac.

Best Regards.

[ronaldo304]

Hi, another question regarding Icons. I’m somewhat familiar with options and groups etc. by now. But how do I set a parameter to switch elements on or off, for icons in a button for example. Is there a way to do this? Thank you!

[Daryl_Shaw]

@ruenel: Thank you for pointing out the breakout mode.
For customers like me, who come from design rather than coding, these tips, which may be trivial for those with coding experience, would be very helpful.

I think the ability to pass options to the components is great. The programming of these options via JS makes sense for experienced coders and is understandable for me as a designer, too. But it should not be assumed to be “logical” for every user, but should be documented in all options (or did I miss something?).

Actually I find the JSON model to be a complicated “coding detour”, because I would find it more logical to be able to simply select / mark in the element options which parameters I want to make optional for the components. This would be my feature request.

The follow-up question from ronaldo304 shows that we have the same open questions here (I’ll add: how can you, for example, pass a parameter to a button that regulates opening in a new tab?)

[ronaldo304]

Hey Daryl, I use this parameter for my link target with a custom attribute. Not sure if it’s the right (simple) way, but it works for me. So you can choose later between _self or _blank. It looks like this:

[Daryl_Shaw]

@ronaldo304: Hi, that’s working fine, thank you! Do you know any option to decide about “Additional graphic icon / no icon”, too? It doesn’t work to simply set “” as initial icon because there will be some empty space.
I’d prefer a simple checkbox like in the element options?

@ruenel: Are there any other simple possibilities to add such options?

[ruenel]

Hello Daryl,

Regretfully we do not have any other option at the moment. For now, JSON format is the way to easily manage the needed data for each of the component parameters. There might be another way to add those data which is not possible right now. We just hope that in future updates, adding a parameter would just be a click-and-drag system.

Thank you for your understanding.