In this blog we will create basic application from template.

File -> New Project from Template

Below view will appear as we are learning SAP UI5 we will select SAP Fiori application and Click on Start. , we will learn about other advance templates later once you are familiar with SAP UI5/Fiori.

We will select Basic as we will be creating freestyle application , starting with empty page.

We will keep Data Source as None.

Next screen will Entity Selection which will have our first view , keep name as it is and press Next.

Below options will appear Keep eye on projects and rest option is No as we are only learning and we are not going to deploy. Click on Finish.

It will take time and installing dependency. To check

Once dependencies are installed and you will see project has been generated.

Now application is successfully generated. You will able to see “project1” as your application name and other folders and file we will understand each in detail in next blog.

To view application right click on project1 and select Preview Applicaiton.

Select start-noflp , we will be understand all in detail.

Below commands will be auto executed and it will load application in new tab(make sure pop-up block should be disable).

Bing, you have successfully created applicaiton.

Now in next blog , we will understand each file and folders in details

SAP BAS stands for SAP Business Application Studio.

Release and Versions

SAP Business Application Studio was officially released in February 2020. Since its initial release, SAP has continued to update and improve BAS, with several versions released to incorporate new features and enhancements. The platform is part of the SAP Cloud Platform and receives continuous updates as part of SAP’s cloud offerings.

Basic Introduction

SAP Business Application Studio (BAS) is a modern Integrated Development Environment (IDE) tailored for developing business applications. It offers a comprehensive development environment that combines the best of SAP Web IDE and various open-source tools, aimed at simplifying the development lifecycle for business applications.

BAS supports various programming languages, frameworks, and environments, making it a versatile tool for developers. Its key features include:

• Integrated Development Environment: Combines advanced code editors, debugging tools, and a rich set of extensions.
• Support for Multiple Languages and Frameworks: JavaScript, TypeScript, Java, and frameworks like SAP Fiori, CAP, and others.
• Cloud-Based: Being part of the SAP Cloud Platform, it offers the flexibility of a cloud-based environment, facilitating collaboration and easy access to resources.
• Extensibility: Allows developers to customize and extend the environment with additional tools and plugins.
• Productivity Tools: Includes a range of productivity tools such as Git integration, task automation, and more.

Key Features

• Modern IDE Features: Syntax highlighting, code completion, and real-time error detection.
• Collaborative Development: Real-time collaboration features that allow multiple developers to work on the same project.
• Integrated Debugging: Powerful debugging tools to troubleshoot and optimize code.
• Rich Set of Extensions: Access to a wide range of extensions to add functionalities.
• Seamless SAP Integration: Tight integration with SAP services and tools like SAP Fiori, CAP, and SAP Cloud Platform.

List of Shortcuts

General

• Ctrl + Shift + P: Open Command Palette
• Ctrl + P: Quick Open
• Ctrl + S: Save current file
• Ctrl + Shift + N: New window
• Ctrl + W: Close current file
• Ctrl + K, Ctrl + W: Close all files

File Operations

• Ctrl + N: New file
• Ctrl + O: Open file
• Ctrl + Shift + S: Save all files
• Ctrl + Shift + T: Reopen closed file

Editing

• Ctrl + X: Cut line
• Ctrl + C: Copy line
• Ctrl + V: Paste
• Ctrl + Z: Undo
• Ctrl + Y: Redo
• Ctrl + Shift + K: Delete line
• Ctrl + Enter: Insert line below
• Ctrl + Shift + Enter: Insert line above
• Ctrl + D: Select word
• Ctrl + L: Select line
• Alt + Up/Down: Move line up/down
• Ctrl + Shift + L: Select all occurrences
• Ctrl + /: Toggle line comment
• Shift + Alt + A: Toggle block comment
• Alt + Shift + F: Format document
• Ctrl + Space: Trigger suggestion

Navigation

• Ctrl + Tab: Switch between open files
• Ctrl + Shift + O: Go to symbol in file
• Ctrl + T: Go to symbol in workspace
• Ctrl + G: Go to line
• Ctrl + Shift + M: Show Problems
• F8: Go to next error or warning
• Shift + F8: Go to previous error or warning
• Ctrl + Shift + Tab: Navigate backward

Search

