B2B Integration

 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

  

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.

rebrand_scope


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).

dir structure


  • 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).

dir structure


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
<span id="ibm-banner-main-product-name" class="ibm-banner-product-name">ABC Company IBM Sterling File Gateway</span>
<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
<span id="ibm-banner-main-product-name" class="ibm-banner-product-name">ABC Company Sterling MyFileGateway</span>
<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
<span id="ibm-banner-main-product-name" class="ibm-banner-product-name">ABC Company Sterling myFileGateway</span>
<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

cust_overrides


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

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 b2bi:6.0.3.8.Rebrand1

Output:

Removing intermediate container 2c87facab684

 ---> 18a246a0c5b7

Step 7/7 : USER 1010

 ---> Running in c8c23f46de8d

Removing intermediate container c8c23f46de8d

 ---> 41c42d619a2b

Successfully built 41c42d619a2b

Successfully tagged b2bi:6.0.3.8.Rebrand1

 

REPOSITORY                    TAG                IMAGE ID       CREATED          SIZE

b2bi                          6.0.3.8.Rebrand1   41c42d619a2b   56 seconds ago   4.04GB


Example of Dockerfile to build an image for the OpenShift Certified Container install:

FROM cp.icr.io/cp/ibm-b2bi/b2bi:6.1.2.0

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 cp.icr.io/cp/ibm-b2bi/b2bi:6.1.2.0.Rebrand1

Output:

Removing intermediate container aaf795a2958b

 ---> da5cde8cacd0

Step 7/7 : USER 1010

 ---> Running in 039545c29e32

Removing intermediate container 039545c29e32

 ---> 4fc32735cf47

Successfully built 4fc32735cf47

Successfully tagged cp.icr.io/cp/ibm-b2bi/b2bi:6.1.2.0.Rebrand1

docker images

REPOSITORY                    TAG                IMAGE ID       CREATED          SIZE

cp.icr.io/cp/ibm-b2bi/b2bi    6.1.2.0.Rebrand1   4fc32735cf47   44 seconds ago

Deploy the rebranded image

On Docker platform:

To deploy on Docker platform, refer this documentation: https://www.ibm.com/docs/en/b2b-integrator/6.0.3?topic=software-upgrading-sterling-b2b-integrator-docker-container

·       Stop the docker container that runs Sterling B2B Integrator/Sterling File Gateway.

·       Deploy the new image using command below where image-id is the IMAGE ID of the rebranded image.

docker run -e LICENSE="accept" -e KEY=<key> -e TZ=<Time Zone> -d --name=<container name> --net=host -v <local dir>:/ibm/resources <image-id> b2bi_run all <node number>

·       After deployment is successful, remove the previous docker container (docker rm container-id).


On Certified Container platform:

To deploy on Certified Container platform, refer this documentation: https://www.ibm.com/docs/en/b2b-integrator/6.1.2?topic=containers-upgrading-software

Modify helm chart to make the changes in override yaml file.

  •        Modify global.image.repository to mention repository of rebranded image.
  •        Modify global.image.tag to mention tag of the rebranded image.
  •        Set dataSetup.enabled to false.
  •        Set dataSetup.upgrade to true.
  •        Run the helm upgrade to deploy rebranded image.

helm upgrade <existing release-name> -f <helm configuration file> <latest version helm chart location> --timeout <timeout in seconds or minutes> --namespace <Kubernetes namespace>

Post install steps:

Docker:

Go to the docker container shell and navigate to below folders to check rebranding changes.

/ibm/b2bi/install/noapp/deploy/filegateway_exploded/webapp/isomorphic/skins/FileGateway_v001

/ibm/b2bi/install/noapp/deploy/myfilegateway_exploded/webapp/isomorphic/skins/FileGateway_v001



Certified Container (OpenShift) platform:

Using OpenShift console, connect to the pod. Go to Terminal and navigate below directories to check rebranding changes.

/ibm/b2bi/install/noapp/deploy/filegateway_exploded/webapp/isomorphic/skins/FileGateway_v001

/ibm/b2bi/install/noapp/deploy/myfilegateway_exploded/webapp/isomorphic/skins/FileGateway_v001


Rollback rebranding changes:

The only way to roll back the changes is to deploy prior image and remove the properties from customer overrides that were specifically added for rebranding.

Sample images of rebranded applications:

login_myfilegateway

home_page_myfilegateway
login_sfg

home_page_sfg




#Highlights-home
0 comments
26 views

Permalink