Web form layout: Indent nested items

[nicebread]

Can we indent hierarchically nested items? (i.e., items that pop up when a filter item is activated; items with an leading ⤷). Maybe indent + shaded background in light grey.

Easiest implementation might be that the nesting level is explicitly defined in the JSON (automatic indenting might be complicated and probably does not work in all cases).

Goal is to visually group items together that belong together.

[alpkaanaksu]

Can't we use our new hierarchical Ids for this?

We start with indentation level 0. If the current id starts with the id of the previous indicator, we increment the indentation level. Counting the number of '_' could also help.

For example:

'P_Data' 'P_Data_Open'

'P_Data_Open' starts with 'P_Data', so we indent 'P_Data_Open'

[nicebread]

Good idea!

[alpkaanaksu]

Can't we use our new hierarchical Ids for this?

I think that works. I was playing with this idea, I wrote a simple algorithm that takes a one-dimensional array and gives it a multi-dimensional structure by comparing the hierarchical ids.

The following list

"P_Data",
"P_Data_Source",
"P_Data_Type",
"P_Data_Type_Other",
"P_Data_Open",
"P_Data_Open_NAExplanation",
"P_Data_Open_Identifier",
"P_Data_Open_AccessLevel",
"P_Data_Open_AccessLevel_ZK2Explanation",
"P_Data_Open_FAIR",
"P13P14SEP",
"P_IndependentVerification",
"P_IndependentVerification_NAExplanation",
"P_IndependentVerification_Identifier",
"P_ReproducibleScripts",
"P_ReproducibleScripts_NAExplanation",
"P_ReproducibleScripts_Identifier",
"P_ReproducibleScripts_FAIR",
"P_OpenMaterials",
"P_OpenMaterials_NAExplanation",
"P_OpenMaterials_Identifier",

is converted to

"P_Data",
[
  "P_Data_Source",
  "P_Data_Type",
  [
    "P_Data_Type_Other"
  ],
  "P_Data_Open",
  [
    "P_Data_Open_NAExplanation",
    "P_Data_Open_Identifier",
    "P_Data_Open_AccessLevel",
    [
      "P_Data_Open_AccessLevel_ZK2Explanation"
    ],
    "P_Data_Open_FAIR"
  ]
],
"P13P14SEP",
"P_IndependentVerification",
[
  "P_IndependentVerification_NAExplanation",
  "P_IndependentVerification_Identifier"
],
"P_ReproducibleScripts",
[
  "P_ReproducibleScripts_NAExplanation",
  "P_ReproducibleScripts_Identifier",
  "P_ReproducibleScripts_FAIR"
],
"P_OpenMaterials",
[
  "P_OpenMaterials_NAExplanation",
  "P_OpenMaterials_Identifier"
],

This looks correct to me.

[nicebread]

Yes, that looks correct