Issue with "Using objects as values in Parameters" type select

Support
#1

Hej @charlie,

I am trying to create a SuperHeadline.
I want to choose/select a variant at the beginning, and it’s changing the style based on it.
If I am using choose as the type for the variant, it is working correctly, but if I am using select, it’s crashing.
I have seen your recommendation of using JSON to debug:
{{dc:p:HeadingSetup.variante type="json"}}
In this case, I get [object Object] instead of the values.

Can you tell me what I am missing?
I would like to use select, as I would like to give the variant a self describing name instead of an unspecific abbreviation.

Choose:
grafik

Select:
grafik

Output:

grafik
grafik2590×366 26.1 KB

Parameters:

{ 
  "HeadingSetup" : {
"type"   : "group",
"label"  : "Setup",
"params" : {
  "variante" : {
    "type"    : "select",
    "label"   : "Variante",
    "initial" : "h1-s",
    "options" : [
      {
        "value" : {
          "fontSize" : "calc(8.5rem - 90px)",
          "fontFamily" : "Stacion",
          "fontWeight" : "400",
          "lineHeight" : "1"
        }, 
        "label" : "h1-s" 
      },
      { 
        "value" : {
          "fontSize" : "calc(7.5rem - 90px)",
          "fontFamily" : "Stacion",
          "fontWeight" : "300",
          "lineHeight" : "1.05"
        },  
        "label" : "h2-s" 
      },
      { 
        "value" : {
          "fontSize" : "calc(3rem - 25px)",
          "fontFamily" : "Stacion",
          "fontWeight" : "300",
          "lineHeight" : "1.15"
        },  
        "label" : "h3-s" 
      },
      { 
        "value" : {
          "fontSize" : "calc(0.5rem + 12px)",
          "fontFamily" : "4f76657270617373",
          "fontWeight" : "fw-normal",
          "lineHeight" : "1.333"
        },  
        "label" : "h3-o" 
      },
      { 
        "value" : {
          "fontSize" : "calc(0.5rem + 8px)",
          "fontFamily" : "4f76657270617373",
          "fontWeight" : "fw-normal",
          "lineHeight" : "1.4"
        },  
        "label" : "h4-o" 
      }
    ]
  },
  "content": {
    "type"       : "text-editor",
    "initial"    : "Super Headline",
    "expandable" : true
  },
  "tag" : {
    "type"    : "choose",
    "label"   : "Tag",
    "initial" : "h1",
    "options" : [
      { "value" : "h1", "label" : "h1" },
      { "value" : "h2", "label" : "h2" },
      { "value" : "h3", "label" : "h3" },
      { "value" : "h4", "label" : "h4" },
      { "value" : "h5", "label" : "h5" },
      { "value" : "h6", "label" : "h6" },
      { "value" : "p",  "label" : "P"  }
    ]
  },
  "styling" : {
    "type"     : "group",
    "label"    : "Styling",
    "noPicker" : true,
    "params"   : {
      "textAlign" : {
        "type"    : "text-align",
        "label"   : "Ausrichten",
        "initial" : "none",
        "isVar"   : true
      },
      "color": {
        "type"    : "color-pair",
        "label"   : "Farbe",
        "initial" : {
          "base" : "global-color:novTannengruen",
          "alt"  : ""
        },
        "isVar"      : true,
        "responsive" : false
      },
      "maxWidth" : {
        "type"    : "max-size",
        "label"   : "Max Width",
        "initial" : "100%",
        "isVar"   : true,
        "description": "Hier am besten einen em-Wert verwenden. Dieser passt sich relativ zur Größe der Schrift an."
      }
    }
  }
}
  },
  "HeadingSpacing" : {
"type"   : "group",
"label"  : "Abstand",
"params" : {
  "margin" : {
    "type"     : "group",
    "label"    : "Margin",
    "noPicker" : true,
    "params"   : {
      "top" : {
        "type"        : "margin",
        "label"       : "Oben",
        "labelBefore" : "css:margin-top",
        "initial"     : "0em",
        "isVar"       : true
      },
      "left" : {
        "type"        : "margin",
        "label"       : "Links",
        "labelBefore" : "css:margin-left",
        "initial"     : "0em",
        "isVar"       : true
      },
      "bottom" : {
        "type"        : "margin",
        "label"       : "Unten",
        "labelBefore" : "css:margin-bottom",
        "initial"     : "0.45em",
        "isVar"       : true
      },
      "right" : {
        "type"        : "margin",
        "label"       : "Rechts",
        "labelBefore" : "css:margin-right",
        "initial"     : "0em",
        "isVar"       : true
      }
    }
  }
}
  }
}

Can you help me, please?
Kind regards
Carlo

#2

I don’t think I ever setup type select to be able to use objects. If you change the select to a choose you should be able to proceed. I’ll make a note to set that up. Have a great day.

1 Like
#3

@charlie. At the moment I am using the choose type. But it’s not very good for communicating what’s happening with the different options.
The biggest problem is, the options are not wrapping, if the buttons are too small for the text.
Can I change this behaviour? If the buttons are wrapping automatically, I can work with it.
Have a great weekend!
And thank you for the good work you all doing.

1 Like
#4

I don’t think I can give you a way to wrap the controls, just by the way they are laid out. It’d probably be easier to setup objects in Select as an option.
Thanks for the kind words.

1 Like