Solved
Split Grid
Hi, I just wonder how the winner do this any idea?
community.appian.com/.../split-grid
Hi AbduI,
I have created something similar which uses card layouts and custom paging. This will render a grid which allows you to split rows, make individual selection and also has the ability to select or deselect all. You can add sort as shown in the shared split grid example and feed that value to the sort info of query record or entity which populates the grid data.
RSA_customGridFromColumnAndCardLayouts:
a!localVariables(
local!mainHeaders: if(
a!isNullOrEmpty(ri!gridHeaders),
{},
ri!gridHeaders
),
local!cardData: if(
a!isNullOrEmpty(ri!gridData),
{},
ri!gridData
),
local!selectedRow,
local!viewDetails,
local!pagingInfo: a!pagingInfo(startIndex: 1, batchSize: 3),
local!data: todatasubset(local!cardData, local!pagingInfo),
local!cardDataKeys: if(
a!isNullOrEmpty(local!cardData),
{},
a!keys(index(local!cardData, 1, {}))
),
{
a!columnsLayout(
columns: {
a!columnLayout(
contents: {
a!sideBySideLayout(
items: {
a!sideBySideItem(
item: a!richTextDisplayField(
value: {
a!richTextItem(
text: "Select All (" & if(
a!isNullOrEmpty(local!selectedRow),
0,
count(local!selectedRow)
) & ")",
link: a!dynamicLink(
value: index(local!cardData, "a", {}),
saveInto: local!selectedRow,
showWhen: if(
a!isNullOrEmpty(local!cardData),
false,
count(local!cardData) <> count(local!selectedRow)
)
)
),
a!richTextItem(text: " | "),
a!richTextItem(
text: "Deselect All (" & if(
a!isNullOrEmpty(local!selectedRow),
0,
count(local!selectedRow)
) & ")",
link: a!dynamicLink(
value: null,
saveInto: local!selectedRow,
showWhen: if(
a!isNullOrEmpty(local!cardData),
false,
or(
if(
a!isNullOrEmpty(local!selectedRow),
false,
count(local!selectedRow) > 0
),
count(local!cardData) = count(local!selectedRow)
)
)
)
)
},
align: "LEFT"
)
)
}
)
}
),
a!columnLayout(contents: {}),
a!columnLayout(contents: {})
}
),
a!columnsLayout(
columns: {
a!forEach(
items: local!mainHeaders,
expression: a!columnLayout(
contents: {
a!cardLayout(
contents: {
a!richTextDisplayField(
value: a!richTextItem(text: fv!item, style: "STRONG")
)
},
height: "AUTO"
)
}
)
)
},
marginAbove: "NONE",
marginBelow: "NONE",
spacing: "NONE"
),
a!cardLayout(
contents: {
a!richTextDisplayField(
value: a!richTextItem(text: "No items available"),
align: "CENTER",
marginAbove: "NONE"
)
},
showWhen: a!isNullOrEmpty(local!data.data)
),
a!forEach(
items: local!data.data,
expression: {
a!columnsLayout(
columns: {
a!localVariables(
local!externalItem: fv!item,
a!forEach(
items: touniformstring(
fn!apply(
index(local!externalItem, _, null),
local!cardDataKeys
)
),
expression: {
a!columnLayout(
contents: {
a!cardLayout(
contents: {
a!richTextDisplayField(value: a!richTextItem(text: fv!item))
},
link: a!dynamicLink(
label: "Dynamic Link",
value: local!externalItem.a,
saveInto: {
a!save(
local!selectedRow,
if(
contains(
{ touniformstring(local!selectedRow) },
tostring(local!externalItem.a)
),
difference(
local!selectedRow,
{ local!externalItem.a }
),
fn!append(local!selectedRow, local!externalItem.a)
)
)
}
),
height: "AUTO",
style: if(
contains(
{ touniformstring(local!selectedRow) },
tostring(local!externalItem.a)
),
"ACCENT",
"NONE"
)
)
},
showWhen: fv!index <= 10
),
a!columnLayout(
contents: {
a!cardLayout(
contents: {
a!richTextDisplayField(
value: a!richTextIcon(
icon: if(
a!isNullOrEmpty(local!viewDetails),
"caret-square-right",
if(
contains(
{ touniformstring(local!viewDetails) },
tostring(local!externalItem.a)
),
"caret-square-down",
"caret-square-right"
)
),
link: a!dynamicLink(
value: local!externalItem.a,
saveInto: {
a!save(
local!viewDetails,
if(
contains(
{ touniformstring(local!viewDetails) },
tostring(local!externalItem.a)
),
difference(
touniformstring(local!viewDetails),
{ tostring(local!externalItem.a) }
),
local!externalItem.a
)
)
}
)
)
)
},
height: "AUTO",
style: if(
contains(
{ touniformstring(local!selectedRow) },
tostring(local!externalItem.a)
),
"ACCENT",
"NONE"
)
)
},
showWhen: fv!index = 10
)
}
)
)
},
showWhen: a!isNotNullOrEmpty(local!cardData),
marginAbove: "NONE",
marginBelow: "NONE",
spacing: "NONE"
),
a!columnsLayout(
columns: {
a!columnLayout(
contents: {
a!richTextDisplayField(
labelPosition: "COLLAPSED",
value: {
a!richTextIcon(
icon: "level-down",
color: "ACCENT"
)
},
align: "CENTER"
)
},
width: "EXTRA_NARROW"
),
a!columnLayout(
contents: {
a!boxLayout(
label: "This section is part of grid row : " & tostring(fv!item.a),
contents: {
a!richTextDisplayField(
value: a!richTextBulletedList(
items: tostring(fv!item.a)
)
),
a!richTextDisplayField(
value: a!richTextItem(
text: "Close",
link: a!dynamicLink(
value: null,
saveInto: local!viewDetails
)
),
align: "RIGHT"
)
},
style: "INFO",
shape: "SEMI_ROUNDED"
)
}
)
},
showWhen: and(
contains(
{ touniformstring(local!viewDetails) },
tostring(fv!item.a)
),
a!isNotNullOrEmpty(local!cardData)
),
marginBelow: "NONE",
spacing: "NONE"
)
}
),
rule!RSA_customPaginationComponent(
gridData: local!data,
gridPagingInfo: local!pagingInfo
)
}
)
========================================================================================
RSA_customPaginationComponent
a!richTextDisplayField(
value: {
a!richTextItem(
text: "<<",
link: if(
ri!gridPagingInfo.startIndex = 1,
{},
a!dynamicLink(
value: 1,
saveInto: ri!gridPagingInfo.startIndex
)
),
showWhen: and(
ri!gridData.totalCount > 0,
ri!gridPagingInfo.startIndex > 1
),
size: "MEDIUM",
style: "STRONG"
),
a!richTextItem(text: " "),
a!richTextItem(
text: "<",
link: if(
ri!gridPagingInfo.startIndex = 1,
{},
a!dynamicLink(
value: if(
ri!gridPagingInfo.startIndex - ri!gridPagingInfo.batchSize < 1,
1,
ri!gridPagingInfo.startIndex - ri!gridPagingInfo.batchSize
),
saveInto: ri!gridPagingInfo.startIndex
)
),
showWhen: and(
ri!gridData.totalCount > 0,
ri!gridPagingInfo.startIndex > 1
),
size: "MEDIUM",
style: "STRONG"
),
a!richTextItem(text: " "),
a!richTextItem(text: "Showing "),
a!richTextItem(
text: ri!gridPagingInfo.startIndex & " - " & if(
ri!gridPagingInfo.startIndex + ri!gridPagingInfo.batchSize > ri!gridData.totalCount,
ri!gridData.totalCount,
ri!gridPagingInfo.startIndex + ri!gridPagingInfo.batchSize - 1
),
style: "STRONG"
),
a!richTextItem(text: " of " & ri!gridData.totalCount),
a!richTextItem(text: " "),
a!richTextItem(
text: ">",
link: if(
ri!gridPagingInfo.startIndex + ri!gridPagingInfo.batchSize > ri!gridData.totalCount,
{},
a!dynamicLink(
value: ri!gridPagingInfo.startIndex + ri!gridPagingInfo.batchSize,
saveInto: ri!gridPagingInfo.startIndex
)
),
showWhen: and(
ri!gridData.totalCount > 0,
ri!gridPagingInfo.startIndex + ri!gridPagingInfo.batchSize <= ri!gridData.totalCount
),
size: "MEDIUM",
style: "STRONG"
),
a!richTextItem(text: " "),
a!richTextItem(
text: ">>",
link: if(
ri!gridPagingInfo.startIndex + ri!gridPagingInfo.batchSize > ri!gridData.totalCount,
{},
a!dynamicLink(
value: (
fn!quotient(
ri!gridData.totalCount,
ri!gridPagingInfo.batchSize
) * ri!gridPagingInfo.batchSize
) + 1,
saveInto: ri!gridPagingInfo.startIndex
)
),
showWhen: and(
ri!gridData.totalCount > 0,
ri!gridPagingInfo.startIndex + ri!gridPagingInfo.batchSize <= ri!gridData.totalCount
),
size: "MEDIUM",
style: "STRONG"
),
a!richTextItem(text: " ")
},
showWhen: AND(
a!isNotNullOrEmpty(ri!gridData),
ri!gridData.totalCount > 0
),
align: "RIGHT"
)
========================================================================================
gridHeaders (List of Text String): {
"Header1",
"Header2",
"Header3",
"Header4",
"Header5",
"Header6",
"Header7",
"Header8",
"Header9",
"Header10",
"Expand"
}
gridData (Any Type): {
{
a: "AAA",
b: 1,
c: "BBB",
d: "AB1",
e: "AB2",
f: "AB3",
g: "AB4",
h: "AB5",
i: "AB6",
j: "AB7",
k: "AB8",
l: "AB9",
m: "AB10",
n: "AB11",
o: "AB12",
p: "AB13",
q: "AB14",
r: "AB15",
s: "AB16",
t: "AB17"
},
{
a: "CCC",
b: 2,
c: "DDD",
d: "CD1",
e: "CD2",
f: "CD3",
g: "CD4",
h: "CD5",
i: "CD6",
j: "CD7",
k: "CD8",
l: "CD9",
m: "CD10",
n: "CD11",
o: "CD12",
p: "CD13",
q: "CD14",
r: "CD15",
s: "CD16",
t: "CD17"
},
{
a: "EEE",
b: 3,
c: "FFF",
d: "EF1",
e: "EF2",
f: "EF3",
g: "EF4",
h: "EF5",
i: "EF6",
j: "EF7",
k: "EF8",
l: "EF9",
m: "EF10",
n: "EF11",
o: "EF12",
p: "EF13",
q: "EF14",
r: "EF15",
s: "EF16",
t: "EF17"
},
{
a: "GGG",
b: 4,
c: "HHH",
d: "GH1",
e: "GH2",
f: "GH3",
g: "GH4",
h: "GH5",
i: "GH6",
j: "GH7",
k: "GH8",
l: "GH9",
m: "GH10",
n: "GH11",
o: "GH12",
p: "GH13",
q: "GH14",
r: "GH15",
s: "GH16",
t: "GH17"
},
{
a: "III",
b: 5,
c: "JJJ",
d: "IJ1",
e: "IJ2",
f: "IJ3",
g: "IJ4",
h: "IJ5",
i: "IJ6",
j: "IJ7",
k: "IJ8",
l: "IJ9",
m: "IJ10",
n: "IJ11",
o: "IJ12",
p: "IJ13",
q: "IJ14",
r: "IJ15",
s: "IJ16",
t: "IJ17"
},
{
a: "KKK",
b: 6,
c: "LLL",
d: "KL1",
e: "KL2",
f: "KL3",
g: "KL4",
h: "KL5",
i: "KL6",
j: "KL7",
k: "KL8",
l: "KL9",
m: "KL10",
n: "KL11",
o: "KL12",
p: "KL13",
q: "KL14",
r: "KL15",
s: "KL16",
t: "KL17"
},
{
a: "MMM",
b: 7,
c: "NNN",
d: "MN1",
e: "MN2",
f: "MN3",
g: "MN4",
h: "MN5",
i: "MN6",
j: "MN7",
k: "MN8",
l: "MN9",
m: "MN10",
n: "MN11",
o: "MN12",
p: "MN13",
q: "MN14",
r: "MN15",
s: "MN16",
t: "MN17"
},
{
a: "OOO",
b: 8,
c: "PPP",
d: "OP1",
e: "OP2",
f: "OP3",
g: "OP4",
h: "OP5",
i: "OP6",
j: "OP7",
k: "OP8",
l: "OP9",
m: "OP10",
n: "OP11",
o: "OP12",
p: "OP13",
q: "OP14",
r: "OP15",
s: "OP16",
t: "OP17"
},
{
a: "QQQ",
b: 9,
c: "RRR",
d: "QR1",
e: "QR2",
f: "QR3",
g: "QR4",
h: "QR5",
i: "QR6",
j: "QR7",
k: "QR8",
l: "QR9",
m: "QR10",
n: "QR11",
o: "QR12",
p: "QR13",
q: "QR14",
r: "QR15",
s: "QR16",
t: "QR17"
},
{
a: "SSS",
b: 10,
c: "TTT",
d: "ST1",
e: "ST2",
f: "ST3",
g: "ST4",
h: "ST5",
i: "ST6",
j: "ST7",
k: "ST8",
l: "ST9",
m: "ST10",
n: "ST11",
o: "ST12",
p: "ST13",
q: "ST14",
r: "ST15",
s: "ST16",
t: "ST17"
}
}Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.