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
Screen.pngButton Properties.png
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
Code:
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
Comment