RE: Vertical milestone suggestion

Shubham Aware — Mon, 04 Aug 2025 15:11:36 GMT

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"
            )
          }
        )
      }
    )
  )
}

RE: Vertical milestone suggestion

kapilsharma — Mon, 04 Aug 2025 14:12:07 GMT

Hi ,

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

Milestone bar

Hope it helps !!

RE: Vertical milestone suggestion

Stefan Helzle — Mon, 04 Aug 2025 10:33:01 GMT

AFAIK, this cannot be adjusted.