Plugins You can find out about all the publicly available Grails plugins.

AdminLTE UI Plugin

  • Tags: ui
  • Latest: 0.1.0
  • Last Updated: 25 January 2015
  • Grails version: 2.3 > *
1 vote
Dependency:
runtime "org.grails.plugins:adminlte-ui:0.1.0"

 Documentation  Source  Issues

Summary

Installation

runtime ':adminlte-ui:0.1.0'

Description

Installs AdminLTE, a fully responsive admin template, developed by Almsaeed Studio.

AdminLTE is based on Bootstrap 3 framework and several plugins to offer a very nice UI.

It supports the major web browsers known in the world.

The Grails Platform Core plugin is also used to generate the navigation menu.

Simplest Example

Supposing you have just created a Grails application, with these little changes you will have the AdminLTE template applied to the views:

  • In the grails-app/conf/BuildConfig.groovy add the adminlte-ui plugin:
plugins {
        // …
        runtime ':adminlte-ui:0.1.0'
        // …
    }
  • Change the grails-app/views/index.gsp file so it uses the adminlte_layout instead of the _main_content_. At the end the _meta tag should be left as this:
<meta name="layout" content="adminlte"/>

Some customizations

The adminlte-ui plugin allows views' customization through templates that can be overwritten by your application; if you don't change them, then the default views' templates included in the plugin will be used. To overwrite them, put in the grails-app/views/adminlte_tmpl directory any of the following template files:

  • _littleDropdown.gsp
  • _sidebarForm.gsp
  • _sidebarToggle.gsp
  • _userDropdown.gsp
  • _userPanel.gsp
You can view the source code of them to get an idea of what to change.

Applying taglibs

It's likely you will have to modify the layout to fit your needs and to do that the easiest way is to copy the adminlte.gsp included in the plugin to your application, so its final path is grails-app/views/layouts/adminlte.gsp and after that you can use the adminlte-ui taglibs from that copied layout file to get a custom look. Some examples:

  • In the sidebar, set a custom image and a greeting (or caption) for the user
<altt:sidebar userImage='http://www.fillmurray.com/350/350' userGreeting='Welcome, Mr. John Doe!'/>
  • In the top right corner user dropdown of the header bar, set a custom image and other fields for the user
<altt:header userName='Mr. John Doe' userImage='http://www.fillmurray.com/350/350' userTitle='CEO' userSummary='Online' />

Custom navigation menu

Thanks to the navigation API of the Grails Platform Core plugin, you can customize the generated menu on the sidebar, as this:

  • Create the navigation file, for example grails-app/conf/AppNavigation.groovy with the following content:
def loggedIn = { ->
    // is up to you what and how to return here
    false
}

navigation = { appMenu { 'Login' (controller: 'login', action: 'index', data:[faIcon: 'fa-sign-in'], visible: loggedIn) Home(uri: '/', data:[faIcon: 'fa-home']) MyController(data:[faIcon: 'fa-circle-o-notch'], controller: 'mycontroller', visible: true) { MyAction(action: 'list') } RandomSites(data:[faIcon: 'fa-institution']) { Wikipedia(url: 'http://www.wikipedia.org') Grails(url: 'http://www.grails.org') } 'Logout' (controller: 'logout', action: 'index', data:[faIcon: 'fa-sign-out'], visible: loggedIn) } }

  • Change the sidebar taglib. Note that only a menu with a depth of 2 levels is supported (and tested) and also that the scope attribute takes as value the name used in the navigation file
<altt:sidebar forceDeep='true', depth='2' scope='appMenu' userImage='http://www.fillmurray.com/350/350' userGreeting='Mr. John Doe - CEO'/>