Code Robo
Formatter
Comparator
Tester
Converter
Utility
Java Code Complience
Validator
EncoderDecoder
Virtual Service
How To Do Store UI(webstore) Customization.
        Talk to EasyAssistant

This page demonstrate How To Customize Webstore Sterling Application ..

1. Introduction:

Customization of Sterling Commerce Application is difficult task. This steps help you on customize the 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. Store UI Customization


Onece you finish the valina installation, Webstore (storeUI) will be installed.
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 Data Setup
It is required so that you can login to to webstore UI.
2.2.1 Create Store:
Create a store (organization) in application manager. with storeName=store1234, ParentOrganization=DEFAULT, Primary EnterPrise=DEFAULT, Node Type=Store. In Address Country=US, zipcode=08952.
2.2.2 create a store user:
Change Organization to store1234 in application manager and then create a user in application manager.
userid=storeuser1234, password=any password , Locale = US( united states eastern time), Menu=DefaultMenu, UserGroup=ISStoreGroup & System.
2.2.3 Login to StoreUI
. Open the URL https://localhost:9443/wsc/store/login.do and login with storeuser1234/password. Once you successfylly loged into storeUI, You will have 3 view.

  1. Customer Service View
  2. Manager Dashboard View
  3. Order Fulfillment View
Default View Is: Customer Service View.
Change the view to "Fulfillment View".(Its difficult to findout, if some one does not tell you. There is a 'eye' symbol on down right corner of the page and click on that. Select Order Fulfillment View))
Now you are in Store UI. Mostly you will beworking on the Order Fulfillment View. Order Fulfillment View has following tiles/portlet.
  1. Pick Orders
  2. Pack Orders
  3. More Task:
    1. Customer Pickup
    2. Receive Shipment
    3. Ship Order
    4. My Task

2.2 Configuration Setup:
It is required so that you can customize store UI screens (pages).
2.2.1 Create om-compose.properties file:
  1. Go to ..../docker/compose folder and rename the file om-compose.properties.sample to om-compose.properties
  2. Open the file om-compose.properties and uncomment the line #AP_WAR_FILES
  3. Add wscdev,isccsdev in the AP_WAR_FILES list. It will be now AP_WAR_FILES=wsc,smcfs,sbc,sfs,sma,isccs,isf,wscdev,isccsdev
    This is required to run in Dev mode
.
2.2.2 Create extn and ngstore folder:
Excute following commands to create extn and ngstore folder
cd /oms
mkdir extn
chmod 777 extn
cd extn
mkdir ngstore
chmod 777 ngstore

2.2.3 Copy files and folder structure from /oms/devtoolkit_docker/runtime/repository/eardata/wsc/war/ngstore:
Execute following commands to copy files and sub-folders structure in extn foloder.

cp -r /oms/devtoolkit_docker/runtime/repository/eardata/wsc/war/ngstore/* /oms/extn/ngstore/
chmod -R 777 ngstore/

2.2.4 Downdload nand install Node:
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

2.2.5 Update .bash_profile file:
Update .bash_profile file with below details -
cd /home/centos
vi .bash_profile

Add below content

NODE_HOME=/usr/local/bin/node
PATH=$PATH:$HOME/.local/bin:$HOME/bin:$NODE_HOME/bin
source ~/.bash_profile
2.2.6 Gulp Installation:: 
cd /usr/local  (user centos. not root)

npm install -g gulp@v2.9.1

gulp -v
 Output:  [04:54:09] CLI version 2.9.1

2.2.7 Create Folder storebuild under /oms (e.g /oms/storebuild):
cd /oms
mkdir storebuild
chmod 777 storebuild
2.2.8 Copy following files to storebuild folder.:
cd /oms/storebuild
Copy following files to storebuild folder.
cp -R /oms/devtoolkit_docker/runtime/nodebuild/wsc/* .
2.2.9 npm update.:
cd /oms/StoreBuild

run following command
npm update.
2.2.10 npm rebuild.:
run following command
npm rebuild node-sass
2.2.11 restart / reboot your system :
You must restart your system
2.2.12 vi ngstore.build.extn.config.json:
You must update ngstore.build.extn.config.json file
vi ngstore.build.extn.config.json

update with: 
{
   "base":{
    "app":"/oms/devtoolkit_docker/runtime/repository/eardata/wsc/war/ngstore",
    "extn":"/oms/extn/ngstore"
     },
    "dest":"/oms/devtoolkit_docker/runtime/extensions/wsc/webpages"
}

2.2.13 create extensions folder :
Execute following commands
cd /oms/devdevtoolkit_docker
mkdir extensions.

2.2.14 restart / reboot your system :
You must restart your system
2.2.15 gulp build :
cd /oms/StoreBuild
gulp --gulpfile ngstore_build_extn_gulp.js

2.2.16 Changed to root user :
sudo su root
cd /oms/devtoolkit_docker/runtime/bin folder

2.2.17 wscdev build :
cd /oms/devtoolkit_docker/runtime/bin folder

./buildwar.sh -Dappserver=websphere -Dwebsphere-profile=liberty -Dwarfiles=wscdev -Ddevmode=true

2.2.18 Stop OMS Instance :
cd /oms/devtoolkit_docker/compose
./om-compose.sh stop

2.2.19 copy and deploy war file. :
docker cp /oms/devtoolkit_docker/runtime/external_deployments/wscdev.war om-appserver:/opt/ibm/wlp/usr/servers/defaultServer/dropins/smcfs.ear

2.2.20 start instance. :
cd /oms/devtoolkit_docker/compose
./om-compose.sh start

2.2.20 Tail log.:
docker logs -f --tail 500 om-appserver
2.2.21 Open Store UI:
https://localhost:9443/wscdev/store/login.do?appMode=dev


Note: Once you become familiar with the above steps, you can use some short-cuts.
  • If you are modifying js or html file, masup.xml you can directly copy to server and test it.
    docker exec -it om-appserver bash
  • If you are modifying masup java fie (classInformation tag value in masup.xml file ), do extension jar build.
    /oms/devtoolkit_docker/runtime/bin/sci_ant.sh -f /oms/devtoolkit_docker/devtoolkit_extensions.xml importfromproject -Dprojectdir=/home/projectcode

2.3 UI Customization :
In this section we will change store UI.
2.3.1 Modify Product Label:

2.3.2 How to create a related task.:
Related task is link in the menu item which opens on clicking the 3 dots.
Suppose you need to add a related task in the shipment details screen. Task(link) name is "Cancel Shipment" . You need to do the following things.
1. Add a label entry in the extn_nls.json file. )
"CancelShipment":"Cancel Shipment"(extn_nls.json),
2. Add a entry for the new task "CancelShipment" in the *.related-task.config.js file 
			'taskId':'cancelShipment',
				 'taskName':'Cancel Shipment',		
				 getTask:function(shipmentModel,relatedTaskMode){
					 if(shipmentModel.Status) {
						 var task = {};
						 task.taskId = "cancelShipment";
						 task.isPrimary = false;
						 task.isDisabled = false;
						 task.taskName = "shipmentsummary.CancelShipment";
						 task.sequence = 30;

3. Add entries in (*.config.js)store.views.shipment.common.extend-collection-date.updateShipDate







Post Your Comment:
Name :
Email ( Optional) :
Comments / Suggestion (* Required) It is required: :
: