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:

if ('undefined' != typeof Jsw) {
    Jsw.onReady(function() {
        if (!$('body').first().hasClassName('sid-main')) {
            return;
        }

        var panel = new Element('div', {
            'class': 'custom-provider-header'
        });

        panel.update(
            '

‘ ); $(‘header-wrapper’).insert({ before: panel }); }); }

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