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

2 Comments

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

    • 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.

Add a Comment

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

We are Plesk

Value simplicity and automation too? We help devs, sysadmins, and resellers run, manage and secure via our control panel solutions, extensions and hyperscale opportunites. Discover how you fit with us.

GET LATEST NEWS AND TIPS

  • Yes, please, I agree to receiving my personal Plesk Newsletter! Plesk International GmbH and its affiliates may store and process the data I provide for the purpose of delivering the newsletter according to the Plesk Privacy Policy. In order to tailor its offerings to me, Plesk may further use additional information like usage and behavior data (Profiling). I can unsubscribe from the newsletter at any time by sending an email to [email protected] or use the unsubscribe link in any of the newsletters.

Related Posts

Knowledge base

Search
Generic filters
Exact matches only
Search in title
Search in content
Search in excerpt