SlideShare a Scribd company logo
1 of 8
Custom UI5 Controls
Wrapping 3rd-Party Widgets*)
or: How to handle externally-managed HTML inside UI5 controls?
UI5ers live – April 2024
Andreas Kunz, SAP SE
*) like charts, maps, 3D viewers, editors, …
Any Web Widget Be Like…
„…gimme DOM element, I do magic!“
UI5 Rendering
apiVersion 1:
• rm.write("<someTag>bla</someTag>")
• Entire control HTML is removed and re-created from this string
apiVersion 2:
• rm.openStart("someTag") ...
• Control HTML is re-used and patched, but attributes/children added later are removed
apiVersion 4:
• Same, but different, but same: like apiVersion 2, but rendering needs to be independent from
parent control and non-owned HTML
• Control HTML remains untouched even when parent is re-rendered!
• …as long as your control handles all property/aggregation changes without invalidation
• AND parent controls have apiVersion 2+ (granted with UI5 2.x)
• AND any contained child controls have apiVersion 4
• AND any onBefore/AfterRendering event delegates added by application code sets the canSkipRendering flag
• AND maybe some other conditions
BAM!
BAM!
BAM!
sap.ui.core.HTML to the Rescue
Content moved away during rendering and restored afterwards:
Basic usage: https://jsbin.com/ragukag/edit?html,output
Hint: do NOT set different IDs for control and content element! (only one)
Example
OpenStreetMap control using https://leafletjs.com
https://jsbin.com/fibusug/edit?html,output
(based on a sample shown at the very first UI5con)
1
2
3
4
5
What happens exactly?
a) If parent HBox is re-rendered: control DOM is not touched at all, thanks to
apiVersion:4.
With apiVersion:2 or 1, the control is re-rendered and the HTML control does its „preserve“ magic.
b) If „zoom“ property is changed: setZoom(…) prevents invalidation and
updates the map directly – DOM is not touched otherwise.
c) If „latitude“ or “longitude“ property is changed: the control is
invalidated and re-rendered and the HTML control does its „preserve“
magic.
Thank you!
Andreas Kunz

More Related Content

Similar to UI5ers live - Custom Controls wrapping 3rd-party libs.pptx

Similar to UI5ers live - Custom Controls wrapping 3rd-party libs.pptx (20)

44c
44c44c
44c
 
IBM Lotusphere 2011 AD306 - IBM Lotus Sametime Proxy: A Collaborative Recipe...
IBM Lotusphere 2011 AD306 - IBM Lotus Sametime Proxy:  A Collaborative Recipe...IBM Lotusphere 2011 AD306 - IBM Lotus Sametime Proxy:  A Collaborative Recipe...
IBM Lotusphere 2011 AD306 - IBM Lotus Sametime Proxy: A Collaborative Recipe...
 
IBM i Encryption Made Easy
IBM i Encryption Made EasyIBM i Encryption Made Easy
IBM i Encryption Made Easy
 
Ivan Danilov «Desktop Application Automation: .NET Developer’s Perspective»
Ivan Danilov «Desktop Application Automation: .NET Developer’s Perspective»Ivan Danilov «Desktop Application Automation: .NET Developer’s Perspective»
Ivan Danilov «Desktop Application Automation: .NET Developer’s Perspective»
 
Victor Toal - IBM Connections: So you have it installed – now what?
Victor Toal - IBM Connections: So you have it installed – now what?Victor Toal - IBM Connections: So you have it installed – now what?
Victor Toal - IBM Connections: So you have it installed – now what?
 
An Introduction to the Model-View-Controller Pattern
An Introduction to the Model-View-Controller PatternAn Introduction to the Model-View-Controller Pattern
An Introduction to the Model-View-Controller Pattern
 
Seal, Personalize and Automate your WVD Images using a validated vendor best ...
Seal, Personalize and Automate your WVD Images using a validated vendor best ...Seal, Personalize and Automate your WVD Images using a validated vendor best ...
Seal, Personalize and Automate your WVD Images using a validated vendor best ...
 
