Modernising a Notes
app with AngularJS
/Me
• Long-time Domino/ XPage/ web developer
• Freelance web developer
• Co-owner of Viaware
• Fan of everything web dev
• Open source dev, blogger (http://linqed.eu)
• IBM Champion 2011-2015
Project Background - business
• Norwegian manufacturing company
• 15+ year old IBM Notes client application
• Business critical
• Create offers
• Manage projects
• Technical specifications
• After sales
Project Background - technical
• Running on Notes 9 (client only)
• E-mail integration
• modified mail file
• Document generation
• Integrations with ERP system
• Infor M3
Business Case (1/2)
• Reduce dependency on Notes client/ Notes mail
• Reduce dependency on 3rd party tools
• Keep IBM Domino as data store and application server
• Build on existing data
• Clean-up/ improve data model
Business Case (2/2)
• Recently decided to use Infor Document Management (IDM)
• Seamless integration with Infor M3 and IDM
• Modern (API based) architecture
• Modern UI / UX
• Prepare for use on mobile devices
• Test project for other applications
Project Setup
• Working remotely, developing locally
• Source control is an absolute must
• For NSF’s as well as Angular app
• …and documentation/ guidelines/ configuration
• Divide work: backend vs frontend
Architecture
Windows server
HTML

CSS

JS
REST API
IDM
JDBC

M3 API
M3
browser
Web server

Reverse proxy

SSL
AD
NTLM
LDAP
NTLM
The Backend (1/2)
• REST API built in Java
• Servlets running in a NSF on Domino
• https://edm00se.io/servlet-series/
• ExtLib REST Controls for views
• org.openntf.domino API
• Apache POI for spreadsheet generation
• xDocReport for document generation
• DOCX and PDF
The Backend (2/2)
• NGINX
• Webserver for the AngularJS app
• Proxy for Domino, Connections and IDM
• SSL
• LDAP connection to Active Directory
• SSO with Domino & Infor
• Other 3rd party libraries
• GSON, Joda
The Frontend (1/2)
• All JavaScript
• AngularJS v1.5+
• Because v2 wasn’t ready yet
• UI theme from wrapbootstrap.com
• Bootstrap, Font Awesome
• Angular app also used as UI for IDM and
Connections
The Frontend (2/2)
• Various Angular projects
• Angular UI
• AngularJS-Toaster
• textAngular
• ng-file-upload
• lodash
• angular-formly
• cleave.js
Lodash
var numDays = [16, 30, 52];
var total = 0;

for (var i=0; i<numDays.length; i++) {

total += numDays[i];

}
var total = _.sumBy(numDays, 

function(d) { return parseInt(d, 10); } );
_.indexOf( numDays, 30); //1
var users = [ 

{ name : ‘Mark’, id : 1}, 

{ name : ‘Betty’, id : 2 } 

];
var betty = _.find(users, { id : 2 } );



var sortedByName = _.sortBy(

users, 

function (i) { return i.name; }

);
• Library of JavaScript functions
Angular-Formly
• Information in REST API drives the
frontend
• Create forms based on server-side
configuration
Tools
• Visual Studio Code
• Bower
• Grunt
• NPM
• IBM Domino Designer
Challenges (some of them…) & takeaways
• Complex setup, complex app
• Maintaining all dependencies:
• Stick with versions that work
• Infor IDM integration
• Java version of the API
• Use source control.
• Not a happy couple with Domino; Swiper helps
• Learn the tooling
• Try out to see what works
IBM Domino Modernizing apps with Angularjs

More Related Content

PPTX
The future of web development write once, run everywhere with angular.js and ...
PPTX
Office script labs
PPTX
Angular.js in XPages
PPTX
Connect 2014 - EXTJS in XPages: Modernizing IBM Notes Views Without Sacrifici...
PPTX
Iconus 2016
PDF
Escaping the yellow bubble - rewriting Domino using MongoDb and Angular
PPTX
ASP.NET MVC 4 Overview
PPTX
ASP.NET MVC 4
The future of web development write once, run everywhere with angular.js and ...
Office script labs
Angular.js in XPages
Connect 2014 - EXTJS in XPages: Modernizing IBM Notes Views Without Sacrifici...
Iconus 2016
Escaping the yellow bubble - rewriting Domino using MongoDb and Angular
ASP.NET MVC 4 Overview
ASP.NET MVC 4

What's hot (20)

PDF
ICON UK 2016: Modernizing an IBM Notes applicaton using with AngularJS
PPTX
Testing your Single Page Application
PPTX
A Gentle Introduction to Blazor
PPTX
ASP.NET 5 Overview
PPTX
Single Page Application
PPTX
Single page application and Framework
PDF
Building an E-commerce website in MEAN stack
PPT
Develop a Quick and Dirty Web interface to your database: for the DBA and oth...
PDF
Microsoft, Web Standards and OSS
PDF
Moving from PHP to a nodejs full stack CMS
PPTX
Azure Serverless Conf
PDF
Free Online SharePoint Framework Webinar
PDF
Introduction To Single Page Application
PDF
The Dark Side of Single Page Applications
PPTX
Codegen2021 blazor mobile
PPTX
Single page App
PDF
Keystone.js 101
PPTX
Host, deploy & scale Blazor Server Apps
PDF
Scaling Wordpress
PPTX
MEAN Stack - Introduction & Advantages - Why should you switch to MEAN stack ...
ICON UK 2016: Modernizing an IBM Notes applicaton using with AngularJS
Testing your Single Page Application
A Gentle Introduction to Blazor
ASP.NET 5 Overview
Single Page Application
Single page application and Framework
Building an E-commerce website in MEAN stack
Develop a Quick and Dirty Web interface to your database: for the DBA and oth...
Microsoft, Web Standards and OSS
Moving from PHP to a nodejs full stack CMS
Azure Serverless Conf
Free Online SharePoint Framework Webinar
Introduction To Single Page Application
The Dark Side of Single Page Applications
Codegen2021 blazor mobile
Single page App
Keystone.js 101
Host, deploy & scale Blazor Server Apps
Scaling Wordpress
MEAN Stack - Introduction & Advantages - Why should you switch to MEAN stack ...
Ad

Similar to IBM Domino Modernizing apps with Angularjs (20)

PDF
Enterprise Griffon
PPTX
Web app job and functions - TUGAIT 2017
PDF
Modernising a Notes app with AngularJS
PDF
Convert your Full Trust Solutions to the SharePoint Framework (SPFx)
PDF
DocDokuPLM presentation - OW2Con 2015 Community Award winner
PDF
DocDoku: Using web technologies in a desktop application. OW2con'15, November...
 
PDF
Griffon for the Enterprise
PDF
JIO and WebViewers: interoperability for Javascript and Web Applications
PDF
Intro to the SharePoint Framework Philly Code Camp Oct 2016
PDF
Continuing with the SharePoint Framework
PPTX
Android quick talk
PPTX
What is cool with Domino V10, Proton and Node.JS, and why would I use it in ...
PDF
AD114 -- Beyond the Mobile Browser? Building Rich Mobile Applications for IBM...
PPTX
INF104 - HCL Domino AppDev Pack – The Future of Domino App Dev Nobody Knows A...
ODP
A powerful web application server (intravision IBM Connect 2013 Update) Febru...
PDF
Philipe Riand - Building Social Applications using the Social Business Toolki...
PDF
Serverless computing with Google Cloud
PPT
Introducción y comandos en NodeJS slodte
PPT
Introduction_to_Node_js caracteristicas ppales
PDF
AD109 Navigating the Jungle of Modern Web Development
Enterprise Griffon
Web app job and functions - TUGAIT 2017
Modernising a Notes app with AngularJS
Convert your Full Trust Solutions to the SharePoint Framework (SPFx)
DocDokuPLM presentation - OW2Con 2015 Community Award winner
DocDoku: Using web technologies in a desktop application. OW2con'15, November...
 
Griffon for the Enterprise
JIO and WebViewers: interoperability for Javascript and Web Applications
Intro to the SharePoint Framework Philly Code Camp Oct 2016
Continuing with the SharePoint Framework
Android quick talk
What is cool with Domino V10, Proton and Node.JS, and why would I use it in ...
AD114 -- Beyond the Mobile Browser? Building Rich Mobile Applications for IBM...
INF104 - HCL Domino AppDev Pack – The Future of Domino App Dev Nobody Knows A...
A powerful web application server (intravision IBM Connect 2013 Update) Febru...
Philipe Riand - Building Social Applications using the Social Business Toolki...
Serverless computing with Google Cloud
Introducción y comandos en NodeJS slodte
Introduction_to_Node_js caracteristicas ppales
AD109 Navigating the Jungle of Modern Web Development
Ad

More from Dominopoint - Italian Lotus User Group (20)

PPTX
TOTP - Time-Based One Time password in Domino
PDF
Domino Backup V12 - Un nuovo Task
PDF
Mail Client from Traveler to Verse On-Premises
PDF
IBM Worspace: Towards a culture of conversations
PPTX
Microsoft Outlook for Domino (IMSMO)
PDF
Riding the Enterprise Integration train
PPTX
Ortocloud l'applicazione per fare orto su Bluemix
PPTX
Meetit16 KeyNote di Apertura
PDF
IBM Connections How to use existing data to increase adoption success with IB...
PDF
IBM Connections 10 things every user should know
PDF
IBM Verse New Way To Work
PPT
PPT
Notes and Domino Roadmap
PDF
La Collaborazione Europea
PPT
Dominopoint meet the experts 2015 - XPages
PDF
Bluemix Cloud Platform - dominopoint
TOTP - Time-Based One Time password in Domino
Domino Backup V12 - Un nuovo Task
Mail Client from Traveler to Verse On-Premises
IBM Worspace: Towards a culture of conversations
Microsoft Outlook for Domino (IMSMO)
Riding the Enterprise Integration train
Ortocloud l'applicazione per fare orto su Bluemix
Meetit16 KeyNote di Apertura
IBM Connections How to use existing data to increase adoption success with IB...
IBM Connections 10 things every user should know
IBM Verse New Way To Work
Notes and Domino Roadmap
La Collaborazione Europea
Dominopoint meet the experts 2015 - XPages
Bluemix Cloud Platform - dominopoint

Recently uploaded (20)

PDF
LMS bot: enhanced learning management systems for improved student learning e...
PDF
5-Ways-AI-is-Revolutionizing-Telecom-Quality-Engineering.pdf
PPTX
AI-driven Assurance Across Your End-to-end Network With ThousandEyes
PPTX
SGT Report The Beast Plan and Cyberphysical Systems of Control
PDF
zbrain.ai-Scope Key Metrics Configuration and Best Practices.pdf
PDF
EIS-Webinar-Regulated-Industries-2025-08.pdf
PDF
Decision Optimization - From Theory to Practice
PDF
Transform-Quality-Engineering-with-AI-A-60-Day-Blueprint-for-Digital-Success.pdf
PDF
Build Real-Time ML Apps with Python, Feast & NoSQL
PDF
4 layer Arch & Reference Arch of IoT.pdf
PDF
Introduction to MCP and A2A Protocols: Enabling Agent Communication
PDF
AI.gov: A Trojan Horse in the Age of Artificial Intelligence
PDF
SaaS reusability assessment using machine learning techniques
PPTX
Internet of Everything -Basic concepts details
PDF
Human Computer Interaction Miterm Lesson
PDF
Transform-Your-Supply-Chain-with-AI-Driven-Quality-Engineering.pdf
PDF
The-Future-of-Automotive-Quality-is-Here-AI-Driven-Engineering.pdf
PDF
NewMind AI Weekly Chronicles – August ’25 Week IV
PDF
Data Virtualization in Action: Scaling APIs and Apps with FME
PDF
substrate PowerPoint Presentation basic one
LMS bot: enhanced learning management systems for improved student learning e...
5-Ways-AI-is-Revolutionizing-Telecom-Quality-Engineering.pdf
AI-driven Assurance Across Your End-to-end Network With ThousandEyes
SGT Report The Beast Plan and Cyberphysical Systems of Control
zbrain.ai-Scope Key Metrics Configuration and Best Practices.pdf
EIS-Webinar-Regulated-Industries-2025-08.pdf
Decision Optimization - From Theory to Practice
Transform-Quality-Engineering-with-AI-A-60-Day-Blueprint-for-Digital-Success.pdf
Build Real-Time ML Apps with Python, Feast & NoSQL
4 layer Arch & Reference Arch of IoT.pdf
Introduction to MCP and A2A Protocols: Enabling Agent Communication
AI.gov: A Trojan Horse in the Age of Artificial Intelligence
SaaS reusability assessment using machine learning techniques
Internet of Everything -Basic concepts details
Human Computer Interaction Miterm Lesson
Transform-Your-Supply-Chain-with-AI-Driven-Quality-Engineering.pdf
The-Future-of-Automotive-Quality-is-Here-AI-Driven-Engineering.pdf
NewMind AI Weekly Chronicles – August ’25 Week IV
Data Virtualization in Action: Scaling APIs and Apps with FME
substrate PowerPoint Presentation basic one

IBM Domino Modernizing apps with Angularjs

  • 1. Modernising a Notes app with AngularJS
  • 2. /Me • Long-time Domino/ XPage/ web developer • Freelance web developer • Co-owner of Viaware • Fan of everything web dev • Open source dev, blogger (http://linqed.eu) • IBM Champion 2011-2015
  • 3. Project Background - business • Norwegian manufacturing company • 15+ year old IBM Notes client application • Business critical • Create offers • Manage projects • Technical specifications • After sales
  • 4. Project Background - technical • Running on Notes 9 (client only) • E-mail integration • modified mail file • Document generation • Integrations with ERP system • Infor M3
  • 5. Business Case (1/2) • Reduce dependency on Notes client/ Notes mail • Reduce dependency on 3rd party tools • Keep IBM Domino as data store and application server • Build on existing data • Clean-up/ improve data model
  • 6. Business Case (2/2) • Recently decided to use Infor Document Management (IDM) • Seamless integration with Infor M3 and IDM • Modern (API based) architecture • Modern UI / UX • Prepare for use on mobile devices • Test project for other applications
  • 7. Project Setup • Working remotely, developing locally • Source control is an absolute must • For NSF’s as well as Angular app • …and documentation/ guidelines/ configuration • Divide work: backend vs frontend
  • 8. Architecture Windows server HTML
 CSS
 JS REST API IDM JDBC
 M3 API M3 browser Web server
 Reverse proxy
 SSL AD NTLM LDAP NTLM
  • 9. The Backend (1/2) • REST API built in Java • Servlets running in a NSF on Domino • https://edm00se.io/servlet-series/ • ExtLib REST Controls for views • org.openntf.domino API • Apache POI for spreadsheet generation • xDocReport for document generation • DOCX and PDF
  • 10. The Backend (2/2) • NGINX • Webserver for the AngularJS app • Proxy for Domino, Connections and IDM • SSL • LDAP connection to Active Directory • SSO with Domino & Infor • Other 3rd party libraries • GSON, Joda
  • 11. The Frontend (1/2) • All JavaScript • AngularJS v1.5+ • Because v2 wasn’t ready yet • UI theme from wrapbootstrap.com • Bootstrap, Font Awesome • Angular app also used as UI for IDM and Connections
  • 12. The Frontend (2/2) • Various Angular projects • Angular UI • AngularJS-Toaster • textAngular • ng-file-upload • lodash • angular-formly • cleave.js
  • 13. Lodash var numDays = [16, 30, 52]; var total = 0;
 for (var i=0; i<numDays.length; i++) {
 total += numDays[i];
 } var total = _.sumBy(numDays, 
 function(d) { return parseInt(d, 10); } ); _.indexOf( numDays, 30); //1 var users = [ 
 { name : ‘Mark’, id : 1}, 
 { name : ‘Betty’, id : 2 } 
 ]; var betty = _.find(users, { id : 2 } );
 
 var sortedByName = _.sortBy(
 users, 
 function (i) { return i.name; }
 ); • Library of JavaScript functions
  • 14. Angular-Formly • Information in REST API drives the frontend • Create forms based on server-side configuration
  • 15. Tools • Visual Studio Code • Bower • Grunt • NPM • IBM Domino Designer
  • 16. Challenges (some of them…) & takeaways • Complex setup, complex app • Maintaining all dependencies: • Stick with versions that work • Infor IDM integration • Java version of the API • Use source control. • Not a happy couple with Domino; Swiper helps • Learn the tooling • Try out to see what works