Card Mode – divide, conquer and integrate

by

InFront Card mode enables integration of InFront into a different webpage/system. The ‘mode’ is enabled by adding “home/card/” to the base url.
Example:

http://localhost/infront/home/card/

When using this mode, all surrounding elements to the data will be removed. This means, no menu, no bookmarks, no filter selections, no header section, no bottom section. The only part that is left is either a dashboard with its content or a report with its content.

QueryString Parameters

Query string parameters can be used to control both some of the UI and the filter states when in card mode. The following parameters are valid (If a dashboard is in focus, the given rule will apply to all of the reports on the dashboard) :

UI control.

  • t = (true/false or 0/1) default: true
    • Show/hide report title and description
  • m = (true/false or 0/1) default: true
    • Show/hide report filter menu
  • f = (true/false or 0/1) default: false
    • Show/hide the filters used by the report (notice that this will only result in a visible value if the filters, date or search parameters described below are used)
  • theme = (name of theme)
    • Sets the theme to be used. Overrides the default theme in InFront

Filter state control

  • filters = (list of filters to apply, example: “filter_itemgrouping:car,audio”.
    • Use colon “:” to separate the filter id and the filter values.
    • Use comma “,” to separate filter values
    • Use semicolon “;” to separate filters)
  • date = (date and shortcut to use. Example: 05.05.2012:today)
    • Use colon to separate the date and shortcut id
  • search = (filter, search member property and search string, example: “search=filter_itemgrouping, key:car”
    • The search member property can be omitted, then “caption” will be used.
    • The search string can contain matching characters. An overview over the supported formats can be found here.

A full example below: 

http://myserver/infront/home/card/?t=0&f=1&m=0&date=05.05.2012:today&filters=filter_items:car,audio#/report/myreport

IFrame

It’s also possible to change filters on an already loaded card as long as it’s loaded through an Iframe. An example of a javascript is provided below.

JavaScript:

var filterJson = {
 "filters": [
 { "id": "filter_itemgrouping", "members": ["car"] }
 ],
 "date": "04.05.2012",
 "shortcut": "today"
 }

var iframe = document.getElementById(id);
 iframe.contentWindow.postMessage(filterJson, 'http://myserver/');