Developing Extensions for Plesk
  • Plesk Extensions in a Nutshell
  • Create Your First Extension
  • Plesk Extensions Basics
    • How to Create and Install Extensions
    • Choosing the PHP version
    • Encoding the Source Code
    • Distributing Extensions
    • Monetizing Extensions
      • Available Licensing Models
      • Issuing Extension Licenses with Key Administrator
      • Issuing Custom Licenses for Extensions
      • Obtaining the Online Store URL Correctly
      • Obtaining License Purchase URL
      • Obtaining License Upgrade URL
    • Extension Structure
    • Class Naming Conventions
    • Composer Support
    • Extensions Reference
      • API Stubs
    • Adjust Development Environment
  • Extensions Management Utility
  • Quick Start
    • Exercise 1. Tabs, Forms, Lists, Tools
    • Exercise 2. Task Scheduling and Dashboard Integration
    • Exercise 3. Plesk Entities and Authentication
  • Plesk Features Available for Extensions
    • Implement UI
      • Create New Page
        • Implement Form
        • Implement List
        • Implement Active List
        • Implement URL
        • Implement Localized Message
      • Add Navigation Elements
        • Add Tabs
        • Add Buttons
        • Add Small Buttons
      • Integrate to Plesk UI
        • Integrate to Home Page
        • Integrate to File Manager
        • Add Custom Buttons
        • Admin-only functionality buttons must not appear on other users’ interface pages
        • Functions available to Customers and Resellers must appear in all appropriate places
        • Use the visibility property to hide functions unavailable for domains without hosting and aliases
        • Take advantage of the description property
        • Make sure the different UI color schemes are supported
        • Availability in Power User View
        • Adjust pages by JavaScript and CSS
        • Use of global.js and global.css
        • Avoiding Collisions in Naming
        • Library Licensing
        • Include Content into Pages
        • Integrate with Plesk Service Plans
        • Permissions
        • Limits
        • Embed Custom Data into Plesk Lists
        • Embed Active List Components
        • Add Long Tasks
        • Extend Plesk Forms
        • Integrate with Plesk Navigation
      • Localize UI
      • Localizing Lists and Forms
      • Localization from any place of your code
      • Using placeholders in locale keys
    • Retrieve Data from Plesk
      • User
      • Storing and Retrieving User-specific Data
      • Domain
      • Retrieving domain information
      • Storing and Retrieving Domain-specific Data
      • Examples
      • Session
      • Examples
      • License
      • Information About Plesk
      • Custom Settings
      • Installed Extensions’ Meta Data
      • Retrieving Extensions Data
      • Controlling Extensions
    • Communicate with Plesk API
      • XML API
      • Error Handling
      • Command-Line Interface
      • Executing Utilities
      • Executing Privileged Utilities
    • Store Data of the Extension
      • The Key-Value Storage
      • Encrypting Data
      • Key-value Cleaning
      • Remarks
    • Backup and Restore Extension Data
      • Working with Custom Backup Storages
      • Authorization
      • Working with Files
      • Testing Your Extension with Custom Storage
    • Manage Files
      • Domain Files and Directories
      • Server Files and Directories
      • Working with Archive Files
    • Implement Your Own Authorization
      • Authentication Hook
      • Confirming Authentication
    • Subscribe to Plesk Events
      • handleEvent Method
      • Object Types and Actions
      • Old and New Values Combinations
      • Old and New Values Description
      • Add Custom Events
    • Integrate with System services
      • Manage Services
      • Web Server
      • Adding Custom Configuration
      • Updating Domain Configuration
      • Mail service
        • Hooking Points
        • Handler Calling Conventions
          • Command Line
          • Arguments
          • Processing Messages
        • Managing Handlers
          • Registering Mail Handlers
          • Viewing Mail Handlers
          • Removing Mail Handlers
          • Disabling/Enabling Mail Handlers
        • Implementation Notes
      • DNS
        • Third-Party DNS Services
        • Integration Script Input Parameters
        • Integrating Plesk with a Third-Party DNS
        • Verifying Successful DNS Zones’ Synchronization
        • Verifying Operations with Synchronized DNS Zones
    • Scheduling Tasks
    • Send Email Notifications
  • UI Design Guide
    • Navigation
    • Lists
    • Forms
    • Status Indicators
    • Messages
    • Modal Windows
    • Groups
    • Objects
    • Background Tasks
  • Testing Extensions
    • Configuring System for Testing
    • Installing and Uninstalling System Packages
    • Testing Interaction with External Services
  • Extension Examples
  • Troubleshooting
Developing Extensions for Plesk
  • Docs »
  • UI Design Guide »
  • Modal Windows

Modal Windows¶

Modal windows are used for interacting with the user while preserving the original context of the current window. Plesk supports the following types of modal windows.

  • Dialog window (including a Progress dialog),
  • Drawer,
  • Popover.

Dialog window¶

Dialog windows are used to facilitate a dialogue with the user. Usually, the user is asked whether a certain action should proceed or how it should proceed. A dialog window can be shown in response to an action performed by the user, for example, removing important objects that influence the operability of something). Another situation when a dialog window can be displayed is in the course of execution of an operation, for example, asking the user whether to install plugins after WordPress has been installed.

