Page 1 of 1

Using JavaScript to Update Elements in Editor Window (Oxygen XML Web Author)

Posted: Thu Oct 19, 2017 11:03 pm
by john_m
Hello,

I am using Oxygen XML Web Author and am trying to enable or disable the edit-ability of an oxy_textfield form control in one area of my document based on the value of an oxy_checkbox form control in another location of the document.

Specifically, I would like the text field's "disabled" property to be modified based on the change event of the oxy_checkbox form control.

Can you please let me know the best way to do that?

Re: Using JavaScript to Update Elements in Editor Window (Oxygen XML Web Author)

Posted: Mon Oct 23, 2017 11:52 am
by mihaela
Hello,

For the moment there is no possibility to use an oxy_checkbox form control to update another element from the document.
What you can do is to use oxy_combobox form control with an XQueryUpdateOperation set on its onChange event.
Here is a link to the documentation (it contains a sample that can help you):
Combo Box Form Control.

Another possibility is to use an oxy_button form control and set an action that performs a ChangeAttributeOperation (you can identify the element to be changed by using an XPath expression). Here are the documentation links:
Button Form Control
Author Mode Default Operations - ChangeAttributeOperation.

Best Regards,
Mihaela

Re: Using JavaScript to Update Elements in Editor Window (Oxygen XML Web Author)

Posted: Thu Nov 02, 2017 8:42 pm
by john_m
Hello Mihaela,

Thank you for the suggestions. I spoke with my team and we decided to implement your first suggestion using the oxy_combobox. We followed the instructions and example in the documentation you provided (https://www.oxygenxml.com/doc/versions/ ... ditor.html). However, we ran into an error saying 'onChange' is not a valid argument for function oxy_combobox.

Image

Any ideas why? Has the support been discontinued for 'onChange'?

Thanks!
John

Re: Using JavaScript to Update Elements in Editor Window (Oxygen XML Web Author)

Posted: Fri Nov 03, 2017 5:31 pm
by mihaela
Hi,

I think you are using an older version of Oxygen XML Editor (the onChange() functionality was added in 19.1 version).
Unfortunately, this feature was implemented only for Oxygen standalone version. We will add it also on Web Author on a future version. Sorry for the wrong information.

About my second suggestion: you can use a button form control to update another element from the document.
I created a small Gist sample for you in which an operation from a button sets a pseudo class on the root element. The rendering of another element from the document is changed depending on this pseudo class.
View sample document in Web Author
Here are the links to the sample documents: xml and css

Is this approach suitable for your use case, or do you need to be able to set specific attributes on these elements?


Best Regards,
Mihaela

Re: Using JavaScript to Update Elements in Editor Window (Oxygen XML Web Author)

Posted: Mon Nov 06, 2017 9:06 pm
by john_m
Hi Mihaela,

Thank you again for the response. I will update to 19.1 - but it looks like that won't help with Oxygen XML Web Author.

Unfortunately, adding buttons to our interface is not good solution for our implementation.

Do you think there might be a way to get this to work with javascript? We have tried to implement a javascript solution and have not had much success.

Thanks!
John

Re: Using JavaScript to Update Elements in Editor Window (Oxygen XML Web Author)

Posted: Wed Nov 08, 2017 3:59 pm
by mihaela
Hi John,

Why don't you want to use the oxy_button form control? With proper icons you can make the button look exactly the same as a checkbox.

Best Regards,
Mihaela

Re: Using JavaScript to Update Elements in Editor Window (Oxygen XML Web Author)

Posted: Thu Nov 09, 2017 12:46 am
by john_m
Hi Mihaela,

Maybe I'm confused (a distinct possibility)... but our checkboxes are attached to attributes of one element - and we need to modify attributes of another element... it didn't look like that was possible from the documentation.

Please let me know if I am misunderstanding the documentation.

Thanks!
John

Re: Using JavaScript to Update Elements in Editor Window (Oxygen XML Web Author)

Posted: Thu Nov 09, 2017 12:17 pm
by mihaela
Hi John,

Here is the detailed solution I propose to you (it implies using an oxy_button with an action defined in your framework):
  • in your framework (I hope you have a custom framework) define a custom action [1] that uses a ro.sync.ecss.extensions.commons.operations.JSOperation
  • as a value of the operation script argument set a doOperation [2] javascript function that changes the attributes of the node at caret and of other node from your document.
    About the API - inside the doOperation function you can use the predefined authorAccess variable that has access to the entire ro.sync.ecss.extensions.api.AuthorAccess Java API.
    To get the current node you can use:

    Code: Select all

    
    //The current node is either entirely selected...
    currentNode = authorAccess.getEditorAccess().getFullySelectedNode();
    if(currentNode == null){
    //or the cursor is placed in it
    caretOffset = authorAccess.getEditorAccess().getCaretOffset();
    currentNode = authorAccess.getDocumentController().getNodeAtOffset
    (caretOffset);
    }
    To set an attribute use this API (in this sample the type attribute is set):

    Code: Select all

    
     //Create and set the new attribute value for the @type attribute.
    attrValue = new Packages.ro.sync.ecss.extensions.api.node.AttrValue
    (newTypeValue);
    authorAccess.getDocumentController().setAttribute
    ("type", attrValue, currentNode);
    To get any node from your document you can use for example:

    Code: Select all

    
     otherNode = authorAccess.getDocumentController().getNodeAtOffset(someOffset);
    
  • In the CSS set the content of your element to an oxy_button that specifies the id of the action from your framework.

    Code: Select all

    
    element {
    content: oxy_button(actionID, "the_id_of_the_action_defined_in_the_framework");
    }
[1] https://www.oxygenxml.com/doc/versions/ ... b-tab.html
[2] https://www.oxygenxml.com/doc/versions/ ... soperation (see the JSOperation explanation section)

I hope this solution is suitable for your use-case. Please let us know if you need any other information.

Best Regards,
Mihaela