Header in interface

RE: Header in interface

mohammeda0010 — Wed, 16 Dec 2020 19:28:17 GMT

Please try below code, hope this will help you in some way.

Regards,

Abdul Lateef

a!localVariables(
  local!employees: {
    a!map(
      id: 1,
      firstName: "John",
      lastName: "Smith",
      department: "Engineering",
      title: "Director",
      phoneNumber: "555-123-4567",
      startDate: today() - 360
    ),
    a!map(
      id: 2,
      firstName: "Michael",
      lastName: "Johnson",
      department: "Finance",
      title: "Analyst",
      phoneNumber: "555-987-6543",
      startDate: today() - 360
    ),
    a!map(
      id: 3,
      firstName: "Mary",
      lastName: "Reed",
      department: "Engineering",
      title: "Software Engineer",
      phoneNumber: "555-456-0123",
      startDate: today() - 240
    )
  },
  {
    a!richTextDisplayField(
      value: a!richTextHeader(text: "PATTERN 1")
    ),
    a!cardLayout(
      padding: "NONE",
      contents: {
        a!gridLayout(
          totalCount: count(local!employees),
          borderStyle: "LIGHT",
          spacing: "DENSE",
          headerCells: {
            a!gridLayoutHeaderCell(label: "First Name", align: "RIGHT"),
            a!gridLayoutHeaderCell(
              label: "",
              helpTooltip: "Firs Name Header",
              align: "LEFT"
            ),
            a!gridLayoutHeaderCell(label: "Department", align: "CENTER")
          },
          columnConfigs: {
            a!gridLayoutColumnConfig(width: "DISTRIBUTE", weight: 3),
            a!gridLayoutColumnConfig(width: "DISTRIBUTE", weight: 3),
            a!gridLayoutColumnConfig(width: "DISTRIBUTE", weight: 3)
          },
          rows: {
            a!forEach(
              items: local!employees,
              expression: a!gridRowLayout(
                contents: {
                  a!textField(
                    /* Labels are not visible in grid cells but are necessary to meet accessibility requirements */
                    label: "first name " & fv!index,
                    value: fv!item.firstName,
                    saveInto: fv!item.firstName,
                    required: true
                  ),
                  a!textField(
                    label: "last name " & fv!index,
                    value: fv!item.lastName,
                    saveInto: fv!item.lastName,
                    required: true
                  ),
                  a!textField(
                    label: "last name " & fv!index,
                    value: fv!item.lastName,
                    saveInto: fv!item.lastName,
                    required: true
                  )
                }
              )
            )
          },
          rowHeader: 1
        )
      }
    ),
    a!richTextDisplayField(
      value: a!richTextHeader(text: "PATTERN 2")
    ),
    a!columnsLayout(
      spacing: "NONE",
      columns: {
        a!columnLayout(
          contents: {
            a!cardLayout(
              padding: "NONE",
              contents: {
                a!gridLayout(
                  totalCount: count(local!employees),
                  borderStyle: "LIGHT",
                  spacing: "DENSE",
                  headerCells: {
                    a!gridLayoutHeaderCell(label: "First Name", align: "RIGHT"),
                    a!gridLayoutHeaderCell(
                      label: "",
                      helpTooltip: "Firs Name Header",
                      align: "LEFT"
                    ),
                    
                  },
                  columnConfigs: {
                    a!gridLayoutColumnConfig(width: "DISTRIBUTE", weight: 3),
                    a!gridLayoutColumnConfig(width: "DISTRIBUTE", weight: 3),
                    
                  },
                  rows: {
                    a!forEach(
                      items: local!employees,
                      expression: a!gridRowLayout(
                        contents: {
                          a!textField(
                            /* Labels are not visible in grid cells but are necessary to meet accessibility requirements */
                            label: "first name " & fv!index,
                            value: fv!item.firstName,
                            saveInto: fv!item.firstName,
                            required: true
                          ),
                          a!textField(
                            label: "last name " & fv!index,
                            value: fv!item.lastName,
                            saveInto: fv!item.lastName,
                            required: true
                          )
                        }
                      )
                    )
                  },
                  rowHeader: 1
                )
              }
            )
          }
        ),
        a!columnLayout(
          contents: {
            a!cardLayout(
              padding: "NONE",
              contents: {
                a!gridLayout(
                  totalCount: count(local!employees),
                  borderStyle: "LIGHT",
                  spacing: "DENSE",
                  headerCells: {
                    a!gridLayoutHeaderCell(label: "Department", align: "CENTER")
                  },
                  columnConfigs: {
                    a!gridLayoutColumnConfig(width: "DISTRIBUTE", weight: 3)
                  },
                  rows: {
                    a!forEach(
                      items: local!employees,
                      expression: a!gridRowLayout(
                        contents: {
                          a!textField(
                            label: "last name " & fv!index,
                            value: fv!item.lastName,
                            saveInto: fv!item.lastName,
                            required: true
                          )
                        }
                      )
                    )
                  },
                  rowHeader: 1
                )
              }
            )
          }
        )
      }
    ),
    a!richTextDisplayField(
      value: a!richTextHeader(text: "PATTERN 3")
    ),
    a!cardLayout(
      padding: "NONE",
      contents: {
        a!columnsLayout(
          spacing: "NONE",
          showDividers: true(),
          columns: {
            a!columnLayout(
              contents: {
                a!gridLayout(
                  totalCount: count(local!employees),
                  borderStyle: "LIGHT",
                  spacing: "DENSE",
                  headerCells: {
                    a!gridLayoutHeaderCell(label: "First Name", align: "RIGHT"),
                    a!gridLayoutHeaderCell(
                      label: "",
                      helpTooltip: "Firs Name Header",
                      align: "LEFT"
                    ),
                    
                  },
                  columnConfigs: {
                    a!gridLayoutColumnConfig(width: "DISTRIBUTE", weight: 3),
                    a!gridLayoutColumnConfig(width: "DISTRIBUTE", weight: 3),
                    
                  },
                  rows: {
                    a!forEach(
                      items: local!employees,
                      expression: a!gridRowLayout(
                        contents: {
                          a!textField(
                            /* Labels are not visible in grid cells but are necessary to meet accessibility requirements */
                            label: "first name " & fv!index,
                            value: fv!item.firstName,
                            saveInto: fv!item.firstName,
                            required: true
                          ),
                          a!textField(
                            label: "last name " & fv!index,
                            value: fv!item.lastName,
                            saveInto: fv!item.lastName,
                            required: true
                          )
                        }
                      )
                    )
                  },
                  rowHeader: 1
                )
              }
            ),
            a!columnLayout(
              contents: {
                a!gridLayout(
                  totalCount: count(local!employees),
                  borderStyle: "LIGHT",
                  spacing: "DENSE",
                  headerCells: {
                    a!gridLayoutHeaderCell(label: "Department", align: "CENTER")
                  },
                  columnConfigs: {
                    a!gridLayoutColumnConfig(width: "DISTRIBUTE", weight: 3)
                  },
                  rows: {
                    a!forEach(
                      items: local!employees,
                      expression: a!gridRowLayout(
                        contents: {
                          a!textField(
                            label: "last name " & fv!index,
                            value: fv!item.lastName,
                            saveInto: fv!item.lastName,
                            required: true
                          )
                        }
                      )
                    )
                  },
                  rowHeader: 1
                )
              }
            )
          }
        )
      }
    )
  }
)

