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

[Shelley Bates]

I've upgraded a 2015 project. The skin and many features were highly customized in the past. Custom buttons was one of those features.

In RH2022, I see that I can now add custom buttons using the interface (YAY!!!) However, the generated output breaks -- every time. When I say breaks, it does not display the skin at all. See screenshot below.

The problem is very repeatable:

1. add button. (at minimum: icon, title, URL to topic)

2. move new button. (or don't, it really doesn't matter)

3. generate.

4. no skin.

5. delete new button.

6. regen -- all is well, but no new button.

I need to add 5 custom buttons for my client's use case. Originally, I added all the buttons and associated info. It all looks great in the preview screen,

but not when generated.

In the settings, I see that with the standard buttons like Print, there is an "OnClick" event function. Do I need to add an event? Where/how do I add that code?

I'm happy to send a Loom video, screen shots, or files as requested to help diagnose troubleshoot.

Thanks in advance,

~Shelley

[Jeff_Coatsworth]

What point version of RH2022 are you doing this in?

What are these custom buttons doing? Do they behave if you try it with the sample project?

[Shelley Bates]

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.

[Shelley Bates]

Also, the same is true of all of the HTML5 templates. 

I started down the path of trying a Frameless template, but wow. So many "moving parts" to that one. I backed away from it pretty quickly. I was able to add the Crisis button to the Topic Page. At that point, I was still adding the image file. However, when I changed the order, again, it didn't work. At least the skin did generate correctly for the most part, however, the button image reverted back to the image of the original first button (button "0") which is the expand/collapse image.

The Frameless template proved to cumbersome at the moment and is too far away from what the client is expecting for me to continue down that path right now.

[Shelley Bates]

Welp. I figured it out. Long(er) story short, the code gets messed up in the layout.css file for whichever customized button is the last one you use. By default, you have have up to 19. In my case, I need 7.

Here's the problem, a line break appears on line 743. 

I get this:

Fix the line break:

and I get this:

I was able to repeat this several times with the various HTML5 outputs I've been testing throughout this process. It happens every time. No matter how many buttons, no matter the order. That line break happens in the layout.css.

This means every time I generate and publish, I'll have to go in and manually fix it. 

Hopefully, someone at Adobe will patch it, soon. 🙂

[Peter Grainge]

Is this skin the one Willam customised or a new one created in 2022? If it is the old skin, I wonder if it is related to the customisation. Adobe did state when the new UI came in the edits outside the skin editor might not upgrade cleanly.

Create a second copy of the skin and test button customisation there. Whatever the result, you have your answer.

________________________________________________________

My site www.grainge.org includes many free Authoring and RoboHelp resources that may be of help.

[Shelley Bates]

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.

[Jeff_Coatsworth]

Feel free to set up an example and send it into them via the Tracker (https://tracker.adobe.com/) - otherwise they aren't going to know anything about it just mentioning it here.

[Shelley Bates]

Great! Thank you!

I haven't been active in the community for a while. The link is helpful.