Skip to main content
G
ghanashyam905071
July 19, 2023
Question

Card in a paging grid column

  • July 19, 2023
  • 5 replies
  • 0 views

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

5 replies

stefanhelzle0001
stefanhelzle0001
Brainy
July 19, 2023

Not inside a grid. You could simulate a grid using columns and card layouts, but I think that this might not be worth the effort.

G
ghanashyam905071Author
July 19, 2023

exactly..I want to achieve this in grid only..last option I can think of having diff diff image and showing that dynamically. But don't know whether that is correct way or not?

stefanhelzle0001
stefanhelzle0001
Brainy
July 19, 2023

If you only have a few static values, then a set of images would do it.

V
vikashk7323
July 19, 2023

Hi, this is accepted behavior of tags field, it will change size based on text length. 

N
normanc
July 19, 2023

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

Terms & ConditionsAccessibility statement