• Ctrl + F: Find
• Ctrl + H: Replace
• F3 / Enter: Find next
• Shift + F3 / Shift + Enter: Find previous
• Alt + Enter: Select all matches
• Ctrl + Shift + F: Find in files
• Ctrl + Shift + H: Replace in files

Debugging

• F9: Toggle breakpoint
• F5: Start/Continue
• F10: Step over
• F11: Step into
• Shift + F11: Step out
• Ctrl + Shift + F5: Restart
• Ctrl + Shift + F9: Remove all breakpoints

Integrated Terminal

• Ctrl + `: Show integrated terminal
• Ctrl + Shift + `: Create new terminal
• Ctrl + C: Copy terminal selection
• Ctrl + V: Paste into terminal
• Ctrl + L: Clear terminal

File Explorer

• Ctrl + Shift + E: Show Explorer
• Ctrl + B: Toggle sidebar visibility

Version Control (Git)

• Ctrl + Shift + G: Show Source Control
• Ctrl + Enter: Commit
• Ctrl + Shift + U: Stage all changes
• Ctrl + K, Ctrl + U: Unstage all changes

View Management

• Ctrl + 1: Focus into first editor group
• Ctrl + 2: Focus into second editor group
• Ctrl + 3: Focus into third editor group
• Ctrl + K, Ctrl + Left: Focus into previous group
• Ctrl + K, Ctrl + Right: Focus into next group
• Ctrl + K, Ctrl + Up: Focus into above group
• Ctrl + K, Ctrl + Down: Focus into below group

Extensions

• Ctrl + Shift + X: Show Extensions
• Ctrl + Shift + M: Manage extensions

Custom Shortcuts for UI5 Development

• Ctrl + Shift + F1: Open UI5 API Reference (if configured)
• Ctrl + Shift + J: Open JavaScript Console
• Ctrl + Shift + I: Open Developer Tools
• Ctrl + Shift + C: Inspect Element
• Ctrl + Shift + F: Find in files (with UI5-specific filters, if configured)

In this blog we will enable Business Application Studio, which is our development environment through out blog to learn and create application.

• Access SAP BTP Cockpit using URL – https://account.hana.ondemand.com/

• Click on Register

• Enter your details

• Enter Details as needed

• Verify Email

• Below subject and format of verification mail

• Click to activate your account

• You will be redirected to page to finalize your account and set password

• Set password with required condition , click on check box and press Submit.

• You have successfully created your account now you will able to access resources of SAP.

1. BAS is in cloud hence we will click link highlighted below.

1. It will navigate you to below page where you need to enter your email id same as you have created trail account.

1. Verify your phone number, you will be receiving OTP on phonenumber you have entered while registering.

1. Press Continue

1. Click on checkbox and Accept.

1. You will see the screen below and press Accept again.

1. Below is the main screen you will see frequently

1. Click on link Use the free trial at https://account.hanatrial.ondemand.com/

1. Select region US East / Singapore – Azure any of your liking

• Click on create account

• As it is setting up your environment in cloud it will take time.

• Once it’s all done please press continue.

• Go to trial account , we need to activate service for using BAS

• To activate service, click on Services

• In Service click on Service Market Place and search for Business Application studio

• Click on Instances and Subscriptions

• You will able to see below screen now click on Create as highlighted please remember that in application you should be able to observe SAP Business Application Studio

• Click on Business Application Studio

• It will navigate to below screen click on check box and press Ok

• Here you go, your environment is ready and you can create a space

• Give name of Dev space and select radio button SAP Fiori to develop Fiori application

• Press on Create Dev Space

• Dev space is getting create , you can bookmark(ctrl+D) this URL for future reference as we can directly access URL to enter into dev space/ BAS.

• Phase will be changed from starting to Running and you are good to go, click on it.

• Bingo , your setup is ready now you are good to begin SAP UI5 coding.

• Below is the actual platform oncloud where we will create SAP UI5/Fiori application.

Now in next blog we will learn about basic of BAS and will start development.

FIRST WE WILL DISCUSS WHAT IS UI5:

It is a JavaScript UI library consisting of a feature-rich core and a large number of UI controls which are organized in a handful of libraries.

By “feature-rich” I mean stuff like data binding and models for different data sources, an efficient engine for creating and updating the HTML of the controls, support for a Model-View-Controller concept, support for declarative UI construction and HTML templates, automatic loading of the appropriate language resources and many other features along these lines.

