Knowledge Base (Display) Knowledge Base (Display)

Release notes v4.0

Release notes v4.0

Release notes Visioneo v4.0. Nearly all components have changed in this amazing version! Here are below the most notable new features

Turn your portal into a complete reporting platform!

Overview

And much more...

Parameter view

The parameter view is completely changing, leveraging all the possibilities of BIRT and of your portal !

Modern & ergonomic design

  • Visually as simple as possible
  • Portal theme support
  • The former jQuery UI dialog was elegant but it caused too many issues with parameters in mobile devices. It is now removed in view mode: parameters are directly inserted in portlet body. The dialog is still used in preferences mode though.
  • The jquery UI "accordion" widget is removed: BIRT parameter groups are now arranged in elegant & ergonomic alloyUI tabs! This point is expanded in a subsequent section.
  • Styles have been completely redesigned
  • Parameters info-tips on the right can be easily "clicked" even with touch devices
  • A new info-tip just next to the title allows to display the description of the current report
  • Required parameters are highlighted

Fully responsive

  • Report parameters layout is perfect both in smartphones and desktop browsers!

Parameter groups in tabs

In the screen below, "Selection", "Display" and "Diagrams" are parameter groups. These groups are now displayed across elegant alloyUI tabs, much more ergonomic and compact than the former jqueryUI accordion widget!

Orphan parameters

Sometimes a report has "orphan" parameters: one or more groups are defined, but some report parameters are not assigned to a group: see for instance "Highlight" and "Theme" parameter in the screen below.

In older versions, the group management widget was disabled when a such parameter was found in a report.

This case is fixed:

  • When at least one parameter group is defined in a report, orphan parameters  are displayed under a fictive group. By default the localized name of this group is "Others" in english. The example mentionned above is from this cascading parameters demo report: see in parameters view "Theme" and "Highlight threshold" are assigned to a fictive group "Others".

Bootstrap multiselect

Here is a new guest star in Visioneo app!

Nowadays most of mobile browsers handle very well a native HTML multiselect. However desktop browsers are still painful for this control, for not saying worse because we need to hold a control-key and then select & remove items. Just a small misclick and we loose the 20 items we had patiently searched and selected one by one... Gone are these days: Visioneo 4.0 embeds the popular bootstrap multiselect plugin!

As you can see in many demo pages such as Parameters showcase , a particular care has been taken to include this new component.

  • Since it is a bootstrap component, it fits smoothly in Liferay themes
  • Option-groups (html "optgroup" tag) are supported: we can select all options of a group in one click!
  • HOT ! A facultative detection feature allows to use the widget in desktop browsers only. We can decide for each report parameter one of these modes:
    • Detection mode (default): the widget is used in desktop computers only
    • Native HTML mode: the native html control is used for all devices
    • Widget mode: the multiselect widget is used for all devices, including mobiles

JS Detection feature customization:

