The purpose of the components that compose the SPN is to provide the Siemens portal applications a unified navigation whose content can be generated dynamically based on the context selected by the end users.
The SPN consists of three components: Level-1, Level-2, and Level-3. (described bellow). Each component is in charge of providing the ember application its routing context.
- The components should support the different context navigation from all Siemens portal applications.
- The components should integrate with any ember application.
- The level-1 component should enforce the context selection from the application user. Each context should have an index route.
- There should be a service (SPN Service) that maintains the selected contexts from the level-1 and level-2 components.
- There should be a base service for ember applications that use the Ember DS (Data Store) and Apollo (Graphql). This base service should be used by applications that implement the level-1 component in order to provide default model actions.
- The level-1 component selected context should drive the content in the level-2 and level-2 components
The following is an example of how the level-1 component would be implemented in an ember application. The level-1 component will provide a navigation bar to select the application context.
This is the root component for the level-1 navigation.
It won't receive any attributes since all the logic to keep all the contexts and communication with the level-1 context service will be handled from the component class.
This component will render the content for the application name section in the level-1 component.
| attribute | description |
|---|---|
| appName | application name |
| icon | class to append in the i element that will render an icon next to the application name |
| onClick | ember action triggered when the application name is clicked |
This component will render the content and handle the functionality to allow a user to select the application context.
| attribute | description |
|---|---|
| service | name of the service that will handle model actions and provide the context information from the application that is implementing the component |
| placeholder | text to render when there's not an option selected |
| onContextSelected | ember action to call when a context is selected, in the example we call the levelOneNavigation component class setContext action in order to set a unit context in its scope |
| plantId | this is not a required attribute, the attribute will vary based on the given context, it will be used mainly by the service |
The following is an example of how the level-2 component would be implemented in an ember application. The level-2 component will provide the sidebar navigation for the SPN.
This component is used to define a menu item that contains child menu items.
| attribute | description |
|---|---|
| label | menu item label |
| route | route path to be used in a link-to component in order to redirect the user when the menu item is clicked, this is an optional attribute |
| icon | class to append in the i element that will render an icon next to the menu item title |
This component is used to define a menu item.
| attribute | description |
|---|---|
| label | menu item label |
| route | route path to be used in a link-to component in order to redirect the user when the menu item is clicked |
| icon | class to append in the i element that will render an icon next to the menu item title |
The following is an example of how the leve-3 component would be implemented in an ember application. The level-3 component will provide a list of breadcrumbs based on the selected context from the level-2 component for the SPN.
| attribute | description |
|---|---|
| breadcrumbClass | class string to append for each breadcrumb |
| breadcrumbWrapperClass | class string to append in the wrapper div for the breadcrumbs |
This component generates its content based on the selected context from the level-1 and level-2 components stored in the SPN service.
This service will handle all the core logic to persist the selected contexts in the level-1 and level-2 components. The following is a sample of the service structure.
import Service from '@ember/service';
const BASE_CONTEXT = Ember.Object.create({
clear(key) {...}
});
export default Service.extend({
levelOneContexts: Ember.Object.extend(BASE_CONTEXT).create(),
levelTwoContexts: Ember.Object.extend(BASE_CONTEXT).create(),
setContext(key, value, context) {
...
this.get(context)[key] = context;
},
getContext(key, context) {
this.get(context)[key];
},
removeContext(clearAll=false, context) {
...
this.get(context).clear(key);
}
});This service will provide the required methods and properties for applications that will implement the level one navigation.
import Service from '@ember/service';
export default Service.extend({
modelName: null,
options: Ember.A([]),
selectedOption: null,
init() {
this._setList();
},
getList() {...},
_setList() {...},
_getSelectedOption() {...}
_setSelectedOption() {...}
});import Component from '@ember/component';
export default Component.extend({
modelService: Ember.computed('service', function() {
const service = this.get('service');
return Ember.getOwner(this).lookup(`service:${service}`);
}),
setOptions: () => {
const service = this.get('modelService');
if (!servie) {
throw new Error('Model service is undefined');
}
const options = service.getList();
if (!this._validOptions(options)) {
throw new Error('Options returned from getList are invalid');
}
this.set('options', options);
}.on('init')
_validOptions(options = []) {
if (!Array.isArray(options)) return false;
return true;
}
});