Component Parameters

[capodanno]

Hello! I am trying to learn components and parameters. I have a very simple component set up–a div with an image (transparent background PNG) inside of it.

I want to have a parameter to change the background color.

I have added this:

{
  "bgColor" : {
    "label"   : "Background",
    "type"    : "color",
    "initial" : "#000000"
  }
}

But when I select the background color, nothing changes. Am I supposed to add this parameter to the div or to the image? I’ve tried both, but nothing is working!

I can go to the Primary tab for the Div or the Image tab for the image and successfully change the background color in my component document, but I can’t seem to figure out where to put this JSON code, so that the PARAMS tab actually changes the background color!

[ruenel]

Hey @capodanno,

Thanks for writing in!

You should be adding the parameters to the DIV element.

And then in the background field, you will have to insert the dynamic content {{dc:p:bgColor}} to return and display the color.

Hope this makes sense.

[capodanno]

This made sense, thank you! I had missed the part where I put the dynamic content into the color picker.

I don’t know JSON, so I will need to better familiarize myself with how to use these features. This article was helpful, but I think I now see how to create the dynamic content in the actual field that chooses what to output…

Learning something new all the time! Thanks for your help.

[ruenel]

No problem @capodanno.
We’re just glad we were able to help you out.