Solution Center Navigation

Reusable navigation header for software connecting to the Zalando Solution Center


Demo

Changelog

$3

- angular
- angular-cookies
- dress-code
- ngstorage
- solution-center-communicator
- solution-center-login

$3

Install via npm or yarn

``shell
npm install solution-center-navigation
`
OR
`shell
yarn add solution-center-navigation
`

$3

1. Load the script in your , with dependencies:

`html





`

2. Include the solution-center-navigation module as a dependency in your app.

3. Insert the component at the top of your application:

`html
application-id="applicationId"
product-id="productId"
user="user"
products="products"
business-partners="businessPartners"”
/>

`

$3

The following two parameters are strictly required for the navigation in order to know the current navigation context and work as expected:

- application-id: A string representing the id of the current application displayed.

`javascript
application-id = "APPLICATION"
`

- product-id: A string representing the id of the current product the displayed application belongs to.

`javascript
product-id = "PRODUCT"
`

However, some more optional parameters are allowed:

- business-partner-id: A string representing the id of the current business partner in case the current applications needs to set it programmatically

`javascript
business-partner-id = "BP"
`

- on-business-partner-change: A callback function to be called every time the current business partner changes in order to notify the client application so it can adapt to the new context

`javascript
on-business-partner-change = "$ctrl.callbackMethod(businessPartner)"
`


- hide-business-partner: A boolean to be used to hide the business partner and its selection menu on the navigation in case the client application does not work on the context of business partners at some stage

`javascript
hide-business-partner = "true"
`

Last, there is a set of three optional parameters, helpful for development purposes of client applications so they can override the values returned by the backend endpoints usually called by the Solution Center Navigation and skip those calls.

Only if ALL of them are set and the library determines that the current environment is LOCAL or INTEGRATION (see Solution Center documentation in case of doubt about the environments), the library uses the content of the parameters to mock its normal behaviour and skips the call to the predefined backend endpoints.

- user: A user object which controls the display of the user name with submenu allowing access to the user account pages. Additionally it's used for determining which business partners it has access to.

`javascript
{
"id": "1111",
"email": "chuck@norris",
"firstName": "Chuck",
"lastName": "Norris"
}
`

- products: An array of objects which holds information about all the products and applications accessible by the user within the Solution Center.

`javascript
[{
"id": "prodId",
"name": "PRODUCT",
"applications": [
{
"id": "appId",
"name": "APPLICATION",
"product_id": "prodId",
"business_partner_roles": ["ROLE_1", "ROLE_2"],
"url": "https://www.myurl.com"
}
]
}]
`

- business-partners: An array of business partners objects which contains a list of all the business partners the user can access in the current application.

`javascript
[{
"id": "businessPartnerId",
"name": "BP",
"roles": [
{
"name": "ROLE_1"
}
]
}]
`

$3

The Solution Center Navigation is intended to be used with the dress code style. That package is included as a dependency.

$3

See the demo folder. To run the demo locally, follow the Develop instructions below.

$3

Clone the repository, then run:

`shell
npm install
`
OR
`shell
yarn
``

$3

MIT

$3

You can check the new changes implemented in every version in the changelog