Set minimum number of child elements on parent element

Take the row element as an example. Here you could decide that there should always be at least one column which you wouldn’t be able to delete. Currently you can delete all the columns in the row, and if the columns have styling applied to them, you lose that styling when you delete them and click on ‘+ Add Column’ again.

Hey, @JvP! Thanks for writing in…are you saying that this would be some sort of setting on the Row for example that per instance you could decide, “This Row should never have less that 1 Column, this Row should never have less than 2 Columns, this Row can have 0 Columns…”? Currently, the reason for allowing people to zero out their Columns / Cells inside of Rows / Grids is to allow users to get back to the “Choose a Layout” state if they want to start from scratch again. If we imposed some sort of hard floor of these Elements always needing at least 1 child, that state would never show. I’m not entirely sure how a feature like this might be implemented at the moment, but just wanting to get some more clarifying thoughts from you.

Thanks!

Exactly that. This feature should be opt-in on a per element basis with the default setting being how things are done currently. It could be added to the manage element panel perhaps.
The idea is that you can toggle this feature on at any time on rows, grids, etc. whenever you want more control over the layout by enforcing a certain minimum.
I can see this being quite useful when building out components as well. It would allow for an even more tailored editing experience for end users. Imagine a prefab row element with styled columns, and you’d never lose the styling of those column because you can’t delete all of them :slight_smile:

I hope this clarifies the idea a bit.

There’s the layout options in the workspace that would still allow you to change the layout.

@JvP, thanks for this. I have noted this down in our issue tracker as a potential future feature request. This isn’t something I’d want to just “throw in” on this cycle as there are likely bigger implications / patterns to consider here that I want to make sure would be covered appropriately (I know that you’re not saying for us to do that, I just know that this is one of those situations that ostensibly seems simple on the surface, but might have some deeper considerations to work through).

That all being said, I can share with you a work-in-progress feature of Parameters that is not yet publicly released or documented, but you are welcome to experiment with it as the use-cases you’re outlining here would essentially be solved with it. Please keep in mind, we cannot provide any support for this feature because it is not something we are publicly releasing at this time, but it may give you a sense of some more functionality that is to come.

Parameters can be used to generate groups of content, which can be setup by using "group[]" for the "type" key. This then takes a key of "params", which is essentially the list of controls you want to apply to each item in the list as you add them. Take for example, the following statement:

{
  "myItems" : {
    "type"      : "group[]",
    "label"     : "Items",
    "itemLabel" : "{{index}}. {{title}}",
    "params" : {
      "title" : {
        "type"        : "text",
        "label"       : "Title",
        "initial"     : "Title",
        "placeholder" : ""
      },
      "description" : {
        "type"        : "textarea",
        "label"       : "Description",
        "initial"     : "Write a short description here",
        "placeholder" : ""
      },
      "href" : {
        "type"        : "text",
        "label"       : "Link",
        "initial"     : "",
        "placeholder" : "Optional"
      },
      "image" : {
        "type"     : "group",
        "label"    : "Image",
        "noPicker" : true,
        "params"   : {
          "src" : {
            "type"    : "image",
            "label"   : "Source",
            "initial" : ""
          },
          "position" : {
            "type"    : "position",
            "initial" : "50% 50%",
            "when"    : "not(eq(src, ''))"
          }
        }
      }
    }
  }
}

This would result in something like the following in practice:

This has provided us with a way to make a structured set of data with consistent controls that we can loop over and access. For example, you might use this to create a Row with some Columns that all have the same style…a title with a short bit of description text, a link around all that, and then maybe a hero image behind everything. This can be referenced and looped over using a Dynamic Content Looper Provider on an Element and pulling in the data from these “items” by referencing our key of {{dc:p:myItems}}.

Again, none of this is supported at this time, but you are welcome to play around with the concepts and ideas. I only bring it up because ultimately I think this is going to be the answer to the scenarios you’re thinking up. Hopefully that helps to give a bit of context…cheers!

2 Likes

Amazing, thanks for that Kory!

I’m going to have to sit down and really play around with that to see if that covers the feature request.

No problem, @JvP! Again, it’s “experimental” at this point, but you are welcome to play around with it as long as you’re willing to troubleshoot anything on your own right now as it’s not an official part of the spec. :slight_smile:

As one final point of clarity that I did not outline above, once you are inside the looper provided by the Dynamic Content string mentioned above, you would reference each of the nested controls using the following syntax: {{dc:looper:field key="title"}}, {{dc:looper:field key="description"}}, {{dc:looper:field key="image.src"}}, et cetera. Basically, just referencing the appropriate key and making sure to use dot syntax for any nested keys like the image ones in that example.

Cheers!

1 Like

I’ll use it purely as a concept to see if I can create something like what I mentioned. Even if not, it’s still a very cool thing you’re working on that will be useful regardless :smile:

Absolutely!

1 Like