RE: Header in interface

mohammeda0010 — Wed, 16 Dec 2020 19:24:35 GMT

Hi sudheern0003,

Please try this code and i am hoping this will help you in some way.

a!localVariables(
local!employees: {
a!map(
id: 1,
firstName: "John",
lastName: "Smith",
department: "Engineering",
title: "Director",
phoneNumber: "555-123-4567",
startDate: today() - 360
),
a!map(
id: 2,
firstName: "Michael",
lastName: "Johnson",
department: "Finance",
title: "Analyst",
phoneNumber: "555-987-6543",
startDate: today() - 360
),
a!map(
id: 3,
firstName: "Mary",
lastName: "Reed",
department: "Engineering",
title: "Software Engineer",
phoneNumber: "555-456-0123",
startDate: today() - 240
)
},
{
a!richTextDisplayField(
value: a!richTextHeader(text: "PATTERN 1")
),
a!cardLayout(
padding: "NONE",
contents: {
a!gridLayout(
totalCount: count(local!employees),
borderStyle: "LIGHT",
spacing: "DENSE",
headerCells: {
a!gridLayoutHeaderCell(label: "First Name", align: "RIGHT"),
a!gridLayoutHeaderCell(
label: "",
helpTooltip: "Firs Name Header",
align: "LEFT"
),
a!gridLayoutHeaderCell(label: "Department", align: "CENTER")
},
columnConfigs: {
a!gridLayoutColumnConfig(width: "DISTRIBUTE", weight: 3),
a!gridLayoutColumnConfig(width: "DISTRIBUTE", weight: 3),
a!gridLayoutColumnConfig(width: "DISTRIBUTE", weight: 3)
},
rows: {
a!forEach(
items: local!employees,
expression: a!gridRowLayout(
contents: {
a!textField(
/* Labels are not visible in grid cells but are necessary to meet accessibility requirements */
label: "first name " & fv!index,
value: fv!item.firstName,
saveInto: fv!item.firstName,
required: true
),
a!textField(
label: "last name " & fv!index,
value: fv!item.lastName,
saveInto: fv!item.lastName,
required: true
),
a!textField(
label: "last name " & fv!index,
value: fv!item.lastName,
saveInto: fv!item.lastName,
required: true
)
}
)
)
},
rowHeader: 1
)
}
),
a!richTextDisplayField(
value: a!richTextHeader(text: "PATTERN 2")
),
a!columnsLayout(
spacing: "NONE",
columns: {
a!columnLayout(
contents: {
a!cardLayout(
padding: "NONE",
contents: {
a!gridLayout(
totalCount: count(local!employees),
borderStyle: "LIGHT",
spacing: "DENSE",
headerCells: {
a!gridLayoutHeaderCell(label: "First Name", align: "RIGHT"),
a!gridLayoutHeaderCell(
label: "",
helpTooltip: "Firs Name Header",
align: "LEFT"
),

},
columnConfigs: {
a!gridLayoutColumnConfig(width: "DISTRIBUTE", weight: 3),
a!gridLayoutColumnConfig(width: "DISTRIBUTE", weight: 3),

},
rows: {
a!forEach(
items: local!employees,
expression: a!gridRowLayout(
contents: {
a!textField(
/* Labels are not visible in grid cells but are necessary to meet accessibility requirements */
label: "first name " & fv!index,
value: fv!item.firstName,
saveInto: fv!item.firstName,
required: true
),
a!textField(
label: "last name " & fv!index,
value: fv!item.lastName,
saveInto: fv!item.lastName,
required: true
)
}
)
)
},
rowHeader: 1
)
}
)
}
),
a!columnLayout(
contents: {
a!cardLayout(
padding: "NONE",
contents: {
a!gridLayout(
totalCount: count(local!employees),
borderStyle: "LIGHT",
spacing: "DENSE",
headerCells: {
a!gridLayoutHeaderCell(label: "Department", align: "CENTER")
},
columnConfigs: {
a!gridLayoutColumnConfig(width: "DISTRIBUTE", weight: 3)
},
rows: {
a!forEach(
items: local!employees,
expression: a!gridRowLayout(
contents: {
a!textField(
label: "last name " & fv!index,
value: fv!item.lastName,
saveInto: fv!item.lastName,
required: true
)
}
)
)
},
rowHeader: 1
)
}
)
}
)
}
),
a!richTextDisplayField(
value: a!richTextHeader(text: "PATTERN 3")
),
a!cardLayout(
padding: "NONE",
contents: {
a!columnsLayout(
spacing: "NONE",
showDividers: true(),
columns: {
a!columnLayout(
contents: {
a!gridLayout(
totalCount: count(local!employees),
borderStyle: "LIGHT",
spacing: "DENSE",
headerCells: {
a!gridLayoutHeaderCell(label: "First Name", align: "RIGHT"),
a!gridLayoutHeaderCell(
label: "",
helpTooltip: "Firs Name Header",
align: "LEFT"
),

},
columnConfigs: {
a!gridLayoutColumnConfig(width: "DISTRIBUTE", weight: 3),
a!gridLayoutColumnConfig(width: "DISTRIBUTE", weight: 3),

},
rows: {
a!forEach(
items: local!employees,
expression: a!gridRowLayout(
contents: {
a!textField(
/* Labels are not visible in grid cells but are necessary to meet accessibility requirements */
label: "first name " & fv!index,
value: fv!item.firstName,
saveInto: fv!item.firstName,
required: true
),
a!textField(
label: "last name " & fv!index,
value: fv!item.lastName,
saveInto: fv!item.lastName,
required: true
)
}
)
)
},
rowHeader: 1
)
}
),
a!columnLayout(
contents: {
a!gridLayout(
totalCount: count(local!employees),
borderStyle: "LIGHT",
spacing: "DENSE",
headerCells: {
a!gridLayoutHeaderCell(label: "Department", align: "CENTER")
},
columnConfigs: {
a!gridLayoutColumnConfig(width: "DISTRIBUTE", weight: 3)
},
rows: {
a!forEach(
items: local!employees,
expression: a!gridRowLayout(
contents: {
a!textField(
label: "last name " & fv!index,
value: fv!item.lastName,
saveInto: fv!item.lastName,
required: true
)
}
)
)
},
rowHeader: 1
)
}
)
}
)
}
)
}
)

