You can calculate sum of Horizontal and Vertical Column : Using Grid Component

First Create Function To Calculate Sum called : Calculate_Sum

a!localVariables(
  if(
    ri!monthName <> null,
    
      sum(
        todecimal(index(ri!months, { ri!monthName }, 0))
       
    ),
    
      sum(
        todecimal(ri!months.jan, 0),
        todecimal(ri!months.feb, 0),
        todecimal(ri!months.mar, 0),
        todecimal(ri!months.apr, 0),
        todecimal(ri!months.may, 0),
        todecimal(ri!months.june, 0),
        todecimal(ri!months.july, 0),
        todecimal(ri!months.aug, 0),
        todecimal(ri!months.sep, 0),
        todecimal(ri!months.oct, 0),
        todecimal(ri!months.nov, 0),
        todecimal(ri!months.dec, 0)
    
    )
  )
)

Now Create Form in Grid to calculate and call the sum function:

a!localVariables(
local!invalidIncome: ("Please insert valid income value."),
local!DuplicateIncome: (
"Duplicate value. Please check and delete if duplicated"
),
local!CurrentRow: 0,
local!TotalRow: 0,
local!monthDetail: a!map(
jan: null,
feb: null,
mar: null,
apr: null,
may: null,
june: null,
july: null,
aug: null,
sep: null,
oct: null,
nov: null,
dec: null,
total: null
),
local!months: append(
{
local!monthDetail,
local!monthDetail,
local!monthDetail
}
),
local!monthCount: (
if(
sum(index(local!months, "jan", null)) <> 0,
1,
0
) + if(
sum(index(local!months, "feb", null)) <> 0,
1,
0
) + if(
sum(index(local!months, "mar", null)) <> 0,
1,
0
) + if(
sum(index(local!months, "apr", null)) <> 0,
1,
0
) + if(
sum(index(local!months, "may", null)) <> 0,
1,
0
) + if(
sum(index(local!months, "june", null)) <> 0,
1,
0
) + if(
sum(index(local!months, "july", null)) <> 0,
1,
0
) + if(
sum(index(local!months, "aug", null)) <> 0,
1,
0
) + if(
sum(index(local!months, "sep", null)) <> 0,
1,
0
) + if(
sum(index(local!months, "oct", null)) <> 0,
1,
0
) + if(
sum(index(local!months, "nov", null)) <> 0,
1,
0
) + if(
sum(index(local!months, "dec", null)) <> 0,
1,
0
)
),
local!TotalIncome: rule!Calculate_Sum(months: local!months, monthName: null),
local!averageMonthlyIncome: (
if(
and(
local!monthCount > 0,
local!TotalIncome <> 0
),
local!TotalIncome / local!monthCount,
0
)
),
local!averageAnualIncome: (
if(
local!averageMonthlyIncome <> 0,
local!averageMonthlyIncome * 12,
0
)
),
a!formLayout(
label: "Calculator",
contents: {
a!gridLayout(
totalCount: count(local!months),
headerCells: a!forEach(
items: {
"Jan",
"Feb",
"Mar",
"Apr",
"May",
"Jun",
"Jul",
"Aug",
"Sept",
"Oct",
"Nov",
"Dec",
"Total"
},
expression: a!gridLayoutHeaderCell(label: fv!item)
),
rows: a!forEach(
items: local!months,
expression: a!gridRowLayout(
id: fv!index,
contents: {
a!floatingPointField(
label: "January",
value: fv!item.jan,
saveInto: {
fv!item.jan,
a!save(
fv!item.total,
rule!Calculate_Sum(months: fv!item, monthName: null)
),
a!save(local!CurrentRow, fv!index),
a!save(local!TotalRow, length(local!months)),
if(
tointeger(local!CurrentRow) == tointeger(local!TotalRow),
a!save(
local!months,
append(local!months, local!monthDetail)
),
null
)
},
refreshAfter: "KEYPRESS",
validations: {
if(
and(
count(
wherecontains(
todecimal(fv!item.jan),
todecimal(local!months.jan)
)
) > 1,
todecimal(fv!item.jan) > 0
),
local!DuplicateIncome,
null
),
if(
todecimal(fv!item.jan) = 0,
local!invalidIncome,
null
)
}
),
a!floatingPointField(
label: "February",
value: fv!item.feb,
saveInto: {
fv!item.feb,
a!save(
fv!item.total,
rule!Calculate_Sum(months: fv!item, monthName: null)
),
a!save(local!CurrentRow, fv!index),
a!save(local!TotalRow, length(local!months)),
if(
tointeger(local!CurrentRow) == tointeger(local!TotalRow),
a!save(
local!months,
append(local!months, local!monthDetail)
),
null
)
},
refreshAfter: "KEYPRESS",
validations: {
if(
and(
count(
wherecontains(
todecimal(fv!item.feb),
todecimal(local!months.feb)
)
) > 1,
todecimal(fv!item.feb) > 0
),
local!DuplicateIncome,
null
),
if(
todecimal(fv!item.feb) = 0,
local!invalidIncome,
null
)
}
),
a!floatingPointField(
label: "March",
value: fv!item.mar,
saveInto: {
fv!item.mar,
a!save(
fv!item.total,
rule!Calculate_Sum(months: fv!item, monthName: null)
),
a!save(local!CurrentRow, fv!index),
a!save(local!TotalRow, length(local!months)),
if(
tointeger(local!CurrentRow) == tointeger(local!TotalRow),
a!save(
local!months,
append(local!months, local!monthDetail)
),
null
)
},
refreshAfter: "KEYPRESS",
validations: {
if(
and(
count(
wherecontains(
todecimal(fv!item.mar),
todecimal(local!months.mar)
)
) > 1,
todecimal(fv!item.mar) > 0
),
local!DuplicateIncome,
null
),
if(
todecimal(fv!item.mar) = 0,
local!invalidIncome,
null
)
}
),
a!floatingPointField(
label: "April",
value: fv!item.apr,
saveInto: {
fv!item.apr,
a!save(
fv!item.total,
rule!Calculate_Sum(months: fv!item, monthName: null)
),
a!save(local!CurrentRow, fv!index),
a!save(local!TotalRow, length(local!months)),
if(
tointeger(local!CurrentRow) == tointeger(local!TotalRow),
a!save(
local!months,
append(local!months, local!monthDetail)
),
null
)
},
refreshAfter: "KEYPRESS",
validations: {
if(
and(
count(
wherecontains(
todecimal(fv!item.apr),
todecimal(local!months.apr)
)
) > 1,
todecimal(fv!item.apr) > 0
),
local!DuplicateIncome,
null
),
if(
todecimal(fv!item.apr) = 0,
local!invalidIncome,
null
)
}
),
a!floatingPointField(
label: "May",
value: fv!item.may,
saveInto: {
fv!item.may,
a!save(
fv!item.total,
rule!Calculate_Sum(months: fv!item, monthName: null)
),
a!save(local!CurrentRow, fv!index),
a!save(local!TotalRow, length(local!months)),
if(
tointeger(local!CurrentRow) == tointeger(local!TotalRow),
a!save(
local!months,
append(local!months, local!monthDetail)
),
null
)
},
refreshAfter: "KEYPRESS",
validations: {
if(
and(
count(
wherecontains(
todecimal(fv!item.may),
todecimal(local!months.may)
)
) > 1,
todecimal(fv!item.may) > 0
),
local!DuplicateIncome,
null
),
if(
todecimal(fv!item.may) = 0,
local!invalidIncome,
null
)
}
),
a!floatingPointField(
label: "June",
value: fv!item.june,
saveInto: {
fv!item.june,
a!save(
fv!item.total,
rule!Calculate_Sum(months: fv!item, monthName: null)
),
a!save(local!CurrentRow, fv!index),
a!save(local!TotalRow, length(local!months)),
if(
tointeger(local!CurrentRow) == tointeger(local!TotalRow),
a!save(
local!months,
append(local!months, local!monthDetail)
),
null
)
},
refreshAfter: "KEYPRESS",
validations: {
if(
and(
count(
wherecontains(
todecimal(fv!item.june),
todecimal(local!months.june)
)
) > 1,
todecimal(fv!item.june) > 0
),
local!DuplicateIncome,
null
),
if(
todecimal(fv!item.june) = 0,
local!invalidIncome,
null
)
}
),
a!floatingPointField(
label: "July",
value: fv!item.july,
saveInto: {
fv!item.july,
a!save(
fv!item.total,
rule!Calculate_Sum(months: fv!item, monthName: null)
),
a!save(local!CurrentRow, fv!index),
a!save(local!TotalRow, length(local!months)),
if(
tointeger(local!CurrentRow) == tointeger(local!TotalRow),
a!save(
local!months,
append(local!months, local!monthDetail)
),
null
)
},
refreshAfter: "KEYPRESS",
validations: {
if(
and(
count(
wherecontains(
todecimal(fv!item.july),
todecimal(local!months.july)
)
) > 1,
todecimal(fv!item.july) > 0
),
local!DuplicateIncome,
null
),
if(
todecimal(fv!item.july) = 0,
local!invalidIncome,
null
)
}
),
a!floatingPointField(
label: "August",
value: fv!item.aug,
saveInto: {
fv!item.aug,
a!save(
fv!item.total,
rule!Calculate_Sum(months: fv!item, monthName: null)
),
a!save(local!CurrentRow, fv!index),
a!save(local!TotalRow, length(local!months)),
if(
tointeger(local!CurrentRow) == tointeger(local!TotalRow),
a!save(
local!months,
append(local!months, local!monthDetail)
),
null
)
},
refreshAfter: "KEYPRESS",
validations: {
if(
and(
count(
wherecontains(
todecimal(fv!item.aug),
todecimal(local!months.aug)
)
) > 1,
todecimal(fv!item.aug) > 0
),
local!DuplicateIncome,
null
),
if(
todecimal(fv!item.aug) = 0,
local!invalidIncome,
null
)
}
),
a!floatingPointField(
label: "September",
value: fv!item.sep,
saveInto: {
fv!item.sep,
a!save(
fv!item.total,
rule!Calculate_Sum(months: fv!item, monthName: null)
),
a!save(local!CurrentRow, fv!index),
a!save(local!TotalRow, length(local!months)),
if(
tointeger(local!CurrentRow) == tointeger(local!TotalRow),
a!save(
local!months,
append(local!months, local!monthDetail)
),
null
)
},
refreshAfter: "KEYPRESS",
validations: {
if(
and(
count(
wherecontains(
todecimal(fv!item.sep),
todecimal(local!months.sep)
)
) > 1,
todecimal(fv!item.sep) > 0
),
local!DuplicateIncome,
null
),
if(
todecimal(fv!item.sep) = 0,
local!invalidIncome,
null
)
}
),
a!floatingPointField(
label: "October",
value: fv!item.oct,
saveInto: {
fv!item.oct,
a!save(
fv!item.total,
rule!Calculate_Sum(months: fv!item, monthName: null)
),
a!save(local!CurrentRow, fv!index),
a!save(local!TotalRow, length(local!months)),
if(
tointeger(local!CurrentRow) == tointeger(local!TotalRow),
a!save(
local!months,
append(local!months, local!monthDetail)
),
null
)
},
refreshAfter: "KEYPRESS",
validations: {
if(
and(
count(
wherecontains(
todecimal(fv!item.oct),
todecimal(local!months.oct)
)
) > 1,
todecimal(fv!item.oct) > 0
),
local!DuplicateIncome,
null
),
if(
todecimal(fv!item.oct) = 0,
local!invalidIncome,
null
)
}
),
a!floatingPointField(
label: "November",
value: fv!item.nov,
saveInto: {
fv!item.nov,
a!save(
fv!item.total,
rule!Calculate_Sum(months: fv!item, monthName: null)
),
a!save(local!CurrentRow, fv!index),
a!save(local!TotalRow, length(local!months)),
if(
tointeger(local!CurrentRow) == tointeger(local!TotalRow),
a!save(
local!months,
append(local!months, local!monthDetail)
),
null
)
},
refreshAfter: "KEYPRESS",
validations: {
if(
and(
count(
wherecontains(
todecimal(fv!item.nov),
todecimal(local!months.nov)
)
) > 1,
todecimal(fv!item.nov) > 0
),
local!DuplicateIncome,
null
),
if(
todecimal(fv!item.nov) = 0,
local!invalidIncome,
null
)
}
),
a!floatingPointField(
label: "December",
value: fv!item.dec,
saveInto: {
fv!item.dec,
a!save(
fv!item.total,
rule!Calculate_Sum(months: fv!item, monthName: null)
),
a!save(local!CurrentRow, fv!index),
a!save(local!TotalRow, length(local!months)),
if(
tointeger(local!CurrentRow) == tointeger(local!TotalRow),
a!save(
local!months,
append(local!months, local!monthDetail)
),
null
)
},
refreshAfter: "KEYPRESS",
validations: {
if(
and(
count(
wherecontains(
todecimal(fv!item.dec),
todecimal(local!months.dec)
)
) > 1,
todecimal(fv!item.dec) > 0
),
local!DuplicateIncome,
null
),
if(
todecimal(fv!item.dec) = 0,
local!invalidIncome,
null
)
}
),
a!richTextDisplayField(
value: {
a!richTextItem(
style: "STRONG",
text: pound(rule!Calculate_Sum(months: fv!item, monthName: null))
)
}
)
}
)
),
/*addRowlink: a!dynamicLink(
label: "Add",
saveInto: {
a!save(
local!months,
append(local!months, save!value)
)
}
),*/
rowHeader: 1
),
a!columnsLayout(
columns: {
a!columnLayout(
contents: {
a!richTextDisplayField(
value: {
a!richTextItem(
style: "STRONG",
text: pound(rule!Calculate_Sum(months: local!months, monthName: "jan"))
)
},

)
}
),
a!columnLayout(
contents: {
a!richTextDisplayField(
value: {
a!richTextItem(
style: "STRONG",
text: pound(rule!Calculate_Sum(months: local!months, monthName: "feb"))
)
}
)
}
),
a!columnLayout(
contents: {
a!richTextDisplayField(
value: {
a!richTextItem(
style: "STRONG",
text: pound(rule!Calculate_Sum(months: local!months, monthName: "mar"))
)
}
)
}
),
a!columnLayout(
contents: {
a!richTextDisplayField(
value: {
a!richTextItem(
style: "STRONG",
text: pound(rule!Calculate_Sum(months: local!months, monthName: "apr"))
)
}
)
}
),
a!columnLayout(
contents: {
a!richTextDisplayField(
value: {
a!richTextItem(
style: "STRONG",
text: pound(rule!Calculate_Sum(months: local!months, monthName: "may"))
)
}
)
}
),
a!columnLayout(
contents: {
a!richTextDisplayField(
value: {
a!richTextItem(
style: "STRONG",
text: pound(rule!Calculate_Sum(months: local!months, monthName: "june"))
)
}
)
}
),
a!columnLayout(
contents: {
a!richTextDisplayField(
value: {
a!richTextItem(
style: "STRONG",
text: pound(rule!Calculate_Sum(months: local!months, monthName: "july"))
)
}
)
}
),
a!columnLayout(
contents: {
a!richTextDisplayField(
value: {
a!richTextItem(
style: "STRONG",
text: pound(rule!Calculate_Sum(months: local!months, monthName: "aug"))
)
}
)
}
),
a!columnLayout(
contents: {
a!richTextDisplayField(
value: {
a!richTextItem(
style: "STRONG",
text: pound(rule!Calculate_Sum(months: local!months, monthName: "sep"))
)
}
)
}
),
a!columnLayout(
contents: {
a!richTextDisplayField(
value: {
a!richTextItem(
style: "STRONG",
text: pound(rule!Calculate_Sum(months: local!months, monthName: "oct"))
)
}
)
}
),
a!columnLayout(
contents: {
a!richTextDisplayField(
value: {
a!richTextItem(
style: "STRONG",
text: pound(rule!Calculate_Sum(months: local!months, monthName: "nov"))
)
}
)
}
),
a!columnLayout(
contents: {
a!richTextDisplayField(
value: {
a!richTextItem(
style: "STRONG",
text: pound(rule!Calculate_Sum(months: local!months, monthName: "dec"))
)
}
)
}
),
a!columnLayout(
contents: {
a!richTextDisplayField(
value: {
a!richTextItem(style: "STRONG", text: pound(local!TotalIncome))
}
)
}
)
}
),
a!sectionLayout(
label: null,
contents: {
a!columnsLayout(
columns: {
a!columnLayout(
contents: {
a!cardLayout(
contents: {
a!richTextDisplayField(
labelPosition: "ABOVE",
value: {
a!richTextItem(
text: "Average Monthly Income",
size: "MEDIUM_PLUS",
style: "STRONG"
)
},
align: "CENTER"
),
a!richTextDisplayField(
labelPosition: "ABOVE",
value: {
a!richTextItem(
style: "STRONG",
text: pound(local!averageMonthlyIncome)
)
},
align: "CENTER"
)
},
shape: "SQUARED",
showBorder: true,
showShadow: false,
padding: "LESS",
height: "AUTO",
style: "NONE",
decorativeBarPosition: "NONE"
)
}
),
a!columnLayout(
contents: {
a!cardLayout(
contents: {
a!richTextDisplayField(
labelPosition: "ABOVE",
value: {
a!richTextItem(
style: "STRONG",
text: "Average Annual Income",
size: "MEDIUM_PLUS"
)
},
align: "CENTER"
),
a!richTextDisplayField(
labelPosition: "ABOVE",
value: {
a!richTextItem(
style: "STRONG",
text: pound(local!averageAnualIncome)
)
},
align: "CENTER"
)
},
shape: "SQUARED",
showBorder: true,
showShadow: false,
padding: "LESS",
height: "AUTO",
style: "NONE",
decorativeBarPosition: "NONE"
),

}
),
a!columnLayout(
contents: {
a!cardLayout(
contents: {
a!richTextDisplayField(
labelPosition: "ABOVE",
value: {
a!richTextItem(
text: "Total Income",
size: "MEDIUM_PLUS",
style: "STRONG"
)
},
align: "CENTER"
),
a!richTextDisplayField(
labelPosition: "ABOVE",
value: {
a!richTextItem(style: "STRONG", text: pound(local!TotalIncome))
},
align: "CENTER"
)
},
shape: "SQUARED",
showBorder: true,
showShadow: false,
padding: "LESS",
height: "AUTO",
style: "NONE",
decorativeBarPosition: "NONE"
)
}
)
}
)
}
)
}
)
)