How many times have you craved to use a modern-looking PPT style milestone on your Appian interface but had to use the classic one with a sad heart? Well, I have, a lot of times, until I developed this..
Looks like something not built on Appian, right? Wrong! It is a great fusion of a billboard layout and perfectly aligned stamp fields.
Below is the attached code for the above pre-set. Happy Lowcoding!
Pre-requisite
Upload this document and create a constant named UU_BILLBOARD_BACKGROUND that points to the document.
Code Block
/*This code has been written by Harshit Bumb and taken from AppianSpace.com */
a!columnsLayout(
columns: {
a!columnLayout(),
a!columnLayout(
contents: a!billboardLayout(
backgroundMedia: a!documentImage(document: cons!UU_BILLBOARD_BACKGROUND),
height: "AUTO",
overlay: a!fullOverlay(
contents: {
a!richTextDisplayField(value: repeat(1, char(10))),
a!sideBySideLayout(
items: {
a!sideBySideItem(
item: a!richTextDisplayField(
labelPosition: "COLLAPSED",
value: repeat(35, " ")
),
width: "MINIMIZE"
),
a!forEach(
items: {
{
heading: "Audience",
description: "Who will be using the dashboard"
},
{ heading: repeat(10, " "), description: "" },
{
heading: "Layout",
description: "How should the dashboard be designed?"
},
},
expression: a!sideBySideItem(
width: if(fv!index = 2, "MINIMIZE", "AUTO"),
item: a!richTextDisplayField(
labelPosition: "COLLAPSED",
value: {
char(10),
a!richTextItem(
text: fv!item.heading,
color: "SECONDARY",
style: "STRONG"
),
char(10),
a!richTextItem(text: fv!item.description, size: "SMALL")
},
align: "CENTER"
)
)
),
a!sideBySideItem(
item: a!richTextDisplayField(
labelPosition: "COLLAPSED",
value: repeat(35, " ")
),
width: "MINIMIZE"
)
},
spacing: "NONE",
marginBelow: "NONE"
),
a!richTextDisplayField(
labelPosition: "COLLAPSED",
value: repeat(1, char(10))
),
a!sideBySideLayout(
items: {
a!sideBySideItem(
item: a!richTextDisplayField(
labelPosition: "COLLAPSED",
value: repeat(20, " ")
),
width: "MINIMIZE"
),
a!forEach(
items: {
{ icon: "mouse-pointer", color: "#EF7C8E" },
{ icon: "users", color: "#FFBD59" },
{ icon: "sliders", color: "#38B6FF" },
{ icon: "th-large", color: "#8C52FF" },
{ icon: "share-alt", color: "#616D69" }
},
expression: a!sideBySideItem(
item: a!stampField(
labelPosition: "COLLAPSED",
icon: fv!item.icon,
backgroundColor: fv!item.color,
contentColor: "#FFF",
link: a!dynamicLink(),
align: "CENTER"
)
)
),
a!sideBySideItem(
item: a!richTextDisplayField(
labelPosition: "COLLAPSED",
value: repeat(17, " ")
),
width: "MINIMIZE"
)
}
),
a!sideBySideLayout(
items: {
a!sideBySideItem(
item: a!richTextDisplayField(
labelPosition: "COLLAPSED",
value: repeat(10, " ")
),
width: "MINIMIZE"
),
a!forEach(
items: {
{
heading: "Purpose",
description: "What are the goals of the dashboard?"
},
{ heading: repeat(10, " "), description: "" },
{
heading: "Data",
description: "What data will you be using and how much?"
},
{ heading: repeat(10, " "), description: "" },
{
heading: "Distribution",
description: "How will the dashboard reach the users?"
}
},
expression: a!sideBySideItem(
width: if(
contains({ 2, 4 }, fv!index),
"MINIMIZE",
"AUTO"
),
item: a!richTextDisplayField(
labelPosition: "COLLAPSED",
value: {
char(10),
a!richTextItem(
text: fv!item.heading,
color: "SECONDARY",
style: "STRONG"
),
char(10),
a!richTextItem(text: fv!item.description, size: "SMALL")
},
align: "CENTER"
)
)
),
a!sideBySideItem(
item: a!richTextDisplayField(
labelPosition: "COLLAPSED",
value: repeat(6, " ")
),
width: "MINIMIZE"
)
},
spacing: "NONE"
)
},
style: "NONE"
)
),
width: "WIDE"
),
a!columnLayout()
}
)
✍🏼Feel free to post any questions or request any presets in the comments below.
Appian Space 
Leave a Reply