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
Discussion posts and replies are publicly visible
AFAIK, this cannot be adjusted.
Hi suresh ,
You can try going through the documentation of the Milestone patterns,Milestone bar
Hope it helps !!
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:"𐤏", 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" ) } ) } ) ) }