Page 1 of 1
Using Javascript with Oxygen XML Web Author to Collapse/Uncollapse Sections
Posted: Fri May 26, 2017 5:11 pm
by 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
Re: Using Javascript with Oxygen XML Web Author to Collapse/Uncollapse Sections
Posted: Fri May 26, 2017 5:57 pm
by 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
Re: Using Javascript with Oxygen XML Web Author to Collapse/Uncollapse Sections
Posted: Fri May 26, 2017 10:42 pm
by 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!
Re: Using Javascript with Oxygen XML Web Author to Collapse/Uncollapse Sections
Posted: Fri Jun 02, 2017 1:23 pm
by 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