SAP OpenUI5 javascript library basics| OpenUI5 with examples

SAP OpenUI5 javascript library basics| OpenUI5 with examples

In this post, We will discuss the basics of OpenUI5 tutorials.

SAP OpenUI5 Introduction

OpenUI5 is an open-source modern javascript framework for building Software Web applications based on the HTML5 specification.

OpenUI5 is a responsive and interactive framework that supports all devices and all popular browsers.

This framework is developed by SAP as opensource and similar to the SAPUI5 framework

It has support for Inbuilt 200+ components.

To learn this frontend library, You need basic knowledge and understanding of javascript, HTML, and CSS technologies.

We can easily develop rapid application development as there are almost all UI widgets available ranging from the button, and Dropdowns to complex grid and tree.

OpenUI5 supports the following features

  • 200 + UI components are available
  • MVC support for data binding
  • Support for Remote API integration and has integrated support for various formats like JSON, XML, and ODATA
  • Internalization support - localization and Globalization
  • Responsive which works on all devices including Desktop applications, Tablet, and Mobile devices
  • Support all major browsers
  • Popular widgets are available Layout and themes extending capabilities Opensource Framework Hybrid Application development and deployment Consistent and Rich UX design principles
  • Two-way data binding Keyboard Interaction

Advantages

  • Rapid application development
  • Consistent UI across all devices
  • As this was developed by SAP, Large Community Support is available
  • Productivity is improved as a large UI component is available
  • The learning curve is less as this is based on javascript/html5/CSS

IDE and Tools Support

It is extensible and has several plugins and tools available for different IDE and editors. There is no recommendation for a specific IDE. Eclipse is the primary IDE for developing applications in OpenUI5.

SAP UI development tools are available as Plugins for Sublime Text and Webstorm IDE and Eclipse. SAP UI5 and OpenUI5 both provide rich control sets.

SAP UI5 is one of the products of their product suite. OpenUI5 is open source released under an Apache license. Both are the same and the license is different.

You can also use SAP web IDE which is a cloud IDE for writing code without doing the setup in your local environment.

SAP OpenUI5 Hello World Example

To write applications, Need to download the runtime library as well as SDK. Both are required for running any application including mobile apps. The code can be deployed to any web server. For this sample application, We will use the CDN library for this example.

<!doctype html>
<html>
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>SAPUI OpenUI5 Demo Applicaotn</title>

    <script
      id="sap-ui-bootstrap"
      src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js"
      data-sap-ui-theme="sap_bluecrystal"
      data-sap-ui-libs="sap.ui.commons"
      data-sap-ui-compatVersion="edge"
    ></script>
    <script>
      var oBtn;

      oBtn = new sap.ui.commons.Button({
        text: "Button Sample Demo",
        press: function (oEvent) {
          alert(this.getText());
        },
      });
      oBtn.placeAt("main");
    </script>
  </head>
  <body class="sapUiBody">
    <div id="main"></div>
  </body>
</html>

The above example has a button and on clicking this button, an alert is shown with content. This is a sample hello world example to show the cause OpenUI5 Code.

SAP Fiori design library

All the openUI5 controls are based on the Fiori library. SAP Fiori is a design language that provides a Rich consistent UX experience across all components/themes/devices. Fiori provides different Simple and complex controls that can integrate into front-end applications.

Fiori Design principles

  • Based on your needs, you can customize the design
  • Simple to use and integrate it
  • Consistent UX across all devices
  • Fluid user experience

Reference