Showing posts with label sap fiori. Show all posts
Best practices of developing SAPUI5 apps using SAP RAP

Best practices of developing SAPUI5 apps using SAP RAP

Sanjo Thomas•20:22:00

 SAPUI5 is a JavaScript framework that is widely used by developers to build responsive and scalable web applications. When combined with the SAP Rapid Application Development toolset (SAP RAP), it becomes a powerful tool for developing complex business applications. In this blog, we will discuss some best practices that developers should follow when developing SAPUI5 applications with SAP RAP.



1. Understand your data model: SAP RAP is designed to work with the SAP HANA database, which is an in-memory database optimized for processing large volumes of data. As a result, it is important to understand the data model of your application before you start developing it. This will help you to design your application in a way that is optimized for the database, which will improve its performance and scalability.


2. Use the SAP Web IDE: The SAP Web IDE is the recommended development environment for SAPUI5 applications with SAP RAP. It provides a wide range of tools and features that make it easy to develop, test, and deploy your application. It also includes a number of templates and wizards that can help you to get started quickly.


3. Follow the naming conventions: SAPUI5 applications with SAP RAP use a number of naming conventions to ensure consistency and readability. For example, all entities should be named using CamelCase notation, and all properties should be named using lowercase letters. Following these conventions will make it easier for other developers to understand your code and collaborate with you.


4. Use reusable components: SAPUI5 applications with SAP RAP can become quite complex, so it is important to use reusable components wherever possible. This will help you to reduce the amount of code you need to write, and make it easier to maintain your application over time. Examples of reusable components include custom controls, fragments, and models.


5. Use SAP Fiori guidelines: SAP Fiori is a design language that is used by SAPUI5 applications with SAP RAP. It provides a set of design guidelines that help developers to create applications that are consistent, intuitive, and easy to use. By following these guidelines, you can improve the user experience of your application and make it more appealing to your users.


6. Test your application: Testing is an essential part of the development process, and it is particularly important when developing SAPUI5 applications with SAP RAP. You should test your application in a variety of different environments, including different browsers, devices, and screen sizes. You should also test your application for performance, security, and accessibility.


7. Document your code: Documenting your code is important for two reasons. First, it makes it easier for other developers to understand your code and collaborate with you. Second, it makes it easier for you to maintain your code over time. When documenting your code, be sure to include comments, descriptions, and examples wherever possible.


8. Use version control: Version control is an essential tool for managing the development process. It allows you to track changes to your code over time, and to collaborate with other developers more effectively. There are a number of different version control systems available, including Git and Subversion.


9. Use performance optimization techniques: SAPUI5 applications with SAP RAP can become quite complex, so it is important to use performance optimization techniques wherever possible. Examples of performance optimization techniques include lazy loading, data binding, and caching. By using these techniques, you can improve the performance of your application and reduce the amount of time it takes to load.


10. Follow security best practices: Security is an essential consideration when developing SAPUI5 applications with SAP RAP. You should follow security best practices, such as using secure coding practices, encrypting sensitive data, and validating user input. You should also test your application for security vulnerabilities, and address any issues that you find as soon as possible.


In conclusion, developing SAPUI5 applications with SAP RAP can be a complex process, but by following these best practices, you can improve the quality, performance, and scalability of your application. By understanding your data model, using reusable components, following naming conventions, testing your application, documenting your code, using version control, using performance optimization techniques, following security best practices, and using the SAP Web IDE and SAP Fiori guidelines, you can create applications that are efficient, effective, and easy to use.

Read more
SAP Gateway and OData Cache Clearing Ways in SAP Fiori Apps

SAP Gateway and OData Cache Clearing Ways in SAP Fiori Apps

Sanjo Thomas•03:32:00

SAP Gateway and OData Cache Clearing Ways in SAP Fiori Apps

SAP Gateway is a key component in the SAP Fiori landscape, responsible for providing a secure and efficient communication layer between SAP systems and external applications. One of the main features of SAP Gateway is its ability to expose SAP backend data to external applications using the OData protocol.



In SAP Fiori, caching is used to improve app performance by storing data and resources in temporary storage. However, sometimes these caches can become outdated or corrupted, leading to issues with the app. In such cases, clearing the cache becomes necessary to resolve the problem. 

