tag field with a separator

Hello hema.mathivathanan 

Are these tags coming from any set of data? if yes, it cannnot be done using multiple tags. FYI you cannot use concat or '&' in the tag fields.

yeah, I am using the data from the record

a!localVariables(
  local!map: {
    a!map(
      text: "T1",
      backgroundColor: "#aaa9ad",
      textColor: "#ffffff"
    ),
    a!map(
      text: "T2",
      backgroundColor: "#990099",
      textColor: "#ffffff"
    )
  },
  a!columnsLayout(
    columns: {
      a!columnLayout(
        width: "NARROW",
        contents: a!sideBySideLayout(
          spacing: "NONE",
          items: {
            a!forEach(
              items: local!map,
              expression: {
                a!sideBySideItem(
                  item: a!tagField(
                    labelPosition: "COLLAPSED",
                    tags: {
                      a!tagItem(
                        text: fv!item.text,
                        backgroundColor: fv!item.backgroundColor,
                        textColor: fv!item.textColor
                      )
                    },
                    size: "STANDARD"
                  )
                ),
                a!sideBySideItem(
                  item: a!richTextDisplayField(
                    value: a!richTextItem(text: "/")
                  ),
                  showWhen: not(fv!isLast)
                )
              }
            )
          }
        )
      )
    }
  )
)

this is the best that I was able to get. Not sure of any other possible way.

Thanks!

Why the separator though? The tag fields are being differentiated by the background colors.

Looks pretty decent in this way.

If the problem is defining the background colors since your data is coming from record, I recommend use a constant with few hexcodes and index w.r.t your data's index. You can reiterate those colors by simple logics.

Why don't you use another tag item , rather that concatenate?

a!tagField(
labelPosition: "COLLAPSED",
tags: {
/*concat(*/
a!tagItem(
text: "t1",
backgroundColor: "#aaa9ad",
textColor: "#ffffff"
),
a!tagItem(
text: "/",
backgroundColor: "#FFFFFF"
),

a!tagItem(
text: "t2",
backgroundColor: "#990099"
)
/*)*/
},
size: "STANDARD"
)

Thanks David, I tried this but missed the background color to keep as white