Welcome to the programmer's documentation of PMA.UI.

Intended audience

This documentation is targeted towards software developers that build web applications on top of PMA.core, the digital slide publishing platform of Pathomation.

Quick introduction

PMA.UI is a Javascript library that provides UI and programmatic components to interact with PMA.core. The library is separated in two parts:

  • PMA.UI.View, which contains the required components to load and display a digital slide from a PMA.core server instance.
  • PMA.UI.Components, which contains components that wrap around the PMA.core web API and provide functionality such as authentication, file & directory browsing, form interaction, annotation management and slide gallery displaying.


Check out the tutorials and the documentation on the left menu to discover how to use the components in your project.



It represents a UI component that can display a digital slide in a web browser that allows the user to navigate through it. PMA.UI.View.Viewport includes OpenLayers and builds it's functionality around it.

To include PMA.UI.View.Viewport in page, you should start by including the CSS:

<link href="path/to/pma.ui.view.min.css" type="text/css" rel="stylesheet">

as well as the actual script:

<script src="path/to/pma.ui.view.min.js" type="text/javascript"></script>

See the tutorials and the documentation to get ideas on how to use the viewport in your projects.


The PMA.UI.Components namespace contains several UI and programmatic components that interact with the PMA.UI.View.Viewport class and also provide extra functionality such as authentication, file & directory browsing, form management, annotation drawing & slide gallery displaying.

PMA.UI.Components is bundled with the following libraries:

Since the dependencies might cause issues when embedding the library in a page that already contains jQuery and perhaps jQuery UI, PMA.UI.Components comes in two flavors:

  • Full: All the required libraries are bundled together and all PMA.UI.Components are available
  • Without jQuery: jQuery, jQuery UI and fancytree are not included. PMA.UI.Components.Tree is, therefore, not available. Note that jQuery has still to be available in the page for the rest of the components to work.

To include the full version of PMA.UI.Components in page, you should start by including the CSS of both PMA.UI.View.Viewport and PMA.UI.Components:

<link href="path/to/pma.ui.view.min.css" type="text/css" rel="stylesheet">
<link href="path/to/pma.ui.components.all.min.css" type="text/css" rel="stylesheet">

as well as both script files:

<script src="path/to/pma.ui.view.min.js" type="text/javascript"></script>
<script src="path/to/pma.ui.components.all.min.js" type="text/javascript"></script>

Alternatively, if jQuery is already available in the page and the tree component is not required, you can include PMA.UI.Components using the cut down version:

<link href="path/to/pma.ui.view.min.css" type="text/css" rel="stylesheet">
<link href="path/to/pma.ui.components.min.css" type="text/css" rel="stylesheet">
<script src="path/to/pma.ui.view.min.js" type="text/javascript"></script>
<script src="path/to/pma.ui.components.min.js" type="text/javascript"></script>

Check out the tutorials and the documentation to discover how to use the components in your project.

Drag n' Drop Features

Drag n' Drop features are enabled using the HTML5 API Drag and Drop Both PMA.UI.Components.Gallery and PMA.UI.Components.SlideLoader are by default drop targets. The PMA.UI.Components.Tree is by default a drag target. The DataTranfer object of the HTML5 Drag and Drop API is expected to be of MIME TYPE "application/x-pma-node" and of the type PMA.UI.Components~dragDropObject