Routing Concept in SAPUI5 Development: A Primer

Routing Concept in SAPUI5 Development: A Primer

Published: 19/October/2016

Reading time: 12 mins

The use of routing allows navigation through application views via hashtag-based patterns. This article covers the main steps required to implement routing in an SAPUI5 application and the important classes and methods involved in making a full-fledged example, using a product list. Key Concept Hashtag-based routing and navigation let you reference application views via a…

Membership Required

You must be a member to access this content.

View Membership Levels

Explore related questions

Already a member? Log in here

- SAP UI5
Creating and Modifying a SAPUI5 Custom Control

Published: 18/January/2021

Reading time: 8 mins
- SAP UI5
Technical Considerations for Executing an SAPUI5 Project

Published: 05/April/2016

Reading time: 22 mins
- SAP UI5
- Premium
SAPUI5 Nested Components
- SAP UI5
- Premium
Masterclass: Cutting Edge Development and DevOps with UI5

img:is([sizes="auto" i],[sizes^="auto," i]){contain-intrinsic-size:3000px 1500px;}img.wp-smiley,img.emoji{display:inline !important;border:none !important;box-shadow:none !important;height:1em !important;width:1em !important;margin:0 .07em !important;vertical-align:-.1em !important;background:none !important;padding:0 !important;}.wp-block-button__link{color:#fff;background-color:#32373c;border-radius:9999px;box-shadow:none;text-decoration:none;padding:calc(.667em + 2px) calc(1.333em + 2px);font-size:1.125em;}.wp-block-file__button{background:#32373c;color:#fff;text-decoration:none;}:root{--wp--preset--aspect-ratio--square:1;--wp--preset--aspect-ratio--4-3:4/3;--wp--preset--aspect-ratio--3-4:3/4;--wp--preset--aspect-ratio--3-2:3/2;--wp--preset--aspect-ratio--2-3:2/3;--wp--preset--aspect-ratio--16-9:16/9;--wp--preset--aspect-ratio--9-16:9/16;--wp--preset--color--black:#000;--wp--preset--color--cyan-bluish-gray:#abb8c3;--wp--preset--color--white:#fff;--wp--preset--color--pale-pink:#f78da7;--wp--preset--color--vivid-red:#cf2e2e;--wp--preset--color--luminous-vivid-orange:#ff6900;--wp--preset--color--luminous-vivid-amber:#fcb900;--wp--preset--color--light-green-cyan:#7bdcb5;--wp--preset--color--vivid-green-cyan:#00d084;--wp--preset--color--pale-cyan-blue:#8ed1fc;--wp--preset--color--vivid-cyan-blue:#0693e3;--wp--preset--color--vivid-purple:#9b51e0;--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple:linear-gradient(135deg,rgba(6,147,227,1) 0%,#9b51e0 100%);--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan:linear-gradient(135deg,#7adcb4 0%,#00d082 100%);--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange:linear-gradient(135deg,rgba(252,185,0,1) 0%,rgba(255,105,0,1) 100%);--wp--preset--gradient--luminous-vivid-orange-to-vivid-red:linear-gradient(135deg,rgba(255,105,0,1) 0%,#cf2e2e 100%);--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray:linear-gradient(135deg,#eee 0%,#a9b8c3 100%);--wp--preset--gradient--cool-to-warm-spectrum:linear-gradient(135deg,#4aeadc 0%,#9778d1 20%,#cf2aba 40%,#ee2c82 60%,#fb6962 80%,#fef84c 100%);--wp--preset--gradient--blush-light-purple:linear-gradient(135deg,#ffceec 0%,#9896f0 100%);--wp--preset--gradient--blush-bordeaux:linear-gradient(135deg,#fecda5 0%,#fe2d2d 50%,#6b003e 100%);--wp--preset--gradient--luminous-dusk:linear-gradient(135deg,#ffcb70 0%,#c751c0 50%,#4158d0 100%);--wp--preset--gradient--pale-ocean:linear-gradient(135deg,#fff5cb 0%,#b6e3d4 50%,#33a7b5 100%);--wp--preset--gradient--electric-grass:linear-gradient(135deg,#caf880 0%,#71ce7e 100%);--wp--preset--gradient--midnight:linear-gradient(135deg,#020381 0%,#2874fc 100%);--wp--preset--font-size--small:13px;--wp--preset--font-size--medium:20px;--wp--preset--font-size--large:36px;--wp--preset--font-size--x-large:42px;--wp--preset--spacing--20:.44rem;--wp--preset--spacing--30:.67rem;--wp--preset--spacing--40:1rem;--wp--preset--spacing--50:1.5rem;--wp--preset--spacing--60:2.25rem;--wp--preset--spacing--70:3.38rem;--wp--preset--spacing--80:5.06rem;--wp--preset--shadow--natural:6px 6px 9px rgba(0,0,0,.2);--wp--preset--shadow--deep:12px 12px 50px rgba(0,0,0,.4);--wp--preset--shadow--sharp:6px 6px 0px rgba(0,0,0,.2);--wp--preset--shadow--outlined:6px 6px 0px -3px rgba(255,255,255,1),6px 6px rgba(0,0,0,1);--wp--preset--shadow--crisp:6px 6px 0px rgba(0,0,0,1);}:where(.is-layout-flex){gap:.5em;}:where(.is-layout-grid){gap:.5em;}body .is-layout-flex{display:flex;}.is-layout-flex{flex-wrap:wrap;align-items:center;}.is-layout-flex > :is(*,div){margin:0;}body .is-layout-grid{display:grid;}.is-layout-grid > :is(*,div){margin:0;}:where(.wp-block-columns.is-layout-flex){gap:2em;}:where(.wp-block-columns.is-layout-grid){gap:2em;}:where(.wp-block-post-template.is-layout-flex){gap:1.25em;}:where(.wp-block-post-template.is-layout-grid){gap:1.25em;}.has-black-color{color:var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-color{color:var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-color{color:var(--wp--preset--color--white) !important;}.has-pale-pink-color{color:var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-color{color:var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-color{color:var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-color{color:var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-color{color:var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-color{color:var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-color{color:var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-color{color:var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-color{color:var(--wp--preset--color--vivid-purple) !important;}.has-black-background-color{background-color:var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-background-color{background-color:var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-background-color{background-color:var(--wp--preset--color--white) !important;}.has-pale-pink-background-color{background-color:var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-background-color{background-color:var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-background-color{background-color:var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-background-color{background-color:var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-background-color{background-color:var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-background-color{background-color:var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-background-color{background-color:var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-background-color{background-color:var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-background-color{background-color:var(--wp--preset--color--vivid-purple) !important;}.has-black-border-color{border-color:var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-border-color{border-color:var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-border-color{border-color:var(--wp--preset--color--white) !important;}.has-pale-pink-border-color{border-color:var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-border-color{border-color:var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-border-color{border-color:var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-border-color{border-color:var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-border-color{border-color:var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-border-color{border-color:var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-border-color{border-color:var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-border-color{border-color:var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-border-color{border-color:var(--wp--preset--color--vivid-purple) !important;}.has-vivid-cyan-blue-to-vivid-purple-gradient-background{background:var(--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple) !important;}.has-light-green-cyan-to-vivid-green-cyan-gradient-background{background:var(--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan) !important;}.has-luminous-vivid-amber-to-luminous-vivid-orange-gradient-background{background:var(--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange) !important;}.has-luminous-vivid-orange-to-vivid-red-gradient-background{background:var(--wp--preset--gradient--luminous-vivid-orange-to-vivid-red) !important;}.has-very-light-gray-to-cyan-bluish-gray-gradient-background{background:var(--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray) !important;}.has-cool-to-warm-spectrum-gradient-background{background:var(--wp--preset--gradient--cool-to-warm-spectrum) !important;}.has-blush-light-purple-gradient-background{background:var(--wp--preset--gradient--blush-light-purple) !important;}.has-blush-bordeaux-gradient-background{background:var(--wp--preset--gradient--blush-bordeaux) !important;}.has-luminous-dusk-gradient-background{background:var(--wp--preset--gradient--luminous-dusk) !important;}.has-pale-ocean-gradient-background{background:var(--wp--preset--gradient--pale-ocean) !important;}.has-electric-grass-gradient-background{background:var(--wp--preset--gradient--electric-grass) !important;}.has-midnight-gradient-background{background:var(--wp--preset--gradient--midnight) !important;}.has-small-font-size{font-size:var(--wp--preset--font-size--small) !important;}.has-medium-font-size{font-size:var(--wp--preset--font-size--medium) !important;}.has-large-font-size{font-size:var(--wp--preset--font-size--large) !important;}.has-x-large-font-size{font-size:var(--wp--preset--font-size--x-large) !important;}:where(.wp-block-post-template.is-layout-flex){gap:1.25em;}:where(.wp-block-post-template.is-layout-grid){gap:1.25em;}:where(.wp-block-columns.is-layout-flex){gap:2em;}:where(.wp-block-columns.is-layout-grid){gap:2em;}:root :where(.wp-block-pullquote){font-size:1.5em;line-height:1.6;}:root{--pmpro--color--base:#fff;--pmpro--color--contrast:#222;--pmpro--color--accent:#0c3d54;--pmpro--color--accent--variation:hsl(199,75%,28.5%);--pmpro--color--border--variation:hsl(0,0%,91%);}.pmpro_checkout-field-username{display:none;}header.header .uk-container{width:100%;max-width:100%;padding-left:0;padding-right:0;}.pmpro_content_message a,.pmpro_content_message a:link{margin:0px 0px 0 0;}#mega-menu-wrap-tbex_menu.mega-stuck #mega-menu-tbex_menu>li.mega-menu-item>a.mega-menu-link{height:unset;}.sap-btn-yellow .mega-menu-link,.sap-btn-blue .mega-menu-link{display:flex !important;justify-content:center !important;align-items:center !important;}#mega-menu-wrap-tbex_menu #mega-menu-tbex_menu>li.mega-menu-megamenu>ul.mega-sub-menu{box-shadow:0px 10px 10px 0px rgba(0,0,0,.5);}.post-card-section{display:flex;justify-content:flex-start;align-items:flex-start;flex-wrap:wrap;width:100%;}.post-card-section .elementor-post__card{width:30.33%;margin:.75em;padding:.5em;box-shadow:0 4px 8px 0 rgba(0,0,0,.2),0 6px 20px 0 rgba(0,0,0,.19);}div.elementor-post__card div.elementor-post__text{text-align:center;}div.elementor-post__card div.elementor-post__text h6{font-size:1.1em !important;}div.elementor-post__card div.elementor-post__text h6.elementor-post__title{text-align:left;font-size:1.1em !important;font-weight:800;color:#1661be !important;height:95px !important;padding:.75em;overflow:hidden;text-overflow:ellipsis;}div.elementor-post__card div.elementor-post__text h6.elementor-post__title a{color:#000 !important;}div.elementor-post__card div.elementor-post__text div.elementor-post__excerpt{height:95px;overflow:hidden;text-overflow:ellipsis;}div.elementor-post__card div.elementor-post__text div.elementor-post__excerpt p{color:#777;font-size:.85em;padding:.5em;text-align:left !important;}div.elementor-post__card div.elementor-post__text a.elementor-size-sm{color:#000;background-color:#fff !important;text-align:center;margin-top:3rem;padding:.7em;font-weight:400;}div.elementor-post__card div.elementor-post__text a.elementor-size-sm:hover{transition:all .5s;background-color:#000 !important;text-decoration:none;color:#fff !important;box-shadow:0 4px 8px 0 rgba(0,0,0,.2),0 6px 20px 0 rgba(0,0,0,.19);}div.elementor-post__card div.elementor-post__meta-data{text-align:center;font-size:.75em;padding-top:1em;}@media screen and (max-width: 1060px){.post-card-section .elementor-post__card{width:40%;}}@media screen and (max-width: 545px){.post-card-section .elementor-post__card{width:90%;}}.recentcomments a{display:inline !important;padding:0 !important;margin:0 !important;}div.nsl-container[data-align="left"]{text-align:left;}div.nsl-container[data-align="center"]{text-align:center;}div.nsl-container[data-align="right"]{text-align:right;}div.nsl-container div.nsl-container-buttons a[data-plugin="nsl"]{text-decoration:none;box-shadow:none;border:0;}div.nsl-container .nsl-container-buttons{display:flex;padding:5px 0;}div.nsl-container.nsl-container-block .nsl-container-buttons{display:inline-grid;grid-template-columns:minmax(145px,auto);}div.nsl-container-block-fullwidth .nsl-container-buttons{flex-flow:column;align-items:center;}div.nsl-container-block-fullwidth .nsl-container-buttons a,div.nsl-container-block .nsl-container-buttons a{flex:1 1 auto;display:block;margin:5px 0;width:100%;}div.nsl-container-inline{margin:-5px;text-align:left;}div.nsl-container-inline .nsl-container-buttons{justify-content:center;flex-wrap:wrap;}div.nsl-container-inline .nsl-container-buttons a{margin:5px;display:inline-block;}div.nsl-container-grid .nsl-container-buttons{flex-flow:row;align-items:center;flex-wrap:wrap;}div.nsl-container-grid .nsl-container-buttons a{flex:1 1 auto;display:block;margin:5px;max-width:280px;width:100%;}@media only screen and (min-width: 650px){div.nsl-container-grid .nsl-container-buttons a{width:auto;}}div.nsl-container .nsl-button{cursor:pointer;vertical-align:top;border-radius:4px;}div.nsl-container .nsl-button-default{color:#fff;display:flex;}div.nsl-container .nsl-button-icon{display:inline-block;}div.nsl-container .nsl-button-svg-container{flex:0 0 auto;padding:8px;display:flex;align-items:center;}div.nsl-container svg{height:24px;width:24px;vertical-align:top;}div.nsl-container .nsl-button-default div.nsl-button-label-container{margin:0 24px 0 12px;padding:10px 0;font-family:Helvetica,Arial,sans-serif;font-size:16px;line-height:20px;letter-spacing:.25px;overflow:hidden;text-align:center;text-overflow:clip;white-space:nowrap;flex:1 1 auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-transform:none;display:inline-block;}div.nsl-container .nsl-button-google[data-skin="dark"] .nsl-button-svg-container{margin:1px;padding:7px;border-radius:3px;background:#fff;}div.nsl-container .nsl-button-google[data-skin="light"]{border-radius:1px;box-shadow:0 1px 5px 0 rgba(0,0,0,.25);color:rgba(0,0,0,.54);}div.nsl-container .nsl-button-apple .nsl-button-svg-container{padding:0 6px;}div.nsl-container .nsl-button-apple .nsl-button-svg-container svg{height:40px;width:auto;}div.nsl-container .nsl-button-apple[data-skin="light"]{color:#000;box-shadow:0 0 0 1px #000;}div.nsl-container .nsl-button-facebook[data-skin="white"]{color:#000;box-shadow:inset 0 0 0 1px #000;}div.nsl-container .nsl-button-facebook[data-skin="light"]{color:#1877f2;box-shadow:inset 0 0 0 1px #1877f2;}div.nsl-container .nsl-button-spotify[data-skin="white"]{color:#191414;box-shadow:inset 0 0 0 1px #191414;}div.nsl-container .nsl-button-apple div.nsl-button-label-container{font-size:17px;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";}div.nsl-container .nsl-button-slack div.nsl-button-label-container{font-size:17px;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";}div.nsl-container .nsl-button-slack[data-skin="light"]{color:#000;box-shadow:inset 0 0 0 1px #ddd;}div.nsl-container .nsl-button-tiktok[data-skin="light"]{color:#161823;box-shadow:0 0 0 1px rgba(22,24,35,.12);}div.nsl-container .nsl-button-kakao{color:rgba(0,0,0,.85);}.nsl-clear{clear:both;}.nsl-container{clear:both;}.nsl-disabled-provider .nsl-button{filter:grayscale(1);opacity:.8;}div.nsl-container-inline[data-align="left"] .nsl-container-buttons{justify-content:flex-start;}div.nsl-container-inline[data-align="center"] .nsl-container-buttons{justify-content:center;}div.nsl-container-inline[data-align="right"] .nsl-container-buttons{justify-content:flex-end;}div.nsl-container-grid[data-align="left"] .nsl-container-buttons{justify-content:flex-start;}div.nsl-container-grid[data-align="center"] .nsl-container-buttons{justify-content:center;}div.nsl-container-grid[data-align="right"] .nsl-container-buttons{justify-content:flex-end;}div.nsl-container-grid[data-align="space-around"] .nsl-container-buttons{justify-content:space-around;}div.nsl-container-grid[data-align="space-between"] .nsl-container-buttons{justify-content:space-between;}#nsl-redirect-overlay{display:flex;flex-direction:column;justify-content:center;align-items:center;position:fixed;z-index:1000000;left:0;top:0;width:100%;height:100%;backdrop-filter:blur(1px);background-color:rgba(0,0,0,.32);}#nsl-redirect-overlay-container{display:flex;flex-direction:column;justify-content:center;align-items:center;background-color:white;padding:30px;border-radius:10px;}#nsl-redirect-overlay-spinner{content:"";display:block;margin:20px;border:9px solid rgba(0,0,0,.6);border-top:9px solid #fff;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.6),0 0 0 1px rgba(0,0,0,.6);width:40px;height:40px;animation:nsl-loader-spin 2s linear infinite;}@keyframes nsl-loader-spin{0%{transform:rotate(0deg);}to{transform:rotate(360deg);}}#nsl-redirect-overlay-title{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;font-size:18px;font-weight:bold;color:#3c434a;}#nsl-redirect-overlay-text{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;text-align:center;font-size:14px;color:#3c434a;}#nsl-notices-fallback{position:fixed;right:10px;top:10px;z-index:10000;}.admin-bar #nsl-notices-fallback{top:42px;}#nsl-notices-fallback > div{position:relative;background:#fff;border-left:4px solid #fff;box-shadow:0 1px 1px 0 rgba(0,0,0,.1);margin:5px 15px 2px;padding:1px 20px;}#nsl-notices-fallback > div.error{display:block;border-left-color:#dc3232;}#nsl-notices-fallback > div.updated{display:block;border-left-color:#46b450;}#nsl-notices-fallback p{margin:.5em 0;padding:2px;}#nsl-notices-fallback > div:after{position:absolute;right:5px;top:5px;content:"×";display:block;height:16px;width:16px;line-height:16px;text-align:center;font-size:20px;cursor:pointer;}.hero-section--vendor{padding:60px 0;}.big-tent-intro{padding-bottom:0 !important;}.searchwp-live-search-results{opacity:0;transition:opacity .25s ease-in-out;-moz-transition:opacity .25s ease-in-out;-webkit-transition:opacity .25s ease-in-out;height:0;overflow:hidden;z-index:9999995;position:absolute;display:none;}.searchwp-live-search-results-showing{display:block;opacity:1;height:auto;overflow:auto;}.searchwp-live-search-no-results{padding:3em 2em 0;text-align:center;}.searchwp-live-search-no-min-chars:after{content:"Continue typing";display:block;text-align:center;padding:2em 2em 0;}