$vui.fn.vuiselect.defaults.isMobile=function(){  //your detection stuff here...  }

  • HOT ! BIRT cascading parameters are fully supported by this widget! Visit Cascading parameters demo report from a desktop computer to see it in action
  • Although bootstrap multiselect comes absolutely out-of-the-box in Visioneo, it has been embedded as a separate jquery plugin in a a such way we can easily customize all options, and replace it with another javascript plugin if necessary
  • Underlying javascript modules are loaded on-the-fly: if the widget is not used by the current report or by a mobile device it won't consume any resource
  • jqueryUI multiselect plugin seems discontinued and has been removed from visioneo libraries

Mobile view

Android and iOS applications are great, but they suffer more or less the same drawbacks observed in the days of applets and activeX: it's extremely difficult to secure a such native application, to maintain it across multiple mobile platforms, deploy a critical patch on all devices, track issues etc. As a web application, Visioneo portlet can't suffer these issues!  One of the main challenge of version 4.0 was to offer a reporting layout which would ergonomically compete with a native mobile application

Flexible layout

  • version 4.0 has a super-responsive parameters layout perfect with all devices

Fluid toolbar

  • The native toolbar is collapsed in portrait orientation
    • This feature is a portlet preference and can be disabled for each portlet window. For example if you just enable one or two actions in a toolbar window, you might prefer to display these buttons directly.
    • "Portrait orientation" is a misnomer here, the toolbar is actually collapsed when the screen width is smaller than 600pixels. We can of course customize it through a css rule

Dockbar actions

  • For a more compact display, instead of collapsing the toolbar as mentionned above, a portlet preference allows to display it in the dockbar portlet of the portal. The result is quite impressive: see this feature in action in this demo page .

Javascript performances:

  • Light-weight javascript headers: the "Time-To-First-Byte" is drastically reduced!

jQuery core and headjs are the only modules loaded in page headers: this merely weights 38 Kb compressed. Then a loading animation is displayed pending other required javascript resources are ready.

JS modules removed : HTML2Canvas, jshashtable, numberformatter, jquery ui multiselect: -127 Kb

JStree was the most time-consuming module: it is now loaded dynamically only when needed (i.e. only when a list of report is requested): -123 Kb

jQuery Datetime picker is also loaded only when needed : -42 Kb

Option groups

A new custom property allows to group items in  combobox parameters.

For a concrete example see "Customer" parameter in the first tab of " Parameters showcase ".

Notice the new bootstrap multiselect widget takes advantage of groups, we can select / unselect all items of a group by clicking it. For instance see "Country" parameter in the geography tab of Economic heatmap : clicking a continent name toggles countries attached to this continent

Parameter API

Parameters API is enhanced and simplified. For JSP developers , here is a code sample showing how easy it is to customize parameters view.

Output

JSP code producing this output

<c:if test="${fn:length(parametersBean.groups)>1}">
<liferay-ui:tabs names='${parametersBean.groupNames}' refresh="false">
<c:forEach items="${parametersBean.groups}" var="birtGroup">
<liferay-ui:section>
<c:forEach items="${birtGroup}" var="__birtParam" varStatus="loop">
<c:set var="__birtParam" value="${__birtParam}" scope="request"></c:set>
<div class="vui-param-separator">
<jsp:include page="/WEB-INF/jsp/ajaxparams/layout.jsp"/>
</div>
</c:forEach>
</liferay-ui:section>
</c:forEach>
</liferay-ui:tabs>
</c:if>

Cascading parameters

In addition to the integration of the bootstrap multiselect widget, cascading parameters have been drastically improved!

Visit these samples to see cascading parameters in action:

  • Cascading geography : a three-level cascade Region->Department->City with multi-selection on level 2 and 3
  • Radar cascading : two cascaded groups in this report: a vendor->product hierarchy, and a Year->Month->Order dates hierarchy
  • Metadata-report : this powerful server-side autocomplete feature is actually a cascading parameter group!
  • Economic heatmap : the second parameter group Continent->Countries is cascaded.

Drill window

The drillthrough window ("Drill in new frame" action in BIRT designer) was already very satisfactory in previous versions, therefore the implementation is still using a jquery UI dialog with a few enhancements

  • SVG charts ratio fixed in drill window: if we switch a device orientation when svg charts are displayed in a drill window, these charts are correctly scaled according to the new screen width. Visit this sample , drill to any country and then resize your browser window to see how charts are smoothly adjusted!
  • Buttons at the top left corner are redesigned using alloy UI icons. Older jqueryUI icons were larger and sometimes fuzzy. This offers a larger content screen on small devices
  • Main button labels are simplified , in order to avoid a breakline on smartphones

Repository view Professional Edition

A minor javascript issue is fixed, it was preventing "select" buttons from working properly when accessed  through the global portal configuration.

As a workaround in visioneo 3.2 we can access it through the site configuration as showned below, or by directly entering a "document & media" folder ID without using the select button.

Robust as a rock and amazingly flexible, the repository management of the Professional Edition (Visioneo PE) is simply a jewel!

Lighter jquery theme

  • For even better client-side performances, Visioneo 4.0 comes with a single jquery UI theme embedded, when there were two predefined ones in previous versions. ( -18 Kb css). Actually jquery UI has been nearly entirely replaced with alloyUI in Visioneo 4.0, so this theme is not as important is it was before. Nevertheless you can of course customize it as you like through this themeroller .  For information, jquery UI is still mainly used for:
  • datepickers (see calendar section of parameters showcase )
  • timepickers (see calendar section of parameters showcase )
  • "drill in new frame" dialogs (see drill action here )
  • autocomplete widget (see select->Product and listbox->Customers parameters showcase )
  • Progress bar ("loading..." and "rendering..." messages when a report is in progress)
  • Since the application is now extensively taking advantage of alloyUI and bootstrap, it is automatically using your portal theme

Portlet preferences

Preferences of the main report portlet have been simplified and reorganized

  • New chart tab
  • Old report toolbar disabled, and related preferences are deprecated
  • Store parameter values option improved.

As a reminder, in preferences we can store a default value for each report parameter. This default value can be different for each portlet window

SASS modules

CSS rules are now splitted in 17 sass modules.

Datepicker extended properties

All jquery datepicker options can be controlled from your BIRT parameter in Eclipse designer!

In previous versions, the same was possible through external parameters only. For example the "Order date end" parameter below displays three simultaneous months and it shows week numbers:

Here is the underlying setup in Eclipse designer:

Autocomplete parameter

The integration of this powerful jquery UI widget is greatly improved in Visioneo 4

  • Better style integration with a bootstrap icon
  • Label of the current selection is displayed when the widget is clicked / touched / mouseover
  • Disgraceful "clear" button removed
  • Strict / loose mode:
    • Strict mode (default): we can't enter a code which is not in the selection list
    • Loose mode: the selection list is a suggestion but we can enter any code even if not in the list
  • "Parameter required" error style is removed as soon as a selection is chosen
  • Perfect both with multi-select and single-select parameters!

The parameters view of this QR sample report perfectly demonstrates how we can take advantage of autcomplete parameters.

As a reminder, here is how we turn a standard combox parameter into an autocomplete widget in Eclipse designer: notice the "_display" custom property on the right of the screen above

Stateless & stateful setup

In previous versions, a report displayed in a visioneo window is persistent on a page refresh. In version 4, each context can decide if the application should essentially act as a stateless or a stateful application. By default the behavior has changed: on a page refresh the current report is reset to portlet preferences. This behavior mainly matters when we drill to a subreport in the same window, please visit the sample below for a concrete example

In reportlet.properties :

#if true, the report stored in portlet preferences has priority over the current session report when a page is refreshed
report.reset.onrefresh=true

# clear report parameters from session when a page is refreshed
parameters.reset.onrefresh=false

Required parameters

  • Small symbol displayed on the right of parameters labels. Can be removed in WEB-INF/jsp/ajaxparams/layout.jsp

  • Important By default the "All values" item is not included anymore for non-required combobox parameters. It is included if and only if a user property  "_allvalues" exists for this parameter
    • please follow this article for more informations
    • Edit sample welcome.rptdesign and inspect "Office" parameter for a concrete example of using "_allvalues" property.

Report browser

Although the report browser is not really intended to end-users but rather site administrators and report developers, it has been slightly improved to make it more responsive. Furthermore, it now displays an elegant icon at the top left corner.

There are very few demo pages having this browser enabled for end-users, it is mainly designed to be used in portlet preferences. You can see it in action by clicking "Select" toolbar option in this demo page .

Dynamic images in reports

Support for dynamic images is greatly improved too!
  • Better Mimetype detection for "BLOB" in dynamic images (images extracted from a database or from any java service). As a proof of concept, this very simple report-sample has been added: the third column "Illustration" is a BIRT dynamic image based on a blob dataset field:

  • Inline HTML images (also known as "base64 images") are now correctly exported in all formats (PDF, Powerpoint, etc). The parameter-showcase  report is displaying a such HTML image in a text element. Notice this is mainly for a demo purpose: most of the time using dynamic image elements with a blob type as shown above is easier and most efficient than embedding inline images in text elements.

  • Background-image on report elements: in previous versions, some portal themes could override BIRT styles of a background image: this issue is now fixed!

Toolbar portlet

The toolbar portlet has also tons of enhancements!

  • Toolbar actions are now displayed using an AlloyUI Navigation bar
  • New "PDF Fit to page" action + Mime type issue fixed. This option is used for instance in parameters-showcase page : because of the image rendered at the bottom of the report, a standard PDF export would produce a document with 2 pages. By using "Fit-to-page" option, we always get only one page
  • New "Excel XML" action (Visit this demo page ), in addition to other excel options available in previous versoins. Depending on the report-design, Excel XML option might produce a better output than .xlsx or .xls format.
  • New "Select report" action (Visit this demo page )
  • Excel paginated label
  • Fast print callback: the option is in a busy state when a print task is on progress
  • New "Use dockbar" preference. This preference has already been explained in " Mobile view " section:

  • New "Collapse with mobile" preference. This preference has already been explained in " Mobile view " section

  • New "Hide for parameters" preference. In most demo pages, the toolbar portlet is hidden when report parameters are displayed. This behavior is a portlet preference: for instance the demo page below keeps toolbars visible.

  • Management improved for multiple reports on same page

New report samples

Actually all demo reports have been reviewed and upgraded for this version. Here are below a few notable changes
  • The "Welcome" report sample has been completely redesigned: it can be used as a reference to find out how to take advantage of the most powerful widgets embedded in visioneo: autocomplete, multiselect, datepickers etc.

The google-map sample had been requested many times, it is now included in visioneo PE 4.0 package! If you need this sample, feel free to get a 30-day-trial to download visioneo PE and locate visioneo-googlemap.rptdesign within. By the way you will be able to appreciate the fantastic repository management of the professional edition!

Javascript Open Source

From V4, Visioneo javascript core is open source! Of course the code is merged during the build process, but unlike previous versions it is not minified so we can step into the code with a debugger, track possible issues and customize any fragment. The portal is minifying javascript on-the-fly for performance considerations, as a reminder with Liferay we can skip the minifier using js_fast_load=false URL parameter.

For instance this URL opens the QR report sample without minifying JS resources:

http://www.visioneo.org/timelines-qr?js_fast_load=false

Liferay 7

Supporting this new major Liferay version is one of the main target of Visioneo 4.0.  Though the release date is different because there are two variations:

  • Visioneo 4.0.0 for Liferay 6.2+
  • Visioneo 4.0.0 for Liferay 7.0+ (Will be submitted when Liferay 7 GA1 is released)

Ehcache duration

  • Default cache duration for BIRT documents reduced to 10 minutes only (configuration file ehcache.xml ). This is to encourage users to keep this cache activated. As a reminder, ehcache brings a powerful synchronization mechanism named "Blocking caches", which is just perfect to handle BIRT documents in a highly parallel context.

Visioneo app has been designed to take advantage of this mechanism: you should disable the cache management through portlet preferences only when it is absolutely necessary.

Tons of minor fixes and improvements

  • Report "Description" and parameters "helptext" properties are now correctly encoded. We can safely use any character in these properties
  • New display type available for String report parameters: Text area (see "Description" parameter in the group "Input" of parameters showcase )
  • Client-side console fixed
  • localization encoding issues are fixed
  • Pagination portlet: JS error message in console fixed
  • Etc...
Average (0 Votes)

Information sections Information sections