How to create multiple columns with checkboxes?

I have an array of data, and I want to create multiple rows of checkboxes for these values. So let's say I have 30 values and i want 10 checkboxes per row. So that would give me three rows of checkboxes. I did something like this to create it.

a!checkboxField(
            choiceLayout: "COMPACT",
            choiceLabels: list of value(10),
            choiceValues: list of value(10),
            value: local!userSelection,
            saveInto: {
              local!userSelection,
              {additional saves}
              })
              

The code above works as expected, I can display the values and save them. The only problem is that since the labels have different lengths, the checkboxes look all over the place. I tried padding the labels to the right to make them all the line up, but the padding doesn't seem to do anything inside the component.

My other solution was to create multiple columns, one for each checkbox, that way they all line up. I was able to create this too, however by I cannot save the values because I don't have a static local variable to do it. I tried saving into fv!item but that throws an error. Any help or direction would be appreciated.

Here is a code snippet of what I was trying to do

a!columnsLayout(
            columns: {
                    a!forEach(
                      items: list of 10 values at a time(array),
              expression: 
              a!columnLayout(
                contents: a!checkboxField(
                  value: fv!item,
                  choiceLayout: "COMPACT",
                  choiceLabels: rule!APN_displayUser(fv!item),
                  choiceValues: fv!item,
                  saveInto: {
                    /*here is where I have problems saving the data*/
                        
                    }
                  )
                )
                )
               }
          )

  Discussion posts and replies are publicly visible

  • Suggesting you to save it in a variable of array type:

    The below code works for me

    load(
    local!input:enumerate(10),
    local!choices:local!input,
    local!output:{},
    a!columnsLayout(
    columns: {
    a!forEach(
    items: local!input,
    expression:
    a!columnLayout(
    contents: a!checkboxField(
    value: index(local!output,fv!index,null),
    choiceLayout: "COMPACT",
    choiceLabels: fv!item,
    choiceValues: fv!item,
    saveInto: {
    index(local!output,fv!index,null)
    }
    )
    )
    )
    }
    ))

  • Saw this post today and took a crack at creating a dynamic checkbox interface. This is what I came up with 

    a!localVariables(
      local!temp,
      local!cols: if(isnull(ri!numOfColumns), 3, ri!numOfColumns),
      local!division: length(ri!checkboxValues) / local!cols,
      local!minPerCol: rounddown(local!division, 0),
      local!maxPerCol: roundup(local!division, 0),
      local!mod: mod(length(ri!checkboxValues), local!cols),
      {
        a!columnsLayout(
    
          columns: 
          a!forEach(
            items: enumerate(local!cols),
            expression: 
            a!localVariables(
              local!index:  (
                
                /* Determining the size of the row. If fv!item is <= 0 then it will be a "short" column */
                enumerate(
                  if(
                    fv!item - local!mod < 0,
                    local!maxPerCol,
                    local!minPerCol
                  )
                ) + 
                /* Enumerate returns a value of 0 to 1-n. The array needs to be shifted by maxPerCol * fv!item */
                (local!maxPerCol * fv!item) + 
                /* 
                If the current item - mod is less than 0, or mod is 0 (meaning the number of items / number of columns is a whole number)
                then 1 is added to the "shift". Otherwise, the shift will need to be SUBSTRACTED by the value of (fv!item - local!mod -1) * -1
                */
                if(
                  or(fv!item - local!mod - 1 < 0, local!mod = 0),
                  1,
                  (fv!item - local!mod - 1) * - 1
                )
              ),
              local!values: index(ri!checkboxValues, local!index),
              local!labels: index(ri!checkboxLabels, local!index),
              a!columnLayout(
                contents: 
                a!checkboxField(
                  choiceLabels: local!labels,
                  choiceValues:local!values,
                  value: remove(ri!selected, rule!TCO_wherenotcontains(array: ri!selected, values: local!values)),
                  saveInto: {
                    local!temp,
                    a!save(ri!selected, union(index(ri!selected, rule!TCO_wherenotcontains(array: ri!selected, values: local!values)), local!temp))
                  }
                )
              )
            )
          )
        )
      },
    )