Parameter group output issue

[Regnalf]

I’ve playing with different parameter settings and found some issue with grouped parameters!

I created the following parameters:

{
  "Button" : 	{ "type" : "group",
              	"params" :
                {
                  "btn-label" : { "type" : "text",		"placeholder" : "Platzhalter"		},
                  "side" :     	{	"type" : "select",	"initial" : "center",
                                  "options" :
                                  [	{ "value" : "left",  "label" : "Left" },
                                    { "value" : "right", "label" : "Right" },
                                    { "value" : "center", "label" : "Center" }]}
                }
  }
}

And they seem to be correct in the parameter inspector:

But if i use only one to put out the parameter text …

It put outs all settings from this group in a comma separated style …

[scotbaston]

try changing Button:btn-label to Button.btn-label

[Regnalf]

That worked, but it isn’t declared in the docs there it should be …

Did i missed something?

[scotbaston]

It was in the beta documentation for parameters

I’m out at the moment but will link it here when I’m back

[Maratopia_Digital]

Interesting!

There seems to be a bit of inconsistency in the documentation I think because on this link:
https://theme.co/docs/draft-parameters#nested-grouping It is showing it as @scotbaston did it.

And on this link, it’s saying slightly different like @Regnalf did: https://theme.co/docs/parameters#parameter-groups

I’m assuming by the URL on the first link, it might still be in writing since it is “draft-parameters”

[Regnalf]

Thanks a lot, i think we need a statement from theme.co staff here!

[kory]

@Regnalf / @scotbaston / @Maratopia_Digital

The link to the Parameters article you have above is an old one that shouldn’t be published (oops). I have removed it from our repo and it should be taken down shortly.

Please use this one mentioned in the pinned post:

Parameters | Themeco Docs

That shows the syntax for referencing keys, which after the {{dc:p: portion uses a dot syntax like typical JSON notation. This is discussed under the “Grouping Controls” section:

Parameters | Themeco Docs

Hopefully that clears things up!

[Regnalf]

Thanks for the clarification. Other question: Will there be a parameter editor, like for example with the effects of an element?
With more complex parameters, the JSON code can get quite messy if you have to write it manually.

I have also tried assigning parameters in fields other than text fields. This seems to work as well (see pictures). And in the Flex Box settings it now says Custom, but I don’t see any way to enter this parameter except via the Dev Tools. This might be a bit too hidden. Will there be the possibility to select or enter the parameter via a button without having to go through the dev tools?

[kory]

@Regnalf, there are no immediate plans for an interface with Parameters at this time. As for formatting JSON (or any bit of code, really), it can certainly get a bit messy if things don’t follow some sort of standard. Everyone has different preferences for formatting, but the examples I’ve provided in the Parameters Docs article showcase how I tend to write those things out. I will do certain things like ensure that my value / label pairs for things like the "choose" or "select" controls line up vertically, in addition to my brackets like so:

[
  { "value" : "flex-start", "label" : "Left"   },
  { "value" : "flex-end",   "label" : "Right"  },
  { "value" : "center",     "label" : "Center" }
]

Little techniques like this really help make it easier to visually parse things.

As for assigning values, I mentioned this elsewhere in the forum but almost every control in Cornerstone can receive Parameters (the one notable exception being anything that accepts a boolean value, along with a few other contexts).

One keyboard shortcut I think you would find very helpful to add to your preferences in the Dev Toolkit is the following:

"inspector-breakout-mode" : "mod+b"

You can change the shortcut to whatever you would prefer, but what “Inspector Breakout Mode” does is when I hit CMD + b on my Mac, any control that is mapped to do so in the Workspace Controls will change to a simple text input for easy input of custom values, including your Dynamic Content strings for Parameters. For example, the “Setup” control group of a Section normally looks like this:

But when I hit CMD + b to toggle on “Inspector Breakout Mode,” I see the following:

Notice how everything is now immediately accessible as it is in the Dev Toolkit, just in the Workspace. This is a huge timesaver and I recommend leveraging it whenever possible. Note how controls like the base / interaction color picker are broken out into two separate lines now, in addition to the “Advanced” checkbox not being broken out, because it accepts a boolean value as mentioned previously.

This does not work for every control, but you will find that most of them are accessible in this way. Hopefully all of that helps!

[Regnalf]

Thanks a lot @kory, but this keybinding should be in the preferences by default. And in general I find that this dev tool area is often underestimated because at first glance it looks like it only affects the development environment of theme.co. Is there a online documentation of the dev-tool anywhere?

Perhaps the term Expert Tools would be more appropriate, because with Dev Tools most probably rather leave the fingers of it.

[kory]

@Regnalf, “Breakout Mode” is a more advanced feature that is really only needed for more involved workflows, so it is not something we plan on surfacing via preferences. Additionally, with the new updated preferences in the Dev Toolkit, keybindings are all exposed now so users can finally map in their preferred shortcuts for various actions (keybindings will be documented in more detail soon, we just have not put up a resource on it yet). Not everybody uses the same actions, shortcuts, browsers, environments, et cetera…so the best we can offer is a way for people to truly tailor their personal workflow to their setup. It takes a couple minutes, but once you have shortcuts and settings that make sense to you, it will make all the difference in the world. The Dev Tookit has always been shared as an advanced feature with the understanding that you can truly break things if you don’t know what you’re doing, but we have exposed it for those users who find value in it.

Hopefully that helps!

[Regnalf]

I would like to share with you an intermediate solution for all those who want to use the parameters excessively.

First, a quite usable Chrome app:

JSON Editor

Or a standalone program for mac users like me with many extras like smart objects
http://www.smartjsoneditor.com

This should help with all those curly brackets, commas and colons.

[kory]

Great stuff, @Regnalf! Thank you for sharing.