Calling attribute View Operation in Web Author

[Srinarayan]

Hi team.

I have created a new oxy button in Web Author and trying to call the attribute view when this button is clicked. So far I could not find the operation which opens this attribute view in the sidebar.

Can you please help me on this?

Regards
Srinarayan

[mihai_coanda]

Hi Sean,

We do not provide an out-of-the-box action to focus the attributes side view.
You will have to create a custom action that when invoked focuses the view using the sync.view.ViewManager [1] API:

Code: Select all

workspace.getViewManager().focusView('attributes-panel-table');

.
You can then register the action with the ActionsManager[2] by an ID and configure the oxy button to invoke the action with that ID.

Regards,
Michael


1. https://www.oxygenxml.com/maven/com/oxy ... ew__anchor
2. https://www.oxygenxml.com/maven/com/oxy ... on__anchor

[Srinarayan]

Hi Michael,

I registered an action like you suggested -> editor.getActionsManager().registerAction('edit.attribute', globalAttrs.urnDialogNew);

And then I wrote a java script for getting the action and running it.

function editAttributes() {
var allActions = authorAccess.getEditorAccess().getActionsProvider().getAuthorCommonActions();
var action = allActions.get("edit.attribute");

if (typeof action.actionPerformed === "function") {
action.actionPerformed(null);
} else if (typeof action.run === "function") {
action.run();
}
}

But when I tried running the action from the css button I am getting an error like this: 'Could not evaluate script: TypeError: Cannot read property "actionPerformed" from null'

Please help in resolving this error.

[mihai_coanda]

Hello,

I was referring to client-side JS code [1].
You can implement a custom JS action as in this example [2] in whose actionPerformed implementation just executes

Code: Select all

workspace.getViewManager().focusView('attributes-panel-table');

Regards,
Michael

1. https://www.oxygenxml.com/doc/versions/ ... lugin.html
2. https://www.oxygenxml.com/maven/com/oxy ... ction.html

[Srinarayan]

Hi Michael,

I have implemented the custom JS action just like mentioned in the [1] with the actionPerformed implementation.

Just to check I have added this action to the context menu also. It is able to focus the attribute view from the context menu.

But from the CSS button it is not. It says that it cannot read property of actionPerformed from null. I dont understand this because the action is working from the context menu.

Can you please help in resolving this error?

Regards,
Vivek.

[1]https://www.oxygenxml.com/maven/com/oxy ... ction.html

[mihai_coanda]

Hi,


In order to try to reproduce the issue, could you share:

• the full stack trace of the error displayed in the browser's console when invoking the action from the oxyButton form control ?

• The oxyButtont configuration that you are using

Michael

[Srinarayan]

Hi Michael,

I am now able to assign the action to the button like this:

oxy_button(actionID, "edit.attribute", enableInReadOnlyContext, true);

But there is a small issue. When the editor is loaded for the first time, the button is not having the intended display name which is set for the action. Instead the button text is "Unknown". But when there is a change in the content(refresh) the button text("Unknown") is replaced by the display name of the action.

I think the action is not working immediately after the editor is loaded. Is there something that I have to do specifically to resolve this issue?


Regards,
Srinarayan

[mihai_coanda]

I suspect there is a timing issue between the document rendering and your action registering.

Have you used the sync.api.Workspace.EventType.EDITOR_LOADED event to register the action?

If that is the case you could try registering the action on the sync.api.Workspace.EventType.BEFORE_EDITOR_LOADED that is triggered before the document rendering.

[Srinarayan]

Hi Michael,

I had used BEFORE. Unfortunately, I do not think the action is being registered with the below code.


workspace.listen(sync.api.Workspace.EventType.BEFORE_EDITOR_LOADED, function(e) {
var editor = e.editor;
// Register the newly created action.
editor.getActionsManager().registerAction('edit.attribute', new WebLinkAction(editor));

addToContextMenu(editor, 'edit.attribute');

// Refresh the action enabled/disabled status when the selection changes.
editor.getSelectionManager().listen(
sync.api.SelectionManager.EventType.SELECTION_CHANGED, function() {
editor.getActionsManager().refreshActionsStatus('edit.attribute')
});
});

The error I am getting from using this is "Unknown action ID: edit.attribute. The document must have an associated Document Type in which an action with the given ID must be declared."

This is not the case when I am not using the BEFORE.

Regards,
Srinarayan

[mihai_coanda]

When deploying the JS snippet you shared i am getting an error in the browser's developer console because of the piece of code:

Code: Select all

    // Refresh the action enabled/disabled status when the selection changes.
  editor.getSelectionManager().listen(
      sync.api.SelectionManager.EventType.SELECTION_CHANGED, function() {
        editor.getActionsManager().refreshActionsStatus(actionId)
      });
  });

This code should be executed on the sync.api.Workspace.EventType.EDITOR_LOADED event when the editor is fully loaded.

After completely removing this snippet everything works as expected with a custom action.
I replaced the code from WebLinkAction.prototype.actionPerformed with console.log('TEST'); to check that the action is invoked from the oxyButton.

