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

<oXygen/> general issues.
john_m
Posts: 32

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

Fri May 26, 2017 5:11 pm

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
Posts: 161

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

Fri May 26, 2017 5:57 pm

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
Posts: 32

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

Fri May 26, 2017 10:42 pm

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
Posts: 161

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

Fri Jun 02, 2017 1:23 pm

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

Return to “Other Issues”

Who is online

Users browsing this forum: No registered users and 0 guests