Rebrand IBM Sterling File Gateway and myFileGateway User Interface in Certified Container (OpenShift) and Docker deployment

View Only

Rebrand IBM Sterling File Gateway and myFileGateway User Interface in Certified Container (OpenShift) and Docker deployment

By Manisha Khond posted Mon April 24, 2023 12:14 PM

Like

Author: Manisha Khond

Title: Rebrand IBM Sterling File Gateway and myFileGateway User Interface in Certified Container (OpenShift) and Docker deployment

Rebranding is a process of extending existing User interfaces to new look and feel.

IBM® Sterling File Gateway is an application for transferring files between internal and external partners that can be using different protocols, different file naming conventions, and different file formats.Sterling File Gateway offers point-and-click configuration within a rules-based architecture. Sterling File Gateway provides managed file transfer (MFT) capabilities to handle everything from high-frequency messages and huge periodic file transfers to high volume loads of real-time data while leveraging the power of business-to-business (B2B) integration to move data in transit in a manageable way. With advanced partner on-boarding features, extensive communication channel support and improved business process management, Sterling File Gateway advances operational execution with predefined, event-driven business processes and centralized, enhanced management. It provides end-to-end visibility, auditing and reporting services, and the ability to manage a large number of partners and protocols efficiently.

myFileGateway: You can use myFileGateway to upload, download, search, and generate reports for the files.

Rebranding is supported only for the application components mentioned below.

Process for the docker and Certified container.

Download skins:

Download the filegateway skins folder FileGateway_v001.zip using the link: https://www.ibm.com/docs/en/b2b-integrator/6.1.2?topic=am-rebrand-sterling-file-gateway-myfilegateway-myfilegateway20-ui-in-certified-container-deployment

Download the myfilegateway skins folder myFileGateway_v001.zip using the link https://www.ibm.com/docs/en/b2b-integrator/6.1.2?topic=am-rebrand-sterling-file-gateway-myfilegateway-myfilegateway20-ui-in-certified-container-deployment

Customize skins:

Create a new working directory e.g. branding.
In the working directory, which will serve as the build context directory, create the following directories assuming that you want to rebrand filegateway and myfilegateway.

filegateway

myfilegateway

· If you just want to rebrand myfilegateway, then only create myfilegateway directory.

Unzip the contents of FileGateway_v001.zip and myFileGateway_v001.zip in the working directory.
After the above step is completed, you will see below folder structure in working directory. The contents of the branding directory should look like this. (Note: for Docker and OpenShift Certified Container platform, do not change the skin version. It should be 001).

The next step is to change the application skins folder FileGateway_v001. The corresponding file names are:

Header:

[skin]/brandingcontent/header.txt
[skin]/brandingcontent/myFgHeader.txt
[skin]/load_skin.js
[skin]/images/FGimages/brandingimages/...

Top Menu: [skin]/skin_styles.css
Central Panel:

[skin]/skin_styles.css
[skin]/load_skin.js
[skin]/images/…

Footer: [skin]/brandingcontent/footer.txt
Login Footer:[skin]/brandingcontent/loginFooter.txt

Refer the following table to rebrand the components and the associated files in the skin.

Application Title	[skin]/brandingcontent/header.txt [skin]/brandingcontent/myFgHeader.txt
The browser title text, which appears up in the top left-hand side of the browser	Using Customization UI, set the properties filegateway_ui.fgWindowTitle (for Sterling File Gateway) filegateway_ui.myfgWindowTitle (for myFileGateway)
Corporate logo	[skin]/images/FGimages/brandingimages/ isomorphic/skins/FileGateway/images/FGimages/brandingimages [skin]/brandingcontent/header.txt [skin]/brandingcontent/myFgHeader.txt
The position of the user name:	[skin]/load_skin.js
Log In page footer	[skin]/brandingcontent/loginFooter.txt
The footer for all pages after the Log in page	[skin]/brandingcontent/footer.txt
Suppress hover help	[skin]/load_skin.js
Skin	Note that for Docker and OpenShift Certified Container install, the skin defaults to version 001. Make sure that the new skin name is updated in [skin]/load_skin.js. To update the skin name, change approximately line 54 to refer to the directory name of your new [skin], as shown: //---------------------------------------- // Specify skin directory //---------------------------------------- // must be relative to your application file or isomorphicDir isc.Page.setSkinDir("[ISOMORPHIC]/skins/[new skin]/")

Build the docker image:

Below is the sample Dockerfile to rebrand IBM Sterling File Gateway and MyFileGateway. The first line is the image name and the tag of the image you are trying to rebrand. Note that if you only want to rebrand MyFileGateway, then modify Dockerfile to include myfilegateway section only. Put the Dockerfile in the branding directory.

FROM image:tag

USER root

COPY --chown=1010:0 ./filegateway /ibm/b2bi/install/container/Applications/tmp_filegateway/isomorphic/skins/

RUN if [ "$(ls -A /ibm/b2bi/install/container/Applications/tmp_filegateway/isomorphic/skins/)" ]; then echo "Applying branding changes for filegateway" \

&& cd /ibm/b2bi/install/container/Applications/tmp_filegateway \

&& /ibm/b2bi/install/jdk/bin/jar uvf /ibm/b2bi/install/container/Applications/filegateway.war * \