When utilizing SAP Fiori apps, it is essential to understand how to clear the OData cache in order to ensure that the data presented is up-to-date and accurate. In this blog, we will explore the different cache clearing methods available for SAP Gateway and OData.


1. Cache Busting Technique

Cache busting is the technique of adding a unique identifier to the URL of the resource being requested. This forces the browser to make a new request for the resource, rather than relying on the cached copy. This method is typically used when there are changes made to the UI or data model, and you want to make sure that the user sees the latest version of the app.


To use cache busting in SAP Fiori, you can add a parameter to the end of the URL that contains a random value. For example:


```

/sap/opu/odata/sap/Z_MY_ODATA_SRV/MyEntitySet?$filter=Field eq 'Value'&cacheBuster=12345

```


This will force the browser to make a new request for the data, even if a cached copy is available.


2. Cache Invalidation

Cache invalidation is the process of removing a cached resource from the cache. This is typically done when the cached resource is no longer valid, such as when data has been updated or deleted. In SAP Fiori, cache invalidation can be done by sending a DELETE request to the cache.


To invalidate the cache in SAP Fiori, you can use the following URL:


```

/sap/opu/odata/sap/Z_MY_ODATA_SRV/$metadata?sap-cache-control=invalidate

```


This will invalidate the cache for the entire service, forcing the browser to request all resources again.


3. Cache Timeouts

Cache timeouts are used to specify how long a resource should be cached before it is considered stale and needs to be refreshed. In SAP Fiori, cache timeouts can be set using the SAP Gateway Service Builder.


To set a cache timeout in SAP Gateway, navigate to the Service Builder and select the service you want to configure. Then, go to the "Technical Settings" tab and set the cache timeout value in the "Caching" section.


4: /ui2/invalidate_global_caches

This method to clear cache in SAP Fiori apps is to use the transaction code /ui2/invalidate_global_caches. This method clears all the global caches, including the SAP Fiori cache, UI cache, OData cache, and others. 


To clear cache using this method, follow the below steps:


1. Open the SAP Fiori launchpad and log in with your credentials.

2. Open a new tab in the browser and enter the transaction code /ui2/invalidate_global_caches.

3. Click on the Execute button or press F8.

4. A pop-up window will appear, asking you to confirm the cache invalidation. Click on Yes to proceed.

5. Wait for the process to complete. The time taken to clear the cache will depend on the size of the cache.


5: /iwbep/cache_cleanup

This method to clear cache in SAP Fiori apps is to use the transaction code /iwbep/cache_cleanup. This method clears the OData cache, which stores metadata and data for OData services.


To clear cache using this method, follow the below steps:


1. Open the SAP Fiori launchpad and log in with your credentials.

2. Open a new tab in the browser and enter the transaction code /iwbep/cache_cleanup.

3. Click on the Execute button or press F8.

4. A pop-up window will appear, asking you to confirm the cache cleanup. Click on Yes to proceed.

5. Wait for the process to complete. The time taken to clear the cache will depend on the size of the cache.


Conclusion

Clearing the OData cache is an essential task when working with SAP Fiori apps. By utilizing the cache busting, cache invalidation, and cache timeout techniques, you can ensure that your apps are always presenting accurate and up-to-date data to the user.

Read more

Introduction to SAP NetWeaver Gateway

Sanjo Thomas•22:32:00

 In this blog, we will get a high level overview of the SAP NetWeaver Gateway. First let us look at SAP NetWeaver Application Server.

What is SAP NetWeaver Application Server?

The SAP NetWeaver Application Server is just like the nervous system of our body. It provides the runtime environment to the SAP applications. All of the SAP Business Suite e.g. ERP, CRM runs on SAP NetWeaver Application Server. Following layers will make it clearer:

Presentation layer 

UI5, Web Dynpro

Business layer (Application Layer)

ABAP/ Java

Integration layer 

SAP PI (Product Integration)

Connectivity layer 

HTTP/HTTPS/SOAP/REST

Persistence layer (Database Layer)

Open SQL

 

What is SAP NetWeaver Gateway?

