Page 1 of 1
					
				Create a display tag dropdown with tag display options as a toolbar action in Oxygen web author
				Posted: Mon Jul 25, 2022 9:10 pm
				by shreya
				I want to create a dropdown as the Oxygen web author toolbar action and the options in the dropdown will change the tag display for the entire document. Is there a way to do that?
			 
			
					
				Re: Create a display tag dropdown with tag display options as a toolbar action in Oxygen web author
				Posted: Tue Jul 26, 2022 9:54 am
				by mihaela
				Hello, 
In the 
last version of Web Author (24.1) we added a Tags Display Mode switcher in the breadcrumb bar. Is this feature what you need for your use case or do you want to add it also on the toolbar?
You can check 
our demo server to test the Tags Display Mode drop down.
Best Regards, 
Mihaela
 
			 
			
					
				Re: Create a display tag dropdown with tag display options as a toolbar action in Oxygen web author
				Posted: Tue Jul 26, 2022 10:07 am
				by shreya
				I want to add it the toolbar as an action separately. I also need to know how to add a dropdown in the toolbar.
			 
			
					
				Re: Create a display tag dropdown with tag display options as a toolbar action in Oxygen web author
				Posted: Tue Jul 26, 2022 11:30 am
				by Gabriel Titerlea
				Hello,
You can follow the instructions from 
this tutorial, to add an action to a toolbar. See the "If you want to add the action on the DITA toolbar, in a dropdown" section.
Here's an example for how to write a dropdown descriptor that lists tags related actions:
Code: Select all
{
      type: "list",
      name: "Tags Display Mode",
      displayName: tr(msgs.TAGS_DISPLAY_MODE_),
      small: true,
      toBottom: positionBottom,
      children: [{
          type: "list",
          name: "sentinels_on_toolabar",
          displayName: 'Display Name',
          iconDom: goog.dom.createDom('div', {className: 'ui-action-small-icon', id: 'sentinels_mode'}),
          children: [{
              type: "action",
              id: "Author/NoTags"
            },{
              type: "action",
              id: "Author/PartialTags"
            },{
              type: "action",
              id: "Author/InlineTags"
            },{
              type: "action",
              id: "Author/BlockTags"
            },{
            type: "action",
            id: "Author/FullTags"
          },{
            type: "action",
            id: "Author/FullWithAttrsTags"
          }]
        }
      ]
    }
Best,
Gabriel
 
			 
			
					
				Re: Create a display tag dropdown with tag display options as a toolbar action in Oxygen web author
				Posted: Thu Jul 28, 2022 11:59 pm
				by shreya
				Thank you for the solution. 
I am trying to change tag display through plugin by invoking JS Operation but it is giving me this error "Error For security reasons, the execution of ro.sync.ecss.extensions.commons.operations.JSOperation with user-provided parameters is blocked. If the operation is safe, consider annotating it with ro.sync.ecss.extensions.api.webapp.WebappRestSafe.". How to get around that or what else should I use to change tag display through plugins?
			 
			
					
				Re: Create a display tag dropdown with tag display options as a toolbar action in Oxygen web author
				Posted: Fri Jul 29, 2022 11:27 am
				by Gabriel Titerlea
				Hello,
I am trying to change tag display through plugin by invoking JS Operation
You don't need to call a JSOperation. The actions that change the tags display mode are already available to call/add to a toolbar from a javascript plugin.
The actions are registered with these IDs: Author/NoTags, Author/PartialTags, Author/InlineTags, Author/BlockTags, Author/FullTags, Author/FullWithAttrsTags
You can write custom 
javascript code that changes the structure of a toolbar by following 
this example.
You can find an example plugin 
here, as a starting point.
And here's an example for how to add the tags-related actions to the DITA toolbar:
Code: Select all
workspace.listen(sync.api.Workspace.EventType.BEFORE_EDITOR_LOADED, function(e) {
  var editor = e.editor;
  editor.listen(sync.api.Editor.EventTypes.ACTIONS_LOADED, function(e) {
    var actionsConfig = e.actionsConfiguration;
    var ditaToolbar = null;
    if (actionsConfig.toolbars) {
      for (var i = 0; i < actionsConfig.toolbars.length; i++) {
        var toolbar = actionsConfig.toolbars[i];
        if (toolbar.name === "DITA") {
          ditaToolbar = toolbar;
        }
      }
    }
    if (ditaToolbar) {
      ditaToolbar.children.push({
        type: "list",
        name: "Tags Display Mode",
        displayName: tr(msgs.TAGS_DISPLAY_MODE_),
        children: [{
          type: "action",
          id: "Author/NoTags"
        },{
          type: "action",
          id: "Author/PartialTags"
        },{
          type: "action",
          id: "Author/InlineTags"
        },{
          type: "action",
          id: "Author/BlockTags"
        },{
        type: "action",
        id: "Author/FullTags"
      },{
        type: "action",
        id: "Author/FullWithAttrsTags"
      }]
      });
    }
  });
});
Best,
Gabriel
 
			 
			
					
				Re: Create a display tag dropdown with tag display options as a toolbar action in Oxygen web author
				Posted: Sun Jul 31, 2022 1:55 pm
				by shreya
				Hi, actually I am not using DITA toolbar. It's a normal custom toolbar and these IDs are not working there.
			 
			
					
				Re: Create a display tag dropdown with tag display options as a toolbar action in Oxygen web author
				Posted: Mon Aug 01, 2022 11:30 am
				by Gabriel Titerlea
				Hello,
