Changing Multiple items with a single Parameter

[tylerjms7]

I’m working on creating some creative parameters for a new website I’m working on. In this scenario, what I want to do is give users a single set of “Choose” options, but then let the output of those choose options select different values for multiple parameters.

For example: Select an icon size: 1, 2, 3
If they select 1 it would set the icon width and height to 1em, and the icon font size to .75em.

If they choose 2, it would set the width and height to 2em, and the icon size to 1em.

The beauty of parameters is the ability to abstract away complexity. If I could abstract even more complexity away by giving users these kind of options would be huge.

I’m not sure if this is possible, if so let me know! If not this is a feature request.

Thanks for everything you guys are doing, this new update is a GAME CHANGER.

[tylerjms7]

Ok, I think I’ve cracked this already for those who wonder how to do this.

Basically for the “Value” part of the Choose, I added two new parameters. So that when that option is chosen each parameter is given a specific value.

"iconSize" : {
  "label"    : "Size",
   "type"    : "choose",
  "initial" : "2",
  "options" : [
    { "value" : {
      "icoFontSize" : ".75em",
      "icoCircleSize" : "1.25em"
    },
    "label" : "1" },
    { "value" : {
      "icoFontSize" : "1em",
      "icoCircleSize" : "1.5em"
    } ,
    "label" : "2" },
    { "value" : {
      "icoFontSize" : "1.5em",
      "icoCircleSize" : "2em"
    } ,
    "label" : "3" }
  ]
}

You do have to change your “wiring” to make this work. You’ll need to add the “iconSize” [key] in front of each option.

{{dc:p:icoOp.iconSize.icoFontSize}}

In my example, I have my icon size inside of an icon group set. So I have p:[group key]:[main key]:[value key]. Theoretically then you could use a single option to select multiple components. I haven’t really pushed this very far yet, but this part at least seems to be working.

[tylerjms7]

Ok, wanted to provide one last example, because I’ve been messing with this more and I’ve now got 4 parameters changing per option. I’ll post the entire JSON file for anyone that wants to copy it. But essentially I am now changing 4 different parameters with each choice. This ensures the icon and text and padding stay the proper scale with each “size” option. It took some messing to find the right values but they are easy to tweak if you want to.

 "iconSize" : {
    "label"    : "Size",
     "type"    : "choose",
    "initial" : "2",
    "options" : [
      { "value" : { 
        "icoFontSize" : ".75em",
        "icoCircleSize" : "1.5em",
        "icoTxtFtSize" : "0.85em",
        "icoRtPad" : "10px"
      },
      "label" : "1" },
      { "value" : { 
        "icoFontSize" : "1em",
        "icoCircleSize" : "1.5em",
        "icotxtFtSize" : "1em",
        "icoRtPad" : "20px"
      } ,
      "label" : "2" },
      { "value" : { 
        "icoFontSize" : "1.5em",
        "icoCircleSize" : "1.5em",
        "icotxtFtSize" : "1em",
        "icoRtPad" : "20px"
      } ,
      "label" : "3" },
      { "value" : { 
        "icoFontSize" : "1.75em",
        "icoCircleSize" : "1.5em",
        "icotxtFtSize" : "1.25em",
        "icoRtPad" : "25px"
      } ,
      "label" : "4" }
    ]
}

Again, for these remember to update your keys to include the “iconSize” key and then the key for each value.

{{dc:p:iconSize.icoTxtFtSize}}
{{dc:p:iconSize.icoCircleSize}}  
{{dc:p:iconSize.icotxtFtSize}}  
{{dc:p:iconSize.icoRtPad}}  

So if you want this same button here’s the JSON code to get the parameters.

{
  "text" : {
    "label"   : "Text",
    "type"    : "text",
    "initial" : "Click Me"
  },
    "case" : {
    "type"    : "choose",
    "label"   : "Letter Case",
    "initial" : "Tt",
    "options" : [
      { "value" : "capitalize", "label" : "Tt" },
      { "value" : "uppercase", "label" : "TT" }
    ]
  },
  "link" : {
    "label"   : "Link",
    "type"    : "text",
    "placeholder" : "Link URL Goes Here"
  },
  "btnColor" : {
    "label"   : "Color & Fill",
    "type"    : "color-pair",
    "initial" : {
      "base" : "rgb(0, 49, 73)",
      "alt"  : "rgb(31, 171, 223)" 
    }
  },
  "icoOp" : {
    "type"   : "group",
    "label"  : "Icon Options",
    "params" : {
      "icon" : {
        "type"    : "fa-icon",
        "label"   : "Type",
        "initial" : "l-angle-left"
        },
       "icoColor" : {
    "label"   : "Circle Color",
    "type"    : "color-pair",
    "initial" : {
      "base" : "rgb(0, 49, 73)",
      "alt"  : "rgb(168, 217, 219)" 
    }
  },
        "iconSize" : {
        "label"    : "Size",
         "type"    : "choose",
        "initial" : "2",
        "options" : [
          { "value" : { 
            "icoFontSize" : ".75em",
            "icoCircleSize" : "1.5em",
            "icotxtFtSize" : "0.85em",
            "icoRtPad" : "10px"
          },
          "label" : "1" },
          { "value" : { 
            "icoFontSize" : "1em",
            "icoCircleSize" : "1.5em",
            "icotxtFtSize" : "1em",
            "icoRtPad" : "20px"
          } ,
          "label" : "2" },
          { "value" : { 
            "icoFontSize" : "1.5em",
            "icoCircleSize" : "1.5em",
            "icotxtFtSize" : "1em",
            "icoRtPad" : "20px"
          } ,
          "label" : "3" },
          { "value" : { 
            "icoFontSize" : "1.75em",
            "icoCircleSize" : "1.5em",
            "icotxtFtSize" : "1.25em",
            "icoRtPad" : "25px"
          } ,
          "label" : "4" }
        ]
    }
    }
  },
    "spacingOptions" : {
    "type"   : "group",
    "label"  : "Top & Bottom Margin",
    "noPicker" : true,
    "params" : {
        "topSpacing" : {
          "label"    : "Top",
          "type"     : "dimension",
          "initial"  : "0em",
          "slider"   : true,
          "keywords" : [ "auto" ],
          "units"    : [ "px", "em", "rem" ],
         "ranges"   : {
            "px"  : { "min" : 0, "max" : 30, "step" : 5 },
             "em"  : { "min" : 0,  "max" : 3,  "step" : 0.25  },
            "rem" : { "min" : 0,  "max" : 3,  "step" : 0.25  }
          }
        },
          "bottomSpacing" : {
          "label"    : "Bottom",
          "type"     : "dimension",
          "initial"  : "0em",
          "slider"   : true,
          "keywords" : [ "auto" ],
          "units"    : [ "px", "em", "rem" ],
         "ranges"   : {
            "px"  : { "min" : 5, "max" : 30, "step" : 5 },
             "em"  : { "min" : 0.25,  "max" : 1.5,  "step" : 0.25  },
            "rem" : { "min" : 0.25,  "max" : 1.5,  "step" : 0.25  }
          }
  			}
			}
    }
}

[charlie]

That is a great example and thanks for posting this. I will make a note that we should add doc info on inner objects values.
Let us know how we can improve parameters, I think the fun has really just begun with this feature.