# Hints and tips on making different UI components

This document tries to give some hints and tips on how to make common UI stuff

## Modal Dialogs

Its handy to have popups with detailed views, confirmation dialogs or wizards.

Here's a quick and easy way to make them in hawtio:

* ensure your angular module depends on **'ui.bootstrap.dialog'**:

    angular.module(pluginName, ['bootstrap', 'ui.bootstrap.dialog', 'hawtioCore'])

* create a [new Core.Dialog() object in your controller scope](https://github.com/hawtio/hawtio/blob/1.x/hawtio-web/src/main/webapp/app/activemq/js/browse.ts#L7) with some name

* Then in the modal dialog markup, using [angular ui bootstrap modals](http://angular-ui.github.io/bootstrap/#/modal) refer to **name.show** and **name.options**, then to open/show use **name.open()** and **name.close()**as in this [example markup for the above controller code](https://github.com/hawtio/hawtio/blob/1.x/hawtio-web/src/main/webapp/app/activemq/html/browseQueue.html#L70)

This also means you only have to come up with 1 name per dialog - the name of the dialog object - rather than naming the various flags/options/open/close methods :)

## Grids / Tables

We have 2 implementations currentl, [ng-grid](http://angular-ui.github.io/ng-grid/) which has a really nice directive and angular way of working with it; check it out for the documentation on how to make a grid.

We've also got a [datatable plugin](https://github.com/hawtio/hawtio/blob/1.x/hawtio-web/src/main/webapp/app/datatable/doc/developer.md) which provides a directive and API to ng-grid but uses the underlying [jQuery DataTable widget](http://datatables.net/) until ng-grid is as fast and solves all the same use cases.
