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

[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?

[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

[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.



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

Thanks!
John

[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

[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

[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

[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

[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