It's a normal custom toolbar and these IDs are not working there.
How are you building this custom toolbar? You can push a toolbar descriptor to the 
actionsConfig.toolbars [1] list during the 
ACTIONS_LOADED [2] event to create your own toolbar. The code I posted should work for any toolbar, not the DITA toolbar specifically.
Best,
Gabriel
[1] 
https://www.oxygenxml.com/maven/com/oxy ... figuration
[2] 
https://www.oxygenxml.com/maven/com/oxy ... Event.html 
			 
			
					
				Re: Create a display tag dropdown with tag display options as a toolbar action in Oxygen web author
				Posted: Mon Aug 01, 2022 3:53 pm
				by shreya
				Hi, I have used the same code as you have given. The dropdown comes in the toolbar in the web author but on click of any of the dropdown action, the tags are not changing. There are no errors as well. It is just not reflecting. Similarly, I have tried to achieve the same with framework as well. It works in the Oxygen XML Editor but after importing the same framework in the Oxygen Web Author, I'm facing the same problem. The dropdown comes up in the toolbar but functionality not working. Is there anything I'm missing?
			 
			
					
				Re: Create a display tag dropdown with tag display options as a toolbar action in Oxygen web author
				Posted: Tue Aug 02, 2022 11:07 am
				by Gabriel Titerlea
				Hello,
There are no errors as well. It is just not reflecting
We need more information to help you. Are there any errors in the browser's console? Can you share your code?
You can upload an archive with relevant information 
here.
Best,
Gabriel
 
			 
			
					
				Re: Create a display tag dropdown with tag display options as a toolbar action in Oxygen web author
				Posted: Wed Aug 03, 2022 10:59 am
				by shreya
				I have created a dropdown for changing the tag display mode in the custom toolbar. I have tried to do that using the framework and also as well as using plugin. But I am facing problems with each of these processes. The dropdown is coming up in the toolbar but on click of the action, no changes are reflecting on the screen. There are no browser console errors present either. I am loading the oxygen web author like this :
 http://localhost/oxygen-xml-web-author/ ... Only=false
Even when I am trying to invoke operation as 
editor.getActionsManager().getActionById("Author/InlineTags").actionPerformed(callback) , nothing is happening.
 I am also updating we are updating editor options on 'BEFORE_EDITOR_LOADED' event like below:
 
Code: Select all
e.options["tags-mode"] = 'full-tags-with-attributes';
        e.options["compactTagsMode"] = false;
        e.options.modes = 'edit';
        e.options.searchMode = "dialog";
        e.options.autoSaveInterval = 0;
        e.options.contentType = "application/xml;charset=utf-8";
        if(e.options.textModeReadOnly == "true"){
            editor.setReadOnlyState({
                readOnly: true,
                message: 'Content is not checked out',
                code:'0'
            })
            editor.setReadOnlyStripeRenderer((state, renderer) => {
                renderer.parentElement.remove(renderer);
            })
            e.options.textModeReadOnly = false;
        }
After that I have added the code which you had shared previously. I am not sure If I am missing something or if anything is getting overriden. Kindly check and let me know.
 
			 
			
					
				Re: Create a display tag dropdown with tag display options as a toolbar action in Oxygen web author
				Posted: Wed Aug 03, 2022 11:24 am
				by cristi_talau
				The "tags-mode" loading option is imposing the "full-tags-with-attributes" display mode. If you just want to provide a default, you can use the following server option "tagless.editor.tags.display.mode" which is documented here: 
https://www.oxygenxml.com/doc/versions/ ... splay.mode .
 
			 
			
					
				Re: Create a display tag dropdown with tag display options as a toolbar action in Oxygen web author
				Posted: Tue Aug 16, 2022 12:26 am
				by shreya
				Hi,
