This page demonstrate How To Customize Order Hub Application ..
1. Introduction:
Customization of Sterling Commerce Application is difficult task. This
steps help you on customize orderhub application.
Following product documentation is for reference.
Sterling Webstore is being all most all store to do the store operation
by store user and store mamager. There is very good demand of sterling
resources who konows store ui customization.
In this page we will discuss how to do setup for store ui customization
and how the do the store ui customization.
Mainly we will go-through following types of store ui customization.
- Adding a a label (static text) in the product screen /page
- Adding a level and showing value from api output. Example- We
will be showing OrderKey value alogng with order number.
- We will add new link.
- we will create a new screen.
- we control some of the resources through permission.
2. Order Hub Customization
Onece you finish the order hub installation, you customize the order hub
application.
There are two type of customuization:
- Type 1: crate custom menu and custom page / screen.
- Type 2: Customize existing pages that are order hub
application.
Order Hub supports 3 levels of customization
when it comes to adding functionality to existing pages:
- Customization by configuration
- Differential customization
- Customization by overrides
2.1 PreRequiste Software / Setup
- Docker Installation : It is done as part of Sterling and order
hub installation
- Install Node.js -:
Execute following commands to
download and install nodejs.
wget
https://nodejs.org/dist/v6.12.2/node-v6.12.2-linux-x64.tar.gz
if you get "bash: wget: command not found" error, install wget running
"yum install wget"
unzip it
tar --strip-components
1 -xzvf node-v* -C /usr/local
Check Node Installated
Version. /usr/local/bin/node -v
- Install Yarn. Command:-
- Install Angular CLI globally : Command : npm install -g
@angular/cli@13.3.9
- Configure the hosts file:- Configure the hosts file to map
bucgenerichost to localhost. You need the mapping to allow Order Hub
to connect to your local development environment.
Open the
hosts file C:\Windows\System32\drivers\etc\hosts
127.0.0.1
localhost bucgenerichost
- Update the om-compose.properties file to set
ORDERHUB_MODE=omoc
- Start Docker. Command : sudo service docker start
- Run the following command to extract the source code to your
local workstation. Use the source code to customize Order Hub.:
Command: - ./om-compose.sh extract-orderhub-code <version>
Valid values for version are oms or omoc.
The source code is
available on your local workstation at
devtoolkit_docker/orderhub-code.
2.1 Creating new applications (Type 1)
Try to login to webstore (url: https://ip or
hotname:9443/wsc/store/login.do url) with userid=admin and password.
You will get the error message " User is not assdigned to store".
Please use the following steps to do the setup and customization for Web
store UI
2.1 Creating new applications
Use IBM-provided Angular schematics to generate a brand new application
to access the application from orderhub.
| An Angular monorepo |
A basic Angular repository. |
2.1.1 Creating an Order Hub monorepo
- Ensure that you have extracted the Order Hub code. Code should
be in orderhub-code (e.g. /oms/devtoolkit_docker/orderhub-code )
folder
- Go to devtoolkit_docker/orderhub-code foder. (command: cd
/oms/devtoolkit_docker/orderhub-code)
- Run the command : npm config set "strict-ssl" false
.If you get "bash: npm: command not found" error, then Install npm. (
https://tecadmin.net/how-to-install-nodejs-on-centos-stream-9)
- un Install and reinstallschematics: Command To Uninstall:
npm uninstall -g @buc/schematics
Command to reinstall:
npm install -g ./lib/buc/schematics/schematics-v2latest.tgz
- Create a folder custom-monorepo. Coomand : mkdir
custom-monorepo ; Give perimission. chmod 777 custom-monorepo
path should look like
/oms/devtoolkit_docker/orderhub-code/custom-monorepo
- Go to folder
/oms/devtoolkit_docker/orderhub-code/custom-monorepo. Command cd
/oms/devtoolkit_docker/orderhub-code/custom-monorepo .
- Create a file app-config.json. add the following content
{
"name": "custom-monorepo",
"devServerConfig": {
"port": 9300,
"contextRoot": "/custom-monorepo"
},
"prodServerConfig": {
"hostName": "static.omsbusinessusercontrols.ibm.com"
},
"routes": {
"custom-page1": {
"devServerConfig": {
"port": 9301,
"contextRoot": "/custom-page1"
}
},
"custom-page2": {
"devServerConfig": {
"port": 9302,
"contextRoot": "/custom-page2"
}
}
}
}
- Check ng version. Command: ng version . If you get the error
"bash: ng: command not found", install ng.
Steps to install
ng:
1. npm install -g @angular/cli@latest
2. alias ng="/usr/local/lib/node_modules/\@angular/cli/bin/ng.js"
3. ng version
- Install yarn: command: npm install -g yarn
- 196 Install angular-cli globally using command (npm install -g
angular-cli)
- commands:
npm uninstall -g angular-cli
npm uninstall -g @angular/cli
npm cache clean
npm install -g @angular/cli@latest
alias ng="/usr/local/lib/node_modules/@angular/cli/bin/ng.js"
- Go to
/oms/devtoolkit_docker/orderhub-code/custom-monorepo
- Open a new terminal windiw
- Run following command.
ng new --collection=@buc/schematics --app-config-json=app-config.json --module-short-name=monorepo --prefix=monorepo --mode=on-prem
[root@ip-172-26-8-124 custom-monorepo]# ng new --collection=@buc/schematics --app-config-json=app-config.json --module-short-name=monorepo --prefix=monorepo --mode=on-prem
Workspace extension with invalid name (defaultProject) found.
Error: This command is not available when running the Angular CLI inside a workspace.
[root@ip-172-26-8-124 custom-monorepo]# ls
- Remove the line ,"defaultProject": "monorepo-shared"/li>
. For more information, see Getting started with customizing Order Hub.