How to Add and Configure Plugins

Add a New Plugin

To add a new plugin to the WebApp Component, follow these steps:

Go to your Administration Page.
Select Plugins.
Click Add Plugin and choose a plugin file to upload.
Click OK to upload the file. The plugin should appear in the list on this page.
Once you are finished with all of your changes, restart the server.

Enable or Disable a Plugin

To enable or disable a plugin, follow these steps:

Go to your Administration Page.
Select Plugins.
Click the disabled button to enable the plugin, or the enabled button to disable it.
Once you are finished with all of your changes, restart the server.

Configure a Plugin

If the plugin can be configured, a

Configure icon is displayed next to its name. To configure the plugin, click the icon and follow the instructions.

To create a configuration page for a plugin that does not already have the

Configure icon displayed, follow these steps:

Register a WebappServlet extension type with a role attribute set to config in your plugin.xml file:
```
<extension type="WebappServlet" role="config" class="com.oxygenxml.sdksamples.github.GithubPluginConfigExtension"/>
```
The class attribute value should point to an extension of the PluginConfigExtension class.
When extending the PluginConfigExtension class, consider the following notes:
- Implement the getOptionsForm method to return an HTML of your configuration page that contains user inputs or buttons so that your plugin and JavaScript communicates with the PluginConfigExtensions HTTP API.
- Implement the getOptionsJson method to return a JSON string of the current options for a plugin. (The JSON should only contain key values, where values is of the type string|number|boolean with no arrays or other objects).
- Implement the getPath method to return a non-empty string that represents the path for which this extension will be served.
  For example:
```
 {webapp-context}/plugins-dispatcher/RESULT_OF_GETPATH
```
- If you need to override the init method, make sure you call super.init(). Otherwise, options will not be saved to disk and will be lost when you restart the application.
- If you need to override any of the doPut/doDelete methods, make sure you call the saveOptions method at the end to save the options to disk.
- If you need to override the doGet method, make sure it responds with the result of getOptionsForm for header Accept=text/html, and with the result of getOptionsJson when called with header Accept=application/json. Use the getOption or getDefaultOptions methods to access the current or default options.
Tip: For an implementation example, you can look at com.oxygenxml.sdksamples.github.GithubPluginConfigExtension in the oxygen-sdk-samples project.

The getOptionsForm method should return an HTML page with necessary logic to call the doMethods of the PluginConfigExtension class. The options page should have some JavaScript code that listens for message events and responds to the 'apply' and 'restoreDefaults' actions by calling the doPutand doDelete methods respectively, as in the following example:

window.addEventListener('message', function (event) {
  var action = event.data.action;
  var origin = event.origin;

  switch (action) {
  case 'apply':
    // call the doPut method of your PluginConfigExtension here using an XMLHttpRequest
    // and send the required options taken from the inputs you sent with the getOptionsForm method.
    var xhr = new XMLHttpRequest();
    xhr.open("PUT", "../plugins-dispatcher/RESULT_OF_GETPATH");


    // after receiving the response send it back to the sender of the message with a done property
    // set to true if the action completed successfully or false otherwise. And send a message for
    // the user as well. Also, make sure to set the origin to the event.origin otherwise the message
    // will be ignored
    event.source.postMessage({done: true, message: 'Options set succesfully for plugin X.'}, origin);
    break;
  case 'restoreDefaults':
    // call the doDelete method of you PluginConfigExtension here using an XMLHttpRequest

    // after receiving the response send it back to the sender of the message with a done property set
    // to true if the action completed successfully or false otherwise. And send a message for the user
    // as well. Also, make sure to set the origin to the event.origin otherwise the message will be ignored
    event.source.postMessage({done: true, message: 'Options reset successfully for plugin X.'}, origin);
    break;
}

Delete a Plugin

To delete a plugin from your WebApp Component, follow these steps:

Go to your Administration Page.
Select Plugins.
Find the plugin you want to delete and click the Delete the plugin button on the right side of its name.
Restart the server to apply the changes.