Vertical milestone suggestion

Question

Hi Team, 
 
 if I configure the horizontal milestone it looks good like having more length in between values,

but have a requirement same style we need to achieve in vertical style 
 
 ' 
 
 but here we can increase length of each value like how we have in horizontal , 
 
 please suggest me better approach, 
 
 Thanks

Stefan Helzle · Answer

AFAIK, this cannot be adjusted.

Shubham Aware · Answer

As a!milestoneField() has default horizontal orientation. So for your requirement you need to build custom UI. Check below interface code for your reference {
 a!localVariables(
 local!verticalSteps: {
 a!map(name: "Analysis", isCompleted: true, isActive:false),
 a!map(name: "Assessment", isCompleted: false, isActive:true),
 a!map(name: "Decision", isCompleted: false, isActive:false),
 a!map(name: "Closed", isCompleted: false, isActive:false)
 },
 /* Style Configuration */
 local!activeColor: "ACCENT",
 /* Blue/Purple */
 local!inactiveColor: "#D1D5DB",
 a!sectionLayout(
 label: "Milestone",
 labelSize: "MEDIUM",
 labelColor: "STANDARD",
 contents: {
 a!forEach(
 items: local!verticalSteps,
 expression: {
 a!columnsLayout(
 columns: {
 a!columnLayout(
 contents: {
 if(
 fv!item.isCompleted,
 a!richTextDisplayField(
 align: "CENTER",
 value: {
 /* Circle Icon */
 a!richTextItem(
 text:"⬤",
 size: "MEDIUM_PLUS",
 color:local!activeColor,
 style: "STRONG"
 )
 }
 ),
 if(
 fv!item.isActive,
 a!richTextDisplayField(
 align: "CENTER",
 value: {
 /* Circle Icon */
 a!richTextItem(
 text:"&#67855;",
 size: "MEDIUM_PLUS",
 color:local!activeColor,
 style: "STRONG"
 )
 }
 ),
 a!richTextDisplayField(
 align: "CENTER",
 value: {
 /* Circle Icon */
 a!richTextItem(
 text:"○",
 size: "MEDIUM_PLUS",
 color:local!inactiveColor
 )
 }
 )
 )
 )
 },
 width: "EXTRA_NARROW"
 ),
 a!columnLayout(
 contents: {
 a!richTextDisplayField(
 labelPosition: "COLLAPSED",
 value: {
 a!richTextItem(
 text: fv!item.name,
 size: "STANDARD",
 style: if(
 or(fv!item.isCompleted,fv!item.isActive),
 "STRONG",
 "PLAIN"
 )
 )
 },
 preventWrapping: true,
 marginBelow: "NONE"
 )
 
 }
 )
 },
 alignVertical: "MIDDLE",
 marginAbove: if(
 fv!isFirst,
 "STANDARD",
 "NONE"
 ),
 marginBelow: "NONE",
 spacing: "NONE",
 stackWhen: "NEVER"
 ),
 a!columnsLayout(
 columns: {
 a!columnLayout(
 contents: {
 a!imageField(
 labelPosition: "COLLAPSED",
 images: {
 a!documentImage(
 document: a!EXAMPLE_VERTICAL_CONNECTOR_IMAGE()
 )
 },
 size: "TINY",
 align: "CENTER",
 )
 },
 width: "EXTRA_NARROW"
 ),
 a!columnLayout()
 },
 alignVertical: "MIDDLE",
 showWhen: not(fv!isLast),
 marginBelow: "NONE",
 spacing: "NONE",
 stackWhen: "NEVER"
 )
 }
 )
 }
 )
 )
}

Vertical milestone suggestion

Top Replies