Creating action buttons

This section describes how to create action buttons in a widget.

Creating the button group container

Create a button group container for the buttons.

<div class="lui-buttongroup">
</div>

Creating the buttons

Populate the button group with the buttons. In this example we are creating buttons to:

  • Reload the app.
  • Step back in the list of selections.
  • Step forward in the list of selections.
  • Clear all selections.
  • Lock all selections.
  • Unlock all selections that have been previously locked.
<div class="lui-buttongroup">
	<lui-button>Reload</lui-button>
	<lui-button>Back</lui-button>
	<lui-button>Forward</lui-button>
	<lui-button>Clear</lui-button>
	<lui-button>Lock</lui-button>
	<lui-button>Unlock</lui-button>
</div>

Adding actions using the App API

Add actions to execute when the buttons are clicked. Use methods from the App API for the actions.

<div class="lui-buttongroup">
	<lui-button ng-click="app.doReload()">Reload</lui-button>
	<lui-button ng-click="app.back()">Back</lui-button>
	<lui-button ng-click="app.forward()">Forward</lui-button>
	<lui-button ng-click="app.clearAll()">Clear</lui-button>
	<lui-button ng-click="app.lockAll()">Lock</lui-button>
	<lui-button ng-click="app.unlockAll()">Unlock</lui-button>
</div>

Result

This is what the preview looks like when an app has been selected.

See also: