SAP Development: Mastering SAP UI5, BTP, Fiori, CAPM, RAP, ABAP; and More!: Navigation

Showing posts with label Navigation. Show all posts

app router authentication authorization Navigation Routing sap btp sap capm

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.

associations Navigation odata odata tutorial

Association and Navigation in OData

Sanjo Thomas•23:47:00

In this blog we will be covering the concept of association and navigation in OData.

In this tutorial, we will take example of navigating from one Sales Order to the related Sales Order line items, by using a link instead of manually putting a filter together. Moreover, it also allows us to use the $expand statement to fetch the Sales Order together will all the Sales Order line items in one call.

Lets say, we already have created an OData service in SEGW named ZGW100_XX_SO. Double click on Associations.

Press Create button.

Now, Enter the following values for association and press enter:

Name	SalesOrderSalesOrderItems
Principal Entity*	SalesOrder
Principal Entity Cardinality*	1
Dependent Entity*	SalesOrderItem
Dependent Entity Cardinality*	M

Now, create a referential constraint for the association

1) Expand the Associations node and the SalesOrderSalesOrderItems node and double-click Referential Constraints:

2) Choose the Create pushbutton:

3) Enter the following values and choose Enter:

Principal Key*	SoId
Dependent Property*	SoId

* This field has an Input Help

Now we create an association set for the association

1. Double-click Association Sets:

2. Choose the Create pushbutton:

3. Enter the values and choose Enter:

Name	SalesOrderSalesOrderItems
Association*	SalesOrderSalesOrderItems

And finally we create a navigation property based on the referential constraint

1. Expand Data Model > Entity Types > SalesOrder and double-click Navigation Properties:

2. Choose the Create pushbutton:

3. Enter the following values and choose Enter:

Name	SalesOrderItems
Relationship Name*	SalesOrderSalesOrderItems

Now we need to re-generate the runtime objects and we’re then ready to test the service

1. Choose the Generate pushbutton:

2. Verify that the runtime objects have been generated successfully:

3. Start the Gateway Client (Transaction /IWFND/GW_CLIENT) in a separate window to run the service. Provide the following URI to get the metadata for the service:

/sap/opu/odata/sap/ZGW100_XX_SO_SRV/$metadata

The Sales Order collection now includes a navigation property.

4. When you now select a sales order entry using

/sap/opu/odata/sap/ZGW100_XX_SO_SRV/SalesOrderCollection(‘0500000001’), for example, you can simply add the navigation link /SalesOrderItems to navigate to the line items without having to set a filter yourself:

5. And finally you can use $expand to read all sales order items for a given sales order in a single http call.

Simply provide the following URI:

/sap/opu/odata/sap/ZGW100_XX_SO_SRV/SalesOrderCollection(‘0500000001’)/?$expand=SalesOrderItems

The $expand statement is handled by the framework (no additional implementation is required). Since the framework does not know that both entities can be obtained using a single RFC call, it executes two calls to the underlying BAPI. This can be improved by manually implementing (re-defining) the GET_EXPANDED_ENTITY method.

So we are done. The Service is up and running.

aggregation binding component.js containers controls and views globalization grouping introduction to sapui5 json layouts manifest.json MockSever Navigation Routing sap web ide searching Sorting

SAPUI5 Video Tutorials

Sanjo Thomas•06:53:00

SAPUI5 Hello World live demo

Navigation Routing routing in full application Routing in sapui5 sapui5 video tutorial on routing

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>

id="sap-ui-bootstrap"

data-sap-ui-libs="sap.m"

data-sap-ui-theme="sap_bluecrystal">

</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>

</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…..