Array of links/buttons

RE: Array of links/buttons

lokeshk0623 — Tue, 04 Jun 2024 11:57:05 GMT

ak0642 - try to use tab pattern (available under interface patterns)

RE: Array of links/buttons

Konduru Chaitanya — Mon, 03 Jun 2024 15:41:08 GMT

[quote userid="199173" url="~/discussions/f/user-interface/35138/array-of-links-buttons/136294"] taking label as capital case, which should not happen.[/quote]

This can be done. You need to use the below format. I didn't simplify this. Just copying it from here and creating a button widget. Refer the link and redo the code according to your requirement.

A code block given by amiteshsin for the confirmation message

a!buttonWidget(
  label: a!localVariables(
    local!lRange: 120302 - 97,
    local!uRange: 120276 - 65,
    joinarray(
      char(
        a!forEach(
          items: code("box man"),
          expression: a!match(
            value: fv!item,
            whenTrue: and(fv!value > 96, fv!value < 123, ),
            then: fv!value + local!lRange,
            whenTrue: and(fv!value > 64, fv!value < 91, ),
            then: fv!value + local!uRange,
            default: fv!value
          )
        )
      ),
      ""
    )
  ),
  
)

You can do it in other ways if not buttons. Just need to tell us the requirement more clearly.

RE: Array of links/buttons

Peter Lewis — Mon, 03 Jun 2024 14:47:15 GMT

[quote userid="199173" url="~/discussions/f/user-interface/35138/array-of-links-buttons/136294"]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.[/quote]

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 🙂

RE: Array of links/buttons

ak0642 — Mon, 03 Jun 2024 14:15:14 GMT

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.

RE: Array of links/buttons

Peter Lewis — Mon, 03 Jun 2024 12:59:26 GMT

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.

RE: Array of links/buttons

Konduru Chaitanya — Mon, 03 Jun 2024 07:52:42 GMT

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

RE: Array of links/buttons

Shubham Aware — Mon, 03 Jun 2024 04:53:16 GMT

ak0642
You can find pattern for same in interface.

RE: Array of links/buttons

SRINIVAS M — Sun, 02 Jun 2024 19:49:23 GMT

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

RE: Array of links/buttons

Stefan Helzle — Sun, 02 Jun 2024 18:04:12 GMT

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