Header in interface

Question

In a grid, can we have two sub header's under one header, like the way we can do in excel sheet. 
 Please suggest

mohammeda0010 · Answer

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
 )
 }
 )
 }
 )
 }
 )
 }
)