Button Form Control
The oxy_button built-in form control is used for graphical user
    interface objects that invoke a custom Author mode action (defined in the
    associated Document Type) referencing it by its ID, or directly in the CSS.
The 
    oxy_button form control supports the following properties:- fontInherit - This value specifies
          whether or not the form control inherits its font from its parent element. The values of
          this property can be trueorfalse(default value). To make the form control inherit its font from its parent element, set thefontInheritproperty totrue.
- color - Specifies the foreground color of the
          form control. If the value of the colorproperty isinherit, the form control has the same color as the element that was used to insert it.
- visible - Specifies
          whether or not the form control is visible. The possible values of this property are
            true(default value) andfalse.
- transparent - Flattens the aspect of the button form control,
          removing its border and background. The values of this property can be
            trueorfalse(default value).
- showText - Specifies if the action text should be
        displayed on the button form control. If this property is missing then the button displays
        the icon only if it is available, or the text if the icon is not available. The values of
        this property can be trueorfalse.element { content: oxy_button(actionID, 'remove.attribute', showText, true); }
- showIcon - Specifies if the action icon should be
        displayed on the button form control. If this property is missing then the button displays
        the icon only if it is available, or the text if the icon is not available. The values of
        this property can be trueorfalse.element { content: oxy_button(actionID, 'remove.attribute', showIcon, true); }
- enableInReadOnlyContext - To
          enable button form
            controls or groups of buttons form
            controls, this property needs to be set to true. This property can be used to specify areas as read-only (by setting the-oxy-editableproperty tofalse). This is useful when you want to use an action that does not modify the context.
- hoverPseudoclassName - Allows you to change the way an element
          is rendered when you hover over a form control. The value is the name of a CSS
          pseudo-class. When you hover over the form control, the specified pseudo-class will be set
          on the element that contains the form control.p:before { content: oxy_button(hoverPseudoclassName, 'showBorder') } p:showBorder { border: 1px solid red; }
- actionContext - Specifies the context that the action associated
          with the form control is executed. Its possible values are element(default value) andcaret. If you select theelementvalue, the context is the element that holds the form control. If you select thecaretvalue, the action is invoked at the cursor location. If the cursor is not inside the element that holds the form control, theelementvalue is selected automatically.
- actionID - The ID of the action,
            specified in the document type
                association, that is invoked when you click the button.Note:The element that contains the form control represents the context where the action is invoked.
- action - Defines an action directly, rather
          than using the actionIDparameter to reference an action from the document type association. This property is defined using the oxy_action function.Tip:You can also create a button form control directly from an oxy_action function.oxy_button(action, oxy_action( name, 'Insert', description, 'Insert an element after the current one', icon, url('insert.png'), operation, 'InsertFragmentOperation', arg-fragment, '<element>${caret}</element>', arg-insertLocation, '.', arg-insertPosition, 'After' ))Tip:To execute multiple actions sequentially, you can use the oxy_compound_action function.
Example: oxy_button Form
      Control
    button:before {
  content: "Label:"
     oxy_button(
         /* This action is declared in the document type 
            associated with the XML document. */
         actionID, "insert.popupWithMultipleSelection");
}Tip: 
    To insert a sample of the  
       
      
oxy_button form control in a CSS
      file (or LESS file), invoke the Content Completion
        Assistant by pressing Ctrl +
                Space and select the  
      oxy_button code template. Also, an  
      oxy_button_in_place_action code template is available that inserts an
        oxy_button function that includes an action
          parameter.To see more detailed examples and more information about how form controls work in Oxygen XML Author, see the sample files in the following directory: [OXYGEN_INSTALL_DIR]/samples/form-controls.
Resources
For more information about form controls, watch our video demonstration:
