Showing posts with label Routing. Show all posts
Understanding App Router in Sap BTP CAPM Environment

Understanding App Router in Sap BTP CAPM Environment

Sanjo Thomas•20:58:00

In this blog post, we will look into the concept of the App Router and explore its significance within the SAP BTP CAPM project environment.



Understanding the App Router:

The App Router is a key component of the SAP BTP CAPM project, serving as a reverse proxy and authentication middleware. Its primary role is to facilitate secure communication between applications, allowing them to exchange data seamlessly. By acting as a gatekeeper, the App Router ensures that only authorized requests are forwarded to the appropriate backend services.


Key Features and Benefits:

1. Authentication and Authorization: The App Router provides robust authentication and authorization mechanisms, allowing users to securely access CAPM applications. It supports various authentication methods, such as OAuth, SAML, and JWT, ensuring a flexible and secure authentication process.


2. Routing and Load Balancing: With its routing capabilities, the App Router directs incoming requests to the appropriate backend services based on predefined rules. It also offers load balancing functionality, distributing traffic across multiple instances of the same application for improved performance and scalability.


3. Security and Protection: The App Router enhances application security by shielding backend services from direct exposure to the internet. It acts as a protective layer, inspecting and filtering incoming requests to mitigate potential security risks and vulnerabilities.


4. Single Sign-On (SSO): Leveraging the App Router's SSO capabilities, users can seamlessly access multiple applications within the SAP BTP CAPM project ecosystem. Once authenticated, users can navigate between different applications without the need for repeated login prompts.


5. Centralized Configuration: The App Router allows for centralized configuration management, simplifying the setup and maintenance process. It provides a unified approach to define routing rules, security policies, and authentication mechanisms, reducing complexity and ensuring consistency across applications.


Integration with SAP BTP CAPM Project:

The App Router seamlessly integrates with other components of the SAP BTP CAPM project, such as the SAP Cloud Foundry environment and the CAPM runtime. It leverages the capabilities provided by these components to enable secure and efficient communication between applications.


Best Practices and Considerations:

When working with the App Router in SAP BTP CAPM projects, it is essential to keep a few best practices in mind:

- Follow secure coding practices and configure appropriate security measures to protect against potential vulnerabilities.

- Implement proper routing rules and load balancing strategies to optimize application performance and scalability.

- Regularly update and maintain the App Router, ensuring that it stays up-to-date with the latest security patches and enhancements.


In the SAP BTP CAPM project, the App Router plays a crucial role in enabling secure communication between applications. With its robust authentication, routing, and security features, it provides a solid foundation for building scalable and resilient applications. By leveraging the capabilities of the App Router, developers can focus on delivering high-quality applications while ensuring seamless integration within the SAP BTP CAPM project ecosystem.

Read more

SAPUI5 Video Tutorials

Sanjo Thomas•06:53:00
SAPUI5 Hello World live demo

Read more
Routing in Full Screen Application

Routing in Full Screen Application

Sanjo Thomas•07:07:00


Routing in Application
Here, we will implement routing in a full screen application. The scenario is, there would be 3 Pages, and we will show navigation to every page through buttons.



Follow these simple steps:
1.       Create a SAPUI5 Project, name it accordingly.

Here, I have named it as “nav”, you can choose your own project name.

2.       Create 3 views and 3controllers, since we are showing navigation among these 3 pages.

Here, I have created 3 views and 3 controllers with the name new.view.js, new2.view.js, new3.view.js and new.controller.js, new2.controller.js, new3.controller.js.