The controls range from simple Button controls to complex ones like the sap.m.SplitContainer (with a responsive master-detail behavior and animated page navigation) and provide support for accessibility, keyboard navigation, touch interaction, right-to-left languages etc. out of the box. Different visual themes are available and can be adapted by either modifying the CSS or using the Theme Designer.

SAP is using this UI library for business applications, where standards like security and supportability are crucial, so protection against cross-site scripting and other attacks and a powerful error analysis/inspection tool is integrated. And for sure SAP is investing a lot into automated and manual tests, from unit tests to screenshot comparisons.

UI5 is based on jQuery, which of course can be directly used in UI5 applications, but there’s a lot on top of it, so most of the time you might rather find yourself working with the controls.

Many other Open Source libraries are used in UI5 and come bundled with it, e.g. LESS, the famous CSS processor, or datajs, the OData library.

WHAT IS FIORI ?

Fiori focus mainly on mobility. One code line for all screen sizes.

SAP Fiori is a design system and user experience (UX) framework developed by SAP to provide a consistent and intuitive user interface across various SAP applications.

It focuses on delivering a role-based, consumer-grade user experience that can be accessed across different devices, including desktops, tablets, and smartphones.

Key Features of SAP Fiori:

1. Role-Based:

   – Tailored to the needs of specific user roles, ensuring that users have access to the tools and information relevant to their tasks.

2. Responsive Design:

   – Ensures that applications can be used on any device, adapting seamlessly to different screen sizes and orientations.

3. Simple and Intuitive:

   – Emphasizes a clean and straightforward design, making applications easy to use and reducing the learning curve for users.

4. Consistent User Experience:

   – Provides a uniform look and feel across all SAP applications, enhancing user productivity and satisfaction.

5. Integration with SAP S/4HANA:

   – Designed to work seamlessly with SAP’s S/4HANA suite, providing a modern interface for accessing SAP business processes and data.

6. Customizable and Extensible:

   – Allows businesses to tailor the Fiori apps to their specific needs and extend functionality as required.

7. Efficiency and Productivity:

   – Streamlines common tasks and processes, reducing the time and effort required to complete business activities.

Components of SAP Fiori:

Fiori Apps:

Pre-built applications that cover a wide range of business processes, categorized into three types:

  –Transactional Apps: Enable users to perform transactional tasks like creating purchase orders or managing time sheets.

    –Analytical Apps: Provide insights and analytics to help users make informed decisions.

    –Fact Sheet Apps: Allow users to view detailed information about key business objects.

SAP Fiori Launchpad:

  – A role-based, personalized, and real-time aggregation point for accessing Fiori apps, providing a single entry point for users.

SAP Fiori Elements:

  – Framework for developing consistent and high-quality enterprise applications based on predefined templates and patterns.

SAPUI5:

  – The underlying technology for Fiori apps, providing the necessary libraries and tools for building and extending Fiori applications.

 Benefits of SAP Fiori:

Enhanced User Satisfaction:

  – By providing a modern, intuitive interface, Fiori increases user satisfaction and reduces frustration.

Improved Productivity:

  – Streamlined workflows and role-based design help users complete tasks more efficiently.

Faster Adoption:

  – Consistent design and ease of use reduce training time and accelerate user adoption.

Flexibility:

  – Can be used across various devices, enabling a mobile workforce and supporting remote work scenarios.

Business Agility:

  – Allows businesses to respond quickly to changes and evolving requirements through customizable and extensible applications.

In summary, SAP Fiori represents SAP’s commitment to delivering a superior user experience, transforming the way users interact with SAP software and enhancing overall business efficiency.

OPEN UI5 VS SAP UI5

“OpenUI5” is the free version available under the Apache 2.0 Open Source license.

“SAPUI5” is the version that may only be used by SAP customers with a certain kind of license. (It’s still free for them, but they have paid some other SAP product.)

The good news is: most importantly, the entire core of “OpenUI5” and “SAPUI5” (containing all central functionality) is identical. The most-commonly used control libraries, containing the vast majority of all existing controls, are identical. All of this can now be used for free, when using OpenUI5.

The difference is in some more exotic control libraries which have not (or not yet) been put under an Open Source license. There are several reasons, including legal issues, organizational clarifications (developed in different parts of SAP) – and after all SAP is still a company which has to pay its employees, so it may choose not to give everything away for free. You find the same pattern with other Open Source libraries and products.

