Grid Layout Patterns

// This loops over an array to efficiently create the grid layout
a !localVariables(
    /*Set Data*/
    local !headerNames: {
        "Account",
        "Upcoming Outflows",
        "Minimum Account Balance",
        "Status",
        "Notes"
    }
    ,
    /*Editable grid config*/
    local !columnConfig: {
        "DISTRIBUTE",
        "DISTRIBUTE",
        "DISTRIBUTE",
        "DISTRIBUTE",
        "MEDIUM_PLUS"
    }
    ,
    local !apiData: {
        a !textField(value: "data-1", readOnly: true),
        a !textField(value: "data-2", readOnly: true),
        a !textField(value: "data-3", readOnly: true),
        a !textField(value: "data-4", readOnly: true),
        a !textField(value: "I am writing a comment here")
    }
    ,
    a !gridLayout(headerCells: a !forEach(items: local !headerNames,
            expression: a !gridLayoutHeaderCell(label: fv !item)),
        columnConfigs: {
            a !forEach(items: local !columnConfig,
                expression: a !gridLayoutColumnConfig(width: fv !item))
        }
 
        ,
        rows: {
            a !gridRowLayout(contents:local !apiData),
            a !gridRowLayout(contents:local !apiData)
        }
    ))