SAP NetWeaver Gateway helps Application tier to communicate with Presentation Layer. In three-tier architecture, the Presentation layer is GUI (UI5 nowadays) and Database Layer is HANA Database (nowadays).

SAP Gateways is the middle or Application tier. This Application layer is essential for communication between the UI and the backend.

The main motto to use multi-tier architecture was to implement a data processing system that will add a valuable level of modularity and flexibility to the system by developing and maintaining each tier individually. OData is used to exchange data.

What is an OData?

OData which stands for Open Data Protocol is an open source to exchange data over the Internet. It was built by Microsoft.

OData protocol is HTTP based, due to which any programming language with HTTP stack can consume OData services. The output is in the form of JSON or ATOM (i.e. XML).

Why SAP NetWeaver?

Increases Efficiency of business processes by providing role based access

Provides dynamic and cost effective communication between different teams

Multichannel Enterprise access via different devices

Provides development environment using both ABAP and non ABAP languages and connects them all using REST & SOAP APIs.

In this and the previous blog, we had got the high level introduction to OData. From the next blog onwards, we will focus on OData in SAP fiori applications and the use cases.


Read more
Introduction to OData

Introduction to OData

Sanjo Thomas•22:13:00

In this blog series, I will try to cover use cases of OData in SAP Fiori. Lets start with introduction to OData in this blog.

If you plan to expose your SAP Data (Table or Query Data) to external environment like UI5/Fiori or HANA, then you need to push your data in a form of API. By API we mean, using OData we will generate a service link that can be accessed via internet and can be used to perform CRUD operations. SAP OData in SAP ABAP environment is just like another ABAP Class. We can access the methods of this class using SEGW transaction. We can write our required code here for the data manipulation and once we activate the class, the service link that we generate will act accordingly.

Definition

SAP OData is a standard Web protocol used for querying and updating data present in SAP using ABAP, applying and building on Web technologies such as HTTP to provide access to information from a variety of external applications, platforms and devices.

In SAP, we use SEGW transaction code to create an OData Service. SEGW stands for Service Gateway.

Architecture of SAP OData

Here, we will discuss about the High level architecture of SAP OData.



SAP OData High Level Architecture

Why we need ODATA

SAP OData comes with multiple advantages. It not only helps us to expose data but also helps a customer to access data from anywhere and any device. If there will be no OData services, then the data will remain on premise and in case a user needs to access their data, they might have to visit the data location, which is uncomfortable for the digital world.

Advantages of an ODATA

Using SAP OData provides us following advantages:

  • It helps to obtain human readable results i.e. you can use your browser to see the output data
  • It is very easy and relatively fast to access data
  • It uses all the standards of web protocols i.e. GET, PUT, POST, DELETE, and QUERY
  • It uses Stateless Applications: It means Server does not save any data of Client (e.g. UI5 Application) and treats every OData call as a new call
  • It receives data in form of related pieces of information, one leading to another: It is an interaction pattern known as “alert-analyse-act”, “view-inspect-act”, or “explore & act”. According to this pattern not all data are loaded together, and a user analyses a data and reaches its required information after navigation. In this way the data loads quickly and correctly.

SAP OData V2 (Version 2)

OData v2 is a set of new standards which are add-ons to SAP OData V1, and these are as follows:

  • Client-side sorting and filtering
  • All requests can be batched
  • All data is cached in the model
  • Automatic Message handling

You can read more about SAP OData v2 vs OData v1 here.

SAP OData V4 (Version 4)

OData v4 is the latest upgradation to the SAP OData services which comes with some addition and some reduction of features, such as:

  • The new version brings simplification in terms of data binding. The new OData V4 model simplifies the data binding parameter structure.
  • OData v4 requires only asynchronous data retrieval.
  • The Batch groups are solely defined via binding parameters in the new OData v4 calls with the corresponding parameters on the model as default.
  • It supports use of an operation binding. And now it is much easier to bind operation execution results to controls.
  • Create, Read, Update and Delete (Remove) operations are available implicitly via the bindings
  • In OData v4, the Metadata is only accessed via ODataMetaModel

In my next blog, I will try to cover SAP Netweaver Gateway.

 


Read more
Getting started with SAP Bussiness Application Studio

Getting started with SAP Bussiness Application Studio

