Customize Application Navigation Bar
- Add new element to Navigation Bar
User Permissions control available list of Actions
Supplier Portal as embedded application
Add custom pages to the support box

Customize Application Navigation Bar

The navigation bar is used to access different areas of the application. The displayed elements depend on the logged-in user's role (i.e. Supplier User, Supplier Admin, Portal Admin).

New elements can be configured to be added to the bar. The main use case is to easily integrate external content or external systems.

images/download/attachments/153691542/SupplierPortalCustomPage.PNG

Add new element to Navigation Bar

Open the configuration file <INSTALLATION_ROOT>/configuration/uiCustomization.json. An example navigation bar contribution looks like this:

{
   "customNavigation":[
      {
         "position":50,
         "actionCaptions":[
            {
               "locale":"en_US",
               "value":"Custom page"
            },
            {
               "locale":"de_DE",
               "value":"Beispielseite"
            }
         ],
         "headerCaptions":[
            {
               "locale":"en_US",
               "value":"Header for Custom page"
            },
            {
               "locale":"de_DE",
               "value":"Titel für Beispielseite"
            }
         ],
         "userRoles":["ROLE_SUPPLIER_ADMIN", "ROLE_SUPPLIER_USER", "ROLE_PORTAL_ADMIN"],
         "url_":"/customPage.html?supplierId=${organization.hpmSupplierId}&locale=${user.uiLocaleAsString}"
      }
   ]
}

Allowed values for the json attributes are described below:

Json Attribute

Description

customNavigation

Contains a json array whereas each element describes a navigation bar element.

position

Relative position of the contribute element. Elements are ordered by position number ascending. The default element have the following position indices:

Position	Supplier Action Caption
10	Open my dashboard
20	Upload to catalog
30	View my organization (supplier admins only)
120	Edit my personal settings

Position	Portal Admin Caption
10	Open my dashboard
20	Manage Imports
30	View suppliers
50	Invite suppliers
60	View mappings
120	Edit my personal settings

actionCaptions

The caption of the contribute navigation bar element.

locale - Java-Locale to specify the caption language E.g. de_DE, en_US.
value - localized caption

headerCaption

The caption of the header bar on top of the content element. Syntax is the same as for actionCaptions. If empty, no header bar will be displayed.

userRoles

A json array specifying the user roles, for which an element should be shown. Possible values are any combination of:

ROLE_SUPPLIER_ADMIN
ROLE_SUPPLIER_USER
ROLE_PORTAL_ADMIN
ROLE_BROKER_USER

url

An absolute or relative url that is used for loading the iFrame content. Supports variables in the syntax of ${variableName}. Supported variables:

Variable	Description
user.loginName	Value that has been used for log in to Supplier Portal. Equals email address for suppliers.
user.uiLocaleAsString	Java Locale specifying the user's ui language. E.g. de_DE, en_US.
user.lastName	User last name.
user.firstName	User first name
user.id	Internal database id of user.
user.email	User email address. Never empty for suppliers, potentially empty for portal administrators.
user.stateAsString	One of ACTIVE, REGISTERED, INVITED, NOT_INVITED, DEACTIVATED
user.isSupplierAdmin	True, if the user is supplier administrator.
user.isPortalUser	True, if the user is a portal administrator.
user.isSupplier	True, if the user is either a supplier user or a supplier administrator.

organization.name	Name of the supplier organization.
organization.id	Internal database id of the supplier organization
organization.hpmSupplierId	Supplier Id in PIM Core.
organization.isActive	Active state of supplier organization.

User Permissions control available list of Actions

While you can contribute your own navigation bar actions, its also possible to control the available navigation bar action by adding or removing appropriate permissions for the available user roles.

For example if the INVITE_SUPPLIER permission is revoked, the appropriate action in the navigation bar will not be available anymore for the portal admin. To configure the list of available permissisions for the PORTAL_ADMIN_ROLE or the SUPPLIER_ADMIN_ROLE, there are two configuration properties within your <INSTALLATION ROOT>/configuration/configuration.properties file.

permissions.portalAdmin=INVITE_SUPPLIER,VIEW_IMPORT_MANAGER,MANAGE_SUPPLIER_USER,MANAGE_SUPPLIER
permissions.supplierAdmin=START_DRY_RUN,MANAGE_SUPPLIER_USER

All available Permissons can be found in the following table:

Permission	Desciption
INVITE_SUPPLIER	Will control the navigation bar action "Invite suppliers" to start the supplier invitation workflow. (Default: only portal admins are able to invite suppliers )
VIEW_IMPORT_MANAGER	Will control the navigation bar action "Manage imports" to show the Import Overview. (Default: only portal admins are able to invite suppliers )
MANAGE_SUPPLIER_USER	Will control the "Create new User" Link within the Supplier Details, as well as all actions which will be corresponding to the action of creating new users like resending the invitation mail, activating or deactivating users. (Default: portal admins and supplier admins are able to create new users. )
MANAGE_SUPPLIER	Will control the actions to activate or deactivate an supplier organizations.
START_DRY_RUN	Will control the navigation bar action "Upload data to a catalog" which start give's the user the possiblity to start a dry run. (Default: Only supplier admins are able to start dry run imports. )
MANAGE_BROKER_USER	Provides access to Broker user administration UI, e.g. for catalog assignment.

