How to use a colors from palette in JSON parameters?

[threeoten]

Hi, I’m wondering how can I reference colors from the sitewide color palette as an initial base and alt setting in a color-pair JSON parameter?

  "textColor" : {
    "label"   : "Text",
    "type"    : "color-pair",
    "initial" : {
      "base" : "Nq4ZHkZzIyJWoil413",
      "alt"  : "IRSLyK5mA5LGT9kp1j"
    }

I tried using the color IDs and it didn’t work, what would I need to change?

[threeoten]

Also, how do I add “nofollow” and “new tab” checkboxes to a URL parameter in JSON?

[tristup]

Hi @threeoten,

Thanks for reaching out.
Unfortunately, there is no option available for the checkbox right now. But you can use the choose type with the Yes/No option for the specific attribute.

"newtab" : {
        "type"    : "choose",
        "label"   : "New Tab",
        "initial" : "yes",
        "options" : [
            { "value" : "yes", "label" : "Yes" },
            { "value" : "no", "label" : "No" }
        ]
    }

Hope it helps.
Thanks

[threeoten]

But how can you use that to get it to make a URL open in a new tab or nofollow?

Also, I was hoping you could answer my question in the first post as well.
thanks

[ruenel]

Hello @threeoten,

You can update the JSON into this:

"newtab" : {
        "type"    : "choose",
        "label"   : "New Tab",
        "initial" : "_blank",
        "options" : [
            { "value" : "_blank", "label" : "Yes" },
            { "value" : "_self", "label" : "No" }
        ]
    },
    "nofollow" : {
        "type"    : "choose",
        "label"   : "No Follow",
        "initial" : "nofollow",
        "options" : [
            { "value" : "nofollow", "label" : "Yes" },
            { "value" : " ", "label" : "No" }
        ]
    }

And then in your Component, you can add a custom attribute like:

As for the colors, you might need this:

"textColor" : {
    "label"   : "Text",
    "type"    : "color-pair",
    "initial" : {
      "base" : "global-color:Nq4ZHkZzIyJWoil413",
      "alt"  : "global-color:IRSLyK5mA5LGT9kp1j"
    }

Hope this helps.