Button Styling on Select CSS

[WayneH]

I spent an absurd amount of time on this, so in the interest of helping someone else who is at my mortal level should they do a search on the forum, I am posting this up.
I am sure most of the time was me having to struggle and learn the CSS local style tweaks. I have avoided CSS like the plague, but in order to get my app to not look circa 1985, I am giving it a go.

Video below shows the end product and what I was trying to achieve. I built a menu within a UX, that is driving different panels into view on a navigator. I played with a tabbed navigator, but found the UI too cluttered and simply
too many tabs going on. So I decided since users are used to outlook, I would go for something along those lines with buttons on left, content on right.
Once I got it working, I realized there was no clear indication to the user of which screen they were on. I added headings into the control bar layout for each panel, but I did'nt care for it.
So I decided that having the buttons tell the user which one is selected was the way to go. I played with small icons and finally settled on a translucent color. May change it, but you get the idea.

My difficulty was figuring out which style to apply and which controls each part of the button element. It was about hour 5 that I coughed up my stupid burger and used dev tools to inspect the element. Thats what led to actually
using a local css to overwrite. Add a few more hours for me playing with CSS and dev tools to see which style was overwriting my changes and a few more mins for slamming head on desk.

Code is below for how this is driven, should someone do a search like I did and was still unable to figure it out, even with 400 posts about buttons.
If you are reading this, decent odds that someone with more skill than me has replied with a wayyy simpler way to do it than I did :)
I am genuinely interested from some of the pros here if there was a more efficient way for me to tackle this. Being when one button is selected, disengage the others with custom styling.

Thanks

Wayne

https://app.screencast.com/D0T7Oz4bqbB5I

Button on select:

setButtonSelected('BTN_JOBHOME','PL_JOBINFO');


JS Functions:

function setButtonSelected(Object, PANEL) {
//console.log("setButtonSelected called with:", Object);
//Lets go there first
var pObj = {dialog.object}.panelGet(PANEL,true);
pObj.show = true;
var pObj2 = {dialog.object}.panelGet('PN_PRIMARYMAIN');
pObj2.refresh();
{dialog.object}.panelSetActive(PANEL,true);


// Go through and clear buttons and then highlight one just pressed
const buttonIds = [
'BTN_JOBHOME', 'BTN_PARTS', 'BTN_NOTES', 'BTN_CHANGEORDERS', 'BTN_DRAWINGS',
'BTN_DOCUMENTS', 'BTN_FINANCE', 'BTN_SCHEDULE', 'BTN_PURCHASEORDERS', 'BTN_COPYPARTS', 'BTN_LABOR'
];

for (let id of buttonIds) {
//console.log("Unselecting:", id);
setButtonsUnSelected(id);
}

// Delay applying new styles to the selected button to let the JS have time to fire
setTimeout(function() {
//console.log("Setting selected for:", Object);
let ele = {dialog.object}.getPointer(Object);
if (ele) {
//console.log("Element found:", Object);
ele.style.backgroundColor = "rgba(0, 90, 166, 0.20)";
ele.style.border = ".1px solid rgba(0, 90, 166, 0.10)";
ele.style.borderRadius = "7px";
} else {
console.log("Element not found:", Object);
}

}, 175);
}

function setButtonsUnSelected(id) {
//console.log("setButtonsUnSelected called with:", id);
let ele = {dialog.object}.getPointer(id);
if (ele) {
//console.log("Element found:", id);
ele.style.border = "none";
ele.style.backgroundColor = "rgba(0, 0, 0, 0.00)";
} else {
console.log("Element not found:", id);
}
}

Here is the CSS:
.iconSizeablex {
display: block;
margin-left: auto;
margin-right: auto;
width: 80%;
}

.WaynesLabelClassx {
font-size: 11px;
color: #717171;

}

Screen.pngButton Properties.png

[lvasic]

Nice work.

[schuberg]

Wayne - Thanks for doing this Wayne. I too could not find any help on the subject until stumbling on your post.
The code works! Thanks for doing that!

I also stumbled upon a control bar feature which seems to do the same thing.
Here is a video link tutorial from Alpha https://www.viddler.com/v/c1b94486 .
If the link ever breaks, go here https://documentation.alphasoftware....%20Control.xml
or search "The ControlBar Control" within Alpha's documentation search. The video can be found under subheading "Adding a Button-List to a ControlBar".

Hopefully this can help someone out.

[CharlesParker]

a tree menu control automatically works the way you wanted and would look identical without any styling - either way, excellent work on that - it's a great tidbit of info especially if I wanted to go in and just "style" an existing UX rather than rebuild the menu with a tree control - so thanks for posting! appreciate your contribution

[peteconway]

Nice Job - very special class as well.

.WaynesLabelClassx {
font-size: 11px;
color: #717171;