ember install ember-frost-object-browser
Frost object browser is a pattern that provides slots for the content areas within the pattern and a selection interface to drive the behavior of actions based on selection.
The implementor provides the content for each slot using recommended Frost components. This allows the full interface/features of each sub-component to be used and makes swapping sub-components simple.
The recommended sub-components are:
Refer to the documentation available in each of these projects for the appropriate usage.
The 'view' slot provides a selection interface that should be
implemented in the sub-component chosen to display the object
browser content. This interface consists of an onSelect
action
that expects an event with the current selections whenever the
selection changes.
The 'actions' slot provides controls (button, link) that are coupled to the selection state. The controls are disabled when there are no selections and are enabled when one (default behavior) or more (if multiSelect=true is added to the control) objects are selected.
Attribute | Type | Value | Description |
---|---|---|---|
|
|
|
Coming soon |
viewSchema: {
low: {
'version': '1.0',
'type': 'form',
'rootContainers': [
{'label': 'Main', 'container': 'main'}
],
'containers': [
{
'id': 'main',
'className': 'flex-row',
'rows': [
[
{'model': 'alias', 'labelClassName': 'ob-label', 'inputClassName': 'ob-input'}
],
[
{
'model': 'updatedAt',
'label': 'Last Updated',
'labelClassName': 'ob-label',
'inputClassName': 'ob-input'
}
]
]
}
]
}
}
Your controller will also need to implement the following callbacks:
onCreate () {…}
onDetailChange (level) {…}
onFilter (filterState) {...} //Optional, used with filters
onRowSelect (allSelected, newSelected, deSelected) {…}
You can also check out the demo app bundled with this addon to see an example of using this addon.
###Adding filters
An optional filters
attribute can be passed to the component. filters
should be an array of objects
filters: [{
label: 'A label for the filter',
name: '', // Key for filter state hash
type: 'select', // Currently only 'select' type is supported
clearable: true, // Whether or not the value can be cleared
showing: true, // True for expanded and false for collapsed, optional
selectedValue: 'value', // Value in the list to set as selected, should match
// the value attribute of an item in the 'data' list
// List of values
data: [{
label: 'Label for an item',
value: 'value'
}]
}]
Currently frost-select
style filters are supported.
When a filter is changed or cleared, the onFilter
callback is called with the argument
filterState
, which is a hash where the keys correspond to the filter names and the value is
the value currently reported by the filter.
git clone git@github.com:ciena-frost/ember-frost-object-browser.git
cd ember-frost-object-browser
npm install && bower install
A dummy application for development is available under ember-frost-object-browser/tests/dummy
.
To run the server run ember server
(or npm start
) from the root of the repository and
visit the app at http://localhost:4200.
Run npm test
from the root of the project to run linting checks as well as execute the test suite
and output code coverage.