Skip to main content
A
annab9875
New Participant
December 10, 2022
Question

Card Choices Interface Component

  • December 10, 2022
  • 5 replies
  • 0 views

I am trying to use a!cardChoiceField but need capability to adjust the size of the cards, specifically make them wider. The documentations says to put the card choices component in a columns layout with a specified width to control the number of cards in each row. How do I do it?

    5 replies

    stefanhelzle0001
    stefanhelzle0001
    Brainy
    December 10, 2022

    AFAIK that component currently does not support this. What is your use case here?

    komalj3844
    komalj3844
    Participating Frequently
    December 11, 2022

    Please try this . you can modify it as per your requirement 

    a!localVariables(
    local!save,
    local!data: todatasubset(
    {
    { id: 1, name: "A" },
    { id: 2, name: "B" },
    { id: 3, name: "C" }
    },
    a!pagingInfo(1, - 1)
    ),
    {
    a!columnsLayout(
    columns: a!forEach(
    items: local!data,
    expression: {
    a!columnLayout(
    contents: a!cardLayout(
    contents: {
    a!richTextDisplayField(
    value: a!richTextItem(text: fv!item.name)
    )
    },
    link: a!dynamicLink(value: fv!index, saveInto: local!save)
    )
    )
    }
    )
    )
    }
    )

    A
    annab9875Author
    New Participant
    December 11, 2022

    thank you for suggestion, but this will not work since it's putting all the cards in the same row 

    S
    sunainas5167
    December 12, 2022

    Hi Anna

    If I understood your concern correctly, you may try this suggestion.

    In the a!cardChoiceField() set the data which you want to see in your first row and place them into a a!columnLayout() then to do the same for second set of data and so on as shown in the below figure. This way you can control how many items you want to show in a row and also their width. This is ideal to use when the data is not huge.

    In my example the first set of data was {Apple,Mango,Banana} defined in the first ColumnsLayout
    the second set of data {Dog,Cat} was defined in the second ColumnsLayout

    Hope this helps.

    komalj3844
    komalj3844
    Participating Frequently
    December 11, 2022

    As mentioned in documentation to use columns layout . along with number of card to be displayed in a row . so if one row give the for loop as 1 else divide the card list and provide the enumerate(<number of rows>)+1

    here is code for one row . Width can be "AUTO" (default), "EXTRA_NARROW", "NARROW", "NARROW_PLUS", "MEDIUM", "MEDIUM_PLUS", "WIDE", "WIDE_PLUS", "1X", "2X", "3X", "4X", "5X", "6X", "7X", "8X", "9X", "10X".

    a!localVariables(
    local!save,
    local!data: todatasubset(
    {
    { id: 1, name: "A" },
    { id: 2, name: "B" },
    { id: 3, name: "C" }
    },
    a!pagingInfo(1, - 1)
    ),
    {
    a!sectionLayout(
    label: "Select your company's industry",
    labelSize: "LARGE",
    contents: {
    a!columnsLayout(
    columns: {
    a!forEach(
    items: {1},
    expression:
    a!columnLayout(
    width: "WIDE",
    contents:
    a!cardChoiceField(
    label: "Select your company's industry",
    labelPosition: "COLLAPSED",
    instructions: "Don't see your company's industry listed? Contact our team to add your industry to our community!",
    data: todatasubset(
    {
    { id: 1, name: "A" },
    { id: 2, name: "B" },
    { id: 3, name: "C" }
    },
    a!pagingInfo(1, - 1)
    ),
    cardTemplate:

    a!cardTemplateBarTextStacked(
    id: fv!data.id,
    primaryText: fv!data.name,

    ),
    value: local!save,
    saveInto: local!save,
    maxSelections: 1,
    align: "START",
    showShadow: false,
    validations: {}
    )


    ))


    })
    }
    )
    }
    )

    Terms & ConditionsAccessibility statement