Skip to main content
June 2, 2024
Question

Array of links/buttons

  • June 2, 2024
  • 9 replies
  • 0 views

Hi, 

How can I achieve the below user experience. Like layouts, fields ..etc. Font color can be blank.

Thank you in advance.

    9 replies

    stefanhelzle0001
    Brainy
    June 2, 2024

    In the interface designer in the patterns pane, test the tabs patterns.

    srmm0001
    June 2, 2024

    a!localVariables(
    local!selectedTab: 1,
    local!tabs: { "test1", "test2","test3" },
    {
    a!buttonArrayLayout(
    buttons: {
    
    a!buttonWidget(
    label: "test",
    size: "SMALL",
    style: if(local!selectedTab = 1, "SOLID", "LINK"),
    saveInto: a!save(local!selectedTab, 1),
    
    ),
    a!buttonWidget(
    label: "test2",
    size: "SMALL",
    style: if(local!selectedTab = 2, "SOLID", "LINK"),
    saveInto: a!save(local!selectedTab, 2)
    ),
    a!buttonWidget(
    label: "test2",
    size: "SMALL",
    style: if(local!selectedTab = 3, "SOLID", "LINK"),
    saveInto: a!save(local!selectedTab, 3)
    )
    }
    ),
    choose(
    local!selectedTab,
    {
    a!richTextDisplayField(
    labelPosition: "COLLAPSED",
    value: {a!richTextItem(text: "The contents of the first tab would go here", style: "EMPHASIS")},
    align: "CENTER"
    )
    },
    {
    a!richTextDisplayField(
    labelPosition: "COLLAPSED",
    value: {a!richTextItem(text: "The contents of the second tab would go here", style: "EMPHASIS")},
    align: "CENTER"
    )
    },
    {
    a!richTextDisplayField(
    labelPosition: "COLLAPSED",
    value: {a!richTextItem(text: "The contents of the third tab would go here", style: "EMPHASIS")},
    align: "CENTER"
    )
    }
    )
    }
    )

    shubhama926776
    Brainy
    June 3, 2024

    [mention:9db259808ae24c388bcfc9ab2f9a484c:e9ed411860ed4f2ba0265705b8793d05] 
    You can find pattern for same in interface.

    शुभम्
    konduruc733182
    June 3, 2024

    Tabs Patterns Please have a look at this from the documentation.

    peter.lewis
    Employee
    June 3, 2024

    Everyone else is suggesting the "Tabs" pattern which uses buttons to simulate this. However, depending on what you're trying to do, the Tag component actually might be better. The style is more similar to what you have in your image, and there is more flexibility for formatting.

    Basically the difference for them is:

    • Buttons (Tabs pattern) are useful when you have some kind of interaction you want to do, such as changing the view of the page or submitting a form
    • Tags are useful to designate attributes or characteristics. They aren't usually for interaction, but they are good at categorizing properties in a user interface.
    rupaa0642Author
    June 3, 2024

    Buttons I cannot take because buttons has a default behavior of taking label as capital case, which should not happen.

    Tabs pattern will not work because these values should be dynamic. Eg: Test1 will show group of columns, test 2 should group another group of columns...etc.

    tags will not work, because those should be clickable.

    peter.lewis
    Employee
    June 3, 2024
    Tabs pattern will not work because these values should be dynamic. Eg: Test1 will show group of columns, test 2 should group another group of columns...etc.

    Why won't this work? I mean you have to adapt the tabs pattern to what you need, but there's no reason this can't be dynamic if you're using the rich text or the card options.

    Also if at all possible, in the future please try to provide any context like this when you make your original post - that can help us provide you a solution more quickly [emoticon:c4563cd7d5574777a71c318021cbbcc8]

    lokeshk0623
    June 4, 2024

    [mention:9db259808ae24c388bcfc9ab2f9a484c:e9ed411860ed4f2ba0265705b8793d05] - try to use tab pattern (available under interface patterns)