It would be great if you could do the same and check whether the action is correctly invoked.

Do you have any errors in the browser's developer console?

[Srinarayan]

Hi,

I have removed the piece of code that you have mentioned and used "sync.api.Workspace.EventType.BEFORE_EDITOR_LOADED". But still I am getting the same error as I have mentioned earlier. "Unknown action ID: edit.attribute. The document must have an associated Document Type in which an action with the given ID must be declared."

Even with that snippet of code for the BEFORE_EDITOR_LOADED, the error is same.

It's not the case when using "sync.api.Workspace.EventType.EDITOR_LOADED" as the action is being ran successfully except the display name issue.

Regards,
Srinarayan

[mihai_coanda]

The warning that you mention seems to be generated due to an invocation of a server-side action from JS (your custom action maybe?) so an action is invoked when pressing the button.
Have you tested whether the actionPerformed is called for your action ?
Are there any console errors when this issue occurs?

[Srinarayan]

Yes, the warning is generated when I click the button. The actionPerformed is not being called. The same error warning is being printed in the console too.

"Error Unknown action ID: edit.attribute. The document must have an associated Document Type in which an action with the given ID must be declared."

[mihai_coanda]

I did not reproduce the issue.
This is the entire code i am using, except the action declaration:

Code: Select all

  workspace.listen(sync.api.Workspace.EventType.BEFORE_EDITOR_LOADED, function(e) {
    console.log('HEREERERE')
    var editor = e.editor;
// Register the newly created action.
    var actionId = 'edit.attribute'

    editor.getActionsManager().registerAction(actionId, new WebLinkAction());
  });

Maybe you can try with my exact code.
If the issue still reproduces we might need the code for the action you are registering?
Another important factor might be the exact Web Author version you are testing your code on.

[Srinarayan]

Hi,

We are using the Oxygen v23. How do I share my code here? shall I just paste it here?

[mihai_coanda]

Yes, you can paste the entire JS code here so i can reproduce your exact environment.

[Srinarayan]

Here is the JS code:

Code: Select all

WebLinkAction = function(editor) {
  // shortcut is Meta+L on Mac and Ctrl+L on other platforms.
  sync.actions.AbstractAction.call(this, 'M1 L');
  this.editor = editor;
};
WebLinkAction.prototype = Object.create(sync.actions.AbstractAction.prototype);
WebLinkAction.prototype.constructor = WebLinkAction;

WebLinkAction.prototype.getDisplayName = function() {
  return 'Edit Profiling attributes';
};
WebLinkAction.prototype.actionPerformed = function(callback) {
        console.log("test");
   workspace.getViewManager().focusView('attributes-panel-table');
};
workspace.listen(sync.api.Workspace.EventType.BEFORE_EDITOR_LOADED, function(e) {
    var editor = e.editor;
// Register the newly created action.
     var actionId = 'edit.attribute';
		editor.getActionsManager().registerAction(actionId, new WebLinkAction());
         });



function addToContextMenu(editor, actionId) {
  editor.listen(sync.api.Editor.EventTypes.ACTIONS_LOADED, function(e) {
    var contextualItems = e.actionsConfiguration.contextualItems;
    if (contextualItems) {
      contextualItems.push({
        id: actionId,
        type: "action"
      });
    }
  });
}

[mihai_coanda]

I deployed your code in a v23 instance and all works perfectly.

Is there any chance that you have the action declared and registered multiple times with a different code in separate locations?

To make sure that the actionPerformed code executed is the expected one you can try to run in the browser's developer console the following snippet of JS code:

Code: Select all

workspace.currentEditor.getActionsManager().getActionById('edit.attribute').actionPerformed

It should print the actionPerformed function's code to make sure it is the one with the console.log.

[Srinarayan]

Yes, it is printing the exact code written for that action.

"ƒ (callback) {
console.log("test");
workspace.getViewManager().focusView('attributes-panel-table');
}"

[mihai_coanda]

In a clean Web Author installation without any other changes besides the JS code that you shared with me, the code should work as expected as I cannot reproduce the issue you are experiencing.

Do you have any other customizations at framework/plugin level, anything other than the JS snippet you sent to me?
Is an action with this ID defined at framework level, using the Oxygen Editor/Author UI ?

These might interact with this action somehow.

One more thing that I would try is to change the action ID in the CSS and the JS code with something like 'myDummyId'.

[Srinarayan]

Hi,


I am thinking to try in Oxygen v22.1.0 setup. Will this exact code work there or are there some modifications that have to be done?


Regards,
Srinarayan.

[mihai_coanda]

Hi,

The code you shared with me should work on the latest version. I suspect you have other changes to your Web Author environment interfering with this behavior.

The best approach is to install a fresh Web Author instance and just add the code to a basic plugin and add the CSS adding just the oxyButton to a framework.

[Srinarayan]

Hi,

Thanks for your support. I have tried deploying in a different directory altogether and it worked.

Regards,
Srinarayan