Adding/moving custom buttons crashes Charcoal Grey skin - HTML5 output

Yes. It's the same customization Willam helped me solve back in 2015. Studying that output and those customizations certainly helped with this troubleshooting effort, but the problem originally surfaced with the Charcoal Grey template right out of the box. I can replicate it over and over using any of the HTML5 and Frameless templates.

For the HTML5 templates, reordering the custom buttons creates that line break for the last button.

For the Frameless templates, reordering the custom buttons seems to work "ok" in terms of appearing to change the order. However, all it really does is change the icon. When I click on the new button in the new location, it still performs the function of the original button.

I think I had to edit the button ID number in the .css or move the .js function to the correct button. Can't remember.

I wish the buttons were available on the Home Page. The reason the client wants these buttons is for crisis and safety issues. They want users to get to critical crisis procedures with just one click, no navigation through TOC. I'm sure there are ways to do it. I just have to put in the time. I saw in one of the other forum chats where an author turned off the tiles and loads their own home page topic.

For now, I just need Adobe to fix the but in the HTML5 templates.

As always, Peter, thank you so much for your help.

Version 2022.5.28

The buttons and what they are supposed to do:

• Crisis - Opens a topic
• Safety Flashes - Opens a topic
• Forms - Opens a topic
• Suggestion Box - goes to a JotForm URL
• Employee Central - goes to a URL

Regarding behavior, I haven't gotten far enough to test them because the skin doesn't generate properly. Here are the steps:

1. Add a button called Crisis. That's it. No title, no image, no URL, no js.

2. Generate output. All is well, so far.

3. Move the new button into the first position...

4. Generate, and everything breaks.

For some background, my projects are built using RH2015. I customized the skins to add the buttons. I had help from major RH gurus at the time. This is how the buttons look right now from the RH15 output. We've maintained the projects in RH2015 all this time.

Finally, my client is willing to let me upgrade to RH2022 due to the highly customized nature of the projects and the "end of life" status of RH2015. Of course, the customization of these buttons didn't come through in the upgrade.

Now, I'm happy to see the features of adding and moving the buttons built into the interface, but something still isn't working.

In the original RH15 customizations, I know we modified files like the .css, .slp, the masterthemeschema, etc. 

With with the RH22 version, I went poking around into those same -- or similar -- files, but I'm not enough of a programmer to figure out what to do. Here are some things I've found:

1. HTML5.skn - shows the Crisis button (with no settings, which matches the RH template screen. Notice the <name>button name</name> tag.

2. However, in the .css

a.) the <name> tags aren't showing (I saw them in the .css earlier today, but have deleted and generated many times since then and the name tag is not showing.)

b.) the word "crisis" isn't found, meaning there is not reference to the Crisis button.

c.) the URL for buttons "0" and "1" are both for the "Expand/Collapse All" button (which should be button "1" according to their order in the template.) Meaning, the same .svg shouldn't be showing for both buttons.

It appears to my untrained eye that the button references in these two critical files don't align with each other or what I've set in RH.

Is this why the skin isn't generating -- or displaying -- properly?

How many and what other references to these buttons in other files are necessary for them to work?

One last thing. For the 3 provided buttons in the Grey skin, there is a reference to a .js function in the OnClick field.  For example, the function for the Expand/Collapse button is this: "rh.model.publish(rh.consts('EVT_EXPAND_COLLAPSE_ALL'));return false;"

When I searched for this phrase in the output files via Windows Explorer, the only file that uses that function is the "usersettings.js" file. That function appears in 2 places in this .js file.

1. Under the (function() section. (notice that the crisis button is also referenced.)

2. At the bottom of the file. Notice that the crisis button is NOT mentioned. Also notice the button numbers.

My point is that the UI allows for adding and moving custom buttons. However, it seems there are lots of references to these buttons that must all coordinate in order for them to work properly. I think they are not, thus the skin cannot display correctly.

Providing these custom buttons for my client is a critical issue. Any help is appreciated.