Even after removing the "tags-mode" loading option there was no difference. I mean the dropdown actions are still not reflecting any changes in the editor. Is there any way to fix it?
			 
			
					
				Re: Create a display tag dropdown with tag display options as a toolbar action in Oxygen web author
				Posted: Tue Aug 16, 2022 11:30 am
				by Gabriel Titerlea
				Hello,
If removing this line 
Code: Select all
e.options["tags-mode"] = 'full-tags-with-attributes';
 does not work, try to inspect the 
 object (console.log('Loading options: ' + e.options)). Maybe the tags-mode property is set in the URL query params?
If you can't find the cause of the problem please upload a more significant code sample from your plugin to help us reproduce this problem on our side.
Best,
Gabriel
 
			 
			
					
				Re: Create a display tag dropdown with tag display options as a toolbar action in Oxygen web author
				Posted: Thu Aug 25, 2022 4:24 pm
				by shreya
				Hi,
So the tags-mode was getting set in the query params which I had not noticed before. Thank you for pointing it out. It works well now.
			 
			
					
				Re: Create a display tag dropdown with tag display options as a toolbar action in Oxygen web author
				Posted: Wed Nov 16, 2022 1:53 pm
				by shreya
				Hi,
Is there any way to make any edits to the code of the preset tag display IDs of  "Author/NoTags", "Author/PartialTags",  "Author/InlineTags",  "Author/BlockTags", "Author/FullTags", "Author/FullWithAttrsTags". I want to add a class at the click of each of these actions. Is there any way to achieve that.?
			 
			
					
				Re: Create a display tag dropdown with tag display options as a toolbar action in Oxygen web author
				Posted: Wed Nov 16, 2022 3:45 pm
				by Gabriel Titerlea
				Hello,
What are you trying to achieve? Do you want to set a CSS class for the Web Author user interface, or a CSS class/pseudo-class in the edited XML document? What is the expected result of the class change?
Best,
Gabriel
			 
			
					
				Re: Create a display tag dropdown with tag display options as a toolbar action in Oxygen web author
				Posted: Thu Nov 17, 2022 12:56 pm
				by shreya
				Hi, I have added another action to the tag display dropdown. The "limited tags" option will add a css class "limited" to change some styles in the document. Now on click of other tag display options, I want to remove the class but I am not able to do so. Is there any event where I can check which action is called on click. or is there any other way to do that?
This is my code: 
Code: Select all
var tagDisplayObj = {
	type: "list",
	name: "Tags Display Mode",
	displayName: tr(msgs.TAGS_DISPLAY_MODE_),
	iconDom: goog.dom.createDom('div', {className: 'ui-action-large-icon', id: 'sentinels_mode', style: 'background-image: url(../plugin-	resources/content-plugin/images/tagDisplaySettings.png);'}),
        children: [{
		type: "action",
		id: "Author/NoTags"
		}, {
		type: "action",
		id: "Author/PartialTags"
		}, {
		type: "action",
		id: "Author/InlineTags"
		}, {
		type: "action",
		id:  "Author/BlockTags"
		}, {
	        type: "action",
		id: "Author/FullTags"
		}, {
		type: "action",
		id: "Author/FullWithAttrsTags"
		},{
		type: "action",
		id: "content/limitedTags"
	}]
};
			
class LimitedTags extends sync.actions.AbstractAction {
    #editor;
    constructor(editor) {
        super();
        this.#editor = editor;
    }
    renderLargeIcon() {
        var largeIcon = "../plugin-resources/content-plugin/images/tc-icon.png";
        return sync.util.renderLargeIcon(largeIcon);
    }
    renderSmallIcon() {
        var smallIcon = "../plugin-resources/content-plugin/images/tc-icon.png";
        return sync.util.renderSmallIcon(smallIcon);
    }
    getDisplayName() {
        return 'Limited Tags';
    }
    getDescription() {
        return "Displays tags with limited display.";
    }
    actionPerformed(callback) {
		document.querySelector("#editor-frame-wrapper").classList.add("limited");
        callback();
    }
}
			
 
			 
			
					
				Re: Create a display tag dropdown with tag display options as a toolbar action in Oxygen web author
				Posted: Thu Nov 17, 2022 2:56 pm
				by Gabriel Titerlea
				Hello,
You can call custom code after the tags-display mode has changed like this (repeat for all tag-related actions):
Code: Select all
var action = this.actionsManager.getActionById('Author/FullTags');
// save the original actionPerfomed method
var actionPerformed = action.actionPerformed;
// replace the actionPerformed method with one that adds custom code at the end
action.actionPerformed = callback => {
   // call the original actionPerfomed
   actionPerformed.call(action, () => {
     // custom code here. the original actionPerformed has finished
     // Don't forget to call the callback function when your custom code has finished.
      callback();
  });
};
Best,
Gabriel