a!localVariables(
  local!employees: {
    a!map(
      id: 1,
      firstName: "John",
      lastName: "Smith",
      department: "Engineering",
      title: "Director",
      phoneNumber: "555-123-4567",
      startDate: today() - 360
    ),
    a!map(
      id: 2,
      firstName: "Michael",
      lastName: "Johnson",
      department: "Finance",
      title: "Analyst",
      phoneNumber: "555-987-6543",
      startDate: today() - 360
    ),
    a!map(
      id: 3,
      firstName: "Mary",
      lastName: "Reed",
      department: "Engineering",
      title: "Software Engineer",
      phoneNumber: "555-456-0123",
      startDate: today() - 240
    )
  },
  {
    a!richTextDisplayField(
      value: a!richTextHeader(text: "PATTERN 1")
    ),
    a!cardLayout(
      padding: "NONE",
      contents: {
        a!gridLayout(
          totalCount: count(local!employees),
          borderStyle: "LIGHT",
          spacing: "DENSE",
          headerCells: {
            a!gridLayoutHeaderCell(label: "First Name", align: "RIGHT"),
            a!gridLayoutHeaderCell(
              label: "",
              helpTooltip: "Firs Name Header",
              align: "LEFT"
            ),
            a!gridLayoutHeaderCell(label: "Department", align: "CENTER")
          },
          columnConfigs: {
            a!gridLayoutColumnConfig(width: "DISTRIBUTE", weight: 3),
            a!gridLayoutColumnConfig(width: "DISTRIBUTE", weight: 3),
            a!gridLayoutColumnConfig(width: "DISTRIBUTE", weight: 3)
          },
          rows: {
            a!forEach(
              items: local!employees,
              expression: a!gridRowLayout(
                contents: {
                  a!textField(
                    /* Labels are not visible in grid cells but are necessary to meet accessibility requirements */
                    label: "first name " & fv!index,
                    value: fv!item.firstName,
                    saveInto: fv!item.firstName,
                    required: true
                  ),
                  a!textField(
                    label: "last name " & fv!index,
                    value: fv!item.lastName,
                    saveInto: fv!item.lastName,
                    required: true
                  ),
                  a!textField(
                    label: "last name " & fv!index,
                    value: fv!item.lastName,
                    saveInto: fv!item.lastName,
                    required: true
                  )
                }
              )
            )
          },
          rowHeader: 1
        )
      }
    ),
    a!richTextDisplayField(
      value: a!richTextHeader(text: "PATTERN 2")
    ),
    a!columnsLayout(
      spacing: "NONE",
      columns: {
        a!columnLayout(
          contents: {
            a!cardLayout(
              padding: "NONE",
              contents: {
                a!gridLayout(
                  totalCount: count(local!employees),
                  borderStyle: "LIGHT",
                  spacing: "DENSE",
                  headerCells: {
                    a!gridLayoutHeaderCell(label: "First Name", align: "RIGHT"),
                    a!gridLayoutHeaderCell(
                      label: "",
                      helpTooltip: "Firs Name Header",
                      align: "LEFT"
                    ),
                    
                  },
                  columnConfigs: {
                    a!gridLayoutColumnConfig(width: "DISTRIBUTE", weight: 3),
                    a!gridLayoutColumnConfig(width: "DISTRIBUTE", weight: 3),
                    
                  },
                  rows: {
                    a!forEach(
                      items: local!employees,
                      expression: a!gridRowLayout(
                        contents: {
                          a!textField(
                            /* Labels are not visible in grid cells but are necessary to meet accessibility requirements */
                            label: "first name " & fv!index,
                            value: fv!item.firstName,
                            saveInto: fv!item.firstName,
                            required: true
                          ),
                          a!textField(
                            label: "last name " & fv!index,
                            value: fv!item.lastName,
                            saveInto: fv!item.lastName,
                            required: true
                          )
                        }
                      )
                    )
                  },
                  rowHeader: 1
                )
              }
            )
          }
        ),
        a!columnLayout(
          contents: {
            a!cardLayout(
              padding: "NONE",
              contents: {
                a!gridLayout(
                  totalCount: count(local!employees),
                  borderStyle: "LIGHT",
                  spacing: "DENSE",
                  headerCells: {
                    a!gridLayoutHeaderCell(label: "Department", align: "CENTER")
                  },
                  columnConfigs: {
                    a!gridLayoutColumnConfig(width: "DISTRIBUTE", weight: 3)
                  },
                  rows: {
                    a!forEach(
                      items: local!employees,
                      expression: a!gridRowLayout(
                        contents: {
                          a!textField(
                            label: "last name " & fv!index,
                            value: fv!item.lastName,
                            saveInto: fv!item.lastName,
                            required: true
                          )
                        }
                      )
                    )
                  },
                  rowHeader: 1
                )
              }
            )
          }
        )
      }
    ),
    a!richTextDisplayField(
      value: a!richTextHeader(text: "PATTERN 3")
    ),
    a!cardLayout(
      padding: "NONE",
      contents: {
        a!columnsLayout(
          spacing: "NONE",
          showDividers: true(),
          columns: {
            a!columnLayout(
              contents: {
                a!gridLayout(
                  totalCount: count(local!employees),
                  borderStyle: "LIGHT",
                  spacing: "DENSE",
                  headerCells: {
                    a!gridLayoutHeaderCell(label: "First Name", align: "RIGHT"),
                    a!gridLayoutHeaderCell(
                      label: "",
                      helpTooltip: "Firs Name Header",
                      align: "LEFT"
                    ),
                    
                  },
                  columnConfigs: {
                    a!gridLayoutColumnConfig(width: "DISTRIBUTE", weight: 3),
                    a!gridLayoutColumnConfig(width: "DISTRIBUTE", weight: 3),
                    
                  },
                  rows: {
                    a!forEach(
                      items: local!employees,
                      expression: a!gridRowLayout(
                        contents: {
                          a!textField(
                            /* Labels are not visible in grid cells but are necessary to meet accessibility requirements */
                            label: "first name " & fv!index,
                            value: fv!item.firstName,
                            saveInto: fv!item.firstName,
                            required: true
                          ),
                          a!textField(
                            label: "last name " & fv!index,
                            value: fv!item.lastName,
                            saveInto: fv!item.lastName,
                            required: true
                          )
                        }
                      )
                    )
                  },
                  rowHeader: 1
                )
              }
            ),
            a!columnLayout(
              contents: {
                a!gridLayout(
                  totalCount: count(local!employees),
                  borderStyle: "LIGHT",
                  spacing: "DENSE",
                  headerCells: {
                    a!gridLayoutHeaderCell(label: "Department", align: "CENTER")
                  },
                  columnConfigs: {
                    a!gridLayoutColumnConfig(width: "DISTRIBUTE", weight: 3)
                  },
                  rows: {
                    a!forEach(
                      items: local!employees,
                      expression: a!gridRowLayout(
                        contents: {
                          a!textField(
                            label: "last name " & fv!index,
                            value: fv!item.lastName,
                            saveInto: fv!item.lastName,
                            required: true
                          )
                        }
                      )
                    )
                  },
                  rowHeader: 1
                )
              }
            )
          }
        )
      }
    )
  }
)