Building APIs with Mule and Spring Boot
Building APIs with Mule and Spring BootBuilding APIs with Mule and Spring Boot
Building APIs with Mule and Spring Boot
 
Launching Activiti v6 (Activiti Community Day Paris 2015)
Launching Activiti v6 (Activiti Community Day Paris 2015) Launching Activiti v6 (Activiti Community Day Paris 2015)
Launching Activiti v6 (Activiti Community Day Paris 2015)
 
IBM Lotus Notes Client Management Done Right – Beginning to End
IBM Lotus Notes Client Management Done Right – Beginning to EndIBM Lotus Notes Client Management Done Right – Beginning to End
IBM Lotus Notes Client Management Done Right – Beginning to End
 
Radu vunvulea building and testing windows 8 metro style applications using ...
Radu vunvulea  building and testing windows 8 metro style applications using ...Radu vunvulea  building and testing windows 8 metro style applications using ...
Radu vunvulea building and testing windows 8 metro style applications using ...
 
Web Components, O Drupal está preparado?
Web Components, O Drupal está preparado?Web Components, O Drupal está preparado?
Web Components, O Drupal está preparado?
 
Drupal 8 deeper dive
Drupal 8 deeper diveDrupal 8 deeper dive
Drupal 8 deeper dive
 
Create your own control - UI5Con
Create your own control - UI5ConCreate your own control - UI5Con
Create your own control - UI5Con
 
West Coast DevCon 2014: Engine Overview - A Programmers Glimpse at UE4
West Coast DevCon 2014: Engine Overview - A Programmers Glimpse at UE4West Coast DevCon 2014: Engine Overview - A Programmers Glimpse at UE4
West Coast DevCon 2014: Engine Overview - A Programmers Glimpse at UE4
 
3 Review
3 Review3 Review
3 Review
 
Getting started with Xamarin forms
Getting started with Xamarin formsGetting started with Xamarin forms
Getting started with Xamarin forms
 
Symfony2 for legacy app rejuvenation: the eZ Publish case study
Symfony2 for legacy app rejuvenation: the eZ Publish case studySymfony2 for legacy app rejuvenation: the eZ Publish case study
Symfony2 for legacy app rejuvenation: the eZ Publish case study
 
TomaszPoszytek_ALM-Fundamentals_SS2023.pdf
TomaszPoszytek_ALM-Fundamentals_SS2023.pdfTomaszPoszytek_ALM-Fundamentals_SS2023.pdf
TomaszPoszytek_ALM-Fundamentals_SS2023.pdf
 
AWS re:Invent 2013 - MBL303 Gaming Ops - Running High-performance Ops for Mob...
AWS re:Invent 2013 - MBL303 Gaming Ops - Running High-performance Ops for Mob...AWS re:Invent 2013 - MBL303 Gaming Ops - Running High-performance Ops for Mob...
AWS re:Invent 2013 - MBL303 Gaming Ops - Running High-performance Ops for Mob...
 

Recently uploaded

