Sep 12

PrimeFaces Elite 6.0.4 and 5.3.17 Released

PrimeFaces Team is pleased to announce new updates for Elite Subscribers that bring accessibility enhancements.

New Features and Enhancements

Defect Fixes


1 year Elite subscription is only $99 per developer including the Omega Layout.

Posted in PrimeFaces | 2 Comments
Sep 07

PrimeFaces 6.1 Roadmap

PrimeFaces 6.1 is under development and we thought it would be a useful to give an update to the community along with the upcoming features.


Spreadsheet will be the highlight of 6.1 providing an excel like functionality, it is basically a specialized datatable for editable data.

TriStateCheckbox is also another one which is available since 6.0.1 to elite subscribers.

New Features

DataTable will get enhancements such as row grouping, a better subtable and TableState api that automatically keeps its state across pages so whenever the users changes the state of data e.g. paging, sorting, filtering the state gets lost once the user leaves the page. With new TableState feature, datatable will be able to keep its state across pages. Also we have plans to integrate Dialog Framework with FacesFlows.


As usual, high level of support for section 508 is one of our primary goals, many components have first class aria, keyboard and screen reader support already. We’ll keep working on the components who have room for improvements regarding accessibility.

Defect Fixes

Our team constantly works on fixing the reported defects and we’ll continue to improve the overall quality of the library.

Backward Compatibility

As with recent releases, there are no planned breaking changes so update will be smooth.

New Website

A brand new will be ready in 2 weeks time featuring a modern and responsive look.


6.1 final is planned for mid january 2017, after holiday period and we hope to do various RCs before. Progress will be delivered to Elite subscribers bi-weekly until then so they will have early access.

Always bet on Prime!

Posted in PrimeFaces | 3 Comments
Sep 07

PrimeNG 1.0.0-beta.15 Released

PrimeNG is updated to 1.0.0-beta.15 with Angular2 RC6 support, file upload enhancements and various other improvements. FileUpload now supports auto uploads and customizable file display with templating.

New Features and Enhancements

Defect Fixes


beta16 is due next week with accessibility (508) improvements, feature implementations of user requests. We’re also updating premium layouts to RC6 with Beta15 and started porting our new material Ultima template as well. We also need to switch router to lazy mode to speed up demo however we’re waiting for official documentation from Angular team as it currently works out of the box with System.js only which we don’t use. Finally, we’ll start rewriting slider and calendar as native components to avoid dependency to jquery ui for these two.

Posted in PrimeNG | 1 Comment
Sep 02

2 New Themes for Ultima

Ultima 1.0.2 is now available featuring two new themes along with a video tutorial to show how easy it is to create your own. The new themes are named dark-blue & dark-green and we really suggest using them with their dark menu mode as it looks awesome.

Check out the live preview to see these to in action.




Here is a video tutorial to show how easy it is to create your own theme in a few minutes.


Ultima is available at PrimeStore.

Posted in PrimeFaces | 2 Comments
Sep 01

Ultima Compact Mode

Material design specification uses slightly bigger font sizes and paddings and the common feedback we’ve got for Ultima is providing an alternative way for making the theme-layout smaller to make space for other content.

So we’ve implemented the new compact mode that applies a smaller font size and smaller paddings overall to reduce the dimensions of layout elements as well as the PrimeFaces themes. At live preview, under the customization menu there are two links to switch between default mode and the compact mode to see the difference. To enable compact mode, you just need to add layout-compact style class to the h:body element and that is it.

Compact mode is available in Ultima 1.0.1 along with various defect fixes initially reported by the Ultima users. We’ll also create a video tutorial to show how easy it is to create a custom Ultima layout-theme with your own colors in 5 minutes with sass.

Posted in PrimeFaces | 2 Comments
Aug 31

PrimeNG 1.0.0-beta.14 Released

PrimeTek is excited to announce the new update on PrimeNG, beta14 brings the all-new fileupload component, resource reorganization, templating support for datatable header and footers and defect fixes to improve the overall quality.


FileUpload is an advanced uploader with dragdrop support, multi file uploads, progress tracking and validations.

Styles from PrimeUI

PrimeNG has been depending on PrimeUI for the styles and this has started to make our job harder as we had to go to PrimeUI to do styling. Instead all the styles have been moved to PrimeNG, this means PrimeNG does not depend on PrimeUI at all. Migration is simple as changing below;

<link rel="stylesheet" type="text/css" href="node_modules/primeui/themes/omega/theme.css" />
<link rel="stylesheet" type="text/css" href="node_modules/primeui/primeui-ng-all.min.css" />


<link rel="stylesheet" type="text/css" href="/node_modules/primeng/resources/themes/omega/theme.css" />
<link rel="stylesheet" type="text/css" href="/node_modules/primeng/resources/primeng.min.css" />


With beta14, we’ve started to make use of Angular2 animation apis to enhance the user experience. Various components such as Dialog are using native fade animation whereas panel, accordion and fieldset are now using a slide animation to switch between collapsed and visible state of content.

Multi Templating

DataTable and TreeTable now allows adding custom content to header and footer sections of a column as well, this is a breaking change as we had to introduce the new pTemplate decorator to identify the type of the template. Migration is done by adding pTemplate directive to the template element with type=”header|body|footer” attribute.

<p-column field="color" header="Color">
    <template let-col let-car="rowData">
        <span [style.color]="car[col.field]">{{car[col.field]}}</span>


<p-column field="color" header="Color">
    <template let-col let-car="rowData" pTemplate type="body">
        <span [style.color]="car[col.field]">{{car[col.field]}}</span>

To define another template for header, use;

