Using Javascript with Oxygen XML Web Author to Collapse/Uncollapse Sections

[john_m]

Hi,

We are using Oxygen XML Web Author and would like to give users the ability to collapse/expand sections. I was attempting to do it via javascript - however, I'm having difficulty because of the the transformation that happens when Web Author writes the code to turn the XML information into a visual (html) representation.

Is there a way to do this out of the box?

One work around I thought of would be to use oxy_htmlContent to inject <span> tags with specific classes or IDs - but before I did that, I wanted to see if there was a better way to do it.

Thanks!
John

[cristi_talau]

Hello,

In version 19.0, Web Author has builtin support for expanding/collapsing sections. You can find more details about how to configure it here [1]. If you have an use-case that is not covered by this support, please let us know.

Best,
Cristian

[1] https://www.oxygenxml.com/doc/versions/ ... ments.html

[john_m]

Hi Christian!

Thank you so much! As usual, your suggestion was great! The functionality is exactly what I'm looking for. However, I have two follow-up questions.

First, is it possible to change the styling to move the arrow into a psudo element tag? I create section headers using element:before - and I would like to move the arrow into the before section. I have tried to modify the css on my end, but I can't get it to work properly.

The original Oxygen provided styling is in document-v19.0.0.css, which is taking precedence over my style sheets. Even referencing it directly in my style sheet by using myElement .oxy-foldable>*>.folding-button { ... } isn't allowing me to change it. I realize I could update document-v19.0.0.css to make my changes - but I would prefer to avoid changing default style sheets.

Second, is it possible to combine the functionality with an oxy_checkbox action? I have several section headers that have oxy_checkboxes with N/A labels. I'd like to set it up so that if the user checks the N/A box, it automatically hides the section - and if they un-check the box, it shows the section again.

Thank you so much for any assistance!

[cristi_talau]

Hello,

First, is it possible to change the styling to move the arrow into a psudo element tag? I create section headers using element:before - and I would like to move the arrow into the before section. I have tried to modify the css on my end, but I can't get it to work properly.

In general, no. I could add a feature request for such an API, but I need to understand your use-case better.

Second, is it possible to combine the functionality with an oxy_checkbox action? I have several section headers that have oxy_checkboxes with N/A labels. I'd like to set it up so that if the user checks the N/A box, it automatically hides the section - and if they un-check the box, it shows the section again.

A similar behavior can be implemented using button form-controls. I uploaded a sample here:

https://www.oxygenxml.com/webapp-demo-a ... olding.xml

The source code being here: https://gist.github.com/ctalau/42299b9d ... acbc2cb3e5

Here I control the section being hidden/shown with a pseudo-class. However, you can also control that with an attribute using the "SetAttributeOperation" operation. If you need more details, please let me know.

Best,
Cristian