Adding a custom logo to Process Portal

The Process Portal user interface does not contain any company branding. You might, however, want to include a company logo in the Process Portal application that you provide for your users.

About this task

This example describes how to add a company logo above the user profile by creating a header file that refers to the graphic file for the company logo. In this example, these files are added to a new toolkit. The separation of customization files from the Process Portal process application ensures that you can apply fixes from IBM more easily in the future. Finally, a reference to the header file is added to the appropriate client-side human service.

Procedure

  1. Create a toolkit for the customization files.

    You can create a toolkit by using either Process Center or the Process Designer desktop editor. In this example, the toolkit is called SDBToolkit and the acronym is SDBTK.

  2. Create the header and graphic files.
    The example uses the following header file:
    <html xmlns="http://www.w3.org/1999/xhtml>
<head>
<style>
   .customLogo {
       background-color: #325c80;
       height:55px;
   }
</style>
       <script type="text/javascript">
           var customLogoURL = com_ibm_bpm_coach.getManagedAssetUrl("speedDemonBikes.png", com_ibm_bpm_coach.assetType_WEB, "SDBTK");
           window.onload = function() {
              document.getElementById("customLogoImg").src = customLogoURL;
              console.log("!!");
           };
       </script>
</head>
       <div class="customLogo" role="main">
           <div>
               <img id="customLogoImg" src="" alt="" />
       </div>
</html>
    The URL in the header file is used to retrieve the logo from the toolkit.
  3. Add the files to the toolkit:
    1. Open the new toolkit in Process Designer.
    2. In the library, click the + sign next to Files, then select Web File, and add the header and graphic files.
    3. In Process Center, create a snapshot of the new toolkit.
  4. Add a dependency to Process Portal for the new toolkit.
    1. In Process Designer, open the Process Portal process application.
    2. In the library, click the + sign next to Toolkits, then select the new toolkit.
  5. Add the logo to the appropriate Process Portal client-side human service.

    In this example, the company logo is added above the user profile, which is a coach view in the RESPONSIVE_PORTAL client-side human service.

    1. On the Overview tab for the Process Portal process application, click the RESPONSIVE_PORTAL client-side human service.
    2. On the Coaches tab, click Portal to display the coach views, and then double-click anywhere in the coach views pane.
    3. From the Advanced section of the palette, add a Custom HTML view to the coach views pane above the User Profile coach view.
      Tip: To ensure that the logo appears above the coach view and not to the left of it, drop the Custom HTML view onto the User Profile coach view and not outside it.
    4. Configure the Custom HTML control to refer to the header file:
      1. Select the control, and in the Properties section HTML tab, select Managed File.
      2. From the list of files, select the header file that contains the link to the graphic file.
  6. Save your changes.

Results

The next time Process Portal users log in, they see the new logo above the user profile.
Parent topic: Customizing the Process Portal client-side human services