<p-column styleClass="col-button">
    <template pTemplate type="header">
        <button type="button" pButton icon="fa-refresh"></button>
    <template let-car="rowData" pTemplate type="body">
        <button type="button" pButton (click)="selectCar(car)" icon="fa-search"></button>

Full Changelog

New Features and Enhancements

Defect Fixes


PrimeNG is available at npm.

Premium Layouts

We are currently working on updating the existing premium layouts to latest Angular2 RC and Beta14, they will be released by the end of this week. Also PrimeFaces Ultima will be ported to PrimeNG in 2 weeks, Ultima will replace Rio-Adamantium-Modena trio as the material admin template.

Posted in PrimeNG | 13 Comments
Aug 31

PrimeFaces ULTIMA

After 1 month of hard work and dedication, PrimeFaces team is pleased to announce the all-new ultimate material application template, UltimaA highly customizable premium application template featuring 3 menu modes, 10 themes, light and dark menu and 2 user profile modes. In total there are 120 possible layout combinations. It is by far the best material layout we’ve created and the most customizable one for sure.

Material Design

Ultima closely follows Material Design language with ripple effects, input animations, shadows, cards and more.

3 Menu Modes

Ultima has 3 menu alternatives,

  • Inline
  • Overlay
  • Horizontal

Light and Dark Menu

Menu has two color alternatives, light and dark that can be used with the 3 orientations listed above.

10 Themes

Next-gen layouts provide multiple themes for the layout and Ultima is no exception, based on material colors, Ultima provides 10 themes out of the box and it is also very easy to come up with your own with sass variables.

2 User Profile Locations

User profile menu can either be located inside the main menu or at topbar.

Topbar Menus

An icon at topbar provides a submenu and in responsive mode they are displayed as stacked.

Enhanced Mobile Experience

On a mobile device, Ultima applies theme colors to the device status and browser bar for a unified look, in addition mobile events such as swipe are enabled to close the overlay menu.

Templates Pages

Landing, login and error pages are provided
as template pages to get started with building your app in no time.


Next-gen layouts are created with Sass, this simplifies maintaining the styles and allows easy customization. For example, we’ve documented how to create your own theme-layout colors for Ultima in case you need something different than the 10 provided themes.

Material Icons

Google has provided over 400 great looking material icons and we’ve converted them into PrimeFaces icons meaning they can be used with the regular ui-icon-* prefix within your component. Check out the icons demo for details.

Live Preview

Checkout Ultima in active at live preview.


Ultima is available at PrimeStore.

Always bet on Prime!

Posted in PrimeFaces | 5 Comments
Aug 22

PrimeNG 1.0.0-beta.13 Released

PrimeTek is glad to announce the new release of PrimeNG, the leading open source rich UI components suite for Angular 2. Beta13 brings first class support for the new NgModules of Angular 2.RC5 which drastically changed how the application is bootstrapped and dependencies are configured. We really like this change as it helps to remove many boilerplate code.


Every PrimeNG components now has its own module and can be imported to your application via the imports section. That also means they need to be removed from the declarations section.

Old Method

This is not ideal and not the suggested way in Angular 2 final, it only works as RC5 has backward compatibility enabled which will likely be removed once Angular2 is final.

import {NgModule}      from '@angular/core';
import {InputText,DataTable,Button,Dialog} from 'primeng/primeng';

  imports:      [BrowserModule],
  declarations: [AppComponent,InputText,DataTable,Button,Dialog],
  bootstrap:    [AppComponent],
  providers:    [CarService]
export class AppModule { }

New Method
This method is the suggested one and fully utilizes NgModules.

import {NgModule}      from '@angular/core';
import {InputTextModule,DataTableModule,ButtonModule,DialogModule} from 'primeng/primeng';

  imports:      [BrowserModule,InputTextModule,DataTableModule,ButtonModule,DialogModule],
  declarations: [AppComponent],
  bootstrap:    [AppComponent],
  providers:    [CarService]
export class AppModule { }

Full ChangeLog

New Features and Enhancements

Defect Fixes

Breaking Changes

  • SplitButtonItem is removed to align with other menu components, use MenuItem api instead.


PrimeNG is available at npm.


We couldn’t add new features lately as we wanted since we had to catch up with changes Angular2 RCs, nowadays it feels like Angular2 is really close to the final and we don’t expect big changes from now on. So in addition to constant maintenance work, planned upcoming features are;

  • FileUpload
  • Spreadsheet (Excel like component)
  • TriStateCheckbox
  • Custom components in datatable headers, filters and cell editors
  • Accessibility Improvements (508)

Also we’ll introduce a new Material Layout and Theme called Ultima very soon for PrimeNG along with PrimeFaces;

Posted in PrimeNG | Comments Off
Aug 18

Omega 1.1 Released

Omega has received an update along with implementations of some popular requests.

New Menu

Main improvement is the facelift of the menu to bring a more elegant look.

Profile Menu

The user profile located at sidebar is now interactive and toggles a profile menu for the user.

Collapsible Menu

As a popular community request, we’ve made the menu collapsible on demand using the menu button at the top.


Documentation has been improved to include sass customization.

Live Preview

Checkout Omega 1.1 in active at live preview.


Omega Layout is available to Elite and Pro users at no cost, as an alternative it can also be purchased standalone for $59 at store without an Elite or Pro subscription.

We hope you’ll like the new enhancements.

Always bet on Prime!

Posted in PrimeFaces | Comments Off
Aug 16

PrimeFaces Elite 6.0.3 and 5.3.16 Released

PrimeFaces Team is pleased to announce new updates for Elite Subscribers that bring accessibility enhancements.




1 year Elite subscription is only $99 per developer including the Omega Layout.

Binaries, Sources, API docs and VDL docs are available in PrimeFaces Store for ELITE and PRO users as an official release bundle.

Posted in PrimeFaces | Comments Off