RE: Header in interface

sudheern0003 — Thu, 26 Nov 2020 20:35:58 GMT

If in any case below mentioned screenshot can be done please let me know,

RE: Header in interface

Pedro Simões — Thu, 26 Nov 2020 20:16:25 GMT

As far as I know, the range of options are limited what I expose before. You can have a combination of those approaches, mix richTexts with multiple grids to achieve what you want...

RE: Header in interface

sudheern0003 — Thu, 26 Nov 2020 20:06:56 GMT

its just one of the part of the entire page which we need to show to user, and there many such headers with sub headers are required.

RE: Header in interface

Pedro Simões — Thu, 26 Nov 2020 19:55:15 GMT

sudheern0003, do you really need "First Name" to be a grid header? Why don't you have it as a richText and then have a normal grid with Header 1 and Header 11 in your header?

RE: Header in interface

sudheern0003 — Thu, 26 Nov 2020 19:50:24 GMT

I wanted header1 and Header 11, horizontally as two individual columns under one main header "First Name".

like shown below.

RE: Header in interface

Pedro Simões — Thu, 26 Nov 2020 19:23:16 GMT

Looking something like this (adapted the recipe https://docs.appian.com/suite/help/20.3/recipe-add-edit-and-remove-data-in-an-inline-editable-grid.html)

a!localVariables(
  local!employees: {
    a!map(
      id: 1,
      firstName: "John",
      lastName: "Smith",
      department: "Engineering",
      title: "Director",
      phoneNumber: "555-123-4567",
      startDate: today() - 360
    ),
    a!map(
      id: 2,
      firstName: "Michael",
      lastName: "Johnson",
      department: "Finance",
      title: "Analyst",
      phoneNumber: "555-987-6543",
      startDate: today() - 360
    ),
    a!map(
      id: 3,
      firstName: "Mary",
      lastName: "Reed",
      department: "Engineering",
      title: "Software Engineer",
      phoneNumber: "555-456-0123",
      startDate: today() - 240
    ),
    
  },
  a!formLayout(
    label: "Add or Update Employee Data",
    instructions: "Add, edit, or remove Employee data in an inline editable grid",
    contents: {
      a!gridLayout(
        totalCount: count(local!employees),
        headerCells: {
          a!gridLayoutHeaderCell(label: "First Name"),
          a!gridLayoutHeaderCell(label: "Last Name"),
          a!gridLayoutHeaderCell(label: "Department")
        },
        columnConfigs: {
          a!gridLayoutColumnConfig(width: "DISTRIBUTE", weight: 3),
          a!gridLayoutColumnConfig(width: "DISTRIBUTE", weight: 3),
          a!gridLayoutColumnConfig(width: "DISTRIBUTE", weight: 3)
        },
        rows: {
          a!gridRowLayout(
            contents: {
              a!textField(value: "Header 1", disabled: true),
              a!textField(value: "Header 2", disabled: true),
              a!textField(value: "Header 3", disabled: true),
              
            }
          ),
          a!gridRowLayout(
            contents: {
              a!textField(value: "Header 11", disabled: true),
              a!textField(value: "Header 22", disabled: true),
              a!textField(value: "Header 33", disabled: true),
              
            }
          ),
          a!forEach(
            items: local!employees,
            expression: a!gridRowLayout(
              contents: {
                a!textField(
                  /* Labels are not visible in grid cells but are necessary to meet accessibility requirements */
                  label: "first name " & fv!index,
                  value: fv!item.firstName,
                  saveInto: fv!item.firstName,
                  required: true
                ),
                a!textField(
                  label: "last name " & fv!index,
                  value: fv!item.lastName,
                  saveInto: fv!item.lastName,
                  required: true
                ),
                a!textField(
                  label: "last name " & fv!index,
                  value: fv!item.lastName,
                  saveInto: fv!item.lastName,
                  required: true
                )
              }
            )
          )
        },
        rowHeader: 1
      )
    },
    buttons: a!buttonLayout(
      primaryButtons: a!buttonWidget(label: "Submit", submit: true)
    )
  )
)

RE: Header in interface

sudheern0003 — Thu, 26 Nov 2020 18:45:06 GMT

Grid row lay out for components right, so I didn't get you.

Can you please eloborate with example how can I achieve it pls, that's the main problem actually.

RE: Header in interface

Pedro Simões — Thu, 26 Nov 2020 18:19:26 GMT

Hi sudheern0003, your grid can only have one header.

In a certain way, you can simulate 2 sub headers with 2 gridRowLayouts with disabled/readOnly components before. The look and feel will not be ideal but, as far as I know, it's the only way to have a similar behavior