&& cp /ibm/b2bi/install/container/Applications/filegateway.war /ibm/b2bi/install/noapp/deploy/filegateway.war \

&& rm -rf /ibm/b2bi/install/container/Applications/tmp_filegateway \

&& echo "Branding changes for filegateway applied successfully"; else echo "No branding changes provided for filegateway"; fi

COPY --chown=1010:0 ./myfilegateway /ibm/b2bi/install/container/Applications/tmp_myfilegateway/isomorphic/skins/

RUN if [ "$(ls -A /ibm/b2bi/install/container/Applications/tmp_myfilegateway/isomorphic/skins/)" ]; then echo "Applying branding changes for myfilegateway" \

&& cd /ibm/b2bi/install/container/Applications/tmp_myfilegateway \

&& /ibm/b2bi/install/jdk/bin/jar uvf /ibm/b2bi/install/container/Applications/myfilegateway.war * \

&& cp /ibm/b2bi/install/container/Applications/myfilegateway.war /ibm/b2bi/install/noapp/deploy/myfilegateway.war \

&& rm -rf /ibm/b2bi/install/container/Applications/tmp_myfilegateway \

&& echo "Branding changes for myfilegateway applied successfully"; else echo "No branding changes provided for myfilegateway"; fi

USER 1010

Extend the image using docker build command:
docker build . -t <Image>:<newTag>

Deploy the image.

The final step is to deploy the image. Refer deployment instructions for Certified Container or docker based on your deployment platform.

Example:

Goal: Rebrand IBM Sterling File Gateway and myFileGateway to rebrand:
Window title on the top left.
Application Name, Company logo and Footer on the login Window.
Application Name, Company logo and Footer on the home page after login is successful.

Steps:

Download skins:

· Download the filegateway skins folder FileGateway_v001.zip using the link: https://www.ibm.com/docs/en/b2b-integrator/6.1.2?topic=am-rebrand-sterling-file-gateway-myfilegateway-myfilegateway20-ui-in-certified-container-deployment

· Download the myfilegateway skins folder myFileGateway_v001.zip using the link https://www.ibm.com/docs/en/b2b-integrator/6.1.2?topic=am-rebrand-sterling-file-gateway-myfilegateway-myfilegateway20-ui-in-certified-container-deployment

Customize skins

Create a new working directory e.g. branding.

In the working directory, which will serve as the build context directory, create the following directories:

filegateway

myfilegateway

Unzip the contents of FileGateway_v001.zip and myFileGateway_v001.zip in the working directory.

After the above step is completed, you will see below folder structure in working directory. The contents of the branding directory should look like this. (Note: for Docker and OpenShift Certified Container platform, do not change the skin version. It should be 001).

The next section details the procedure to change the contents in the branding directory.

Under the filegateway/FileGateway_v001/brandingcontent directory.
Modify footer.txt to mention new footer.
Modify header.txt to mention new Application Title and the company logo
ABC Company IBM Sterling File Gateway
<td id="ibm-banner-logo" width="49"><img src="isomorphic/skins/FileGateway_v001/images/FGimages/brandingimages/ABC_logo.gif" width="41" height="15" alt="ABC logo"/></td>
Modify loginFooter.txt to mention new footer on the login page.

In the filegateway/FileGateway_v001/images/FGimages/brandingimages directory, put the new company logo ABC_logo.gif.

In the filegateway/FileGateway_v001/load_skin.js, make sure that the skin is correctly reflected.

// Specify skin directory

// must be relative to your application file or isomorphicDir

isc.Page.setSkinDir("[ISOMORPHIC]/skins/FileGateway_v001/")

In the myfilegateway/FileGateway_v001/brandingcontent directory,
Modify footer.txt to include new footer.
Modify header.txt to mention new Application Name and new company logo
ABC Company Sterling MyFileGateway
<td id="ibm-banner-logo" width="49"><img src="isomorphic/skins/FileGateway_v001/images/FGimages/brandingimages/ABC_logo.gif" width="41" height="15" alt="ABC logo"/></td>
Modify loginFooter.txt to mention new footer to be displayed on the login page.
Modify myFgHeader.txt to mention new Application Name and new company logo
ABC Company Sterling myFileGateway
<td id="ibm-banner-logo" width="49"><img src="isomorphic/skins/FileGateway_v001/images/FGimages/brandingimages/ABC_logo.gif" width="41" height="15" alt="ABC logo"/></td>

In the myfilegateway/FileGateway_v001/images/FGimages/brandingimages directory, put a new company logo ABC_logo.gif.

Check the myfilegateway/FileGateway_v001/load_skin.js to make sure that the proper skin is referenced

//----------------------------------------

// Specify skin directory

// must be relative to your application file or isomorphicDir

isc.Page.setSkinDir("[ISOMORPHIC]/skins/FileGateway_v001/")

Using Customization UI, add below properties in customer_overrides.properties to add new Window Title.
filegateway_ui.fgWindowTitle
filegateway_ui.myfgWindowTitle

Build rebranded image

Create the Dockerfile in the branding directory. The first line should reference the image which you are rebranding.

Example of building an image for the docker install:

FROM b2bi:6.0.3.8