Appian Community and Appian Academy are being upgraded. From July 24–August 3, the Appian Community will be in read-only mode. During this time, the site will be read-only and user registration will be disabled. We apologize for any inconvenience this may cause, but a more secure, stable, and performant Community experience is coming soon!

The new Appian Community launches August 3, followed by Appian Academy on August 7. During the migration, Appian Community Edition, Appian Academy, Documentation, Certifications, Instructor-led Customer Training, Partner Sales Training & Accreditation, and Forum (for Appian Partners and Customers only) will remain available.
  • State Verified Answer
  • Replies 3 replies
  • Answers 1 answer
  • Subscribers 7 subscribers
  • Views 884 views
  • Users 0 members are here
Related Discussions
Home » Discussions » User Interface

Vertical milestone suggestion

sureshs276515
Certified Senior Developer

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

Top Replies

Parents
  • 0
    Certified Lead Developer

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

Reply
  • 0
    Certified Lead Developer

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

Children
No Data
© 2026 Appian. All rights reserved.
We want to hear from you! Submit a review on Gartner or G2.