Note

Do not use lengthy forms and texts in a dialog window. Instead, use a drawer.

Dialog windows can be split into the following categories: informational, confirmation and suggesting.

Informational dialog¶

The informational dialog communicates to the user facts that the user has no control over. Such dialogs contain a header, the text message and the Close button.

Example: The user is copying files. Before executing the operation, the system learns that there is insufficient disk space. The user is shown the following dialog window.

image-79771.png

Confirmation dialog¶

The confirmation dialog informs the user of the current situation and asks the user to confirm how to proceed from here.

Example: The user is copying files. There is not enough space, but the user can choose to free up the required space.

image-79772.png

Suggesting dialog¶

The suggesting dialog recommends products and services to the user.

Example: The user sees an interesting paid feature in a product. They want to know what they would get in exchange for their money. The user presses the button and sees the window that tells them of the advantages of this particular instrument and provides the ability to make the purchase.

image-79773.png

Progress dialog¶

Progress dialogs help to keep informed of the progress of the ongoing processes that take significant time to complete. They contain information about what is happening, how long it may take, and an optional way to cancel the process. A progress dialog must have an ability to be minimized in order to not get in the way of the user’s work. The process itself continues unchanged in the background.

  • The minimized progress dialog must be present on the screen in the lower right corner in the form of a small plaque, showing the progress indicators – time, volume, etc.
  • There must be a way to expand the progress dialog from its minimized state.

A single process may have a progress dialog like this:

image-79842.png

The user can see what operation is being executed and the progress of that operation in the form of a scale and a progress indicator.

If a process consists of a number of stages, its progress dialog may look like this:

image-79843.png

The shown progress may be either determinate or indeterminate.

Determinate progress¶

Progress is determinate when it is possible to show exactly how much is complete and how much remains.

If it is impossible to calculate exact volume or time or other indicators on which the progress display is based, it is possible to use a model progress, which can be based on average values and approximate the indicators.

Indeterminate progress¶

This type of progress indication can be used when it is impossible to evaluate the progress of the ongoing process even approximately. Also, it can be used when calculating time or volume before launching the determinate progress.

Using illustrations¶

If the sense of the process can be relayed in the form of an illustration – it may be done. If it cannot – do not use an illustration.

Note

Icons and illustrations are optional elements of the dialog window.

Interrupting progress¶

Optional. If the process can be canceled (the object returned to its previous state), include the cancelation button.

Displaying errors¶

In the course of the process execution, errors may appear. The errors can be critical, when it is impossible to continue further execution, and non-cricial – the execution may proceed but the user should be informed.

image-79844.png

  • In case of a critical error, the process is halted. The user must be provided with the text describing the problem and informed of the options available to them.
  • If the error is non-critical, the text about the problem must be displayed and highlighted orange, and the process continues.

Multi-step progress¶

If the process consists of more than 5 stages, displaying them all is unnecessary. The right way to implement this is to show a single progress for all the stages, and indicate which of the stages is being executed presently.

image-79779.png

Drawer¶

The drawer is a modal window, which opens on top of the page and takes up the entire height of the browser window.

Usage¶

  • Use a drawer when you need to preserve the context and display a large quantity of data.
  • A drawer can be used for lengthy forms, since a drawer takes up the entire height of the window, and the vertical scroll is placed by the content.
  • One drawer overlaying another drawer works and looks well. It is therefore acceptible to use second-tier drawers.

Note

Do not use drawers for short messages and confirmations. Instead, use dialog windows.

Example: basic drawer.

image-79845.png

It displays a list of instances and available operations, and filtering and search operations. Pressing on an arrow for a specific list entry takes us to the that object. The header describes what kind of drawer this is, and the subheader explains exactly what information is presented at this level.

Example: second-tier drawer.

image-79846.png

This second-tier drawer displays data pertaining to the object selected at the previous, first-tier drawer. Each item here can be configured. The header shows where we have come from and provides the means of returning. The subheader explains the presented information.

Composition¶

The first-tier drawer consists of the following elements:

  • Header
  • X button (close drawer)
  • Subheader
  • Content area
  • (optional) Footer, may contain form submit buttons.

The second-tier drawer overlays the first-tier drawer and consists of the same elements. It differs in that instead of the X button in the header it has an arrow button, which takes the user back to the first-tier drawer. Closing both drawers from this level is impossible.

Action¶

The parent page is darkened. This switches focus to the drawer and indicates that the interaction with the parent page is now impossible. The drawer can be closed by either pressing the X button in the header or by submitting (or canceling) the form. Pressing anywhere outside the drawer does not close it.

Popover¶

The popover is a context pop-up window, which allows for in-place editing or showing informational messages. The popover does nto block the user’s interaction with the parent page.

Example: editing a text field in-place.

image-79847.png

Example: editing a form.

image-79848.png

Here, the popover contains a header. The contained form is large enough to require an explanation.

Note

If a drawer (or any dialog window) contains input fields, the focus at the opening must be on the first input field.

Example: a tip.

image-79849.png

Note

Any of the above windows can be closed by pressing the Esc button on the keyboard.


© Copyright Plesk

Built with Sphinx using a theme provided by Read the Docs.