Brackets in Routing Patterns
Curly Braces {}:
Usage: Define mandatory parameters.Example: “pattern”: “product/{productId}” requires productId in the URL.Purpose: Ensures the route is matched only if the parameter is present.
Colon :::
Usage: Define optional parameters.Example: “pattern”: “product/:productId:” allows productId to be optional.Purpose: Matches the route even if the parameter is not present.
Square Brackets []:
Usage: Define optional parts of the route pattern.Example: “pattern”: “product[/:productId]” makes /productId optional.Purpose: Adds flexibility to the URL structure.
Examples of Routes
Mandatory Parameter: {
“pattern”: “product/{productId}”,
“name”: “productDetail”,
“target”: “productDetail”
}URL Example: #/product/123Optional Parameter: {
“pattern”: “product/:productId:”,
“name”: “productDetail”,
“target”: “productDetail”
}URL Example: #/product/123 or #/product/Optional Part of the Pattern: {
“pattern”: “product[/:productId]”,
“name”: “productDetail”,
“target”: “productDetail”
}URL Example: #/product/123 or #/product
Types of Routes and Targets
Basic Route: {
“name”: “View1”,
“pattern”: “”,
“target”: [“TargetView1”]
}Description: Navigates to View1 with no parameters.Parameterized Route: {
“name”: “ProductDetail”,
“pattern”: “product/{productId}”,
“target”: [“TargetProductDetail”]
}Description: Requires productId.Optional Parameter Route: {
“name”: “ProductDetail”,
“pattern”: “product/:productId:”,
“target”: [“TargetProductDetail”]
}Description: productId is optional.Multiple Parameters Route: {
“name”: “OrderDetail”,
“pattern”: “order/{orderId}/item/{itemId}”,
“target”: [“TargetOrderDetail”]
}Description: Requires orderId and itemId.Wildcard Route: {
“name”: “NotFound”,
“pattern”: “*”,
“target”: [“TargetNotFound”]
}Description: Matches any undefined URL.
Example Configuration in manifest.json
{
“routing”: {
“config”: {
“routerClass”: “sap.m.routing.Router”,
“controlAggregation”: “pages”,
“controlId”: “app”,
“transition”: “slide”,
“viewType”: “XML”,
“viewPath”: “routingandnavigation.view”,
“async”: true
},
“routes”: [
{
“name”: “View1”,
“pattern”: “”,
“target”: [“TargetView1”]
},
{
“name”: “View2”,
“pattern”: “View2”,
“target”: [“TargetView2”]
},
{
“name”: “ProductDetail”,
“pattern”: “product/{productId}”,
“target”: [“TargetProductDetail”]
}
],
“targets”: {
“TargetView1”: {
“viewName”: “View1”,
“controlId”: “app”,
“controlAggregation”: “pages”
},
“TargetView2”: {
“viewName”: “View2”,
“controlId”: “app”,
“controlAggregation”: “pages”
},
“TargetProductDetail”: {
“viewName”: “ProductDetail”,
“controlId”: “app”,
“controlAggregation”: “pages”
}
}
}
}
This configuration demonstrates various types of routes and targets, providing flexibility in how you navigate within your SAP UI5 application. If you have any specific questions or need further details, feel free to ask!
Brackets in Routing PatternsCurly Braces {}:Usage: Define mandatory parameters.Example: “pattern”: “product/{productId}” requires productId in the URL.Purpose: Ensures the route is matched only if the parameter is present.Colon :::Usage: Define optional parameters.Example: “pattern”: “product/:productId:” allows productId to be optional.Purpose: Matches the route even if the parameter is not present.Square Brackets []:Usage: Define optional parts of the route pattern.Example: “pattern”: “product[/:productId]” makes /productId optional.Purpose: Adds flexibility to the URL structure.Examples of RoutesMandatory Parameter: {
“pattern”: “product/{productId}”,
“name”: “productDetail”,
“target”: “productDetail”
}URL Example: #/product/123Optional Parameter: {
“pattern”: “product/:productId:”,
“name”: “productDetail”,
“target”: “productDetail”
}URL Example: #/product/123 or #/product/Optional Part of the Pattern: {
“pattern”: “product[/:productId]”,
“name”: “productDetail”,
“target”: “productDetail”
}URL Example: #/product/123 or #/productTypes of Routes and TargetsBasic Route: {
“name”: “View1”,
“pattern”: “”,
“target”: [“TargetView1”]
}Description: Navigates to View1 with no parameters.Parameterized Route: {
“name”: “ProductDetail”,
“pattern”: “product/{productId}”,
“target”: [“TargetProductDetail”]
}Description: Requires productId.Optional Parameter Route: {
“name”: “ProductDetail”,
“pattern”: “product/:productId:”,
“target”: [“TargetProductDetail”]
}Description: productId is optional.Multiple Parameters Route: {
“name”: “OrderDetail”,
“pattern”: “order/{orderId}/item/{itemId}”,
“target”: [“TargetOrderDetail”]
}Description: Requires orderId and itemId.Wildcard Route: {
“name”: “NotFound”,
“pattern”: “*”,
“target”: [“TargetNotFound”]
}Description: Matches any undefined URL.Example Configuration in manifest.json{
“routing”: {
“config”: {
“routerClass”: “sap.m.routing.Router”,
“controlAggregation”: “pages”,
“controlId”: “app”,
“transition”: “slide”,
“viewType”: “XML”,
“viewPath”: “routingandnavigation.view”,
“async”: true
},
“routes”: [
{
“name”: “View1”,
“pattern”: “”,
“target”: [“TargetView1”]
},
{
“name”: “View2”,
“pattern”: “View2”,
“target”: [“TargetView2”]
},
{
“name”: “ProductDetail”,
“pattern”: “product/{productId}”,
“target”: [“TargetProductDetail”]
}
],
“targets”: {
“TargetView1”: {
“viewName”: “View1”,
“controlId”: “app”,
“controlAggregation”: “pages”
},
“TargetView2”: {
“viewName”: “View2”,
“controlId”: “app”,
“controlAggregation”: “pages”
},
“TargetProductDetail”: {
“viewName”: “ProductDetail”,
“controlId”: “app”,
“controlAggregation”: “pages”
}
}
}
}This configuration demonstrates various types of routes and targets, providing flexibility in how you navigate within your SAP UI5 application. If you have any specific questions or need further details, feel free to ask! Read More Technology Blogs by Members articles
#SAP
#SAPTechnologyblog
