• State Not Answered
  • Replies 7 replies
  • Subscribers 12 subscribers
  • Views 3273 views
  • Users 0 members are here
Related Discussions
Home » Discussions » General

milestoneField customization

ginao0001

Is there a way to change the colors, the fade out rules, and format the step text? We want to change the default blue to a different color, and add borders around the step text to whichever milestone we are at. I think a stepField would be a good way to be able to incorporate some more customization to the steps, if not allowing richText instead of plain text in the steps field.  

Being able to customize the length of the bars (ex. when there are fewer milestones than ones on the same page), and having a showWhen for each step (ex. when that milestone is completed, don't show) would also be great additions. Mainly looking for work arounds that don't require using different types of fields, instead keeping the milestoneField and being able to edit parameters as desired. 

  Discussion posts and replies are publicly visible

  • 0

    Hi,

    It's not possible with the a!milestoneField(). But, you might build a more customisable milestone component using some other objects.

    Here is one good looking pattern you probably also found in the Appian documentation:
    https://docs.appian.com/suite/help/20.3/milestone-stamp-pattern.html

    Of course, there are other possibilities using these objects, you just need some creativity here to adapt them as you need it. For example, you could use richTextIcons or Texts to bouild an own component with different colouring and text sizes, etc.

    Best,

    Kai

  • 0
    Certified Lead Developer

    Use the below code to create the custom milestone and update the milestone steps with the rich text colors.Hope this helps.

    {
  a!sideBySideLayout(
    items: {
      a!sideBySideItem(
        item: a!richTextDisplayField(
          labelPosition: "COLLAPSED",
          value: {
            a!richTextIcon(
              icon: "paper-plane",
              color: "SECONDARY"
            ),
            char(10),
            a!richTextItem(
              text: upper("Applied"),
              style: "STRONG"
            ),
            char(10),
            a!richTextItem(
              text: todate("11/5/2018"),
              color: "SECONDARY"
            )
          },
          align: "CENTER"
        ),
        width: "MINIMIZE"
      ),
      a!sideBySideItem(
        item: a!richTextDisplayField(
          labelPosition: "COLLAPSED",
          value: {
            a!richTextItem(
              text: char(9472) & char(9472)
            )
          },
          align: "CENTER"
        ),
        width: "MINIMIZE"
      ),
      a!sideBySideItem(
        item: a!richTextDisplayField(
          labelPosition: "COLLAPSED",
          value: {
            a!richTextIcon(
              icon: "phone",
              color: "SECONDARY"
            ),
            char(10),
            a!richTextItem(
              text: upper("Phone Interview"),
              style: "STRONG"
            ),
            char(10),
            a!richTextItem(
              text: todate("11/9/2018"),
              color: "SECONDARY"
            )
          },
          align: "CENTER"
        ),
        width: "MINIMIZE"
      ),
      a!sideBySideItem(
        item: a!richTextDisplayField(
          labelPosition: "COLLAPSED",
          value: {
            a!richTextItem(
              text: char(9472) & char(9472),
              color: "#bfbfbf"
            )
          },
          align: "CENTER"
        ),
        width: "MINIMIZE"
      ),
      a!sideBySideItem(
        item: a!richTextDisplayField(
          labelPosition: "COLLAPSED",
          value: {
            a!richTextIcon(
              icon: "building-o",
              color: "SECONDARY"
            ),
            char(10),
            a!richTextItem(
              text: upper("Onsite Interview"),
              color: "SECONDARY"
            ),
            char(10),
            a!richTextItem(
              text: "...",
              color: "SECONDARY"
            )
          },
          align: "CENTER"
        ),
        width: "MINIMIZE"
      ),
      a!sideBySideItem(
        item: a!richTextDisplayField(
          labelPosition: "COLLAPSED",
          value: {
            a!richTextItem(
              text: char(9472) & char(9472),
              color: "#bfbfbf"
            )
          },
          align: "CENTER"
        ),
        width: "MINIMIZE"
      ),
      a!sideBySideItem(
        item: a!richTextDisplayField(
          labelPosition: "COLLAPSED",
          value: {
            a!richTextIcon(
              icon: "handshake-o",
              color: "SECONDARY"
            ),
            char(10),
            a!richTextItem(
              text: upper("Offer Accept"),
              color: "SECONDARY"
            ),
            char(10),
            a!richTextItem(
              text: "...",
              color: "SECONDARY"
            )
          },
          align: "CENTER"
        ),
        width: "MINIMIZE"
      ),
      a!sideBySideItem(
        item: a!richTextDisplayField(
          labelPosition: "COLLAPSED",
          value: {
            a!richTextItem(
              text: char(9472) & char(9472),
              color: "#bfbfbf"
            )
          },
          align: "CENTER"
        ),
        width: "MINIMIZE"
      ),
      a!sideBySideItem(
        item: a!richTextDisplayField(
          labelPosition: "COLLAPSED",
          value: {
            a!richTextIcon(
              icon: "user-plus",
              color: "SECONDARY"
            ),
            char(10),
            a!richTextItem(
              text: upper("Start"),
              color: "SECONDARY"
            ),
            char(10),
            a!richTextItem(
              text: "...",
              color: "SECONDARY"
            )
          },
          align: "CENTER"
        ),
        width: "MINIMIZE"
      )
    },
    alignVertical: "MIDDLE",
    stackWhen: {
      "PHONE"
    }
  )
}

  • 0
    Certified Senior Developer

    You can do it via template available in Appian  and if not you can use sidebysidelayout, richdisplayfield to make this happen

  • 0
    Certified Senior Developer

    Hi @ginao0001, you could perform all those with help of different components available in Appian. Three important components that you will require are milestone field,  richtextdisplayfield, sidebysidelayout. You need to write the showwhen conditions for components and if() conditions for color/style based on your requirement. you can use cardlayout or style parameter for achieving this "add borders around the step text to whichever milestone we are at"

  • 0
    Certified Senior Developer
     in reply to jyjwei2879

    May be it help new people learning Appian if they face the same issue 

  • 0
    Certified Lead Developer
     in reply to Komal Jain

    relax, it's just a spambot.

© 2024 Appian. All rights reserved.