Skip to main content
August 4, 2025
Question

Vertical milestone suggestion

  • August 4, 2025
  • 3 replies
  • 0 views

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

    3 replies

    stefanhelzle0001
    August 4, 2025

    AFAIK, this cannot be adjusted.

    August 4, 2025

    Hi [mention:cb656964172a4c65ba07f4d4ada5a0c6:e9ed411860ed4f2ba0265705b8793d05] , 

    You can try going through the documentation of the Milestone patterns,

    Milestone bar

    Hope it helps !!

    shubhama926776
    August 4, 2025

    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:"ð%90¤%8F",
                                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"
                )
              }
            )
          }
        )
      )
    }