Skip to main content

UI Customization With Plesk Extensions

A general way to customize a product is to use skins. After a new skin is applied, customers get a new look and feel of the product.

Sometimes you need deeper customization, such as adding your own control buttons, menus, etc. In Plesk, to meet this demand, you can use custom buttons (more details at Administrator’s Guide).

But even customization with custom buttons is not always enough. Another way of advanced UI customization is to use new Plesk SDK APIs. Starting from Plesk 11.5, it is possible to create an extension that provides global.js and global.css files. These files are included into all pages of the control panel. Using JavaScript you can do almost everything you want with a rendered screen: reorder items, hide or introduce new controls.

For example, a hosting provider may want to add their own bar showing the links to their support or billing system at the top of the screen in the Hosting Panel. Below is the example of such a bar:

This bar was created with the help of an additional extension. The extension was uploaded to the Panel and provides this functionality. The extension is a zip archive. Its structure is the following:

  • htdocs
    • global.css
    • global.js
  • meta.xml

The globals.js file contains a rather simple JavaScript code:

The purpose of this code is to create and insert a new panel at the top of the Plesk Panel screens. The custom panel is created with the help of HTML markup. To make the Panel look good, add necessary CSS styles to the global.css file. Thus, you can create your own bar within half an hour and make the Panel more attractive for your customers.

For additional details, see Extensions SDK documentation at Plesk Extensions Guide.

You can also see the source code of the extension described in this article: provider-panel-1.0-1.zip

2 thoughts

  1. Nikolay Vizovitin -

    Alexey, maybe you could explain what ‘Jsw’ object is? Can I use it in extensions and if so, where its documentation can be found?

    Reply

    Alexei Yuzhakov -

    Jsw is Plesk UI framework. It’s not recommended to rely on it’s parts, ’cause they can be changed in the future versions. But Jsw.onReady probably will be not changed w/o significant reason. It’s similar to jQuery’s $(function() { }) handler that fires on document ready state.

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *