Styling and E-Mail Templates

Customizing Mail Templates

As described in the Supplier Portal Configuration guide, users can specify a directory from which the mail templates are loaded. The default location is

/configuration/mailTemplates

images/download/attachments/103224385/hsxMailTemplates.PNG

All default templates are HTML files that are provided in German and English. If desired more languages can be added by providing a file with the corresponding file name suffix.

Download all templates.

List of all Templates

Most of the templates contain several variables in the notiation ${variableName}. Variables will be replaced with context specific values during mail generation.

Filename

Purpose

Recipient

Supported Variables

ISSRInvitationSupplier

Invitation mail to suppliers by portal administrator

supplier admin

${portalUrl}

ISSRAfterRegistrationSupplier

Confirmation mail to suppliers after they accepted an invitation mail and set a password

supplier admin

${supplier.firstName}
${supplier.lastName}
${supplier.email}
${supplier.loginName}
${supplier.displayName}
${loginPage}

SSRNotificationAfterRegistrationSupplier

Mail after self service registration

supplier admin

${supplier.firstName}
${supplier.lastName}
${supplier.email}
${supplier.loginName}
${supplier.displayName}

SSRNotificationAfterAcceptSupplier

Mail after self service acceptance

supplier admin

${supplier.firstName}
${supplier.lastName}
${supplier.email}
${supplier.loginName}
${supplier.displayName}
${loginPage}

SSRNotificationAfterRejectSupplier

Mail after self service reject

supplier admin

${supplier.firstName}
${supplier.lastName}
${supplier.email}
${supplier.loginName}
${supplier.displayName}

newSupplierUserEmail

Supplier admin creates a new user

supplier user

${supplier.firstName}
${supplier.lastName}
${supplier.email}
${supplier.loginName}
${supplier.displayName}
${portalUrl}

lostPassword

Supplier admin or user requested to reset their password

supplier user / admin

${supplier.firstName}
${supplier.lastName}
${supplier.email}
${supplier.loginName}
${supplier.displayName}
${portalUrl}

notification_timeline

Notification of a new timeline message

supplier user/admin
portal administrator

${message.subject}
${message.username}
${message.text}
${message.email}
${message.author}
${message.url}

Customizing Static HTML Files, e.g. Imprint

The Supplier Portal is a dynamically created rich internet application that is build upon only few static html pages. These pages define a basic page skeleton with document title, background, favicon, etc.

images/download/attachments/103224385/hsxStaticHtml.PNG

To customize these pages follow these steps:

  1. Unzip the file /tomcat/webapps/hsx/hsx.war into a temporary directory

  2. Navigate to /hsx/html and select the html file to customize

  3. After applying the desired changes zip the war file again and redeploy the application in Tomcat.

List of Static HTML Files

File Name

Purpose

login.html

Login page that is shown to unauthenticated user (both supplier and portal administrators)

Hsp.html

Application main page that is shown after successful authentication (both supplier and portal administrators)

Registration.html

Registration form for suppliers.

terms.html

Terms of use template. Is empty by default should be customized for production.

imprint.html

Company imprint .Is empty by default should be customized for production.

lostpassword.html

Page to request a password reset. Suppliers only.

resetpassword.html

Page to set up an initial password or to assign a new password after password reset request. Suppliers only.

index.html

Performs a client-side redirect to login.html. Normally no customization needed.

404.html

404 error page when accessing an unknown url.

500.html

500 error page in case of an severe internal server error.

During customization of the application some of the links may not be required any longer. F.e. if the registration process is heavily customized and is not done via Supplier Portal directly you may want to remove some of the links concerning registration in the terms page.

Customizing Styles (CSS)

You can change the appearance of the supplier portal by re-placing the default CSS styles with custom styles. This can be done on css-class level.

images/download/attachments/103224385/SupplierPortalCssOverview.png

After installing PIM Supplier Portal, the css file for customized styles can be found here:

<SupplierInstallationRoot>\tomcat\webapps\hsx\html\css\custom.css

It is recommended to use Browser inspection (Chrome, Firefox) to identify the elements in DOM and their css classes. Most browsers support to change the styles directly to verify the style customization before putting it into the custom.css.

Example

To customize the color scheme of the login screen, the follow css can be used:

/**Change login box background and font colors.*/.hsx-content-area{background-color: magenta;}.hsx-content-area a, .hsx-content-area div {color: white;}

Result:

images/download/attachments/103224385/SupplierPortalCssExample.PNG

You can also add additional images and reference them in the custom.css. This might be useful to replace the application logo for instance.

Build and Deploy Customizings

All changes inside the war file structure of Supplier Portal need to be re-packaged and deployed. The includes changes to styling and static html pages as described above.

Best practice steps are:

  1. Unzip war file into an empty directory

  2. Add files that need to be changed to SVN (or any other versioning tool of your choice). In most cases this will be the folder /html.

    images/download/attachments/103224385/unzippedWarFileWithSVN.PNG
  3. Apply changes to extracted files

  4. Repackage by zipping the content and renaming the zip file to a war file again, e.g. by using 7zip.

  5. Undeploy the old war file using the Tomcat manager application (e.g. http://localhost:9090/manager/html)

    images/download/thumbnails/103224385/hsxUndeploy.PNG
  6. Deploy new war file dropping the file into the tomcat/webapps folder

Please do not:

  • images/s/o7yjop/8703/51k4y0/_/images/icons/emoticons/warning.svg Change the content of /tomcat/webapps/hsx directly. All changes will be lost whenever the war file is redeployed

  • images/s/o7yjop/8703/51k4y0/_/images/icons/emoticons/warning.svg Change anything in /tomcat/work or /tomcat/temp. These are internal folders of tomcat, the results might be non-deterministic. Changes might be lost after Tomcat restart.