But anyway, the majority of all things UI5, including all things which have been developed close to the core of it are free. And there are no paid extensions. There is no intention to make any money with UI5.

This was the technical perspective. Beyond that, there is a difference regarding support: for SAP customers with that certain sort of license the “commercial version” SAPUI5 comes with support agreements, so SAP guarantees bug fixing. These support guarantees are naturally not coming with the completely free Open Source version of UI5. But still, it is not a fork or so:OpenUI5 also gets the bug fixes done for SAPUI5. It’s the same thing, just a subset. A big one.

SAPUI5 VS FIORI

1. UI5 and Fiori both are developed and owned by SAP.
2. UI5 is library framework, where Fiori is a design concept.
3. All Fiori applications are developed using UI5.
4. All applications developed using UI5 are not Fiori applications.
5. There are more than 750 standard Fiori applications in Fiori Library.
6. Without Fiori guidelines, UI5 applications are called as custom UI5 application.
7. In Fiori Application data is coming from Odata where in custom UI5 application data may be come from any web service. (XSJS, .Net web service , Odata , XSOdata etc).

CONCLUSION:

Fiori applications are the standard or custom applications which are strictly following Fiori guidelines and developed with UI5 framework. Hence there is only one difference i.e. applications which follows Fiori design guidelines are Fiori applications and applications which are not following guidelines are custom UI5 applications.

SAP UI5: Versions, Releases, and Benefits

Founders

Founded by SAP:

Version 1.0 (2011)

Initial Release:

• The first version introduced the core UI5 framework.

Benefits:

• Simplified web application development.

• Basic controls and layout components.

Version 1.28 (2014)

Improved User Experience:

• Enhancements in the overall UI components and controls.

Benefits:

• Better performance and usability.

• New themes and design elements.

Version 1.38 (2016)

Enhanced Development Tools:

• Introduction of the UI5 Diagnostic Tool.

Benefits:

• Easier debugging and performance analysis.

• Improved developer productivity.

Version 1.44 (2017)

Support for Fiori 2.0:

• Alignment with SAP Fiori design guidelines.

Benefits:

• Modernized UI components.

• Enhanced user experience with the Fiori Launchpad.

Version 1.52 (2018)

Accessibility Improvements:

• Focus on better accessibility support.

Benefits:

• Enhanced support for screen readers.

• Improved keyboard navigation.

Version 1.60 (2018)

Optimized Performance:

• Significant performance optimizations.

Benefits:

• Faster loading times.

• Reduced memory usage.

Version 1.71 (2019)

Integration with Cloud Foundry:

• Better support for cloud deployment.

Benefits:

• Seamless cloud integration.

• Scalability and flexibility.

Version 1.84 (2020)

New Controls and Features:

• Introduction of new UI controls.

Benefits:

• Enhanced flexibility in UI design.

• Improved user interactions.

Version 1.90 (2021)

Advanced Theming:

• More options for custom theming.

Benefits:

• Greater control over the look and feel.

• Better alignment with corporate branding.

Version 1.96 (2022)

Optimized Data Handling:

• Improved data binding and handling mechanisms.

Benefits:

• More efficient data processing.

• Enhanced performance in data-heavy applications.

Version 1.102 (2023)

AI Integration:

• Initial steps towards integrating AI features.

Benefits:

• Improved user experience with AI-driven suggestions.

• Enhanced application functionality with intelligent features.

Version 1.108 (2024)

Enhanced Security:

• Advanced security features and updates.

Benefits:

• Better protection against vulnerabilities.

• Improved compliance with security standards.

General Benefits Across Versions

Consistent User Experience:

• Adherence to SAP Fiori design principles ensures a consistent and intuitive user experience across all applications.

Rich Set of UI Components:

• Each version introduces new and improved UI controls, enabling developers to create more dynamic and responsive applications.

Improved Performance:

• Continuous performance enhancements result in faster, more efficient applications.

Developer Productivity:

• Advanced tools and features streamline the development process, making it easier to build and maintain applications.

Scalability and Flexibility:

• Support for modern deployment environments, including cloud platforms, ensures that applications can scale and adapt to changing needs.

Security and Compliance:

• Regular updates enhance security, helping to protect data and comply with industry standards.