Supplier Portal as embedded application

There may be scenarios where Supplier Portal should be embedded into other web applications. This raises two requirements:

it is desired to display only the main part of the application showing all the data and actions necessary to execute all tasks.
Navigation bars and header containing banners, login information etc. are not wanted.
it should still be possible to navigate to the several places to do certain tasks, like going to the supplier list overview, invitation, upload data etc.
This should be possible by providing additional url parameters.

Display as embedded application

Hiding navigation bar and application header can simply be done by passing the url parameter embedded with the value true to the Supplier Portal url (false is default).
F.e. http://localhost:9090/hsx/html/Hsp.html?embedded=true

Initialize with a specific locale

Users can switch their UI language on the login page. For initialization purposes it is also possible to use a URL parameter. This also works for application deep links (see next paragraph). Example:

http://localhost:9090/hsx/html/Hsp.html?locale=de_DE

The locale format is equivalent to the String representation of java.util.Locale.

Deep links to the application

Without the navigation bar it should still be possible to reach all areas of the application. Pages displayed in the main area are in the following termed as places.
To reach a certain place the identifier of the place is added and the end of the url beginning with a # symbol. Parameters for the place are followed behind a : symbol.
The syntax looks like this: http://localhost:9090/hsx/html/Hsp.html#{placeIdentifier}:{parameters}. Places parameters follow the normal url parameter syntax: parameterKey1=value1&parameterKey2=value2...
Note that actions performed in the ui are always reflected in the url if it affects a certain place. F.e. opening the supplier details of a supplier in the suppliers list would change the url from http://localhost:9090/hsx/html/Hsp.html#suppliers to http://localhost:9090/hsx/html/Hsp.html#supplier:supplierId={id}.

Below is a full list of places that are currently available in the application, also containing all parameters.

Navigable Site	Url	Parameters	Example
Dashboard, default place after login	#dashboard or nothing (because default)	feedId: internal id of feed, optional, only relevant after login (loads and displays only the specified feed)	#dashboard:feedId=23
List of suppliers	#suppliers	-	#suppliers
Supplier details	#supplier	supplierId: internal id of supplier, mandatory	#supplier:supplierId=4
List of mappings	#mappings	-	#mappings
Mapping details	#mapping	mappingId: internal id of mapping, mandatory	#mapping:mappingId=5
Catalog details	#catalog	catalogId: internal portal id of catalog, mandatory	#catalog:catalogId=46
User details	#user	userId: internal id of user (), mandatory	#user:userId=8
Invite suppliers	#inviteSuppliers	-	#inviteSuppliers
Upload data (test run)	#upload	catalogId: internal portal id of catalog, mandatory	#upload
Edit catalog	#editCatalog	catalogId: internal portal id of catalog, mandatory	#editCatalog:catalogId=32
Manage imports	#imports	dataload filter, only for initial load	#imports

Add custom pages to the support box

Available since 8.1.1.01

It is now possible to add up to 3 custom pages to the support box of the supplier portal.

In the directory <SUPPLIER_PORTAL_INSTALLATION_DIR>/tomcat/webapps/hsx/html there are 3 HTML-Pages named custom1.html to custom3.html which can be edited to the customer needs.

To add for example a link from the existing login page login.html to the new custom1.html page it is neccessary to add the custom html to the following div:

login.html

[...]      
 <div id="hsx-page-navigation-all" class="hsx-page-navigation" style="display: none;">
        <span id="hsx-login-link"><a href="login.html" id="hsx-login-label">Log In</a> | </span>
        <span id="hsx-registration-link"><a id="hsx-registration-label" href="Registration.html">Register</a> | </span>
        <span id="hsx-terms-link"><a id="hsx-terms-label" href="terms.html">Terms &amp; Conditions</a> | </span>
        <span id="hsx-imprint-link"><a id="hsx-imprint-label" href="imprint.html">Legal disclaimer</a></span>
		<!-- new code -->
	    <span id="hsx-custom1-link"><a id="hsx-custom1-label" href="custom1.html">Custom Page Name</a></span>
 </div>
[...]

This has to be done on every html page where the link to the custom page should be shown.

To make the link name language specific it is necessary to change the SupportBoxMessages_<LOCALE>.properties in every desired language located here <SUPPLIER_PORTAL_INSTALLATION_DIR>\tomcat\webapps\hsx\WEB-INF\classes\com\heiler\hsp\ui\app\client

As we have added the custom1.html we have to edit the property hsx-custom1-label to the desired name.

SupportBoxMessages_de_DE.properties

[...]
hsx-custom1-label=<Custom Name of the Page>
[...]

After editing the html and properties files a restart of the supplier portal server is required.

If the changes are not visible the customer will have to clear his browser cache and hard reload the site.