by Tanja Buttler

ActionCenters offers a modular system allowing developers to expand its functionality by plugging in new components written in JavaScript. Within this tutorial we want to show you how to use the API of ActionCenters for developing a new component as a plug-in. Such plug-ins extend the client side of ActionCenters.
We take a look at the API for client-side plug-ins of ActionCenters, learn how to define configuration options for the component and we learn how to exchange messages with the server by using ActionCenterAPI and ActionCenterListener objects.

ActionCenters uses Ext JS 3.0 for the development of the user interface. Within this tutorial, we are not going to show you how to develop the user interface, except for a basic layout and the header panel. If you want to know how to develop a user interface with Ext JS the following resources can be helpful:

ActionCenters ships with a number of components and controls. You find them in the folder 'actioncenters/src/main/resources/plugins'.


In order to follow this tutorial, you should have

  • a basic understanding of JavaScript
  • a local installation of ActionCenters (administrator rights are required); we use version 0.0.20 as the basis for this tutorial
  • basic knowledge of the CACE tool
  • a basic understanding of the universal data model and the population rules used by ActionCenters

Since this tutorial was written, the API of ActionCenters has changed. Objects we use for this tutorial have been renamed as follows:

  • from acPopulationRulesParser to
  • from ActionCenterContribution to
  • from DivViewportManager to AC.pss.divViewportManager
  • from ComponentRenderer to AC.pss.ComponentRenderer
  • from ActionCenterContributionProperty to

actionCenterAPI is going to be renamed as well.