Team Transformation Tactics for Holistic Testing and Quality (NewCrafts Paris...
Team Transformation Tactics for Holistic Testing and Quality (NewCrafts Paris...Team Transformation Tactics for Holistic Testing and Quality (NewCrafts Paris...
Team Transformation Tactics for Holistic Testing and Quality (NewCrafts Paris...
Lisi Hocke
 

Recently uploaded (20)

Salesforce Introduced Zero Copy Partner Network to Simplify the Process of In...
Salesforce Introduced Zero Copy Partner Network to Simplify the Process of In...Salesforce Introduced Zero Copy Partner Network to Simplify the Process of In...
Salesforce Introduced Zero Copy Partner Network to Simplify the Process of In...
 
Team Transformation Tactics for Holistic Testing and Quality (NewCrafts Paris...
Team Transformation Tactics for Holistic Testing and Quality (NewCrafts Paris...Team Transformation Tactics for Holistic Testing and Quality (NewCrafts Paris...
Team Transformation Tactics for Holistic Testing and Quality (NewCrafts Paris...
 
Anypoint Code Builder - Munich MuleSoft Meetup - 16th May 2024
Anypoint Code Builder - Munich MuleSoft Meetup - 16th May 2024Anypoint Code Builder - Munich MuleSoft Meetup - 16th May 2024
Anypoint Code Builder - Munich MuleSoft Meetup - 16th May 2024
 
OpenChain Webinar: AboutCode and Beyond - End-to-End SCA
OpenChain Webinar: AboutCode and Beyond - End-to-End SCAOpenChain Webinar: AboutCode and Beyond - End-to-End SCA
OpenChain Webinar: AboutCode and Beyond - End-to-End SCA
 
Microsoft365_Dev_Security_2024_05_16.pdf
Microsoft365_Dev_Security_2024_05_16.pdfMicrosoft365_Dev_Security_2024_05_16.pdf
Microsoft365_Dev_Security_2024_05_16.pdf
 
Abortion Clinic In Springs ](+27832195400*)[ 🏥 Safe Abortion Pills in Springs...
Abortion Clinic In Springs ](+27832195400*)[ 🏥 Safe Abortion Pills in Springs...Abortion Clinic In Springs ](+27832195400*)[ 🏥 Safe Abortion Pills in Springs...
Abortion Clinic In Springs ](+27832195400*)[ 🏥 Safe Abortion Pills in Springs...
 
OpenChain @ LF Japan Executive Briefing - May 2024
OpenChain @ LF Japan Executive Briefing - May 2024OpenChain @ LF Japan Executive Briefing - May 2024
OpenChain @ LF Japan Executive Briefing - May 2024
 
^Clinic ^%[+27788225528*Abortion Pills For Sale In witbank
^Clinic ^%[+27788225528*Abortion Pills For Sale In witbank^Clinic ^%[+27788225528*Abortion Pills For Sale In witbank
^Clinic ^%[+27788225528*Abortion Pills For Sale In witbank
 
A Deep Dive into Secure Product Development Frameworks.pdf
A Deep Dive into Secure Product Development Frameworks.pdfA Deep Dive into Secure Product Development Frameworks.pdf
A Deep Dive into Secure Product Development Frameworks.pdf
 
Abortion Clinic Pretoria ](+27832195400*)[ Abortion Clinic Near Me ● Abortion...
Abortion Clinic Pretoria ](+27832195400*)[ Abortion Clinic Near Me ● Abortion...Abortion Clinic Pretoria ](+27832195400*)[ Abortion Clinic Near Me ● Abortion...
Abortion Clinic Pretoria ](+27832195400*)[ Abortion Clinic Near Me ● Abortion...
 
Prompt Engineering - an Art, a Science, or your next Job Title?
Prompt Engineering - an Art, a Science, or your next Job Title?Prompt Engineering - an Art, a Science, or your next Job Title?
Prompt Engineering - an Art, a Science, or your next Job Title?
 
Entropy, Software Quality, and Innovation (presented at Princeton Plasma Phys...
Entropy, Software Quality, and Innovation (presented at Princeton Plasma Phys...Entropy, Software Quality, and Innovation (presented at Princeton Plasma Phys...
Entropy, Software Quality, and Innovation (presented at Princeton Plasma Phys...
 
Food Delivery Business App Development Guide 2024
Food Delivery Business App Development Guide 2024Food Delivery Business App Development Guide 2024
Food Delivery Business App Development Guide 2024
 
COMPUTER AND ITS COMPONENTS PPT.by naitik sharma Class 9th A mittal internati...
COMPUTER AND ITS COMPONENTS PPT.by naitik sharma Class 9th A mittal internati...COMPUTER AND ITS COMPONENTS PPT.by naitik sharma Class 9th A mittal internati...
COMPUTER AND ITS COMPONENTS PPT.by naitik sharma Class 9th A mittal internati...
 
Weeding your micro service landscape.pdf
Weeding your micro service landscape.pdfWeeding your micro service landscape.pdf
Weeding your micro service landscape.pdf
 
Auto Affiliate AI Earns First Commission in 3 Hours..pdf
Auto Affiliate  AI Earns First Commission in 3 Hours..pdfAuto Affiliate  AI Earns First Commission in 3 Hours..pdf
Auto Affiliate AI Earns First Commission in 3 Hours..pdf
 
Lessons Learned from Building a Serverless Notifications System.pdf
Lessons Learned from Building a Serverless Notifications System.pdfLessons Learned from Building a Serverless Notifications System.pdf
Lessons Learned from Building a Serverless Notifications System.pdf
 
The Strategic Impact of Buying vs Building in Test Automation
The Strategic Impact of Buying vs Building in Test AutomationThe Strategic Impact of Buying vs Building in Test Automation
The Strategic Impact of Buying vs Building in Test Automation
 
Abortion Clinic In Polokwane ](+27832195400*)[ 🏥 Safe Abortion Pills in Polok...
Abortion Clinic In Polokwane ](+27832195400*)[ 🏥 Safe Abortion Pills in Polok...Abortion Clinic In Polokwane ](+27832195400*)[ 🏥 Safe Abortion Pills in Polok...
Abortion Clinic In Polokwane ](+27832195400*)[ 🏥 Safe Abortion Pills in Polok...
 
^Clinic ^%[+27788225528*Abortion Pills For Sale In birch acres
^Clinic ^%[+27788225528*Abortion Pills For Sale In birch acres^Clinic ^%[+27788225528*Abortion Pills For Sale In birch acres
^Clinic ^%[+27788225528*Abortion Pills For Sale In birch acres
 

UI5ers live - Custom Controls wrapping 3rd-party libs.pptx

  • 1. Custom UI5 Controls Wrapping 3rd-Party Widgets*) or: How to handle externally-managed HTML inside UI5 controls? UI5ers live – April 2024 Andreas Kunz, SAP SE *) like charts, maps, 3D viewers, editors, …
  • 2. Any Web Widget Be Like… „…gimme DOM element, I do magic!“
  • 3. UI5 Rendering apiVersion 1: • rm.write("<someTag>bla</someTag>") • Entire control HTML is removed and re-created from this string apiVersion 2: • rm.openStart("someTag") ... • Control HTML is re-used and patched, but attributes/children added later are removed apiVersion 4: • Same, but different, but same: like apiVersion 2, but rendering needs to be independent from parent control and non-owned HTML • Control HTML remains untouched even when parent is re-rendered! • …as long as your control handles all property/aggregation changes without invalidation • AND parent controls have apiVersion 2+ (granted with UI5 2.x) • AND any contained child controls have apiVersion 4 • AND any onBefore/AfterRendering event delegates added by application code sets the canSkipRendering flag • AND maybe some other conditions BAM! BAM! BAM!
  • 4. sap.ui.core.HTML to the Rescue Content moved away during rendering and restored afterwards: Basic usage: https://jsbin.com/ragukag/edit?html,output Hint: do NOT set different IDs for control and content element! (only one)
  • 5. Example OpenStreetMap control using https://leafletjs.com https://jsbin.com/fibusug/edit?html,output (based on a sample shown at the very first UI5con)
  • 7. What happens exactly? a) If parent HBox is re-rendered: control DOM is not touched at all, thanks to apiVersion:4. With apiVersion:2 or 1, the control is re-rendered and the HTML control does its „preserve“ magic. b) If „zoom“ property is changed: setZoom(…) prevents invalidation and updates the map directly – DOM is not touched otherwise. c) If „latitude“ or “longitude“ property is changed: the control is invalidated and re-rendered and the HTML control does its „preserve“ magic.

Editor's Notes

  1. https://jsbin.com/fibusug/edit?html,output (full sample) Simple: https://jsbin.com/bizahik/edit?html,output