Presenting a Dialog to the User

A common pattern for an action is to present a dialog box to the user to either give some information or let the user make a choice. A simple way to prompt the user for input inside the Author operations is to use the [ask editor variables] (http://www.oxygenxml.com/doc/help.php?product=waCustom&platform=standalone&pageId=webapp_editor_variables). Another possibility is to use the Web Author API to present a dialog box that matches the look and feel of the entire application and that is tested to work on all supported platforms.

The following example contains an action that presents some information about the element currently at the cursor position.

    /**
     * The action that shows a dialog with information about the element at caret.
     */
    class ShowTagAction extends sync.actions.AbstractAction {
      /**
       * Constructor 
       * @param {sync.api.Editor} editor The editor
       */
      constructor(editor) {
        super(editor, '');
        this.editor = editor;
        this.dialog = workspace.createDialog();
        this.dialog.setTitle('Element Information');
        this.dialog.setButtonConfiguration(sync.api.Dialog.ButtonConfiguration.OK);
      }

      /** @override */
      getDisplayName() {
        return 'Show element info';
      };
  
      /** @override */
      actionPerformed(callback) {
        let oxyNode = this.editor.getSelectionManager().getSelection().getNodeAtCaret();
        if (oxyNode) {
            this.dialog.getElement().textContent = 'The tag of the element is: ' + oxyNode.getTagName();
            this.dialog.onSelect(goog.bind(function(key, event) {
              // handle user choice.
            }, this));
            this.dialog.show();
        }
      };
  
      /** @override */
      isEnabled() {
        let oxyNode = this.editor.getSelectionManager().getSelection().getNodeAtCaret();
        if (oxyNode) {
          return oxyNode.getType() == goog.dom.NodeType.ELEMENT;
        }
        return false;
      };
    };

This action can be added to a toolbar or in the contextual menu as described in the Implementing a Custom Action tutorial.

To use it, place the cursor inside an element and invoke the action. A dialog box with the tag name of the element should be displayed.