Skip to main content
P
pavitrad2763
August 23, 2023
Solved

Card Layout

  • August 23, 2023
  • 5 replies
  • 0 views

I have a card layout as below. Can anyone help If there a way for the button to not have that extra space before and after the rich text no matter what magnification or resizing of the screen is shown.

a!columnLayout(
                                          contents: {
                                            a!cardLayout(
                                              tooltip: "Only Assigned Status Tasks will be processed",
                                              contents: a!richTextDisplayField(
                                                align: "CENTER",
                                                value: {
                                                  
                                                  a!richTextItem(
                                                    text: "ACCEPT TASKS",
                                                    color: "ACCENT",
                                                    style: "STRONG",
                                                    
                                                  )
                                                  
                                                },
                                               
                                              ),
                                              link: a!dynamicLink(
                                                value: "ACCEPT",
                                                saveInto: local!acceptTask,
                                                showWhen: count(
                                                  tointeger(local!gridSelection.selected)
                                                ) <= 50
                                              ),
                                              style: "ACCENT"
                                            )
                                          },
                                          width: "NARROW"
                                        )

    Best answer by venkateswarak7510

    Instead of card layout use a buttonarraylayout containg a button label as accept task 

    a!buttonArrayLayout(
    buttons: a!buttonWidget(
    label: "Accept Tasks",
    icon: "thumbs-o-up",
    style: "PRIMARY",
    value: "ACCEPT",
    saveInto: local!acceptTask,
    showWhen: count(
    tointeger(local!gridSelection.selected)
    ) <= 50,
    validate: false()
    )
    )

    5 replies

    venkateswarak7510
    venkateswarak7510Answer
    August 23, 2023

    Instead of card layout use a buttonarraylayout containg a button label as accept task 

    a!buttonArrayLayout(
    buttons: a!buttonWidget(
    label: "Accept Tasks",
    icon: "thumbs-o-up",
    style: "PRIMARY",
    value: "ACCEPT",
    saveInto: local!acceptTask,
    showWhen: count(
    tointeger(local!gridSelection.selected)
    ) <= 50,
    validate: false()
    )
    )

      anmolv0003
      anmolv0003
      August 25, 2023

      a!columnsLayout(
  columns: a!columnLayout(
    contents: {
      a!columnsLayout(
        columns: {
          a!columnLayout(
            contents: {
              a!cardLayout(
                tooltip: "Only Assigned Status Tasks will be processed",
                contents: {
                  a!richTextDisplayField(
                    value: {
                      a!richTextItem(
                        text: { "ACCEPT TASK" },
                        color: "ACCENT",
                        style: { "STRONG" }
                      )
                    },
                    preventWrapping: false(),
                    align: "CENTER"
                  )
                },
                style: "ACCENT",
                padding: "NONE",
                link: a!dynamicLink(
                  value: "ACCEPT",
                  saveInto: local!acceptTask,
                  showWhen: count(
                    tointeger(local!gridSelection.selected)
                  ) <= 50
                ),
              )
            },
            width: "AUTO"
          ),
          a!columnLayout(contents: {})
        },
        spacing: "NONE"
      )
    },
    width: "NARROW"
  )
)

      H
      harshitham3563
      August 25, 2023

      Hi Pavitra, Try to use this code and achieve your requirement if you have to use a card layout or else you can try to use buttonArrayLayout().

      a!localVariables(
  local!gridSelection,
  local!acceptTask,
  a!columnLayout(
    contents: {
      a!columnsLayout(
        columns: {
          a!columnLayout(
            width: "1X",
            contents: {
              a!cardLayout(
                contents: a!richTextDisplayField(
                  value: {
                    a!richTextItem(
                      text: "ACCEPT TASKS",
                      color: "ACCENT",
                      style: "STRONG"
                    )
                  },
                  align: "CENTER"
                ),
                link: a!dynamicLink(
                  value: "ACCEPT",
                  saveInto: local!acceptTask,
                  showWhen: count(
                    tointeger(local!gridSelection.selected)
                  ) <= 50
                ),
                tooltip: "Only Assigned Status Tasks will be processed",
                style: "ACCENT",

              )
            }
          ),
          a!columnLayout(width: "7X", contents: {}),
          a!columnLayout(contents: {}, width: "5X", ),
          a!columnLayout(width: "1X", contents: {})
        }
      )
    },
    width: "EXTRA_NARROW"
  )
)

        mathieud0001
        mathieud0001
        Brainy
        August 25, 2023

        As indicated by others, best to use buttons for this.

        Otherwise if you insist on using a cardLayout you can try setting the margins on the richTextDisplayField

        a!localVariables(
  local!acceptTask,
  local!selected,
  a!columnLayout(
    contents: {
      a!cardLayout(
        tooltip: "Only Assigned Status Tasks will be processed",
        contents: a!richTextDisplayField(
          align: "CENTER",
          marginAbove: "NONE",
          marginBelow: "EVEN_LESS",
          value: {
            a!richTextItem(
              text: "ACCEPT TASKS",
              color: "ACCENT",
              style: "STRONG" 
            )
          }
        ),
        link: a!dynamicLink(
          value: "ACCEPT",
          saveInto: local!acceptTask,
          showWhen: count(tointeger(local!selected)) <= 50
        ),
        style: "ACCENT"
      )
    },
    width: "NARROW"
  )
)

        P
        pavitrad2763Author
        August 25, 2023

        Thanks everyone for the reply. I have used button for this requirement.

        Terms & ConditionsAccessibility statement