Sanjo Thomas•23:30:00

In this blog we will get to know more about this new platform to develop Applications, i.e. SAP Bussiness Application Studio.



SAP has come up with new cloud-based development environment i.e. SAP Business Application Studio, for multi-cloud environment. SAP Business Application Studio is a very powerful development environment, tightly integrated with the SAP Cloud Platform and well suited for developing business applications.

It provides you desktop-like experience in the cloud. Design of this studio is influenced by Microsoft Visual Studio code, making the developer productive. This is suitable from basic level developer to Full-Stack developer with full control development environment from back-end to front-end.

This would be the only environment for all kind of applications, by replacing all below tools into one tool SAP BAS.

  • SAP UI5 / FIORI apps using templates and elements – webIDE Full-Stack
  • HANA Native – XS & XSJS – HANA webIDE & HANA Studio
  • ABAP on Cloud – RESTful Application Programming – Eclipse with cloud system connectivity
  • Cloud Application Programming (CAP), Node.js & Java apps – Eclipse, Atom

Key benefits:

  • Single environment for all kind of applications.
  • No local installation & setup required
  • No JRE dependency
  • Industry best practices for developers without switching to multiple applications
  • Integration with API HUB, on-premise, on-cloud.
  • Provide the flexibility for all the developers, for e.g. templates, Git, Mock servers, OPA5 testing for FIORI apps, etc.
  • Enhances the productivity with direct command execution through integrated command line.
  • Run configuration feature makes it an easy option and offer single click to simulate the test in locally or deploy your app on cloud directly

Target Audience:

  • UI5/Fiori developer
  • ABAP developer (Planed in future version)
  • Native HANA developer (Planed in future version)
  • Node.js (in future version) developer
  • Java application developer
  • RESTful Application programming (RAP) dev
  • Cloud Application programming (CAP) dev

Hope this short intro to SAP BAS was helpful. Check my next blog where I will show how to setup SAP BAS, create a UI5 application, add a launchpad module for SAP UI5 application and deploy to Cloud foundry from SAP Bussiness Application Studio.

 


Read more
SAP Fiori login page configuration

SAP Fiori login page configuration

Sanjo Thomas•09:33:00


In this blog, we will see how to set a better login page, unlike fiori’s default login page, which is by the way a very dull looking login page. The Fiori Launchpad is the landing page for Fiori applications. As with the portal, the user has to pass through the login page. Here’s the view of fiori’s default login page:

 

Once we set up our fiori login page, it would look like something like this:

 
Before starting out to change login format of fiori Launchpad, you must have all the administrator rights on the system.
Step1) Login to your gateway system, and enter your credentials
Step2) Enter the T code SICF
Step3) Enter “/sap/bc/ui5_ui5/ui2/ushell” in the service path and Execute or just navigate to default_host > sap > bc > ui5_ui5 > ui2 >ushell

 
Step 4) Double Click ushell.

Step 5) Click on change and go to Error Pages and select System Logon and click on Configuration

Step 6) a) Under Settings Selection section, select Define Service-Specific Settings radio button.
b)  Under Logon Layout and Procedure section, select Custom Implementation radio button and enter /UI2/CL_SRA_LOGIN in the ABAP Class field.
c)  Save as Global Entries

 
Step 7) Once you have done this, save the SICF transaction and navigate out. Now check your fiori login page, it should be somewhat like this:


               
Now, this is done your Login Page is configured. But If you want to use a custom Background instead of this particular background, then you would need to follow some additional steps too.
Step 1) Go to T-code se80.
Step 2) the background image for the login page is located in the mime repository under the path: “/sap/public/bc/ui2/logon/img/”.

 

Step 3) To replace the background image, Right-Click on the “login_background.jpg” file. Under the context “Upload/Download” select option “Upload and Replace”.
Step 4) Now, select the custom file (in your local disk) which you wish to set as the background. The file name will still be “login_background.jpg” but internally the image will be replaced with your custom image. 

 

I have configured mine, and my login screen now looks different than the default one. I have posted the my login screen above at the starting of this post.

Hope you understood the tutorial, stay tuned for more. For any queries comment down below or just mail me at sapui5tutors@gmail.com.
Read more