3.       Start coding in the index.html file for the adding the routes. This is not the best way for routing, since we add the routes in component.js file, which is made separately. Still, in this project we will add routes in index.html file.
Index.html
<!DOCTYPE HTML>
<html>
      <head>
            <meta http-equiv="X-UA-Compatible" content="IE=edge">
            <meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>
           

            <script src="resources/sap-ui-core.js"
                        id="sap-ui-bootstrap"
                        data-sap-ui-libs="sap.m"
                        data-sap-ui-theme="sap_bluecrystal">
            </script>
            <!-- add sap.ui.table,sap.ui.ux3 and/or other libraries to 'data-sap-ui-libs' if required -->

            <script>
           
                        sap.ui.localResources("nav");//we have provided the local path,                                                                   //else we will have to define the full path in the routes every time.
                        var app = new sap.m.App("appId");
                        app.placeAt("content");
                       
                 var myroutes = [{
                   
                 pattern: "",
                 name:"new",
                 view:"nav.new",
                 viewType:sap.ui.core.mvc.ViewType.JS,
                 targetControl: "appId",
                 clearTarget: true,
                 callback: function(){
                   myCallback(this);
                 }
                 },
                 {
                   
                     pattern: ["new2","new2"],
                     name:"new2",
                     view:"nav.new2",
                     viewType:sap.ui.core.mvc.ViewType.JS,
                     targetControl: "appId",
                     clearTarget: true,
                     callback: function(){
                         myCallback(this);
                     }
                
                 },
{
                   
                     pattern: ["new3","new3"],
                     name:"new3",
                     view:"nav.new3",
                     viewType:sap.ui.core.mvc.ViewType.JS,
                     targetControl: "appId",
                     clearTarget: true,
                     callback: function(){
                         myCallback(this);
                     }
                
                 }
                 ];
                
                 var myCallback = function($this)
                 {
                   var viewId = "id" + $this.name;
                   var view = sap.ui.getCore().byId(viewId);
                   
                 if(view == undefined){
                   view = sap.ui.view({
                         id:viewId,
                         viewName:$this.view,
                         type: sap.ui.core.mvc.ViewType.JS
                   });
                   
                   app.addPage(view);
                 }
                 app.to(viewId);
                 };
                
                 var router = new sap.ui.core.routing.Router(myroutes);
                 router.register("appRouter");
                 router.initialize();
                
                
                
            </script>

      </head>
      <body class="sapUiBody" role="application">
            <div id="content"></div>
      </body>
</html>

·         Here callback function defines the default view, or if the view is not found then what viewhas to be loaded.
·         We define the router using the class sap.ui.core.routing.Router(myroutes)
·         Then we register the router, so that it could be used anywhere within the application.
·         Then we Initialise the router.

4.       Create buttons in each Page, for navigating from one Page to another.

new.view.js
sap.ui.jsview("nav.new", {
      getControllerName : function() {
            return "nav.new";
      },

       
      createContent : function(oController) {
        var button = new sap.m.Button({
            text: "to view 2",
            press: function (oEvent){
                 
                var oRouter = sap.ui.core.routing.Router.getRouter("appRouter");
                oRouter.navTo("new2");
            }
        }) ;
    
        return new sap.m.Page({
                  title:"Page 1",
                  content: [
button
                  ]
            });
    }
}); 


new2.view.js
            var button1 = new sap.m.Button("button1", {
            text: "to view 3",
            press: function (oEvent){
                 
                var oRouter = sap.ui.core.routing.Router.getRouter("appRouter");
                oRouter.navTo("new3");
            }
        }) ;
            var button2 = new sap.m.Button("button2", {
            text: "to view 1",
            press: function (oEvent){
                 
                var oRouter = sap.ui.core.routing.Router.getRouter("appRouter");
                oRouter.navTo("new");
            }
        }) ;
Place the buttons in page’s content.
new3.view.js
var button3 = new sap.m.Button("button3" ,{
            text: "to view 2",
            press: function (oEvent){
                 
                var oRouter = sap.ui.core.routing.Router.getRouter("appRouter");
                var oHashChanger = new sap.ui.core.routing.HashChanger();
                oHashChanger.setHash(oRouter.getURL("new2"));
            }
        }) ;

Output
Page 1
Page 2
Page 3
Hope it Helped!!! Thanks…..

Read more