SlideShare a Scribd company logo
8
Most read
9
Most read
10
Most read
1
HIMANSHU MENDIRATTA
Integrate Angular in Portal
Overview
2
IBM has brought several product innovation and advancement with advent of WebSphere Portal in web-
based projects.
In particular, IBM has launched a JavaScript based portlet referred as IBM Script Portlet which would
facilitate easy portlet development in WebSphere Portal server.
Any novice web developer with minimal web development skills like HTML, JavaScript, and CSS can
effortlessly create and deploy their application in WebSphere Portal server.
We will be skipping the Script Portlet as there are many easy available material around that.
Those who want to take a look can open below link :
https://help.hcltechsw.com/digital-experience/8.5/script-portlet/script_portlet.html
Now let’s discuss how we can integrate Angular with Portal. Any JavaScript framework application can
be imported as a JSR-286 portlet and hosted on WebSphere Portal. Since the sample application is
platform agnostic, the same code can be run as a portlet or mobile app, allowing reuse over multiple
devices and platforms with minimal changes. Before that let’s go through the Angular and Portal
prerequisites.
Prerequisites & Key resources
3
1. Sample Angular application
2. API {can run on independent server }
3. Portal API wrapper { wrapper on main API }
4. Custom Portal Theme { Static & Dynamic theme}
5. StaticImageResource module { optional – Static custom theme can be extended but separate
module is recommended }
6. WebSphere Portal version 8.5, CF 09 or higher { earlier version will also support but not tested }
7. Knowledge of Angular framework & routing in angular.
8. Basic knowledge of Portal development & deployment
What is Angular
4
Angular is an application design framework and development platform for creating efficient and
sophisticated single-page apps
Angular is a platform and framework for building single-page client applications using HTML and
TypeScript. Angular is written in TypeScript. It implements core and optional functionality as a set of
TypeScript libraries that you import into your applications.
Workflow of Angular application
5
Portal key component
6
Integration flow
7
Steps to done at Angular End
8
Following steps needs to changed before integrating angular application in Portal
1. Make an entry in app-routing.module.ts for path :’**’
E;g { path: '**', redirectTo: 'entity-dashboard’ }
2. Make sure to use env specific URL for calling API service with constant name such that your generate
main file contains below syntax
this.envir=“PROD",this.apiUrl="https://x.x.x.x:yy/APIService/CustomAPIService"
3. Run ng build -prod to package and compress the application into the /dist folder.
4. Copy dist folder
Steps to done at Portal End
9
Following steps needs to changed before deploying Portlet Application in Portal
1. Create & Deploy an API wrapper as EAR (one time ), sample snippet to communicate with main API
2. Create a basic portlet
3. Create one folder as “resource” under webcontent and copy dist folder files under that
Steps to done at Portal End
10
4. Include angular application generated files using below snippet
<app-root class="edbg"></app-root>
<script src="<%=request.getContextPath()%>/resource/runtime-es2015.cdfb0ddb511f65fdc0a0.js"
type="module"></script>
<script src="<%=request.getContextPath()%>/resource/runtime-es5.cdfb0ddb511f65fdc0a0.js"
nomodule defer></script>
<script src="<%=request.getContextPath()%>/resource/polyfills-es5.9053a67df7ccf4d37537.js"
nomodule defer></script>
<script src="<%=request.getContextPath()%>/resource/polyfills-es2015.728c189c1d716d4d2016.js"
type="module"></script>
<script src="<%=request.getContextPath()%>/resource/main-es2015.c3bca1103db58cd8f684.js"
type="module"></script>
<script src="<%=request.getContextPath()%>/resource/main-es5.c3bca1103db58cd8f684.js"
nomodule defer></script>
Note : file references can be taken from index.html file generated in dist folder.
Steps to done at Portal End
11
5. Now find and replace the paths of below constants inside main.xxxxx.js { both files }
a. path of API call
b. Path of images if any
6. Export the war and your application is ready to be deployed in Portal with all Angular routing rules.
Advantages
12
. The Custom Application has the following advantages:
1. Users have more autonomy and less dependence on central IT for portlet development, which
decreases the time to market.
2. Users need less skill to be productive HCL Portal developers.
3. Users can render existing portlets, such as those developed with HCL Experience Factory or
IBM Rational Application Developer, on a page with portlets by using custom Application.
Thank You
13

More Related Content

What's hot (20)

PDF
Introducing BDD and TDD with Cucumber
Knoldus Inc.
 
PPTX
Microservices on Anypoint Platform
MuleSoft
 
PPTX
Cucumber BDD
Pravin Dsilva
 
PDF
A Git Workflow Model or Branching Strategy
Vivek Parihar
 
PDF
Yale Jenkins Show and Tell
E. Camden Fisher
 
PPTX
BDD WITH CUCUMBER AND JAVA
Srinivas Katakam
 
PDF
[AIS 2018] [Team Tools_Basic] Jira Software를 활용하여 생산성을 높이기 - 모우소프트
Atlassian 대한민국
 
PDF
[오픈소스컨설팅]Atlassian Confluence User Guide_Full
Ji-Woong Choi
 
ODP
BDD with Cucumber
Knoldus Inc.
 
PPTX
Jenkins
MohanRaviRohitth
 
PPTX
introduction to node.js
orkaplan
 
PPTX
Bitbucket
Okba Mahdjoub
 
PPTX
CICD Pipeline Using Github Actions
Kumar Shìvam
 
PDF
Vue, vue router, vuex
Samundra khatri
 
PPTX
Cross browser testing with browser stack
Denys Poloka
 
PPTX
Test automation using selenium
Cynoteck Technology Solutions Private Limited
 
Introducing BDD and TDD with Cucumber
Knoldus Inc.
 
Microservices on Anypoint Platform
MuleSoft
 
Cucumber BDD
Pravin Dsilva
 
A Git Workflow Model or Branching Strategy
Vivek Parihar
 
Yale Jenkins Show and Tell
E. Camden Fisher
 
BDD WITH CUCUMBER AND JAVA
Srinivas Katakam
 
[AIS 2018] [Team Tools_Basic] Jira Software를 활용하여 생산성을 높이기 - 모우소프트
Atlassian 대한민국
 
[오픈소스컨설팅]Atlassian Confluence User Guide_Full
Ji-Woong Choi
 
BDD with Cucumber
Knoldus Inc.
 
introduction to node.js
orkaplan
 
Bitbucket
Okba Mahdjoub
 
CICD Pipeline Using Github Actions
Kumar Shìvam
 
Vue, vue router, vuex
Samundra khatri
 
Cross browser testing with browser stack
Denys Poloka
 
Test automation using selenium
Cynoteck Technology Solutions Private Limited
 

Similar to Integrate any Angular Project into WebSphere Portal (20)

PPTX
The next step from Microsoft - Vnext (Srdjan Poznic)
Geekstone
 
PPTX
ASP.NEt MVC and Angular What a couple
Alexandre Marreiros
 
DOCX
Implementing a document viewer in ASP.NET Core 8.0
GleamTech Dev
 
PPTX
Intro to Google Cloud Platform Data Engineering.- Endpoints
Joseph Holbrook, Chief Learning Officer (CLO)
 
PPTX
Alfresco Development Framework Basic
Mario Romano
 
PDF
SAPTechED 2015 UX114 -Building custom SAP Fiori Apps Using SAP Web IDE
Markus Van Kempen
 
PDF
sveltekit-en.pdf
ssuser65180a
 
PPTX
ASP.NET Presentation
Rasel Khan
 
PDF
Bn1001 demo ppt advance dot net
conline training
 
PDF
Adding User Management to Node.js
Dev_Events
 
PPTX
Angular 2.0
Mallikarjuna G D
 
PDF
White Paper : ASP.NET Core AngularJs 2 and Prime
Hamida Rebai Trabelsi
 
PPTX
flask.pptx
asif290119
 
PPT
MyMobileWeb Certification Part I
crdlc
 
DOCX
Portfolio
Gun Hyuk Go
 
PPTX
An Overview of Angular 4
Cynoteck Technology Solutions Private Limited
 
PPTX
Introduction to google endpoints
Shinto Anto
 
PPTX
UQ21CA642BA1-Unit-3-WAF-Class18-Introduction to Angular Routing.pptx
TamalDey28
 
PDF
【BS1】What’s new in visual studio 2022 and c# 10
日本マイクロソフト株式会社
 
PPT
T2 Web Framework
Shinpei Ohtani
 
The next step from Microsoft - Vnext (Srdjan Poznic)
Geekstone
 
ASP.NEt MVC and Angular What a couple
Alexandre Marreiros
 
Implementing a document viewer in ASP.NET Core 8.0
GleamTech Dev
 
Intro to Google Cloud Platform Data Engineering.- Endpoints
Joseph Holbrook, Chief Learning Officer (CLO)
 
Alfresco Development Framework Basic
Mario Romano
 
SAPTechED 2015 UX114 -Building custom SAP Fiori Apps Using SAP Web IDE
Markus Van Kempen
 
sveltekit-en.pdf
ssuser65180a
 
ASP.NET Presentation
Rasel Khan
 
Bn1001 demo ppt advance dot net
conline training
 
Adding User Management to Node.js
Dev_Events
 
Angular 2.0
Mallikarjuna G D
 
White Paper : ASP.NET Core AngularJs 2 and Prime
Hamida Rebai Trabelsi
 
flask.pptx
asif290119
 
MyMobileWeb Certification Part I
crdlc
 
Portfolio
Gun Hyuk Go
 
Introduction to google endpoints
Shinto Anto
 
UQ21CA642BA1-Unit-3-WAF-Class18-Introduction to Angular Routing.pptx
TamalDey28
 
【BS1】What’s new in visual studio 2022 and c# 10
日本マイクロソフト株式会社
 
T2 Web Framework
Shinpei Ohtani
 
Ad

Recently uploaded (20)

PPTX
How to Set Up Tags in Odoo 18 - Odoo Slides
Celine George
 
PDF
Android Programming - Basics of Mobile App, App tools and Android Basics
Kavitha P.V
 
PPTX
care of patient with elimination needs.pptx
Rekhanjali Gupta
 
PDF
Biological Bilingual Glossary Hindi and English Medium
World of Wisdom
 
PDF
Governor Josh Stein letter to NC delegation of U.S. House
Mebane Rash
 
PDF
AI-Powered-Visual-Storytelling-for-Nonprofits.pdf
TechSoup
 
PDF
Council of Chalcedon Re-Examined
Smiling Lungs
 
PPTX
Introduction to Biochemistry & Cellular Foundations.pptx
marvinnbustamante1
 
PDF
Week 2 - Irish Natural Heritage Powerpoint.pdf
swainealan
 
PPTX
Nitrogen rule, ring rule, mc lafferty.pptx
nbisen2001
 
PPTX
Controller Request and Response in Odoo18
Celine George
 
PPTX
HUMAN RESOURCE MANAGEMENT: RECRUITMENT, SELECTION, PLACEMENT, DEPLOYMENT, TRA...
PRADEEP ABOTHU
 
PDF
Characteristics, Strengths and Weaknesses of Quantitative Research.pdf
Thelma Villaflores
 
PPTX
CATEGORIES OF NURSING PERSONNEL: HOSPITAL & COLLEGE
PRADEEP ABOTHU
 
PPTX
Post Dated Cheque(PDC) Management in Odoo 18
Celine George
 
PPTX
How to Send Email From Odoo 18 Website - Odoo Slides
Celine George
 
PPTX
grade 5 lesson matatag ENGLISH 5_Q1_PPT_WEEK4.pptx
SireQuinn
 
PPTX
DIGITAL CITIZENSHIP TOPIC TLE 8 MATATAG CURRICULUM
ROBERTAUGUSTINEFRANC
 
PDF
Exploring the Different Types of Experimental Research
Thelma Villaflores
 
PPTX
How to Configure Re-Ordering From Portal in Odoo 18 Website
Celine George
 
How to Set Up Tags in Odoo 18 - Odoo Slides
Celine George
 
Android Programming - Basics of Mobile App, App tools and Android Basics
Kavitha P.V
 
care of patient with elimination needs.pptx
Rekhanjali Gupta
 
Biological Bilingual Glossary Hindi and English Medium
World of Wisdom
 
Governor Josh Stein letter to NC delegation of U.S. House
Mebane Rash
 
AI-Powered-Visual-Storytelling-for-Nonprofits.pdf
TechSoup
 
Council of Chalcedon Re-Examined
Smiling Lungs
 
Introduction to Biochemistry & Cellular Foundations.pptx
marvinnbustamante1
 
Week 2 - Irish Natural Heritage Powerpoint.pdf
swainealan
 
Nitrogen rule, ring rule, mc lafferty.pptx
nbisen2001
 
Controller Request and Response in Odoo18
Celine George
 
HUMAN RESOURCE MANAGEMENT: RECRUITMENT, SELECTION, PLACEMENT, DEPLOYMENT, TRA...
PRADEEP ABOTHU
 
Characteristics, Strengths and Weaknesses of Quantitative Research.pdf
Thelma Villaflores
 
CATEGORIES OF NURSING PERSONNEL: HOSPITAL & COLLEGE
PRADEEP ABOTHU
 
Post Dated Cheque(PDC) Management in Odoo 18
Celine George
 
How to Send Email From Odoo 18 Website - Odoo Slides
Celine George
 
grade 5 lesson matatag ENGLISH 5_Q1_PPT_WEEK4.pptx
SireQuinn
 
DIGITAL CITIZENSHIP TOPIC TLE 8 MATATAG CURRICULUM
ROBERTAUGUSTINEFRANC
 
Exploring the Different Types of Experimental Research
Thelma Villaflores
 
How to Configure Re-Ordering From Portal in Odoo 18 Website
Celine George
 
Ad

Integrate any Angular Project into WebSphere Portal

  • 2. Overview 2 IBM has brought several product innovation and advancement with advent of WebSphere Portal in web- based projects. In particular, IBM has launched a JavaScript based portlet referred as IBM Script Portlet which would facilitate easy portlet development in WebSphere Portal server. Any novice web developer with minimal web development skills like HTML, JavaScript, and CSS can effortlessly create and deploy their application in WebSphere Portal server. We will be skipping the Script Portlet as there are many easy available material around that. Those who want to take a look can open below link : https://help.hcltechsw.com/digital-experience/8.5/script-portlet/script_portlet.html Now let’s discuss how we can integrate Angular with Portal. Any JavaScript framework application can be imported as a JSR-286 portlet and hosted on WebSphere Portal. Since the sample application is platform agnostic, the same code can be run as a portlet or mobile app, allowing reuse over multiple devices and platforms with minimal changes. Before that let’s go through the Angular and Portal prerequisites.
  • 3. Prerequisites & Key resources 3 1. Sample Angular application 2. API {can run on independent server } 3. Portal API wrapper { wrapper on main API } 4. Custom Portal Theme { Static & Dynamic theme} 5. StaticImageResource module { optional – Static custom theme can be extended but separate module is recommended } 6. WebSphere Portal version 8.5, CF 09 or higher { earlier version will also support but not tested } 7. Knowledge of Angular framework & routing in angular. 8. Basic knowledge of Portal development & deployment
  • 4. What is Angular 4 Angular is an application design framework and development platform for creating efficient and sophisticated single-page apps Angular is a platform and framework for building single-page client applications using HTML and TypeScript. Angular is written in TypeScript. It implements core and optional functionality as a set of TypeScript libraries that you import into your applications.
  • 5. Workflow of Angular application 5
  • 8. Steps to done at Angular End 8 Following steps needs to changed before integrating angular application in Portal 1. Make an entry in app-routing.module.ts for path :’**’ E;g { path: '**', redirectTo: 'entity-dashboard’ } 2. Make sure to use env specific URL for calling API service with constant name such that your generate main file contains below syntax this.envir=“PROD",this.apiUrl="https://x.x.x.x:yy/APIService/CustomAPIService" 3. Run ng build -prod to package and compress the application into the /dist folder. 4. Copy dist folder
  • 9. Steps to done at Portal End 9 Following steps needs to changed before deploying Portlet Application in Portal 1. Create & Deploy an API wrapper as EAR (one time ), sample snippet to communicate with main API 2. Create a basic portlet 3. Create one folder as “resource” under webcontent and copy dist folder files under that
  • 10. Steps to done at Portal End 10 4. Include angular application generated files using below snippet <app-root class="edbg"></app-root> <script src="<%=request.getContextPath()%>/resource/runtime-es2015.cdfb0ddb511f65fdc0a0.js" type="module"></script> <script src="<%=request.getContextPath()%>/resource/runtime-es5.cdfb0ddb511f65fdc0a0.js" nomodule defer></script> <script src="<%=request.getContextPath()%>/resource/polyfills-es5.9053a67df7ccf4d37537.js" nomodule defer></script> <script src="<%=request.getContextPath()%>/resource/polyfills-es2015.728c189c1d716d4d2016.js" type="module"></script> <script src="<%=request.getContextPath()%>/resource/main-es2015.c3bca1103db58cd8f684.js" type="module"></script> <script src="<%=request.getContextPath()%>/resource/main-es5.c3bca1103db58cd8f684.js" nomodule defer></script> Note : file references can be taken from index.html file generated in dist folder.
  • 11. Steps to done at Portal End 11 5. Now find and replace the paths of below constants inside main.xxxxx.js { both files } a. path of API call b. Path of images if any 6. Export the war and your application is ready to be deployed in Portal with all Angular routing rules.
  • 12. Advantages 12 . The Custom Application has the following advantages: 1. Users have more autonomy and less dependence on central IT for portlet development, which decreases the time to market. 2. Users need less skill to be productive HCL Portal developers. 3. Users can render existing portlets, such as those developed with HCL Experience Factory or IBM Rational Application Developer, on a page with portlets by using custom Application.