Plugin development – The PluginService

In the InFront designer we can now find a screen called «Plugins» that can be used to create custom user interfaces with HTML and JavaScript. These custom user interfaces, also referred to as plugins, can then be used together with one or multiple reports.

To help the plugin developers we made a plugin service (PluginService) that have functions and properties that works as an interface towards the InFront internal libraries/code. This service should be used for all interaction towards the InFront functionality (like getting data, getting filter metadata, getting filter values/states, reloading etc). This document describes the content of the plugin service.


InFront is an HTML5 web application built using AngularJS and an InFront plugin is conceptually an AngularJS directive. Developing InFront plugins will therefore require some knowledge about both web technologies in general and about AngularJS and on how Angular directives work.

 Service instantiation

After creating a new plugin, the JavaScript section of the UI will contain a header section filled with a list of resources available in the PluginService (shortened “ps”). This list is just for reference and can be deleted. In addition the first line of code in the plugin contains the instantiation of the plugin service.

// Init
 var ps = pluginservice.init(scope);

If the intention is to use any of the resources in the this service, then this line must be left in there or else the functionality in the PluginService will not work as expected.

Plugin resources

The following resources can be found in the plugin service.

InFront specific functionality


This is a flag that can be used to check if InFront is in “mobile mode” or not (If the application is running on a small screen).


Calling this function will enforce a reload on all the reports in the current active dashboard.


Calling this function will enforce a reload on the current active report.


Returns the current valid filters, all their metadata and their current state information.


Returns the same as getValidFilters but only for the given filterId.


Clears all selected values from a given filter and sets the filter back to its initial state.

ps.setFilterIdMapping(row, column, isGolbal)

Calling this function with a valid row and/or column from the returning report query object will set corresponding filters given the reports meta data and filter id mapping definition and force a reload on the given context.

The isGlobal flag is obsolete (always  true).

ps.openContextMenu(row, column)

Calling this function with a valid row and/or column from the returning report query object will open the contextMenu with either an option to filter current report (if the “Enable cell click filtering” is turned on) or navigate to a linked report/dashboard (if the “Link reports or dashboards” is set). In addition will any filter id mapping information be used to set corresponding filters.


Returns the current valid filters and with their corresponding set members and their captions.


Returns the current reports metadata


Returns the current report columns and rows data.


Returns all the given plugins input properties and their values.


Shows a red toaster popup window with the given message in the bottom right corner of the application.

ps.runStoredProcedure(name, args)

Calling this function with the name argument equal to the name of a stored procedure that exists in the InFront database and an args payload object (json) will trigger a call to the given stored procedure in the database with an XML serialized version of the args json object.

Angular Services mapped into the PluginService:


Used to broadcast notifications throughout the Angular application. See the Angular documentation for more details.


A service that helps you run functions asynchronously, and use their return values (or exceptions) when they are done processing. See :$q


Angular’s wrapper for windows.setTimeout. See :$timeout


The $location service parses the URL in the browser address bar (based on the window.location) and makes the URL available to your application. Changes to the URL in the address bar are reflected into $location service and changes to $location are reflected into the browser address bar. See :$location


The $http service is a core Angular service that facilitates communication with the remote HTTP servers via the browser’s XMLHttpRequest object or via JSONP. See :$http

Leave a Reply