This blog will give some brief introduction of how C4C’s UI framework works and what is the render process of C4C. As we know SAP C4C’s front client is built based on SAP UI5, but actually how C4C using UI5 have some different from other application. For almost Fiori applications which is based on UI5,....
Reuse Libraries are certainly a significant advantage in the process of developing complicated software. Copy-paste is a kind of antipattern and we should always try to reuse a code. Fortunately, SAP Fiori allows the creation and usage of reuse libraries. However, this topic is not covered by detailed documentation and developers sometimes need to struggle....
Hi, all, With this blogpost I would like to document the steps that I went through in order to obtain a clean starting CAP project setup using TypeScript. Below I will go through a series of terminal commands and some file configuration. It might take quite some time to go through all the steps the....
In my blog Call deployed CPI iflow from BTP sapui5 application by using ajax , the sapui5 application use stand alone rourter. In a work zone sapui5, if we need to call a deployed iflow, we need to make a little adjustment in ajax or fetch url in ui5 controller. I will share the detailed steps :....
在我的博客Call deployed CPI iflow from BTP sapui5 application by using ajax里，里面的sapui5用的是单独router(路由).如果是BTP Launchpad里的SAP UI5调用CPI Iflow的话,需要对 ajax 或者fetch 里的url 进行调整。下面我演示一下具体的步骤： 步骤 1，在 cpi 里部署一个简单的Iflow ,用https adapter接收 ui5里的调用。可以参照博客 里的step 1 . 步骤 2，在BTP cockpit中为cpi iflow运行时环境创建destination，请参考博客 Step 2： 步骤 3， 用 yo 和 easy-ui5生成 Launchpad sapui5 程序: 步骤 4, 调整 视图，控制器和xs-app.json里的代码： uimodule/webapp/controller/MainView.controller.js sap.ui.define( ["./BaseController" , "sap/ui/model/json/JSONModel" , "sap/base/Log"], /** * @param {typeof....
This blog-tutorial guides you through the process of creating a CAP application. You will create a basic data model with an OData service, and add a Fiori app for the data model. Optionally, you can deploy the CAP app to your SAP BTP Cloud Foundry (Trial) Subaccount. Prerequisites Make sure the Prerequisites for this....
Hi Everyone, I am writing this blog for beginners on how to filter the data using function Import in SAP UI5 using OData which will be helpful for both front end and back end developer. Function imports are used to do the GET and POST operations for the requirements , which are not possible by the standard....
focusing on beginners, I am writing this blog to explain about how to create OData service and consume OData service to UI5 application (through VSCode) and to work on CURD operations from UI5 Application to backend ABAP HANA Server (On Premises) in detail. Info: – Here I am using SAP GUI 7.50 Version. if you....
In the freestyle SAPUI5 application, value help is always a common requirement. The value help is composited with a filter and table in a dialog. If you compare the demo in the demo kit and the standard value help generated by the Fiori Element you can see there is a big difference. Value Help Dialog:....
“n Configuration Issues. Show More Information” is a common error I see customers face while using the HTML5 Application Repository. Here’s how to resolve it. How to Fix step zero At the time of writing, there’s no way to resolve this issue from the UI itself, so we’ll need to use the cloud foundry cli and the cf-html5-apps-repo-cli-plugin.....
In the world of ABAP development, the RAP framework has revolutionized the way we build robust and flexible applications. One of the key features of RAP is the ability to dynamically generate EML (Entity Manipulation Language) requests. In this blog post, we will explore the dynamic form of MODIFY ENTITIES OPERATIONS, which allows us to....
In the blog, I’d like to share with you how to modify the standard side navigation behavior by using custom controller. When I expand standard side navigation, it looks like: https://ui5.sap.com/#/entity/sap.tnt.SideNavigation/sample/sap.tnt.sample.SideNavigation In our custom controller, it will looks like this: You can see, it’s a big change. In the expanded state, there will be a....
In the previous blog, we have done half the work about the custom side navigation. In this blog, we focus on the render class to see how to render panel in the browser and how to control its position. In the custom controller, there is a mandatory method we have to implement: renderer: function (oRm, oSideNavigation)....
Please go through my blog on Manage Purchase Orders (Version 2) standard fiori elements application configuration in SAP Fiori Launchpad. Link to Fiori Apps Library: Manage Purchase Orders (Version 2) https://fioriappslibrary.hana.ondemand.com/sap/fix/externalViewer/#/detail/Apps(‘F0842A’)/S22OP This demo is mainly for the beginners who are curious to learn SAP Fiori Launchpad Configurations. Check for the installations under implementation information tab in SAP Fiori Apps....
According to my understanding, module and controller is different. 1. Controller Controller is used in view, handling the event triggered in view. The most explicate feature is to extend “sap/ui/core/mvc/Controller”. Like this: sap.ui.define([ "sap/ui/core/mvc/Controller" ], function (Controller) { "use strict"; return Controller.extend("sap.ui.demo.walkthrough.controller.App", { onShowHello : function () { // show a native JavaScript alert alert("Hello....
Current situation The table controls of the SAPUI5 sap.ui.table library provide shortcuts to define titles, footers, column headers, and cell templates for tables. If only a string is given for these aggregations, the table control creates the required text or label controls automatically using sap.m controls, as long as the sap.m library is loaded in the application. If not, the....
Beginning with OpenUI5 and SAPUI5 1.116 (planned for July 2023), UI5 framework libraries will start using modern ECMAScript syntax in their code and define “Specification Version 3.0“ in their UI5 Tooling configuration. If you use UI5 Tooling in your projects, this means you will have to upgrade to UI5 Tooling Version 3. In addition, you have to make sure that your project’s....
Today I’m going to explain how to Sort, Filter and Group data within a List (sap.m.List) or a table (sap.m.Table) with the ViewSettingsDialog element in a dynamic form. Filtering data of the example Context The columns and their values to be used to sort, filter and group can be defined statically in the XML view....
I often develop CAP MTA projects that contain some UI modules for PoC purposes. However, the process of deploying these UIs and making them accessible from SAP Build Work Zone, standard edition, is not well-documented. In 2020, I wrote two blog posts addressing this particular topic. Developing a Fiori elements app with CAP and Fiori....
If you’re like me and love reading changelogs, you may’ve noticed the latest ui5 version, v1.113.0, introduced a new code coverage tool called Istanbul to replace the old Blanket.js (latest version is 7 years old now). Istanbul is perhaps the most famous and most used code coverage out there. Using Istanbul is not complicated and you don’t need to change your....
The purpose of this blog is to show how to develop a reuse component using Business Application Studio or VS Code. I also browsed through the earlier blogs on this topic and found it would be better to also align with latest SAP documentation Developing Reuse Components. I suggest the readers go through this SAP documentation....
The purpose of this blog is to show how to consume a reuse component. This is the second blog in the series of two – on the topic of Developing and Consuming a Reuse Component. Develop Reuse Component Consume Reuse Component (this blog) The consumption of the reuse component with a simple demo application is....
This short blog post will explain how you can change the UI5 version of the fiori application which you are running locally. This is sometimes necessary to validate if there might be some issue or different behavior in some older SAPUI5 version. How can you preview your application in BAS? If you created your project....
I came across a requirement in Master Detail template that when the user press an item in master page, item details should come in the smart table. I have implemented the same scenario with sap.m.List and smart table controls using Northwind OData service to share with you in our community. view.xml controller.js Initially I am fetching all the item details through the entityset binding in smart....
Flaky tests (aka fragile, brittle or instable tests) are tests that fail or pass intermittently without any changes to the codebase. They are a common problem in software development and can be frustrating to deal with. However, it is important to be disciplined with flaky tests because they can lead to a number of issues. Why it is important to deal....
SAP UI5 has come a long way in the past few years, with the built-in PDF viewer being introduced in version 1.48. Originally, Wouter Lemaire created the Control 2018 because not all customers could use version 1..48 yet. While many users have now upgraded to a version that includes the sap.m.PDFViewer, there are still cases where a....
It’s hard to believe we are already in May. SAP Sapphire is coming soon, so expect to see some exciting announcements. While much of the focus will be on new low-code / no-code capabilities, there will also be some pro-code goodies on display. We have some updates below and stay tuned for more information in....
The blog will take you through all the steps required to deploy a client and server side application on SAP BTP. Pre-requisites: Basic knowledge of UI5 Basic node-express knowledge Login/Register on the SAP BTP platform SAP Business Technology Platform (formerly Cloud Foundry) is a PaaS offered by SAP to host your on-premise applications on....
Recently, I came across a scenario in SAP Fiori Elements List Report Object Page (LROP) where I need to filter the List Report table data in entity1 based on the Object page data in entity2. Added a custom filter extension binding the entity2 to the sap.m.MultiComboBox control in List Report: Given a number to length as I am getting only 1st 100 records. Now, I....
The application link for this solution can be found here: https://feat-alt-row-colors-treetable.netlify.app The code for the solution is available on GitHub at: https://github.com/sonalikaporwal/feat_treetable A tree table is a hierarchical arrangement of data that is organized in rows and columns and grouped into nodes. alternateRowColors is a UI5 table attribute that permits alternating table row colors. Unfortunately, the tree table....
Welcome to the final part of this blog series introducing abap2UI5 — an open-source project for developing standalone UI5 apps in pure ABAP. This post will focus on the technical background and summarize all the project’s key ideas by covering topics such as its architecture, codebase and compatibility. Find all the information about the project on GitHub and stay....
Welcome to part six of this blog series introducing abap2UI5 — an open-source project for developing standalone UI5 apps in pure ABAP. This post explains how to install, configure and debug abap2UI5. Find all the information about the project on GitHub and stay up-to-date by following on Twitter. Blog Series (1/7) Introduction: Developing UI5 Apps in pure ABAP (2/7) Displaying....
There were days where customer requirement was to create ALV reports in GUI and to provide button on top of ALV to print the report data as PDF or to show the details of selected line item. Now Customers are focusing on application which are more user friendly, responsive instead of old GUI applications/screens. In....
This blog post describes how you can apply deep filtering in your SAPUI5 application, using CAP and odata V4. This can be used to filter in expanded entities, which has come available in V4. Please note that using an oData V2 model to do this will not work, since this type of filtering is not....
This blog intends to provide reference and details on S/4 HANA Fiori applications usage – analytics, reports that are accessed via Fiori Launchpad (FLP). Further, also serves as a Best Practices to follow in order to pass Audit and compliance and S/4 HANA security role restrictions. One of the very important factors for Audit and Compliance is....
Welcome to part five of this blog series introducing abap2UI5 — an open-source project for developing standalone UI5 apps in pure ABAP. This post explains various ways of creating views and enhancing them with Custom Controls, HTML, CSS, JavaScript and third-party libraries. Find all the information about the project on GitHub and stay up-to-date by following on Twitter. Blog Series....
More from the Series related to the UI5 Excel Upload Control Simplifying Excel Upload in Fiori Elements: The Open Source and Easy-to-Use UI5 Custom Control Create a UI5 custom library with versioning using a multi version namespace How test multiple scenarios and UI5 Versions with wdi5 and GitHub Actions If you follow the SAP community....
This Blog will be continuation of the 1st part of the blog where I explained how we can generate Fragmented Forms from Fiori List report using SEGW (OData) Project. Part-1 – Preview/Download Fragmented Forms From Fiori List Report In this part of the blog, I will be explaining how we can switch/ convert SEGW project to Unmanaged....
Welcome to part four of this blog series introducing abap2UI5 — an open-source project for developing standalone UI5 apps in pure ABAP. This post explains the functionality of four demos – MIME Editor, Table Maintenance, File Upload/Download, Charts – to see different use cases and features of abap2UI5. Find all the information about the project on GitHub and stay....
In UI5, the rendering process involves creating the visual representation of user interface elements, and it can be a resource-intensive task, especially when dealing with complex and responsive UIs. Our performance tests show that the rendering process is one of the most significant factors affecting the performance of UI5 applications. Hence UI5 has introduced various....
More from the Series related to the UI5 Excel Upload Control Simplifying Excel Upload in Fiori Elements: The Open Source and Easy-to-Use UI5 Custom Control Create a UI5 custom library with versioning using a multi version namespace How test multiple scenarios and UI5 Versions with wdi5 and GitHub Actions In a previous blog post, I....
This blog showcases the approach I took to achieve the requirement of Customizing SAP My Inbox App. Even though it comes many extension possibilities like extending detail page (regular extension approach) or add more attributes to the detail page. But achieving the requirement when your app is Fiori Elements was challenging. Requirement: As part of....
The Fiori Elements Framework offers two solutions to display information in two different tabs within a single List Report: ‘Multiple Views'[1] and the ‘Flexible Programming Model'[2]. However, to use Multiple Views, there must be a common data source (CDS View in most cases) and the Flexible Programming Model is only available for OData v4. This....
In this blog post, I will guide you through the process of building and deploying an SAPUI5 application using SAP Business Application Studio to an ABAP repository in an on-premise system. I have taken the reference from SAP Help Document In this article will discuss 1) Activate and maintain the repository service in backend system.....
Clean code é um termo usado para descrever software que é fácil de ler, entender, manter e testar. Neste blog, quero resumir alguns princípios importantes e fornecer uma introdução ao tópico para iniciantes. Além disso, o blog deve se conectar ao repositório de guias de estilo, aos livros e às iniciativas atuais em que os....
As always, we continue to bring you new and easier ways to build apps using our pro-code solutions. Following a cloud mindset, we are introducing many features as we complete them. Keep your suggestions coming as this helps us prioritize our development efforts. We look forward to ongoing innovation and collaboration for the rest of....
This blog aims to explain how you can build UI5 webcomponents application using bundle.esm.js for your developers to create something new.. This is lightweight and easy to develop according to your need by using Web components provided in documentation. SAP UI5 Webcomponents Documentation : https://sap.github.io/ui5-webcomponents/ Todos API from https://jsonplaceholder.typicode.com/ Create App using Todos API data in UI5 Webcomponents The simplest....
In this article I’m going to explain How to Disable the backspace and delete keys using event handler function Multi Input in SAP Ui5 Refer this link to know more about MultiInput : https://sapui5.hana.ondemand.com/sdk/#/api/sap.m.MultiInput%23overview Firstly In Xml File, we need to add multi input field like below with the property “token update” , In UI5, the....
For a good structuring in a development project it is a smart idea to encapsulate different components and make them available for reuse. In the area of UI5 there is the option of a library or a reuse component. A good overview of the options is a 2018 article by Nabi that still discusses current issues: These components can then....
In this blog post, I will guide you step by step process for Migration of SAP UI5 Application from SAP Web IDE to Visual Studio Code (VS Code). And deployment of the application to S/4 HANA On-Promise ABAP Repository from Visual Studio Code (VS Code). I have taken reference from SAP Help Document Follow the....
If you have ever attempted to dynamically apply custom CSS to a UI5 table control, you may have encountered some challenges. In this article, we will explore a simple approach that can be helpful for some UI5 tables bound to a JSON model and using a relatively small dataset. Limitations of getRows() Suppose you want....
This is my first blog post in the SAP Community and I am a bit anxious already 🙂 I started my career at SAP Labs 12 years ago in the development support of Materials Management domain (a mix of technical and functional knowledge) and found my passion for pure technology. After leaving SAP Labs, I focused as....
Recently I came across an issue while opening a Standard Fiori App (oData V4 Service Group is not Published). Upon some research & analysis I found the steps to Publish/Activate an Odata V4 service and thought to share with you all 🙂 . Steps: Login to ‘SAP NetWeaver/SAP GUI’ and Execute ‘/n/IWFND/V4_ADMIN’ t-code. Click on ‘Publish Service Groups’. /n/iwfnd/v4_admin ....
Some time ago Andre Fischer wrote a blog post called Support of multiple backend systems – How to use Multi Origin Composition and Routing that explains a cool Netweaver Gateway functionality regarding oData. Multiple Origin Composition (MOC) is the ability to collect data from different back-end systems, aggregate them in one single service and updating different back-end systems while....
As a sapui5/abap-rap developer I found my self a couple of times on the situation where I needed to know the sap client of the current system. I’ve taken different approaches through the years, but recently a found what seems to be a better path. I hope that sharing my experience and solution can help....
Get our custom app ready to use Fiori elements building blocks To get our custom app ready to use Fiori elements building blocks we follow the steps described in the Flexible Programming model explorer Modify the component First we modify the component.js of our application: instead of extending “sap/ui/core/UIComponent” we modify it to extend “sap/fe/core/AppComponent” Simplify the App structure....
This SAP Tech Byte is about how to consume SAP BTP destinations during local development – covering both instance level and subaccount level destinations. The source code for this blog post can be found at https://github.com/SAP-samples/sap-tech-bytes/tree/cloud-foundry-basics/post4. Building on top of the previous blog post of this “Cloud Foundry Basics” series, where we learned how to consume data using....
In this blog post we will learn how to create space and pages on Fiori Launchpad. What is Space and Pages Provides structured way to display the apps in Fiori launchpad and ease to end user for accessing the apps, which is available from S4 HANA 2020 and onward ON-PREMISE environment. Prerequisite for Space and Pages....
Recently I did extension for My Inbox Fiori application for Purchase Order and Purchase Requisition approvals. As beginner, I did not know where to start initially. After some research I found a blog from Ragini Upadhyay (https://blogs.sap.com/2018/06/02/fiori-my-inbox-2.0-extend-approve-purchase-order-s4-hana-1610/) which was well explained but I had to struggled a lot. There are few places where this solution wasn’t accurate and....
Excel is and will remain for a long time one of the most important tools for companies. It is not for nothing that it is called the Swiss army knife of business tools. Therefore, it is also very important to integrate Excel into SAP. This alone shows the large number of blog posts in the....
So recently in a program, I am trying to clear couple of columns in an internal table. So instead of doing it the regular old way of looping into reference and clearing those fields, I used the new ABAP to do that job. Don’t reason with me on this, I am addicted to the new....
15.03.23 – Added details on the newly available GPT-4 model 01.03.23 – Added details on the newly available ChatGPT model (GPT-3.5) and API endpoint 27.02.23 – Added a link to part 3. 24.02.23 – Added a link to part 2 and also updated the title to reflect, that there will be 3 posts part of the series (not....
So you are a business process expert and you have spent time building some great skills – but you know not everyone on the team has had the time or the opportunity to get to the same level. You want to show your new SAP Fiori apps in their best light and make adopting the....
Even though we have a stable wdi5 major version 1, there’s still plenty left to do. And since you have continued adopting (thanks!) and even contributing (major THANKS!) to wdi5, here’s an overview what we’re currently working on: wdio v8 enablement We wanted to allow Webdriver.IO (wdio) to stabilize somewhat after its’ major version bump. Now is the time to upgrade our wdio service, namely wdio-ui5-service (the technical....
This blog series introduces the abap2UI5 Project. It is an open source project which helps you develop standalone UI5 applications in pure ABAP. All project information can be found here: Repository on GitHub News on Twitter General Idea Abap2UI5 gives you a cloud/on-premise ready and non-sap-gui way to create UI5 apps in pure ABAP without using....
This is the second blog post of a blog series which introduces the abap2UI5 Project. It focuses on the output of lists and tables. All project information can be found on GitHub and Twitter: Repository and Installation with ABAPGit News, Feedback and Updates on Twitter Blog Series (1/3) ABAP2UI5 – Development of UI5 Apps in pure....
Ever wanted to check out a feature in a what’s new in SAPUI5 but couldn’t for the life of you remember which version it was in? Well, we have good news for you! Up to now, the main place to get your information for SAPUI5 and SAP Fiori elements has been the SAPUI5 Demo Kit – the....
06.03.23 – Added information for the newly available and integrated GPT-3.5 model. 27.02.23 – Added a link to part 3. This is the second post of a small series of blog posts in which I’ll delve into the conceptual and technical details of building a ChatGPT-like chat app using the SAP Cloud Application Programming Model, SAPUI5....
In this blog we will learn How to deploy the Ui5 Fiori app on SAP ABAP repository with BAS & WEBIDE, also learn about fiori app tile creation in launchpad designer. What is SAP UI5 SAP ui5 is a framework, it consists of Libraries. Used for Creating responsive apps. Fiori Launchpad SAP Fiori launchpad is a shell....
This is the third and final post of a small series of blog posts in which I’ll delve into the conceptual and technical details of building a ChatGPT-like chat app using the SAP Cloud Application Programming Model, SAPUI5 and the OpenAI API. In the first blog post I introduced the required concepts of the GPT....
In this beginner blog post we are going to see how we can use Pages and Spaces on Fiori Launchpad. We are also going to see how we can configure Tile using Spaces and Pages concept and make it available to Fiori Launchpad. Ref: https://help.sap.com/docs/SAP_S4HANA_CLOUD/4fc8d03390c342da8a60f8ee387bca1a/e55f5cc8ccec490f83a00284659bce9f.html Prerequisite fro Spaces and Pages S4HANA2020 or Later Role :....
Flexible Programming Model enables you to extend Fiori elements applications based on OData V4, as well as create freestyle applications from scratch using building blocks. An overview of Flexible Programming Model and what it provides is explained in the following blog post. Leverage the flexible programming model to extend your SAP Fiori elements apps for OData....
With so much economic uncertainty ahead, it’s more important than ever to figure out ways to drive efficiencies in software development. While low-code tools can help business analysts and similar roles build apps quickly, professional developers often need more powerful ways to provide the functionality, performance, and UX that their users expect. If you want....
To ensure outdated versions are no longer posing a potential security risk, SAP removes SAPUI5 versions from the SAPUI5 CDN one year after their end of maintenance. In addition to this also patches of versions in maintenance which are older than one year will be removed. Details see SAP Note 3001696. However at times if you....
A new version of abap2UI5 is released! You now have the complete freedom to create views making it possible to develop UI5 apps for a lot of different use cases. Check out this new blog post. Introduction In ABAP Cloud there is no SAP GUI anymore and one thing i miss is a lot is the former....
In today’s world, hardly any application is built in which there is no distinction between different users, roles or rights. Of course, the same also applies to SAP UI5 applications that are to run on the SAP Business Technology Platform. In this small post I would like to go into more detail about the configuration....
Clean Code – From Contribution to Decision Clean code is a term used to describe software that is easy to read, understand, maintain and test. With the adoption of the clean code style guide by thousands of teams, changes to the style guide can have a large potential impact on developers (e.g. through new static code checks for new rules). While there is....
Clean Code: Wartbar, Lesbar und Testbar Clean Code ist ein Begriff, der Software beschreibt, die einfach zu lesen, zu verstehen, zu warten und zu testen ist. In diesem Blog möchte ich einige wichtige Prinzipien zusammenfassen, um Anfängern einen Einstieg in das Thema zu ermöglichen. Außerdem soll der Blog eine Verbindung zum Style Guide Repository, den....
While I am checking on sap.ui.comp.filterbar.FilterBar control in SAP UI5 SDK, I have noticed that code has to be updated with new aggregations. For further clarifications, go on reading more. SAP UI5 Control: https://ui5.sap.com/sdk/#/entity/sap.ui.comp.filterbar.FilterBar/sample/sap.ui.comp.sample.filterbar.DynamicPageListReport sap.ui.comp.filterbar.FilterBar sample in SAP UI5 SDK view.xml: filterItems and FilterItem aggregations The above aggregations got deprecated since SAP UI5 version 1.48.0 and instead we can use filterGroupItems &....
This blog post will insights on how to export the application from SAP Demo kit and import the application to our Business Application Studio(BAS) environment and make custom changes as per our need/requirement. Here, I would like to explain how I achieved this task with simple steps. Introduction: If there is any Business demo in Business Application....
A few months ago we were working in a CAP development where after the CAP SAPUI5 application was implemented, one of the requirements that we had was generating a PDF document with Forms Service API using the document details opened with the Object Page UI5 Element. Since the requirement was to have a button on....
For a great user experience, it is very important that users can enter data quickly, fluently, and efficiently – even on a slow network. This is particularly relevant for power users, i.e., users who spend significant time with data entry, often using keyboard shortcuts to move from field to field. In this post, we will....
In my blog Upload rendered PDF document into BTP document manangement service in SAPUI5 Application , the PDF document has been uploaded into BTP Document Management Service(CMIS). If the user want to download and view the PDF document later, how to realize it in SAPUI5 application? Today I will explain the precedure in detailed steps. Prerequisite: 1,....
In this beginner blog post we are going to see how we can use Authorizations (Instance Authorization) in ABAP Restful Application Programming Model. Ref: https://help.sap.com/docs/BTP/923180ddb98240829d935862025004d6/2f888de9d96e44acbfde2936d2c8bf24.html Instance Authorization Instance authorization is used for all authorization checks, in addition to the user role. With instance authorization, you can define authorization on a field or operation....
Recently I got a request for getting multiple PDFs from the service that was already in use , and I was already using ‘ GET_STREAM ‘ method to return a single PDF. Facing this request , the most quick and usable solution I thought was why not I am adding multiple PDFs into a single ZIP File....
In an SAP UI5 application, search helps are widely used and make up for a better user experience in selecting the data. There are multiple ways of adding search help to a field in the SAP UI5 application. The most commonly used way is by creating a search help dialog and binding it through the....
So you are a business process expert and you have spent time building some great skills – but you know not everyone on the team has had the time or the opportunity to get to the same level. You are looking for a way to reduce data entry and filtering mistakes across all apps, by....
The following blog will guide you to deploy a UI5 application on AWS S3 with Dynamo DB as backend database, Lambda as the business logic layer and API gateway which acts as a connection between the client(UI) and Lambda. Architecture Now lets tackle these layers one by one. Amazon S3: Head over to your....
Clean code is a term used to describe software that is easy to read, understand, maintain and test. In this blog I want to summarize some important principles and provide an entry into the topic for beginners. Besides, the blog shall connect to the style guide repository, the books and current initiatives where experts can....
This Blog post is regarding Activating Standard Fiori Application process. Introduction: In this blog post, I would like to work on the process of activating standard fiori application and show that application in fiori launchpad after it got activated. For that we have to follow the process which includes steps as follows…. Step1: We should....
In my blog Download And View PDF document From BTP Document Management Service In SAPUI5. I have demo how to view PDF document from BTP Document Management Service(BTP CMIS) . But customers need to realize other requirements like query, create and delete documents in BTP CMIS in SAPUI5. To query documents, we can use cmis query.( Text....
In my blog Test BTP SAP Print Service With Postman, I have explained how to SAP Print Service with postman. In this blog, I will explain how to use it to print document in an UI5 application deployed in BTP cloud foundry run time. To use a PDF document, I will combine the code with my blog Render....
This blogpost intends to show you in a (hopefully) super easy way how to build and deploy proper mta archives in your SAP BTP Cloud Foundry Environment in the context of an SAPUI5 freestyle application. With minor adjustments it will also work fine for any other HTML5 apps as well. It’ll provide you with a....
Great Day, Hope everyone are doing good!!! Problem Statement: In order to enhance the initial screen by adding custom button with popup table in the fragment here I am using request maintenance F1511(Standard App). Adaptation Project: Adaptation is a feature of SAPUI5 flexibility that allows to make UI changes for all users. By using SAP....
A few days ago, tipped off on twitter by Jakob Marius Kjær and Volker Buzek I created an extension to run WDIO tests (including WDI5) in vscode Still lacks a lot of features like support for cucumber and typescript configurations, but does work for basic cases See an example run here: As I mostly do backend, I only tested it on a couple....
The first step to check if the adaptation project is loading correctly is to verify if the adaptation is available on the front-end server. To check the availability use, the SAP Gui report started in transaction se38: /UI5/DEL_ADAPTATION_PROJECT. The search help available with F4 will show you all deployed adaptation projects. The report is available starting....
In this blog, I am going to explain How to Create Custom SAP Launchpad Theme using UI Theme Design. Introduction: UI theme designer is used to adapt the visual appearance of applications. You can upload your company logo, change font color, change background color, and so on. Prerequisite: Subscribe to the SAP Launchpad Service by going....
This blog post will give you an overview of how you can replicate information from SAP SuccessFactors to SAP Commissions using REST API. Sounds pretty basic right? How about we by leverage SAP’s Conversational AI and also use Speech-To-Text to accomplish our goal? Sounds interesting? Let us get started. Requirements: Create an account....
We publish the SAP Fiori development every other month to share new information with developers in the SAP ecosystem about SAPUI5, SAP Fiori elements, SAP Fiori tools, and SAP Business Application Studio. The editorial team that curates the articles includes Oliver Graeff, Raz Korn, as well as Peter Spielvogel. To receive this content in your inbox, please subscribe to....
A UI5 Control exists out of two parts, the control logic (including metadata) and the renderer. This last one defines the visualization of the control by writing JavaScript and will generate HTML at runtime. Writing the HTML by using JavaScript function is not straight forward in case of complex UI5 Controls. Although UI5 is going....
During my daily work I’ve got a task to implement a call of another Fiori App from my Fiori Elements App. In order to achieve that I have found three possible ways to implement it (but only one of them was working for me): Intent-based Navigation as RAP CDS Association Intent-based Navigation as ABAP Call....
Hello, In this beginner blog post we are going to see how we can use Side Effects in ABAP Restful Application Programming Model. Ref: https://help.sap.com/docs/ABAP_PLATFORM/468a97775123488ab3345a0c48cadd8f/18b17bdd49d1436fa9172cbb01e26544.html What is Side Effects : When user makes a change to a field on UI, and this change effect the content of other field, this behavior is called....
本文将描述如何基于JSONModel数据模型，在前端对数以十万计的列表数据进行分页操作，给使用者营造出流畅的UI交互体验。 背景介绍 前端子项目基于SAP UI5框架进行开发，作为一个微服务部署在SAP Business Technology Platform。通用设计为List Page采用OData数据传输协议，Object Page采用RESTful API进行数据交互。在Object Page中，有一张列表包含着数以几十万计的Transmissions。为了防止页面崩溃，需要在前后端对列表数据进行分页操作。 需求分析 JSONModel作为一种客户端数据模型，将后端传来的所有数据绑定在页面View上，通过设置growing属性，点击load more表下按钮即可实现前端数据的懒加载。本功能需求是后端也要进行分页读取操作，并不能一次性将所有数据返回到前端，因此无法触发load more按钮的事件监听。解决思路是后台返回所有数据的总条数，来改写JSONModel的totalCount参数，从而触发load more按钮的事件监听。 代码实践 新建一个GrowingJSONModel类 sap.ui.define(['sap/ui/model/json/JSONListBinding'], function (JSONListBinding) { 'use strict'; /** * PagingJSONListBinding * @class * @extends sap.ui.model.json.JSONListBinding */ return JSONListBinding.extend('archiving-variants.javascript.GrowingJSONListBinding', { getLength: function () { return this.getModel()._totalCount; } }); }); sap.ui.define( ['archiving-variants/javascript/GrowingJSONListBinding', 'sap/ui/model/json/JSONModel'], function (GrowingListBinding, JSONModel) { 'use strict'; /**....
Hello fellow SAP developers, this will a short one but I think it might be helpful to other developers. We had the problem, that the READ requests from our SAPUI5 application took a very long time to process in the S4/HANA backend system but were actually returning fine. Somewhere in SAPUI5 app, the CAP middleware,....
This blog is about an important principle for improving the quality of documentation. It can also help to improve decision making, collaboration and more effectively use meeting time by leveraging written asynchronous communication. Documentation (e.g. Architecture Documentation, Good Practices and Product Documentation) should be treated as code, which means that it is: placed under version control very simple syntax changes undergo reviews....
I am grateful to share the concept of Standard Fiori App Activation. So, found gathering info here and there. There by I am writing this blog which would be more useful within single shot. In this Blog I tried to make things simple and easier with some reference screenshots that helps you to make Standard Fiori ....
In this blog you will see how to implement the following concepts of Multitenancy: Creating tenants Deleting tenant Dependency callbacks Creating and updating the database schema and deploying the artefacts for the tenant. Our reference application has a microservice to handle onboarding requests. This helps in isolating the responsibilities and scaling the application as per demand.....
As a “heavy user” for food delivery apps, i always wondered how would SAPUI5/FIORI feels like for this type or requirement…as most of the “app usage” today is around: food delivery apps, communication/social network apps and shopping apps. Nowadays we can find SAPUI5 (specially on BTP public Apps) been used in all sorts of scenarios,....
In my blog Configure the SAP BTP Cloud Foundry Environment Subaccount with SAP Forms Service by Adobe and Test with Postman , we can get the base64 encoded adobe content in postman. In this blog, I will explain how to view the rendered pdf content in SAP UI5 application . Prerequisites You have a subaccount on SAP....
My last blog series have been based on the Architecting BTP CAPM based applications, this is the extension of those Blog series with some Real Life Business Challenges and solving the problem with ease utilizing the BTP CAPM Framework. I am working as a BTP & S4HANA Solutions Architect and working extensively on BTP & S4HANA greenfield Implementations.....
This is the final blog of my Blog series “Architecting Complex Real Life Business Scenario on SAP BTP with ease [ Targeting Multiple backend S/4HANA Systems utilizing Principal Propagation ]”. We have discussed so far Business Requirement in detail and understanding of the Landscape Technical Architecture & Component Detail In this blog, We will discussing....
This is Syed Baba Tajuddin Hussaini with a new blog post on SAPUI5. The blog post you are viewing at this moment provides the following helpful information for newbies: How to identify the “view name” and the “UI element”? When the button is clicked, which function is called, and its location? Let’s get straight to the point: How to identify....
In my blog Render and View PDF in SAP UI5 with Forms service by adobe in BTP , I have explained how to render PDF in a SAPUI5 application with SAP Forms Service by Adobe in BTP(ADS). SAP Forms Service by Adobe is charged by numbers of request . If the users always call ADS to render PDF for....
On the 24th of September I attended the SAP Inside Track 2022 event to join the big re-connect! It was a pleasure to see so many SAP Community members in one place, after 2 postponed years of SITbe! All these people, a great location and amazing sessions were key to another fantastic and fun SITbe edition. Together with....
in this blog post I want to show you a not pretty new but still quite unknown tool, that eases the process of writing good and stable OPA5 tests dramatically. The Fiori Elements Test Library V4. The idea behind the test library was to reduce the efforts of writing and maintaining your OPA5 tests. As Fiori....
Hello World! It’s been a while! This time i was investigation and exploring some innovation requirements and came across questions like: “How could we explore facial recognition inside SAP/Mobile applications?”… With this challenge accepted, i’ve decided to create a POC App that would make the screen interact with the user only based on their facial....
Almost exactly 3 years ago, we went open source with the OpenUI5 developer documentation: OpenUI5 Developer Guide: Have Your Say! Next up: SAPUI5! What is the Open Documentation Initiative? In a nutshell, the Open Documentation Initiative is SAP’s way of opening up its documentation sets for outside contributions. Here’s how DJ Adams puts it: Looking at some documentation and you’re not....
This blog, will give you an in-detail ,technical description on how to extend/navigate , to a custom/canvas page, from a List-report page, within a List-Report application. The standard, List report navigation functionality, allows user to navigate to “object page”. However, at times, we might require to navigate to a custom/canvas view. The basic idea is....
When building UI5 apps you will need to develop a custom UI5 control sooner or later. Doing this requires (or at least it is recommended to do so) to bundle those UI5 controls in a library. With TypeScript support for UI5 you do not only develop UI5 apps in TypeScript but most likely also UI5....
Latest Update October 21: For those customers who still have custom forms based on Interactive Forms by Adobe there is a new frameless navigation mode in SAP S/4HANA 2022 that can launch an app in MS Edge Internet Explorer Compatibility mode. However given that no other web browser supports the underlying controls, you are recommended to....
Often you think a task will take 5 minutes, say for example cloning a colleagues repo and running it locally, often reality thinks differently. After installing the dependencies I assumed I could jump right in and test: npm start <RealityJoinsTheChat> at Server.emit (events.js:412:35) at emitErrorNT (net.js:1358:8) at processTicksAndRejections (internal/process/task_queues.js:82:21) { code: 'EADDRINUSE', errno: -48, syscall:....
Hello World! This is my first blog! I recently had a requirement where the client wanted 365 columns in a table. The goal was to edit the schedule of multiple employees in one table over the period of a year. Another requirement was to scroll horizontally (just like Excel). Although the Fiori guidelines clearly states....
Continuing the innovation series, i wanted to bring back an “old” topic but that is not really explored in the “SAP World” so far… Gamification! What if SAP applications (Mobile, FIORI, UI5, etc) could bring more of a “gaming UX” for some functionalities and scenarios, improving the overall experience with SAP (that was knowned in the....
Hi SAP Fiori and SAP UI5 development enthusiasts, It’s been a little while since I wrote my last blog and I came across an issue while developing a custom SAP UI5 application that was quite challenging and required a lot of painful research. I finally managed to crack the code and come up with the....
Introduction When building UI5 apps you will need to develop a custom UI5 control sooner or later. Doing this also requires (or at least it is recommended to do so) to bundle those UI5 controls in a library. With TypeScript support for UI5 you do not only develop UI5 apps in TypeScript but most likely....
Using third-party libraries might be a bit more complicated in UI5 with TypeScript. The solution to do this is way easier than you would expect. Around a year ago, Peter Muessig already shared the solution for this. Maybe you’ve already seen this blog post of Peter so you know how to use this: https://blogs.sap.com/2021/11/15/using-npm-packages-in-ui5-without-shims/ ....
Continuing with the innovation series, and going a little deeper on UX with SAPUI5… also adding the news that the 2022 Football World cup is coming up, why could’t we create a SAP application that could help the teams in realtime on the field, like the one in NHL league? Focusing on the Animated UX, it....
After couple of months of work and refactoring, the SAPUI5 Extension is finally working with Typescript. There are a lot of pros to use TS, however, UI5 has some inconveniences. Together with this announcement I will give some advice and explain new TS related commands, which are introduced in v0.15.0. Control type casting One of the painful....
Hi everyone! I’ve always found it frustrating to have to maintain several i18n files by hand. Maybe when you need to support 2 languages is not a big deal. But when you have to support 4 or more, you can easily add the entry on the main i18n file but forget to update the said....
Hi Readers!! Hope Everyone are doing Good and safe. In this blog post I am going to demonstrate how you can Export exact page data to Excel using npm-xlsx libraries with adding excel Styles. Why npm-xlsx : This is the third party library generally used for Exporting and data to XLSX file with adding Styles....
Hi Readers!! Hope Everyone are doing Good and safe. In this blog post I am going to demonstrate how you can Migrate an webide /neon application to BAS and deployed to BTP cloud foundry and also Create roles, catalogs and Groups on launchpad. Steps Include: 1.Export Application from sap webide/ neon. 2.import that file to....
Here is a step-by-step procedure on how to check if the adaptation project is active. Open the app that you want to check Run the SAPUI5 Diagnostic by using the following shortcut: CTRL+SHIFT+ALT+S Expand the “Flexibility section” If the adaptation project is active, you should see the custom namespace. For example: “com.acme” See also: Quick tip:....
The blog shows how to achieve fuzzy search and case insensitive by overwriting the CQL (CDS Query Language). If you are not familiar with CQL, please refer to the link Story As a fiori (SAPUI5) developer, most of you knows smart table and smart filter, they provide a rapidly way to customize a inquiry page....
In this blog I’m going to explain how to add a new input row to the table by the button click in the sap Ui5 which will help the beginners, for more information about table : https://sapui5.hana.ondemand.com/sdk/#/api/sap.m.Table%23controlProperties Firstly we need to create a project, then in view we have to write a code for the simple....
In this article, you will learn easily to develop a Python flask framework with designing your own SAP UI5 application template which can be tested locally and finally deploy it SAP BTP for users to access. Prerequisites Python Github Repo to clone Cloud Foundry (CLI v7) Let’s Get Started To test locally templates/index.html <!DOCTYPE html>....
We recently had a request from a customer to develop a SAPUI5 application that should be translated into German and English. The English language should be used by default, if the user language was neither English nor German. At the same time, a SAP gateway service was used from a system where the default language....
Hi All, In this blog I’ll explain 2 things. firstly, about a toggle button how it will change its name dynamically on button click and then how it will toggle the footer which we have added on the screen. so in the below, I’ve written the xml code, you can observe I’ve taken toggle button....
In the last blog we covered “How to prepare and enable your existing custom fields in tables EBAN and EKPO and show on GUI” Here we will learn – “How to publish the PR custom fields on Standard Fiori App – “Manage Purchase Requisition – Professional”“ Here we go by the Adapt UI option. This approach....
As application developer you want to enhance your Web Dynpro ABAP application also with controls from other sources, if this control is not offered by Web Dynpro ABAP. Your first choice should be a UI5 control: The control libraries of Web Dynpro ABAP and UI5 support the same themes and product standards as accessibility (ARIA)....
Are you interested in developing your own UI5 applications and starting a workflow instance from them? You can follow this quick exercise using your SAP Business Technology Platform trial account. Please bear in mind that now we have more capabilities for Low-Code/No-Code (LCNC) which you can use leveraging SAP Process Automation and its forms (if you’re interested,....
Easy UI5 is the tool of choice of UI5 developers to kick-start UI5 freestyle projects. The plugin generators (or sub-generators) listed in Easy UI5 are provided by the UI5 community and the UI5 team and include the latest best practises and features. As of today, all plugin generators are from the ui5-community GitHub organisation. Last week....
I’m Pooja from India, I’ve been working in SAP Domain for the past 10 months, and I have developed many things which I will share in my future posts. I hope my blog will help a lot of beginners. This is my first blog, Today I am about to explain How to create a sticky....
Introduction As already declared by SAP, Business Application Studio (BAS) is the future of Web IDE . So, in this blog I will share how to migrate applications created in Web IDE to BAS. To run a project locally on BAS we need to add some files as well as make changes in certain files. There are blogs online....
This SAP Tech Byte is about how to use the Destination Service on Cloud Foundry and consume destinations using a node.js based approuter. The source code for this blog post can be found on https://github.com/SAP-samples/sap-tech-bytes/tree/cloud-foundry-basics/post3. Building on top of the previous blog post of this “Cloud Foundry Basics” series, where we learned how to serve a web....
This blog was years in the making, but finally here it is 😊 In short words, I’ll be addressing one hack I’ve been recurring to in almost every SAP Fiori Elements application development – the expanded usage of Visual Changes. Introduction Over the years, we’ve been able to add visual changes to SAP Fiori Elements....
With the release of UI5 1.105, the wdi5 dialect for locating UI5 controls was added to the Test Recorder. The UI5 Test Recorder comes with UI5 and allows for browsing the “control tree” of a UI5 application. It exposes controls for selection via a test tool dialect in a point’n’click fashon (“low code”, anyone?!? 😂) It opens by pressing ⌃ control + ⇧ shift +....
On many occasions, users need to upload an excel file from the local system and extract the content from the excel file to send to backend SAP. There are multiple ways to achieve the extraction of data from excel file and send the content to SAP system. In this article I am going to explain....
There are things known and things unknown and in between are the doors. -Jim Morrison (Singer) Introduction: When we are working on BTP, most probably one of the initial service we lay our hands on is the XSUAA service as all security on BTP is controlled by and revolves around xsuaa. Approuter is a Node.js....
I was working on an application in SAP Cloud BAS where the existing application in SAP BAS throws an error while trying to run/execute the application where the error says that the updated Node JS version is unavailable why because BAS was using an older version of NodeJS.for resolving this issue I have updated the....
Dear Readers!! Hope Everyone are doing Good..! In this blog post I am going to explain How to display the columns in the table and Export the columns to spreadsheet dynamically based on the oData/JSON. Steps includes: Create a Json data Create a table from Controller and attach this Json data to the table. Adding....
wdi5 is seeing increased adoption as the designated end-to-end test tool for UI5. With its’ support for both UI5 Control- and Webcomponent-APIs and its’ locator compatibility with OPA5, UI5 developers quickly feel at home in “their” turf. As it is with many developer tools, the ecosystem around the tool is at least equally important as the tool itself. By....
In this blog I am going to explain you, How to download a tree table data to excel. There are lot of methods available to export data if you are using sap.**.Table or sap.*.table.Table, but In case of tree table you will have your model data in nested structure. Here using JSON data and downloading....
You have a custom Fiori application developed using WEB IDE which is already deployed in backend in your on-premise system. At this moment, you do not have a WEB IDE instance and you wanted to make amendment to the application, you have a BTP license with Business Application Studio. How you will migrate the application....
A while ago I had to add and consume a Custom UI5 Library in my development project. When checking out the possibilities on how to achieve this, I came across a very well explained blog post on How to consume UI5 custom libraries in BAS or VS Code via Yarn workspaces by Mio Yasutake . I tested out the....
Users now demand information in real-time. If you have to refresh the page to get new information, it’s already too late. Luckily, a protocol supported by all modern browsers to allows for direct data exchange: WebSockets. Using ABAP Websockets, my colleague Basant Singh and I have explored and created a basic application in UI5. So let’s get....
In this blog post I want to share how to apply a custom theme that was built with the UI theme designer to a UI5 application that is not running in the SAP Fiori Launchpad (e.g. your local development environment). The UI theme designer is part of the SAP Fiori Launchpad and let’s you modify existing....
This is my first blog on UI annotations/Local annotations. There two ways we can write annotations. Using CDS views Using annotation modler in webide We can overwrite the annotations coming from backend cds view using annotation modler. In this blog I am focusing purely on Local annotations for List report object page application which are....
Please refer to my first blog: Fiori OVP Cards with XML Annotation using CDS This blog is extending my first blog. Navigation from OVP cards to the Drilldown application (Which is developed by using Manage KPIs and reports) In the Annotation file: We need to add UI.Identification annotation in the annotation.xml file. The XML code is like the....
Working with Fiori Elements Overview Pages is challenging because of the dynamicity of the data, at the same time this is a very interesting resource to deliver to customer as they can analyze several data in different ways. On this blog post I going to explain how we make each individual card consider filters of....
In this blog, we shall learn how we can create OVP Column card using XML annotations which based on the CDS service which is very simple process. I will cover only Column type OVP card creation, consuming the CDS view using annotation file. Pre-requisite: Have to understand or knowledge on UI. Annotations Creating new app....
In order to reach the business rules service, configure the managed app router with a ‘service’ and ‘endpoint’ "service": "com.sap.bpm.rule", "endpoint": "rule_runtime_url", route in ‘xs-app.json’, instead of a ‘destination’ route. Goal Where to store the configuration of an HTML5 application? Perhaps the most convenient and business-friendly solution would be to use the Business Rules Service. The Business....
I haven’t used the OData v4 model in UI5 Freestyle apps a lot. I had the idea that I would lose the flexibility of the Odata v2 model (in combination with a JSON model) and this would block me at some point developing UI5 apps. My main concern was the possibility to create a custom....
Introduction This blog won’t deal with well known and traditional reactive programming libraries like RxJs. But I advise you to have a look at those blogs: Reactive Programming in UI5 Application Reactive state management in SAPUI5 via MobX Building a SAPUI5 application with Predictable State Container This blog aims to underline how to simply use....
We have a new code challenge for you as part of the Community Spotlight for the month of June. This time it’s about testing UI5 apps with wdi5. Read on for all the details. Code challenges are all about having fun, trying new things, and learning along the way. For this code challenge we invite....
There is a nice feature available on fiori elements List Report / Object page applications: navigate from list report to object page in edit mode . This is cool, but not available in previous SAPUI5 versions (I don’t know when it appeared but it is not available in 1.71). As I couldn’t find any solution to....
Writing readable, maintainable and testable code is a practice and discipline you can apply to any kind of programming language. And many developers switch between languages and frameworks (e.g. between ABAP backend and UI5 frontend development). Therefore we wrote the books Clean UI5 and Clean ABAP with the intention to simplify learning and make it easier....
In the past I shared a blog post on how to combine Dialogs with Fragments in UI5: https://blogs.sap.com/2017/03/09/ui5-fragments-and-dialogs/ . This is an approach which I still use today but in combination with TypeScript. Therefore, I’ve updated the code to TypeScript. Besides that, I also improved some aspects of it to gain more of the TypeScript benefits.....
This SAP Tech Byte is about how to use an approuter on Cloud Foundry to serve a web page. We will use the approuter to authenticate users and route them to the web page. The source code for this blog post can be found on https://github.com/SAP-samples/sap-tech-bytes/tree/cloud-foundry-basics/post2. Building on top of the first blog post of this “Cloud....
In this blog I’ll share with you a helpful strategy I came up with along my Fiori development jouney – reutilizing standard i18n texts. Introduction Over the course of a Fiori app development, I was bored of writing some of the most commonly-used labels in the i18n files (like Dialog labels – e.g. “Close”,....
Requirement is to have Managed App Router based Fiori app in SAP BTP- CF which is calling OData/web service(We have taken example of Northwind for this project) and add additinal authorization layer with the help of XSUAA to achieve in app authorization. Here Node JS API and HTML5 modules are added in single MTA sharing instance....
Today’s UIs must be visually appealing and SAPUI5 does come with charting capabilities. Note: This is a complete rewrite utilizing the latest amCharts 5 version and a different concept. In my projects in need much more than that. More types of charts but also more flexibility within each chart. For example a chart like that. To....
After we have adapted an SAP Fiori elements application in my last blog post, today we are going to make changes to a freestyle SAPUI5 application. Before you proceed, please make sure you understand the different capabilities of SAPUI5 Flexibility by reading this blog. We will start with a purchasing app and add a custom column to an existing table....
Lets Get Started with creating a new BAS Account. As I have been using Sap webide to develop my application I got a requirement to start working on the Business Application Studio where we can have more number of features. So found gathering info here and there. There by I am writing this blog which....
When wdi5 was announced as UIveri5-successor mid-February, the announcement also contained a roadmap and an outlook on what’s next for the tool. SAP took the opportunity and sponsored the Open-Source development of wdi5 to make sure the tool reaches feature parity with UIVeri5. As the official release 0.9.0 just happened, let’s look at where we’re at. roadmap: status TypeScript rewrite and drop kapsel-/Cordova-support ☑️ done UIVeri5....
Lately, question of why smart controls, are not part of OpenUI5 started coming to our team on a regular basis. So, we started wondering if all smart controls need to be part of OpenUI5 or just some of them? Therefore, I’d like to reach out to you and open discussion in the SAP Community Coffee....
For years, members of the UI5 community have been building extensions in the UI5 ecosystem. Be it custom controls, extensions for the UI5 tooling, generators or utilities in general. For a central point of reference, the GitHub organization UI5 Community was created last year. This already contains a large number of projects that can be used. UI5-community....
The below demo provides You code samples to write a console log using the UI5 Log API, which can be turned on/off on demand when using UI5 applications. Developing a framework for UI5 can benefit from switchable logs, especially at the initial phase, or during troubleshooting. The demand and purpose can of course vary to utilize....
SAPUI5 is a frontend framework that allows for the building of apps that follows SAP Fiori, the design guidelines for SAP. The apps are built with an MVC (model, view, controller) pattern using HTML5, JavaScript, XML, OData and JSON. It is highly versatile and very well supported. But what if you want to design an....
Hello! This is the eighth part of the Multi-part Tutorial series about SAP Graph – the new API for connecting to your business data. We are going to show you, a SAPUI5/Fiori developer, how to use the business data graph created in Part 7: Key Mapping with SAP Graph to build a Fiori Elements app using the SAP Business....
As working with SAP Fiori applications becomes more and more important for customer I like to share some insights on how to handle them with SAP Solution Manager 7.2 – Process Management. In SAP Solution Manager 7.2 – Process Management it is possible to document SAP Fiori applications within the solution documentation functionality. There are....
Document Information Extraction is a service provided on BTP. It leverages machine learning and you can upload business documents such as invoice, purchase order to receive extracted information. The purpose of this blog post is to demonstrate how to integrate Document Information Extraction with UI5 application. We will upload an invoice and get extracted information displayed....
Welcome to the Third episode of the Series: SAP CAPM Full Stack UI5 Application with CRUD Operations. Till now we have created Development Space in BAS and set up a project structure for further development. In this episode, we will create a database entity for the project and expose the same. Assumption(OR Must Have to Start): You have....
Welcome to the Fourth Episode of the Series: SAP CAPM Full Stack UI5 Application with CRUD Operations. Till now we have created Development Space in BAS, set up a project structure for development, created entities and exposed the same as Odata services. In this episode, we will be inserting the Data in the created database entity for the....
Introduction This blog helps UI5/Fiori developers understand sap.m.uploader.UploadSet UI Element in detail. Problem The SAP UI5 Demo site explains the UploadSet sample application. However, the site can not explain how it works with a back-end system. Solution Below is the step by step working example of the UploadSet UI element that I have implement. Hope....
Welcome to the Sixth Episode of the Series: SAP CAPM Full Stack UI5 Application with CRUD Operations. Till now we have created Development Space in BAS with a project structure for development, created entities and exposed Odata services. In this episode, we will create a Table in UI, do READ Operation on our Odata service & bind the....
Welcome to the Seventh Episode of the Series: SAP CAPM Full Stack UI5 Application with CRUD Operations. Till now we have set up Development Space in BAS, created entities, exposed and Integrated Odata services. In this episode, we will do Create and Delete Operation on the Table created in the previous episode. Assumption(OR Must Have to Start): You....
In this series of Blogs, I would be discussing about Architecting, Solutioning, designing complex Cloud Application Programming Model based applications using SAP BTP (Business Technology Platform) Extension Suite. Blog Posts in this Series Here’s the list of blog posts in this series for you to follow. **I will update the Link as soon as I....
In many use cases it is required to build and deploy a Fiori app as a standalone webapp. This may be the case when you do not want to buy SAP BTP Portal Service or the SAP BTP Launchpad Service or if you want to build a offline PWA app and also if you want....
Welcome to the Eight episode (Not the last) of the Series: SAP CAPM Full Stack UI5 Application with CRUD Operations. Till now we have created Development Space in BAS with project structure for development, created entities, exposed Odata services and done Update & Delete Operation. In this episode, we will do Edit Operation in the created table. Assumption(OR....
Patch-Level Independent Bootstrap We listen to your feedback! A while back we got the feedback to make the bootstrap URL more stable and in dedicated feedback rounds, we evaluated that this should apply especially to the bootstrap URLs of long-term maintenance versions. With the introduction of the removal of outdated versions, this feature becomes even more....
Having a code base, which is readable and maintainable is essential for sustainable development. The book Clean Code from Robert C. Martin and some other books contain many best practices around maintainable code. Writing cleaner code is an easy way to boost the quality, maintainability and testability of your code. With Clean SAPUI5 we provide....
This article gives you the information related to UI5 Integration Cards overview and gives you an idea to develop for your own projects which can provide a quick information for business users in one single portal. UI Integration with Cards Documentation In order to develop cards the card developers should be familiar with: Getting Started Card types....
This month our team faced a blocker issue of case sensitive filter in SAP Fiori List Report applications supporting Nodejs / Java CAP Model as backend. The business wanted a solution with case insensitive filtering of selection fields in List Report applications. After so many research and blog reviews I have found a simple solution to this. At the time I....
“When the winds of change blow, some people build walls and others build windmills.“ -Unknown, An ancient Chinese proverb Introduction Dear friends, wish you all a very happy and wonderful new year. As i said in the last part, in this, we will deploy an sapui5 application for managing our test cases. Developing sapui5 applications....
Modern user interface frameworks are taking a lot of action to run as efficient as possible. One example for that are multiple tabs in a browser. There can just be one active tab at a time which is in the foreground. UI frameworks try to limit the resource consumption of the inactive tabs as much....
The SAP Mentor Spotlight Interview Series highlights key strategic topics, such as emerging technologies, learning, and other topics, and provides insights from Mentors and SAP leaders on turning ideas into innovative approaches that impact people, process, and technology. Throughout the co-innovation process, discovering end user and cross-team needs is critical. Engaging end users to identify and understand....
Recently, we got a requirement from customer that said the filter function of the ‘sap.m.MulticomboBox’ not easy to use because the default behavior is filter from start per term, just like below. Default behavior But customer wants filter works like ‘contains’, so that the items which contains the key words that end user inputted will....
Introduction After really a long gap of almost 8 years I am writing this blog and sharing my experience of using FLP notification service in SAPUI5. Hope this will help my fellow community members in some of the difficult situations the may face. Notifications are ubiquitous in technical arena. It not only makes the user....
SAPUI5 Flexibility supports the easy extension of SAP delivered apps ensuring that the adapted application (called Application Variant) will be compatible with future updates provided by SAP. A variant is semantically a new application with an own id, which technically is comprised of the extended application resources and the changes created as part of adaptation project.....