solution-center-navigation

v1.3.1

Published

2 years ago

Reusable navigation header for software connecting to the Zalando Solution Center

Downloads

0High
0Medium
0Low

chowald

dami

frontendherodk

Solution Center Navigation

Reusable navigation header for software connecting to the Zalando Solution Center

Demo

Changelog

Dependencies

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

Installation

Install via npm or yarn

npm install solution-center-navigation

yarn add solution-center-navigation

Usage

Load the script in your <head>, with dependencies:

<script src="../node_modules/angular/angular.js"></script>
<script src="../node_modules/angular-cookies/angular-cookies.js"></script>
<script src="../node_modules/solution-center-communicator/dist/solutioncenter.communicator.min.js"></script>
<script src="../node_modules/solution-center-login/dist/solutioncenter.login.min.js"></script>
<script src="../node_modules/solution-center-navigation/dist/solutioncenter.navigation.js"></script>

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

Insert the component at the top of your application:

<sc-navigation
    application-id="applicationId"
    product-id="productId"
    user="user"
    products="products"
    business-partners="businessPartners"”
 />
</sc-navigation>

Parameters

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.
```
application-id = "APPLICATION"
```
product-id: A string representing the id of the current product the displayed application belongs to.
```
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
```
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
```
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
```
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.
```
{
  "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.

[{
  "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.
```
[{
  "id": "businessPartnerId",
  "name": "BP",
  "roles": [
    {
     "name": "ROLE_1"
   }
  ]
}]
```

Style

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

Demo

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

Develop

Clone the repository, then run:

npm install

yarn

License

MIT

Changelog

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

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

Solution Center Navigation

Dependencies

Installation

Usage

Parameters

Style

Demo

Develop

License

Changelog