Card in a paging grid column

ghanashyamm0005

Certified Lead Developer

over 1 year ago

Hi Champs,

I want to have a card with Background color as shown in Below image.

I tried achieving the same using tag field as I am unable to use card layout in grid column. But the issue is that all the tags are coming in diff width bases on the text size. I am unable to set fixed width for that which is not matching with UI design as shown below.

Is there any other way I can achieve this apart from using tag component which will fulfil the use case as per UX framework?

Regards,

Ghanashyam

Discussion posts and replies are publicly visible

Parents

0 normanc over 1 year ago

Maybe pad the tags?

= a!localVariables(
  local!gridData: {
    a!map(
      c1: "Eg1",
      c2: "tag" & joinarray(repeat(10, " "), char(8206))
    ),
    a!map(
      c1: "Eg2",
      c2: "text" & joinarray(repeat(9, " "), char(8206))
    ),
    a!map(
      c1: "Eg3",
      c2: "sample" & joinarray(repeat(3, " "), char(8206))
    )
  },
  a!gridField(
    data: local!gridData,
    columns: {
      a!gridColumn(
        label: "Column 1",
        sortField: "c1",
        value: fv!row.c1
      ),
      a!gridColumn(
        label: "Column 2",
        value: a!tagField(tags: a!tagItem(text: fv!row.c2))
      )
    }
  )
)

Reply

0 normanc over 1 year ago

Maybe pad the tags?

= a!localVariables(
  local!gridData: {
    a!map(
      c1: "Eg1",
      c2: "tag" & joinarray(repeat(10, " "), char(8206))
    ),
    a!map(
      c1: "Eg2",
      c2: "text" & joinarray(repeat(9, " "), char(8206))
    ),
    a!map(
      c1: "Eg3",
      c2: "sample" & joinarray(repeat(3, " "), char(8206))
    )
  },
  a!gridField(
    data: local!gridData,
    columns: {
      a!gridColumn(
        label: "Column 1",
        sortField: "c1",
        value: fv!row.c1
      ),
      a!gridColumn(
        label: "Column 2",
        value: a!tagField(tags: a!tagItem(text: fv!row.c2))
      )
    }
  )
)

Children

No Data