user interface

Question

Hi, 
 I have a tab control like below. I am using a!richTextDisplayField, a!richTextItem, a!dynamiclink. 
 When the user select the link, then accordingly I am highlighting the link and increasing the font-size. 
 But, users are asking me to change the background color for the selected item. 
 Any clue please. 
 Thanks.

Mike Schmitt · Accepted Answer

You can't change background color in normal Rich Text Display fields, but a very-close alternative option would be to implement a " cards as tabs " setup which is also very common (and about the same level of difficulty as what you already have). Here's an example of a live robust implementation: 
 With this style of setup you'd have full control over the coloring and formatting of the tab (between "selected versus unselected" at least). 
 As an aside: the post title of just " user interface " is not very helpful or descriptive of your question (and has probably been used, verbatim, 50 times previously here in Community). I strongly urge everyone to create a unique (though still concise) post title that at least gives the flavor of the thing you're asking in your post, which would then contain additional details / screenshots / etc.

Dimitris Soulovaris · Answer

Put the cardLayout inside a columnLayout if you haven't done that already, and you can set the width of the column layout to different values. 
 Another option is to put some empty column layouts (like in comments) on the right of your cards. That will decrace the size of each column and therefore of each card.

venkyuppala09 · Answer

Other alternative you can go with Buttons, that suits exactly for your requirement. 
 a!localVariables(
 local!isSelected: 1,
 a!buttonArrayLayout(
 align: "START",
 buttons: {
 a!buttonWidget(
 label: "My Sports",
 size: "SMALL",
 style: if(local!isSelected = 1, "PRIMARY", "LINK"),
 saveInto: { a!save(local!isSelected, 1) }
 ),
 a!buttonWidget(
 label: "My Blogs",
 size: "SMALL",
 style: if(local!isSelected = 2, "PRIMARY", "LINK"),
 saveInto: { a!save(local!isSelected, 2) }
 ),
 a!buttonWidget(
 label: "All Other",
 size: "SMALL",
 style: if(local!isSelected = 3, "PRIMARY", "LINK"),
 saveInto: { a!save(local!isSelected, 3) }
 )
 }
 )
)

user interface

Top Replies