SAP Community - JavaScript

CDS-TS-Repository: Simplify SAP CAP Entity persistance with BaseRepository

2023-11-16T09:31:09+01:00

Hi all,

Many of us are leveraging SAP CAP (Node.js with TypeScript) for our projects.

While CAP provides an abstract mechanism to derive RESTful oData services given a CDS data model there's always room for more efficiency and improvement in the implementing communication between business logic, service, and persistence layer.

It shall be noted at this point, that improvements have been attempted with regard to the service layer communication using cds-routing-handler However, this framework does not appear to be maintained, especially for newer versions of CAP.

-

Blog series

1. CDS-TS-Dispatcher: Simplifying SAP CAP TypeScript Development

2. CDS-TS-Repository: Simplify SAP CAP Entity persistance with BaseRepository

3. SAP CAP: Controller - Service - Repository design pattern

Crafted by developers for developers by ABS & DxFrontier team

-

In this blog, we will concentrate on the CDS-TS-Repository.

Prerequisites

Before we dive in, you should have a basic understanding of SAP CAP NodeJS and TypeScript. If you need a refresher, here are some helpful resources Official SAP CAP TypeScript

Section 1: Introduction to CDS-TS-Repository

The goal of CDS-TS-Repository - BaseRepository is to significantly reduce the boilerplate code required to implement data access layers for persistence entities by providing out-of-the-box actions on the database.

Section 2: Benefits of CDS-TS-Repository

Common actions for the most used persistence actions to the DB :

create - Create a new entry in the table.
createMany - create many entries in the table.
update - Update entry in the table.
delete - Delete an entry from the table.
exists - Check the existence of an entry in the table.
findOne - Find one entry in the table.
find - Find entries in the DB.
deleteMany - Delete many entries from the table.
deleteAll - clear a table
getAll - Fetch all entries from the table.
... and many more

Support draft actions by using BaseRepositoryDraft class and Mixin.

Section 3: Getting Started with CDS-TS-Repository

Now, let's get started with CDS-TS-Repository. We'll walk you through the steps to integrate it into your SAP CAP TypeScript project, providing code snippets and configuration examples for a smooth onboarding.

1: Install cds-ts-repository NPM package.

npm install @dxfrontier/cds-ts-repository

2. Generate type entities using cds-typer

npx -js/cds-typer "*" --outputDirectory ./srv/util/types/entities

The cds-typer offers a way to derive TypeScript definitions from a CDS model to give you enhanced code completion and a certain degree of type safety when implementing services.

Target folder :./srv/util/types/entities - Change to your location destination folder.

3: MyRepository class
Start by creating a MyRepository class, which will extend the BaseRepository to handle operations for your entity

import { BaseRepository } from '@dxfrontier/cds-ts-repository';

import { MyEntity } from 'YOUR_CDS_TYPER_ENTITIES_LOCATION';


class MyRepository extends BaseRepository<MyEntity> {
  constructor() {
    super(MyEntity) // a CDS Typer entity type
  }

  aMethod() {
    // BaseRepository predefined methods using 'MyEntity' entity
    // All methods parameters will allow only keys/values of type MyEntity
    const result1 = await this.create(...)
    const result2 = await this.createMany(...)
    const result5 = await this.getAll()
    const result6 = await this.getAllAndLimit(...)
    const result7 = await this.find(...)
    const result8 = await this.findOne(...)
    const result9 = await this.delete(...)
    const result10 = await this.update(...)
    const result11 = await this.updateLocaleTexts(...)
    const result12 = await this.exists(...)
    const result13 = await this.count()
    const results14 = await this.getLocaleTexts()
    const results15 = await this.builder().find(...).orderAsc([...]).getExpand(['...']).execute()
    // ...
  }
}

Section 4: Examples

Let's see how CDS-TS-Repository simplifies common tasks.

import { BaseRepository } from '@dxfrontier/cds-ts-repository';

import { MyEntity } from 'YOUR_CDS_TYPER_ENTITIES_LOCATION';

class MyRepository extends BaseRepository<MyEntity> {
  constructor() {
    super(MyEntity);
  }
  public async aMethod() {
    const created = await this.create({
      name : 'a new entry',
      description : 'description'
    })

    // update
    const keys = { ID : '34' }
    const fieldsToUpdate = { name : 'updated entry with a new name' }

    // updated will return boolean (true if updated, false otherwise)
    const updated = await this.update(keys, fieldsToUpdate)

    // exists will return boolean (true if exists, false otherwise)
    const exists = await this.exists({ID : '84c67833-a9cb-450c-ae02-a32c3a7a6f6b'})

    // results will contain an Array of your entity object
    const results = await this.getAll();

    // delete will contain true if delete operation is successfull, and false otherwise
    const deleted1 = await this.delete({ name: 'Customer' });
    const deleted2 = await this.delete({ ID: '2f12d711-b09e-4b57-b035-2cbd0a02ba19' });

    // count the number of items
    const itemsLength = await this.count();
}

Section 5: Draft compatible using BaseRepositoryDraft and Mixin

BaseRepositoryDraft repository provides a clear separation of methods for working with active entities and draft instances.

import { BaseRepository, BaseRepositoryDraft, Mixin} from '@dxfrontier/cds-ts-repository'

import { MyEntity } from 'YOUR_CDS_TYPER_ENTITIES_LOCATION'

class MyRepository extends Mixin(BaseRepository<MyEntity>, BaseRepositoryDraft<MyEntity>) {
  constructor() {
    super(MyEntity)
  }
  // ... define custom CDS-QL actions if BaseRepository ones are not satisfying your needs !
}

Use BaseRepository methods when dealing with active entity instances.

update
delete
create
createMany
... and many more

Use BaseRepositoryDraft methods when working with draft entity instances.

updateDraft
deleteDraft
findOneDraft
findDrafts
... and many more

Mixin BaseRepository and BaseRepositoryDraft

For more info about CDS-TS-Repository visit the following GitHub

Conclusion

In conclusion, CDS-TS-Dispatcher combined with CDS-TS-Repository is a powerful tool that can speed up your SAP CAP TypeScript projects by eliminating repetitive code and being a better fit for common team architecture setups.

Whether you're starting a new project or enhancing an existing one, integrating CDS-TS-Repository is a significant step towards a more efficient and productive development journey.

Additional Resources

Find an example of usage of the CDS-TS-Samples GitHub

Like

A Shared Language to talk about Technical Debt

2023-11-17T13:40:59+01:00

Everyone has heard of financial crisis where the economy is in trouble and where people and companies are overwhelmed with financial debts. The consequences can be disastrous. Did you know that such crisis happen often in software development? Technical debt is a sneaky plague that can hurt projects, deliveries, people, and sometimes an entire company. This blog is the first in a series of blogs on technical debt on what it is, where it comes from, and how to deal with it. It will shed light on something we too often ignore, but can take control over by being proactive!

The intention of this blog is to define the term and to provide a shared language to talk about technical debt.

What is Technical Debt?

Ward Cunningham: "Although immature code may work fine and be completely acceptable to the customer, excess quantities will make a program unmasterable, leading to extreme specialization of programmers and finally an inflexible product. Shipping first-time code is like going into debt. A little debt speeds development so long as it is paid back promptly with a rewrite... The danger occurs when the debt is not repaid. Every minute spent on not-quite-right code counts as interest on that debt. Entire engineering organizations can be brought to a standstill under the debt load of an unconsolidated implementation."

Technical debt, a term coined by Ward Cunningham, is a concept in software development that reflects the implied cost of additional rework caused by choosing a quick and easy solution now instead of using a better approach that would take longer. It's a metaphor that equates software development to financial debt, illustrating the trade-off between short-term and long-term benefits. When a development team takes shortcuts, such as skipping parts of the coding process to meet deadlines or opting for a less optimal solution to save time, they incur technical debt. While these shortcuts might speed up the development process in the short term, they often lead to more work in the future as the team has to go back and fix the issues that arise from these shortcuts. This is similar to how taking on financial debt can provide immediate funds but requires repayment with interest over time. Technical debt can be categorized into two types: intentional and unintentional. Intentional technical debt is a strategic decision made with the understanding of the future cost. Unintentional technical debt, on the other hand, is accrued due to lack of knowledge or oversight, and is often discovered later when issues arise. It's important to manage technical debt effectively. If left unchecked, it can accumulate 'interest' in the form of decreased productivity, increased complexity, and reduced code quality. This can lead to a slower pace of development, making it harder to implement new features or fix bugs. However, not all technical debt is bad. Sometimes, incurring technical debt can be a strategic decision. For instance, a startup might choose to incur some technical debt to speed up development and get their product to market faster. The key is to manage it effectively and pay it off regularly by refactoring code, improving documentation, and investing in automated testing. Technical debt is an inherent part of software development that needs to be managed strategically. By understanding its implications and making informed decisions, development teams can balance the need for speed with the importance of code quality and long-term maintainability.

Technical Debt - Dilbert by Scott Adams

Types of Technical Debt

There are various forms of technical debt. The following list is not exhaustive, but it covers the most common types of technical debt.

Code Debt: A prevalent form of technical debt, code debt stems from shortcuts or subpar coding practices, resulting in inefficient or disorganized code, which is hard to read, maintain and test. This make all development and maintenance tasks slower and will degrade the "enjoyment" of writing code while demotivating engineers. More details on how to deal with code debt can be found in the blog post Clean Code: Writing maintainable, readable and testable code

Design Debt: Design debt emerges when the system design is compromised, often due to time pressures or inadequate foresight during the design phase, resulting in a system that's challenging to maintain and expand. Due to this kind of debt developers can’t get confidence quickly that their code will not break existing functionality and dependencies.

Testing Debt: Testing debt arises from insufficient testing, including a lack of unit, integration, or system tests. This can lead to unnoticed bugs and software issues. Another important type of testing are flaky tests. More details on how to deal with testing debt tests can be found in the blog posts:

Documentation Debt: Documentation debt occurs when system documentation is incomplete or outdated, hindering new team members' understanding and slowing down system maintenance and expansion.

Infrastructure Debt: Infrastructure debt arises when the supporting infrastructure, such as the operating system, database, development environment, build systems, and CI/CD pipelines, are outdated or inefficient.

Architectural Debt: Architectural debt occurs when the system's architecture fails to meet current or future functional and non-functional requirements, making the system difficult to maintain, adapt, or scale.

Knowledge Debt: Team lacks necessary expertise or the knowledge is not spread among the team, leading to "knowledge silos" and bottlenecks that can slow development and increase risk. This may be due to staffing gaps and turnover or inherited orphaned code/projects.

Dependency Debt: Dependency debt occurs when a system depends on outdated or unsupported third-party libraries or services. The Dependencies are unstable or rapidly changing. Teams are unable to take advantage of new improvements and remain vulnerable to security problems. This also can slow down the onboarding of new hires and cause frustration for current developers who are forced to work with older versions. More details on how to deal with dependency debt can be found in the blog post Keeping Dependencies Up To Date

Migration Debt: Migration is needed or in progress: This may be motivated by the need to scale, license issues, costs, to reduce dependencies, or to avoid deprecated technology. It can also occur when a migration was poorly executed or abandoned: This may have resulted in maintaining two versions.

Unused features / Dead Code Debt Dead and/or abandoned code: Code/features/projects were replaced or superseded but not removed. More features creates more conditions and more edge cases that developers have to design around, which erodes the delivery speed.

Reliability or Performance Debt: These can affect the customer experience as well as the ability to scale the business.

Tool Debt Inefficient tools (both proprietary and third-party) can introduce friction or overhead for developers, slowing delivery speed.

Manual Process Debt When a part of the product delivery isn't automated, it requires more manual time and effort.

Automated deployments Debt Automated deployment workflows enable the ability to deliver features to customers continuously and at will.

Coupling Debt Coupling between modules or services leads to teams potentially blocking each other, slowing down delivery speed. Domain Driven Design is a great methodology to deal with this kind of debt.

Duplication Debt Duplication of code, services, or functionality can lead to wasted effort and increased maintenance costs. On the other hand should duplication be balanced with the need for autonomy and independence of teams. Reduction of duplication can cause dependencies between teams, which can slow down delivery speed. So it is important to consider the trade-offs.

Conclusion

In conclusion, the legacy codebase, while being a significant asset, also presents a formidable challenge due to the inherent technical debt. This debt, if not addressed promptly, can become a substantial obstacle in delivering high-quality solutions and adapting to the ever-evolving market needs. Therefore, it is important to implement measures to manage and reduce this technical debt effectively. In the forthcoming year, I will publish a series of blog posts, each focusing on different aspects of technical debt. These posts will not only shed light on the complexities of the issue but also propose potential strategies, tools, practices, behaviorus, constraints and other approaches to deal with it.

Resources

Defining, Measuring, and Managing Technical Debt

Bottleneck Tech Debt

UI5 Goes Mad in Dorset!

2023-12-07T05:54:23+01:00

Here we have a random incoherent steam of thought, in regard to reading the first few chapters of “Clean UI5” from SAP Press. On the front page is a picture of a leaf, as in “take a leaf out of my book”.

Clean UI5 Book

https://www.sap-press.com/clean-sapui5_5479/

In the beginning was “Clean Code” by Robert Martin, whereby most of the examples were in Java, but the basic principles were timeless. That is, that the clearer the code is, the easier it is to understand, and thus maintain, and thus reduce costs and speed up development time.

Then we had the “Clean ABAP” book, backed up by an online Style Guide on GitHub, and also on GitHub a set of ATC checks you could download and use to analyse the custom code in your system. Lars sort of beat SAP to that with his “Open ABAP checks” on GitHub a few years earlier, but anyway, he likes the Clean ABAP style guide that is on GitHub, and so do I. Not everyone is going to agree with everything, but that is to be expected.

How NOT to a do a Book Review

Sometimes SAP Press gives me a free online copy of a book so I can do a review. In such cases I sort of try to write a book review, but it comes out as nonsense more often than not, a sort of rant about the concepts the book (whatever it may be) is talking about. I don’t know why they keep doing this, I suppose any publicity is good publicity as long as they spell your name right as P.T. Barnum once said. The musical about P.T. Barnum with Hugh Jackman was ten billion times better than the one with Michael Crawford from about 25 years earlier, by the way. I bought the Clean UI5 book myself.

The Clean ABAP book got a lot of grief, but I liked it, it was a bit incoherent, but then so I am, people are going to disagree with a lot of it, but that is the whole point, to get people thinking. Put another way if you say “Do XYZ” to make code cleaner people are going to say, no that is madness you need to do the OPPOSITE to make code cleaner. The point is that suddenly people are thinking about the best way to make ABAP code cleaner when they were not before.

James Joyce

So, what I did, was to read the first two chapters of the book, wrote down all the notes I made, and then pretended I would sort them out later. In real life I will just present the notes in the order that I wrote them, and since I read the pages in sequential order, you would hope the notes would come out logically as a result. The only thing that could prevent that is if the book wandered all over the place at random, like I do in my blogs.

JavaScript Things

You can declare a variable twice (or many times) within a “scope” (that is, within a function or whatever) but only the first one counts. In ABAP you get a hard “that has already been declared” error.

I am getting the feeling that the keyword VAR defines a global variable, no matter where it is declared. That is a bit like in ABAP when you define what you think is a local variable in a PBO/PAI module but in fact it is global.

The LET and CONST statements define local variables, which are even more local than ABAP, because they only exist within a programming block, a loop or some such. Apart from that it is just like ABAP – you cannot access the variable before you declare it. As I have mentioned CONST is a bit like a variable in ABAP. Declaring a variable that way is more like an intention that you don’t want the value to change, but you can change it if you want. The syntax check will tell you that if you are doing naughty things like that use LET instead.

The Style Guide Council

On GitHub there are “style guides” that talk about clean code, and the SAP Press books are expansions on this. At least, I thought that was the idea.

At the start of the UI5 book it seems to be teaching me a lot more about the very basics of JavaScript than the basic JavaScript book I have been reviewing. Whilst that is good in some senses, that seems the wrong way around to me, the basic book should explain the basics, the Clean UI5 book should assume the reader knows the basics and concentrate on readability/maintainability matters.

Sometimes you get two options, and it is not 100% clear which one is the “clean” option. You could have two options one after the other which do the same thing. In my mind the option that looks most like Plain English always wins, the option that looks less like machine code. That is words trump symbols.

Back to JavaScript Basics Again

Template literals – here, when building up a string, you use a &1 type variable as opposed to concatenation. The syntax is of course different between ABAP and JavaScript, but the concept is the same. I wonder if ABAP copied this concept from JavaScript or the other way around. Probably the former.

Promises - I was informed, years ago, that a big thing in JavaScript was “promises” where you could write the code so it looked it was synchronous (which made the code easier to read) but really you could control when it paused to wait for the result of something else.

The first example I saw of this (in this book) made me wonder where the pause was. It turns out the word THEN has a subtly different meaning to IF/THEN. In the case it means wait for something THEN do something else.

The subject moved on to “tag fragments” and my notes were “I don’t understand any of this” probably because I am an idiot.

Spread Syntax - two examples of two different ways to do the same thing with the quote “if you implement the same example using the spread syntax, the code is much easier to read” to which my notes were “Is it? Both examples read like gobbledegook”. There is really a lot to be said for verbose languages like ABAP. Why should someone have to guess that three dots (periods) in a row have a special meaning, as opposed to someone having a sneezing fit and pressing the period key three times by accident?

A little later we have to more examples that look almost exactly the same and the second one has the three dots which “makes the purpose explicit” but I don’t think it does.

Moving onto arrays we now have an example of an iterable object which is NOT an array called ARGUMENTS. Is this the right room for the ARGUMENTS?

In the example this is used in a function with the word ARRAY in its name even though it was just stated this is not an array. I suppose because the result looks like an array? Thank god for internal tables I all I can say.

Lovely Rita, PARAMETER Maid

Now we come to the subject of parameters in function calls (as opposed to method calls of objects). The recommendation is the same as in Clean ABAP which is to limit the number of parameters. The reason given here is that because parameters have no names in the caller, it is easy to forget one, or pass the wrong value in. Which is why I presume in ABAP methods the caller is forced to name the parameters if there is more than one going in or out.

The recommendation in JavaScript seems to be not to have a BOOLEAN parameter, and then the recommendation instantly changes (in the next sentence) to use a meaningful name for the function call, so you know what the BOOLEAN parameter means. The example given is a standard SAP UI5 function into which you pass the value TRUE and there is no way in ten billion years you could guess what that function does, so I think they are saying to wrap the standard SAP function with the obscure name in a function with a meaningful name. I think.

Some SAP functions have Hungarian prefixes to say what type of value you should pass in (this is more important in JavaScript than in ABAP due to the lack of type checking) e.g., V for a string, or M for an object (stands for “member” I imagine). I remember when I first started seeing UI5 code on the official SAP websites (long time back now) and I was vaguely surprised at all the Hungarian Notation.

At long last I am going to say something positive. When calling a function like a message box you can pass in another function as a parameter to be called after an event like ONCLOSE. In some ways this is just like the 1999 function module REUSE_ALV_LIST_DISPLAY where you passed in the name of a FORM routine to be dynamically called but much more explicit.

I am going to change subject for no apparent reason. Possibly because the book has so many authors, it seems to be unsure what it’s purpose is. Sometimes it is explaining the basics of JavaScript, sometimes explain very complex techniques, sometimes explaining how the language has evolved over time, sometimes even talking about Clean Code. All mixed together, seemingly at random. Now, back to JavaScript.

I may have got this wrong, but I think the book is talking about having the view in the MVC model in JavaScript, instead of just the controller. Lots of web programmers like doing just that but I understood that with UI5 the SAP recommendation was to have the view in XML. That enforced the separation of concerns by having the model, view and controller all in different languages.

Frank Sidebottom Effect

It looks like certain types of functions have parameters passed by reference, so the function can alter the passed in object, thus causing side effects. I thought the whole point of a functional language was not to have side effects.

Next, we move onto the subject of regular expressions. I have always thought that regular expressions are no fun, and they are also not very “clean” in that they are written in what to all intents and purposes is a secret code rather than Plain English.

As an aside I had written a note saying “things really need to follow on from one another in a logical manner” by which I meant the book is rambling all over the place. I am guilty of that very crime in my blogs, this very blog being a case in point, bit you would think a book would have a more logical structure.

There is quite a good and long section explaining what “promises” are, why they are good, and how not to use them, and how to use them properly. This is very important given the SAP direction in UI5 is that more that is asynchronous the better, but once again, is the books purpose to explain complex JavaScript concepts, or to assume the reader already is conversant with JavaScript and focus more on making the code clearer?

On page 69 we see the term PARADIGM SHIFT which makes the whole audience do a Mexican Wave.

I have an admission to make. One day I was reading the book mid-afternoon and read the explanation of what the AWAIT keyword does. Four hours later I was on a video call with Lars Petersen, and he showed me some JavaScript code which was peppered with AWAIT statements. He asked me if I understood what that code was doing, and I said “of course” as if I had known all about the concept for years.

In the basic JavaScript book I have been writing about, all the examples are to do with music, in the same way my examples are about monsters, which makes the concepts easier to grasp. Some crazy people use aircraft and flights for examples.

Some examples in the Clean UI5 book are a bit too generic using the good old A, B, C for variables and the DO_SOMETHING names for functions.

Once again in my notes I write “This whole thing is more to do with advanced JavaScript concepts than Clean Code”.

Back to Parameters

It is mentioned that as of JavaScript ES6 you can define default values for incoming parameters. I had written in my notes “Well Done!” because of course I have been used to default values in ABAP for a very long time, starting with function modules. Apparently, the rules for default values in JavaScript are a lot more complicated, so much so the book says you need to read the online documentation to really get your head around the concept. So, that is not really “clean” as “clean” concepts should be easy to understand and the code should do what you expect it to do. That is a JavaScript problem, the book is just pointing it out.

You can only have mandatory parameters in JavaScript if you use TypeScript. There is a corker of an example of how to get around this, which is also an excellent example of passing in a function as a parameter. Remember, you can pass in any function as a parameter, a function that can do anything. In this case the default parameter is a function that throws an error. Unless an actual value is passed in to the parameter then the function that is the default parameter is passed in and executes, throwing an error saying a real parameter needs to be passed in.

Now we move onto classes in JavaScript and the examples talk about Function A and Class A, which are a bit generic to say the least. Come back SFLIGHT, all is forgiven.

Here is a quote “None of the properties and methods of SAPUI5 classes are truly private”.

To get around this you are encouraged to follow some naming conventions which in theory should scare off any other developers from changing your private methods and attributes, if they are familiar with those naming conventions and know what they mean, but I have always found that naming conventions are not substitute for the language actually enforcing rules. A JavaScript person would probably say rules are for losers. As an example, I prefer working in Australia to Germany as there are 95% less rules to follow, and I feel that makes me more productive.

I GET so emotional, baby

As we all know, programmers tend to get very emotional about what outsiders would see as very trivial matters. These range from mild disagreements to chopping up the programmers who disagrees with an axe.

One such area is the use of GETTERS and SETTERS to write and read values from an object instance. Some people say that is the only way to do this, some say it is nonsense. In some standard SAP ABAP classes there are GET and SET methods and they even have a special icon that appears next to them, though if a “customer” like me creates such a method no such icon appears. In any event, sticking with the ABAP example, which of course I am doing in a blog nominally about JavaScript, I have tended to use read-only attributes to simulate GET methods, and use SET methods when the attribute is private. For twenty years I have been waiting for a use case whereby I can say I am using a SET and/or GET because there is extra logic to be executed when reading or writing a value. I have not found just a use case yet, but one day it will come, I am sure.

In UI5 I am informed that the library automatically generates SET and GET functions for each attribute, but I think you can also directly read and write the values as well.

In JQUERY everything goes BONKERS. Youi have one function and if you do not pass an optional parameter then it acts a GET method, but if you pass in a value that same function acts as a SET method. Oh dear, that is a clear violation of the “a method should only do one thing” rule, and a wonderful example of why optional parameters are a Bad Thing.

One interesting thing in JavaScript is you can do some jiggery pokery whereby the define the extra logic in SET and GET functions, and then those functions are automatically called when the code does a direct assignment, or a direct read. That is nice, but I hate black magic code, that is something which is not there when you look at the code but gets executed anyway. Logical Databases in ABAP were like that. I was hoping they would be gone in S/4HANA but I think they are still there which is a pity.

At this point I think the author has changed, because instead of very generic examples with classes and methods called A, B and C, suddenly we have much better really specific examples and use cases. Naturally I far prefer the latter.

I think the pattern (in the text of the book) now has changed to first talking about a feature in JavaScript in general, then how UI5 implements that feature in its own particular way, and then some suggestions on how to write the code in a “clean” way. That pattern seems logical and sensible to me, but not all the book is like that, and in the Clean ABAP book the vast majority of the text is talking about Clean Code.

Patricia the Type Scripter

We now move onto Typescript, which UI5 supports. Indeed, in the example in the hands-on session at ASUG TECHCONNECT 2023 many of the files were written in Typescript.

Incidentally, apropos of nothing, JavaScript has the same concept as the ABAP PRAGMA, that is you can write a comment to disable a warning that the static syntax checker (LINTER) would normally give for a specific area of code.

One point raised is that once you have strong typing, then the IDE suddenly becomes ten billion times better when it comes to code autocompletion e.g., if it knows a variable is typed as certain class then it can suggest method names and the like.

It also looks like there is no “interface” concept in JavaScript (in the SE24 sense of the word) but there is in TypeScript.

I cannot be 100% sure but I think this book is recommending Visual Studio Code to write Typescript files. At ASUG naturally we used the BTP, and SAP BUILD CODE, but that has only just been released and thus was not there when the Clean UI5 book was written.

Annotate, Annotate, Baker Man

Now we come to the concept of “decorators”. You will know this in CDS views by the term “annotation” and indeed in Typescript you invoke a “decorator” by putting an “@” sign at the start, just like with annotations in CDS views.

I think annotations is the better name, because “decorator” makes me think of the “decorator” design pattern, which is a different thing altogether. IT’S A DIFFERENT THING!

I could not help but note that the summary contains the phrase PARADIGM SHIFT which once again makes the audience scream and do a Mexican wave.

OK, I have got to the end of chapter 2, which is not very far at all, really. But I am going to have to leave it there for now, as I have a book to write myself!

Cheersy Cheers

Paul

Effortless Material Creation using Excel Sheets via Fiori App (e.g., SolidWorks' CAD-Driven Data)

2023-12-11T19:46:45+01:00

Introduction

Material creation in SAP is simpler using Fiori and Excel, we can tweak data before uploading, even integrating info from CAD software like SolidWorks or any other data source. This connection makes creating new materials in SAP a smoother process. Let's dive into how this system works seamlessly.

Summary

In this blog, we're diving into a streamlined material creation process within SAP. We'll explore the creation of a Fiori app and an OData service designed to seamlessly integrate data from external sources for material creation. For this blog, we will be using data comes from SolidWorks automation.

Pre-requisites:

S/4 HANA System

VSCode with SAP Fiori Tools - Extension Pack

Steps:

Step 1 - Preparing Excel sheet from data source

Step 2 - Creating oData service for material creation
- Step 2.1 - Creating oData service
- Step 2.2 - Registering oData service

Step 3 - Creating Fiori app for excel upload and material creation
- Step 3.1 - Creating Fiori app
- Step 3.2 - Adding libraries that will be used for excel import
- Step 3.3 - Creating global model
- Step 3.4 - Preparing View
- Step 3.5 - Preparing Controller

Step 4 - Use app and check system to ensure creating of materials

Step 1 - Preparing Excel sheet from any data source

We'll kick off our material creation process by preparing an Excel sheet. Here, we'll utilize data obtained from SolidWorks using a basic automation method. It's crucial to note that this automation setup serves as an example, keeping things straightforward. In real-world scenarios, the process would involve selecting multiple assembly files or engaging in more intricate procedures for efficiency. This basic demonstration helps us understand the fundamental integration of SolidWorks data with our material creation system in SAP. The emphasis here is on demonstrating the foundational steps, which can be further expanded upon in practical implementations for more complex workflows.

This is the automation that helped to obtain data from Solidworks:

It's important to note that the showcased automation is just a basic starting point and calls for improvement. While I used this simple automation, keep in mind that data retrieval from SolidWorks isn't limited to automation alone. This automation is just for streamlining the process. You have the flexibility to gather information from SolidWorks manually or SolidWorks PDM, as well as from a wide array of any other data sources.

Step 2 - Creating oData service for material creation

We'll create an oData service—a key connection allowing outside data, to smoothly enter SAP. This service acts as a bridge, ensuring easy communication between SAP and different external sources, vital for material creation within SAP.

Step 2.1 - Creating oData service

Open your S/4 system and transaction SEGW

Name	Key	Edm Core Type	Max	Abap Field Name
matDescTR		Edm.String	40	MATDESCTR
matDescEN		Edm.String	40	MATDESCEN
baseUOM		Edm.String	3	BASEUOM
matType		Edm.String	4	MATTYPE
indSector		Edm.String	4	INDSEC
materialNum	X	Edm.String	40	MATNR

DATA: ls_headdata     TYPE bapimathead,

          ls_clientdata   TYPE bapi_mara,

          ls_clientdatax  TYPE bapi_marax,

          ls_materialdesc TYPE bapi_makt,

          lt_materialdesc TYPE TABLE OF bapi_makt,

          ls_return       TYPE bapiret2.



    DATA: ls_request_input_data TYPE zcl_zxxx_mpc=>ts_creatematerial,

          lo_message_container  TYPE REF TO /iwbep/if_message_container.





    CALL METHOD me->/iwbep/if_mgw_conv_srv_runtime~get_message_container

      RECEIVING

        ro_message_container = lo_message_container.



    """""""""""""""""""""" READ REQUEST DATA """"""""""""""""""""""""""""""""""""""""



    io_data_provider->read_entry_data( IMPORTING es_data = ls_request_input_data ).





    """"""""""""""" INSERT DATA TO TABLE WITH BAPI """""""""""""""""""""""""





* Populate material data structure

    ls_headdata-material = ls_request_input_data-matnr.

    ls_headdata-ind_sector = ls_request_input_data-indsec.

    ls_headdata-matl_type = ls_request_input_data-mattype.

    ls_headdata-basic_view = 'X'.



    ls_clientdata-base_uom = ls_request_input_data-baseuom.

    ls_clientdatax-base_uom = 'X'.



    IF ls_request_input_data-matdescen IS NOT INITIAL.

      ls_materialdesc-langu = 'EN'.

      ls_materialdesc-matl_desc = ls_request_input_data-matdescen.

      APPEND ls_materialdesc TO lt_materialdesc.

    ENDIF.



    IF ls_request_input_data-matdesctr IS NOT INITIAL.

      ls_materialdesc-langu = 'TR'.

      ls_materialdesc-matl_desc = ls_request_input_data-matdesctr.

      APPEND ls_materialdesc TO lt_materialdesc.

    ENDIF.



* Call BAPI to create material

    CALL FUNCTION 'BAPI_MATERIAL_SAVEDATA'

      EXPORTING

        headdata            = ls_headdata

        clientdata          = ls_clientdata

        clientdatax         = ls_clientdatax

      IMPORTING

        return              = ls_return

      TABLES

        materialdescription = lt_materialdesc.



* Check for errors and return message

    IF ls_return IS NOT INITIAL.

      CALL METHOD lo_message_container->add_message_from_bapi

        EXPORTING

          is_bapi_message           = ls_return

          iv_add_to_response_header = abap_true       " Flag for adding or not the message to the response header

          iv_message_target         = CONV string( ls_return-field ).

      EXIT.

    ELSE.

      CALL METHOD lo_message_container->add_message

        EXPORTING

          iv_msg_type               = /iwbep/cl_cos_logger=>error

          iv_msg_id                 = 'ZTEST'

          iv_msg_number             = '000'

          iv_msg_text               = `An error occured.`

          iv_add_to_response_header = abap_true. "add the message to the header

      EXIT.

    ENDIF.





    er_entity = ls_request_input_data. "Fill Exporting parameter ER_ENTITY

Step 2.2 - Registering oData service

You registered service if you want you can test your service by clicking ‘2 - SAP Gateway Client’.

Step 3 - Creating Fiori app for excel upload and material creation

Step 3.1 - Creating Fiori app

We'll construct a Fiori app using VSCode alongside the Fiori extension.

Step 3.2 - Adding libraries that will be used for excel import

We need to download the necessary JavaScript libraries for Excel import. Get the files from the links below:

xlsx.js

jszip.js

Once downloaded, create a folder named "libs" in the "webapp" directory and place these files inside it. These libraries are crucial for handling Excel imports in your Fiori app.

Step 3.3 - Creating global model in manifest.json

We'll establish a JSON model in the manifest.json file to hold the data obtained from Excel and other sources. This model acts as a storage space within your Fiori app.

//...

"models": {

      "i18n": {

        "type": "sap.ui.model.resource.ResourceModel",

        "settings": {

          "bundleName": "<-- your namespace -->.i18n.i18n"

        }

      },

      "globalModel": {

        "type": "sap.ui.model.json.JSONModel",

        "settings": {},

        "preload": true

      },

      "": {

        "dataSource": "mainService",

        "preload": true,

        "settings": {

          "useBatch": false

        }

      }

    },

//...

Step 3.4 - Preparing View

We'll set up the user interface (UI) for our app using the provided code below. Code includes binding the previously created model to this view. This binding process ensures that the data stored in the model is displayed and accessible within the user interface.

<mvc:View

    controllerName="<-- your namespace -->.controller.Main"

    xmlns:mvc="sap.ui.core.mvc"

    displayBlock="true"

    xmlns="sap.m"

    xmlns:u="sap.ui.unified"

    xmlns:t="sap.ui.table"

    xmlns:l="sap.ui.layout"

>

    <Page

        id="page"

        title="{i18n>title}"

        class="sapUiContentPadding sapUiContentPadding--header sapUiResponsivePadding--header sapUiResponsivePadding--subHeader sapUiResponsivePadding--content sapUiResponsivePadding--footer"

        showNavButton="false"

        showHeader="true"

    >

        <!-- ========================== -->

        <!--      Excel Bar FlexBox     -->

        <!-- ========================== -->

        <FlexBox

            id="_IDGenFlexBox1"

            wrap="Wrap"

            class="sapUiMediumMarginTop"

            justifyContent="Center"

        >

            <Input

                id="searchInput"

                width="100%"

                editable="false"

                value="{globalModel>/excelFileName}"

            >

                <layoutData>

                    <FlexItemData

                        id="_IDGenFlexItemData1"

                        growFactor="6"

                    />

                </layoutData>

            </Input>

            <FlexBox id="_IDGenFlexBox2">

                <u:FileUploader

                    id="FileUploaderId"

                    class="sapUiSmallMarginBegin"

                    buttonText="Excel Upload"

                    sameFilenameAllowed="true"

                    iconOnly="false"

                    buttonOnly="true"

                    fileType="XLSX,xlsx"

                    icon="sap-icon://excel-attachment"

                    multiple="false"

                    iconFirst="true"

                    style="Emphasized"

                    change="handleImportData"

                />

            </FlexBox>

        </FlexBox>

        <!-- ============= -->

        <!--     Table     -->

        <!-- ============= -->

        <t:Table

            id="table"

            rows="{

                path:'globalModel>/materialsExcel',

                sorter: {

                    path: 'SIMILARITY',

                    descending: true

                }

            }"

            selectionMode="MultiToggle"

            ariaLabelledBy="title"

            visibleRowCount="20"

            class="sapUiMediumMarginTop"

        >

            <t:extension>

                <OverflowToolbar

                    id="_IDGenOverflowToolbar1"

                    style="Clear"

                >

                    <Title

                        id="title"

                        text="Materials"

                    />

                    <ToolbarSpacer id="_IDGenToolbarSpacer1" />

                    <Button

                        id="uploadButton"

                        type="Emphasized"

                        enabled="false"

                        icon="sap-icon://upload"

                        press="onPressUpload"

                        text="Upload"

                        class="sapUiSmallMarginBegin"

                        ariaDescribedBy="acceptButtonDescription genericButtonDescription"

                    />

                </OverflowToolbar>

            </t:extension>

            <t:rowSettingsTemplate>

                <t:RowSettings

                    id="rowSettings"

                    highlight="{globalModel>status}"

                    highlightText="{globalModel>statusText}"

                />

            </t:rowSettingsTemplate>

            <t:columns>

                <t:Column

                    width="8rem"

                    id="_IDGenColumn1"

                >

                    <Label

                        id="_IDGenLabel1"

                        text="Status"

                    />

                    <t:template>

                        <Text

                            busy="{globalModel>isBusy}"

                            id="_IDGenText2"

                            text="{globalModel>statusText}"

                            wrapping="false"

                        />

                    </t:template>

                </t:Column>

            </t:columns>

        </t:Table>

    </Page>

</mvc:View>

Step 3.5 - Preparing Controller

In this part, while preparing the controller, our aim is to import data from Excel dynamically creating columns based on the Excel data. Subsequently, we'll use this data to generate materials within our system, ensuring a smooth transfer of information from Excel to our system for material creation.

sap.ui.define([

    "sap/ui/core/mvc/Controller",

    "../libs/xlsx",

    "../libs/jszip",

],

    /**

     * @param {typeof sap.ui.core.mvc.Controller} Controller

     */

    function (Controller, xlsx, jszip) {

        "use strict";



        return Controller.extend("<-- your namespace -->.controller.Main", {

            onInit: function () {



            },

            handleImportData: function (oEvent) {

                this._import(oEvent.getParameter("files") && oEvent.getParameter("files")[0]);

            },

            _import: function (file) {

                var that = this;

                var excelData = {};

                if (file && window.FileReader) {

                    that.getView().getModel('globalModel').setProperty("/excelFileName", file.name);

                    var reader = new FileReader();

                    reader.onload = function (e) {

                        var data = e.target.result;

                        var workbook = XLSX.read(data, {

                            type: 'binary'

                        });



                        for (var i in workbook.SheetNames) {

                            excelData = XLSX.utils.sheet_to_row_object_array(workbook.Sheets[workbook.SheetNames[i]]);

                            break;

                        }



                        for (let index = 0; index < excelData.length; index++) {

                            excelData[index].statusText = 'Ready to Upload';

                            excelData[index].status = 'Information';

                            excelData[index].isBusy = false;

                        }



                        that.getView().getModel('globalModel').setProperty("/materialsExcel", excelData);

                        that._prepareTableColumns()



                    };

                    reader.onerror = function (ex) {

                        console.log(ex);

                    };

                    reader.readAsBinaryString(file);

                }

            },

            onPressUpload: function (oEvent) {

                var oTable = this.getView().byId('table');

                var aSelectedIndex = oTable.getSelectedIndices();

                var aMaterials = this.getView().getModel('globalModel').getProperty("/materialsExcel");

                var aUploadMaterial = [];





                aSelectedIndex.map(element => {

                    var aSelectedMat = aMaterials[element];





                    var oCreateData = {

                        "materialNum": aSelectedMat['PartNo'],

                        "matDescEN": aSelectedMat['DESCRIPTION'],

                        "baseUOM": aSelectedMat['BaseUOM'],

                        "matType": aSelectedMat['MatType'],

                        "indSector": aSelectedMat['IndustrialSector']

                    }



                    this.getView().getModel('globalModel').setProperty(`/materialsExcel/${element}/isBusy`, true);



                    this.getOwnerComponent().getModel().create("/createMaterialSet", oCreateData, {

                        success: $.proxy(function (data, resp) {

                            this.getView().getModel('globalModel').setProperty(`/materialsExcel/${element}/isBusy`, false);

                            this.getView().getModel('globalModel').setProperty(`/materialsExcel/${element}/status`, 'Success');

                            this.getView().getModel('globalModel').setProperty(`/materialsExcel/${element}/statusText`, 'Material Created');

                        },

                            this),

                        error: $.proxy(function (oError) {

                            this.getView().getModel('globalModel').setProperty(`/materialsExcel/${element}/isBusy`, false);

                            this.getView().getModel('globalModel').setProperty(`/materialsExcel/${element}/status`, 'Error');

                            this.getView().getModel('globalModel').setProperty(`/materialsExcel/${element}/statusText`, 'An error Occured');

                        }, this)

                    });



                });



            },

            _prepareTableColumns: function () {

                var oTable = this.getView().byId('table');

                var oTableExtPoint = new sap.ui.table.extensions.Pointer(oTable);

                var aTableCatalog = Object.keys(this.getView().getModel('globalModel').getProperty("/materialsExcel")[0])



                aTableCatalog.map(aElement => {

                    if (aElement !== 'statusText' && aElement !== 'status' && aElement !== 'isBusy') {

                        var oLabel = new sap.m.Title({

                            text: aElement

                        });



                        var oTemplate = new sap.m.Text({ text: `{globalModel>${aElement}}`, wrapping: false })

                        var oColumn = new sap.ui.table.Column({

                            label: oLabel,

                            width: "10rem",

                            template: oTemplate,

                            filterProperty: aElement,

                            defaultFilterOperator: "Contains"

                        })



                        oTable.addColumn(oColumn);

                    }

                })



                var aTableColumns = oTable.getColumns();

                for (var i = aTableColumns.length; i >= 0; i--) {

                    oTableExtPoint.doAutoResizeColumn(i);

                }



                this.getView().byId('FileUploaderId').setEnabled(false);

                this.getView().byId('uploadButton').setEnabled(true);



            },

        });

    });

Step 4 - Use app and check system to ensure creating of materials

In last step, it's time to utilize the app to create data within your system. Before doing so, it's crucial to emphasize the need to review and tailor the entire system according to your specific requirements. Once revised, proceed to use the app to generate data within your system. This step enables you to validate and ensure the smooth creation of materials as intended in your system.

Conclusion

To wrap up, using Fiori and Excel to create materials in SAP brings a smoother process to the table. This blog's steps show how to seamlessly integrate data from other data sources, such as SolidWorks. If you want to dive deeper, let’s chat in the comments!

TypeScript for JavaScript developers: A guide

2023-12-13T22:37:28+01:00

Welcome, JavaScript developers! Today we're diving into the world of TypeScript - a powerful language extension for JavaScript that helps you build larger and more complex applications. TypeScript is like JavaScript, but with superpowers, and here's why.

What is TypeScript?

TypeScript, developed by Microsoft, is an open source language tool based on JavaScript. It offers optional static typing, which means you can assign types to your variables, functions and objects to detect errors earlier in the development process.

Why TypeScript?

Earlier error detection
TypeScript catches errors during the development phase, long before they end up in production code.

Better tool support
Autocomplete, refactoring tools and IntelliSense in IDEs are much more sophisticated for TypeScript.

Easier scaling
Type systems make your code safer and easier to understand, which is particularly beneficial for large projects.

Why TypeScript is Important for SAP Fiori Developers

As SAP Fiori evolves to deliver more sophisticated and user-friendly applications, the need for robust development practices becomes essential. This is where TypeScript enters the scene for Fiori developers. It's not just another technology to learn; it's a strategic investment in code quality, maintainability, and productivity.

TypeScript offers Fiori developers the ability to write more predictable and self-documenting code, which is crucial when dealing with complex UIs and integrations that Fiori applications often require. The static typing system catches errors at compile time, reducing runtime issues that can be costly in a business environment.

Moreover, TypeScript's compatibility with modern JavaScript features and its ability to transpile to a version compatible with SAPUI5's core, which is based on older JavaScript versions, ensures that developers are not restricted by the platform's limitations. They can use the latest features of the language without worrying about browser compatibility.

Lastly, TypeScript's tooling and IntelliSense features integrated into development environments like SAP Business Application Studio greatly enhance the developer experience. This leads to a more efficient development process, allowing for quicker iterations and a focus on creating value through innovative features rather than fixing bugs.

Embracing TypeScript is a forward-looking approach for SAP Fiori developers focused on building robust, enterprise-grade applications.

Basic concepts of TypeScript

Types

TypeScript supports both primitive types (such as string, number, boolean) and complex types.

let message: string = "Hallo, Welt!";

let total: number = 120;

let isLoggedIn: boolean = false;

Interfaces

You can use interfaces to define the form of objects, which helps with object orientation.

interface User {

  name: string;

  age: number;

}



let user: User = { name: "Max", age: 30 };

Classes and inheritance

TypeScript supports modern OO principles, including classes and inheritance.

class Person {

  name: string;

  constructor(name: string) {

    this.name = name;

  }

}



class Employee extends Person {

  employeeId: number;

  constructor(name: string, employeeId: number) {

    super(name);

    this.employeeId = employeeId;

  }

}

Generics

Generics offer a way to create reusable components.

function insertAtBeginning<T>(array: T[], value: T) {

  return [value, ...array];

}



let demoArray = [1, 2, 3];

let updatedArray = insertAtBeginning(demoArray, 0); // [0, 1, 2, 3]

Getting Started with TypeScript in Visual Studio Code

Visual Studio Code (VS Code) is a popular editor among developers, and it's well-equipped for TypeScript. If you're transitioning from JavaScript, you'll find VS Code's TypeScript support incredibly helpful. Here's how to set up TypeScript in VS Code.

Step 1: Install Node.js and npm

Before you work with TypeScript, you need to have Node.js and npm installed. They come bundled together, and you can download them from the official Node.js website.

Step 2: Install TypeScript

With npm installed, you can now install TypeScript globally on your machine by running the following command in your terminal:

npm install -g typescript

Step 3: Open Your Project in VS Code

Launch VS Code and open the folder containing your project. If you're starting from scratch, you can create a new folder and open it in VS Code.

Step 4: Initialize a New TypeScript Project

In the terminal integrated in VS Code (you can open it with Ctrl+), type the following command to create a tsconfig.json file, which is the configuration file for TypeScript:

tsc --init

This command creates a tsconfig.json file with default settings that you can customize as needed.

Step 5: Write TypeScript Code

Create a new file with the .ts extension. VS Code automatically recognizes it as a TypeScript file. You can now start typing your TypeScript code. For instance:

function greet(person: string): string {

    return `Hello, ${person}!`;

}



const user = "Developer";

console.log(greet(user));

Step 6: Compiling TypeScript to JavaScript

To compile your TypeScript file to JavaScript, you can run the TypeScript compiler in the terminal:

tsc

If you have a tsconfig.json file in your project, running tsc without any input files will compile all files specified in that configuration.

Step 7: Enable Automatic Compilation

To make your development process smoother, you can enable automatic compilation of TypeScript files on save. To do this, press Ctrl+Shift+P to open the command palette and type 'Tasks: Configure Default Build Task'. Choose tsc: watch - tsconfig.json. This will compile your TypeScript files every time you save them.

Step 8: Explore TypeScript Features in VS Code

VS Code offers powerful features for TypeScript development, such as IntelliSense, code navigation, and refactoring tools. Take advantage of these features to boost your productivity.

Step 9: Install TypeScript Declaration Files

For using certain JavaScript libraries with TypeScript, you might need to install TypeScript declaration files to get type definitions. You can install them using npm. For example, for the popular library lodash, you would run:

npm install --save @types/lodash

Conclusion

Visual Studio Code and TypeScript together create a robust environment for developing scalable and maintainable JavaScript applications. By following these steps, you'll be well on your way to leveraging the full power of TypeScript in your development workflow.

Introducing UI5 Tooling's Build Output Style Feature

2023-12-15T15:31:36+01:00

UI5 Tooling continues to evolve, and with the latest enhancement to the UI5 Builder, developers can now take even more control over how their projects are built. The feature we are excited to introduce is the Output Style, a powerful capability that allows you to get a more efficient and organized build output.

Understanding Output Style

In the UI5 world, projects (for example, libraries) come with namespaces that define a structured hierarchy. For instance, OpenUI5 features namespaces like "sap.m," "sap.f," and "sap.ui.core." Typically, when the bundler creates a build, it replicates this structure in the "resources" folder, leading to paths like "/resources/sap/m/RangeSlider.js."

With the Output Style feature, you have the flexibility to omit both this project namespace and the "resources" directory. Imagine "/resources/sap/m/RangeSlider.js" transforming into "./RangeSlider.js." This results in a flat build output.

Key Constraints and Considerations

Keep in mind that the Output Style only affects the root project’s build structure. In other words, if dependencies are included into the build bundle, they will be built with their respective Default Output Style. Check the table below for the different possible combinations:

Requested Output Style / Project Type	Resulting Style
Default
application	Root project is written Flat-style, dependencies in their respective Default-style
library	Root project is written Namespace-style, dependencies in their respective Default-style
theme-library	Root project is written in the style of the sources (multiple namespaces), dependencies in their respective Default-style
module	Root project is written with the configured paths, dependencies in their respective Default-style
Flat
application	Same as Default
library	Root project is written Flat-style (without its namespace, logging warnings for resources outside of it), dependencies in their respective Default-style
theme-library	Unsupported, since a theme-library in most cases has more than one namespace
module	Unsupported, since modules have explicit path mappings configured and no namespace concept
Namespace
application	Root project is written Namespace-style (resources are prefixed with the project's namespace), dependencies are written in their respective Default-style
library	Same as Default
theme-library	Unsupported, since a theme-library in most cases has more than one namespace
module	Unsupported, since modules have explicit path mappings configured and no namespace concept

Using Output Style with UI5 CLI

To harness the power of the Output Style feature, UI5 CLI (with version 3.8.0 and above) introduces a new option:

ui5 build --output-style=default | flat | namespace

Here are the possible values for --output-style:

default: The default directory structure for every project type. For applications this is identical to "flat" and for libraries to "namespace". Other types have a more distinct default output style.

flat: Omits the project namespace and the "resources" directory, resulting in a flat build.

namespace: Respect the project namespace and the "resources" directory, maintaining the original structure.

For more detailed information and usage guidelines, refer to the official documentation: UI5 CLI - ui5 build

Migrating from ui5-task-flatten-library

Previously, achieving a flat build involved using the ui5-task-flatten-library custom task. However, with the integration of this functionality into UI5 Tooling, you are encouraged to migrate your code to the built-in solution. Here's how you can do it:

Remove Custom Task: In your ui5.yaml file, remove the custom task for ui5-task-flatten-library:

builder:  

  customTasks:  

    - name: ui5-task-flatten-library  

      afterTask: generateResourcesJson

Remove Dependency: Remove ui5-task-flatten-library from package.json.

Update Build Command: When executing a "ui5 build" command, include the new option "--output-style=flat"

As the UI5 Tooling team continues to enhance and streamline the development experience, be sure to stay up to date with the latest features and best practices.

Introducing OpenUI5 2.x

2023-12-21T13:06:14+01:00

Update 13.3.2024: On tool support for adapting an app, see a new blog post 'Introducing UI5 linter'

Where is OpenUI5 today?

OpenUI5 is SAP’s open-source Web UI framework, supporting the SAP Fiori design system for products. It celebrates its 10th anniversary, with many highlights that have shaped an incredible developer community. OpenUI5 will continue to innovate, ensuring a consistent and modern user experience for web applications.

The size of OpenUI5 grew with its capabilities, with its APIs and with its number of controls, especially as old features were not removed for compatibility reasons, to stay upgrade compatible. This compatibility is a challenge in Web development: Web development standards evolve, new security gaps continuously appear and need to be closed, Web browsers evolve and have new features to take advantage of (e.g. for better performance). Therefore, it is not an option for modern UI technologies to rest on a status quo. As many developers rely on a stable and secure UI technology, OpenUI5 needs to innovate in time to stay competitive and future proof in this dynamic environment. On the other hand, the evolution of Web technologies also brings great value and opportunities to innovate, both for developers and well as with an improved and faster user experience for business users.

The next step: OpenUI5 2.x

To be able to continue with this successful journey, we need to make sure that:

UIs are staying interactive with less code to be loaded and by avoiding synchronous JavaScript.

Security can be ensured with the strict Content Security Policy (CSP).

Development of OpenUI5 framework as well as application developers remain efficient.

Applications are compliant with the evolution of browsers (and restrictions they introduce).

For this the UI5 team needs to remove non-compliant, deprecated libraries and functionality from the OpenUI5 framework. In doing so, we need to find the right balance between upgrade stability and agility for innovations.

OpenUI5 2.x is renewing OpenUI5
by removing everything not required to comply with OpenUI5 best practices.

The value of OpenUI5 2.x

OpenUI5 2.x allows to evolve in these areas:

Security: OpenUI5 2.x enforces an improved security with strict Content Security Policy (CSP).

Smooth UI performance: OpenUI5 2.x assists with an improved UI performance by using fine granular tasks and asynchronous JavaScript only.

General performance: With the modular core, new bootstrap and additional opportunities to improve performance we expect to see a better experience when launching and using OpenUI5 apps.

Micro frontends: The removal of Globals simplifies the orchestration of micro frontends.

App development: With streamlined APIs application developers learn and develop with OpenUI5 more easily.

Best practices: OpenUI5 2.x means less effort for application developers to follow OpenUI5 best practices.

Browser: OpenUI5 2.x makes it easier to stay up to date with the browser evolution.

Web standards: OpenUI5 2.x enables a simple adoption of latest Web standards, e.g. CSS custom properties.

Pace of innovation: It becomes easier for the UI5 team as well as for application developers to make progress. At the same time, less resources are needed for maintenance, shifting the focus towards innovative, yet stable capabilities.

Recommendation for moving from OpenUI5 1.x to 2.x

Follow the latest Best Practices for App Developers of OpenUI5 1.x
Applications following these best practices will run smoothly with OpenUI5 2.x, no migration effort needed.

Call to Action

The UI5 team now offers a first version of OpenUI5 2.x https://sdk.openui5.org/nightly/2/index.html for testing purposes (Disclaimer: This is a version with daily updates, possible API changes and temporary bugs.)

Make yourself familiar with the Best Practices. (Updated instructions will follow.)
Review your application code, e.g. by removing of any usage of deprecated APIs. Test your custom OpenUI5 apps for OpenUI5 2.x compatibility by simply pointing the bootstrap to https://sdk.openui5.org/nightly/2/resources/sap-ui-core.js

The team continues working on OpenUI5 2.x and the best practices for application development. To support the process of moving an app from 1.x to 2.x. the UI5 team is currently looking into which documentation and tool support can help with the manual migration of custom code.

Your feedback is highly appreciated: Please add feedback to GitHub by reporting an issue at https://github.com/SAP/openui5/issues/new and prefix the title with "[UI5 2.x]".

Unlocking Possibilities: Extending Fiori Elements Apps with the Flexible Programming Model

2023-12-21T20:11:51+01:00

Introduction

Welcome to the world of extending SAP Fiori elements OData V4 apps using the Flexible Programming Model. This model offers a hassle-free approach to expanding app functionalities. Whether you prefer coding in SAPUI5 or utilizing our new building blocks, you'll find ample ways to customize your apps with ease. In this blog, I'll provide an overview of the flexible programming model and guide you to the relevant documentation.

Summary

In this blog, you'll learn how the Flexible Programming Model simplifies extending SAP Fiori Elements apps. We'll explore customization options, from basic SAPUI5 coding to leveraging new building blocks. By the end, you'll have a clear understanding of how to adapt apps effortlessly while discovering resources for further exploration.

Pre-requisites:

S/4 HANA System

Sap Fiori Elements App (OData V4)

VSCode with SAP Fiori Tools - Extension Pack

Extension Points
- Custom Form Element
- Custom Filter

Building Blocks
- Table

Controller Extensions
- Edit Flow

Extension Points

Extension points in the Flexible Programming Model act like customizable slots in SAP Fiori Elements apps. They let you easily add your own custom elements—sections, actions, form elements, filters, header facets, table columns, and even entirely new pages—just like in Fiori elements for OData V2. But now, you can even seamlessly integrate whole new pages into your app's navigation flow, giving you the freedom to personalize your app experience in unique ways.

Here are some examples:

Custom Form Element

Custom form element let you easily add your own unique elements to forms wherever you need in SAP Fiori Elements apps like below.

First, we need change manifest.json

//..

"ActivitySetObjectPage": {

    "type": "Component",

    "id": "ActivitySetObjectPage",

    "name": "sap.fe.templates.ObjectPage",

    "options": {

        "settings": {

            "editableHeaderContent": false,

            "controlConfiguration": {

                "@com.sap.vocabularies.UI.v1.FieldGroup#General": {

                    "fields": {

                        "customFormElementIdentification1": {

                            "template": "activity.list.report.ext.fragment.CustomField",

                            "label": "Custom Form Element",

                            "position": {

                                "placement": "After",

                                "anchor": "DataField::be_invoiced"

                            }

                        }

                    }

                }

            }

        }

    }

}

//..

In this code, our custom field will come from webapp/ext/fragment/CustomField.fragment.xml which has the label ‘Custom Form Element’ and is placed after the be_invoiced field. We should put our code block just below of ‘editableHeaderContent: false’. ‘activity.list.report’ is a namespace. FieldGroup#General is facet which we located our field.

Lastly, we will create CustomField.fragment.xml in webapp/ext/fragment/.

<core:FragmentDefinition

    xmlns:core="sap.ui.core"

    xmlns="sap.m"

    xmlns:macros="sap.fe.macros"

>

    <Switch

        id="checkBoxOption2"

        enabled="{ui>/isEditable}"

        state="{be_invoiced}"

        type="AcceptReject"

    />

</core:FragmentDefinition>

There are two important points. First, the binding field that we want for our custom component and managing the edit status of this component with binding necessary UI properties.

Custom Filter

Custom filters in the Flexible Programming Model allow you to add personalized filters to refine data exactly how you need in SAP Fiori Elements apps.

We need to change the manifest.json.

//...

"ActivitySetList": {

  "type": "Component",

  "id": "ActivitySetList",

  "name": "sap.fe.templates.ListReport",

  "options": {

      "settings": {

          "contextPath": "/ActivitySet",

          "variantManagement": "Page",

          "navigation": {

              "ActivitySet": {

                  "detail": {

                      "route": "ActivitySetObjectPage"

                  }

              }

          },

          "controlConfiguration": {

						"@com.sap.vocabularies.UI.v1.SelectionFields": {

							"showClearButton": true,

							"filterFields": {

								"activity_time": {

									"label": "Activity Time",

									"template": "activity.list.report.ext.fragment.CustomFilter",

									"availability": "Default",

									"position": {

										"placement": "After",

										"anchor": "activity_date"

									}

								}

							}

						}

					}

        }

    }

},

//...

Our custom filter will come from webapp/ext/fragment/CustomFilter.fragment.xml which has label ‘Activity Time’ and placed After activity_date field with ‘Default’ availability. This custom field for ‘activity_time’ field. We should put our code block inside of settings of List Report Page. ‘activity.list.report’ is namespace.

Now, we will create CustomFilter.fragment.xml in webapp/ext/fragment/.

<core:FragmentDefinition

    xmlns:core="sap.ui.core"

    xmlns="sap.m"

>

    <HBox

        id="_IDGenHBox1234"

        alignItems="Center"

        width="100%"

        core:require="{handler: 'activity/list/report/ext/controller/CustomFilter'}"

    >

        <StepInput

            id="_IDGenStepInput1"

            value="{path: 'filterValues>', type: 'sap.fe.macros.filter.type.Value', formatOptions: { operator: 'LE' }}"

            min="0"

            max="8"

            step="2"

            width="100px"

        />

        <core:Icon

            id="_IDGenIcon113212"

            src="sap-icon://reset"

            press="handler.onReset"

            class="sapUiSmallMarginBegin"

        />

    </HBox>

</core:FragmentDefinition>

We have js file to handle press event of reset button. core:require tag in HBox connects our js file to our view. Please note that, we must change dots to slashs in our namespace like that ‘activity.list.report’ to ‘activity/list/report’. Here is CustomFilter.js that is located in webapp/ext/controller.

sap.ui.define(

    ["sap/ui/model/Filter"],

    function (Filter) {

        "use strict";



        return {

            onReset: function (oEvent) {

                this.setFilterValues("activity_time");

            }

        };

    }

);

Building Blocks

Building blocks, distinct from extension points, serve as reusable elements essential in constructing SAP Fiori elements apps. These components, integral to the app's template, ensure a standardized approach while simplifying development. They're orchestrated consistently by the framework, ensuring automatic compliance with SAP Fiori standards, including functionalities like draft handling and side effects. Leveraging these building blocks streamlines app extension, promising enduring and easily maintainable software.

Table

I added the table building block to my custom section, boosting my app's features but you can also use this building block in your custom fiori app. You can use it directly in your own app without much hassle. The cool part? Table building block is also customizable as you can see I added new custom column. It's a handy feature that makes app development easier and more consistent, giving your app an instant functionality boost.

<core:FragmentDefinition

    xmlns:core="sap.ui.core"

    xmlns="sap.m"

    xmlns:macros="sap.fe.macros"

    xmlns:mc="sap.suite.ui.microchart"

>

    <macros:Table

        contextPath="/ActivitySet"

        metaPath="to_today/@com.sap.vocabularies.UI.v1.LineItem"

        id="LineItemTable"

        headerVisible="false"

        readOnly="true"

        enableAutoColumnWidth="true"

    >

        <macros:columns>

            <macrosTable:Column

                id="_IDGenColumn1"

                header="Activity Time/Day"

                importance="High"

                width="10em"

                key="FirstColumnKey"

            >

                <mc:HarveyBallMicroChart

                    id="_IDGenHarveyBallMicroChart1"

                    size="XS"

                    total="8"

                    totalScale="hr"

                >

                    <mc:items>

                        <mc:HarveyBallMicroChartItem

                            id="_IDGenHarveyBallMicroChartItem1"

                            fraction="{activity_time}"

                            color="Good"

                            fractionScale="hr"

                        />

                    </mc:items>

                </mc:HarveyBallMicroChart>

            </macrosTable:Column>

        </macros:columns>

    </macros:Table>

</core:FragmentDefinition>

ContextPath is your entity name if you want to use entity directly just make metaPath="@com.sap.vocabularies.UI.v1.LineItem" and you can add custom column and bind easily as below.

Controller Extensions

Controller Extensions in SAP Fiori elements offer a set of internally used extensions, exposing overrideable methods that provide developers with added flexibility in customizing app behaviors.

Edit Flow

The edit flow functionality empowers you to efficiently manage crucial object page events, such as before save, before discard, after edit, and after save, within your Fiori Elements app.

First, we need to add these code block to our manifest.json under sap.ui5 to extend controller for ObjectPage.

//..

"sap.ui5": {

	"extends": {

		"extensions": {

			"sap.ui.controllerExtensions": {

				"sap.fe.templates.ObjectPage.ObjectPageController": {

					"controllerName": "activity.list.report.ext.OPExtend"

				}

			}

		}

	},

//..

Then we need to create OPExtend.controller.js under webapp/ext. We will handle every event in edit flow in that js.

sap.ui.define(

    [

        "sap/ui/core/mvc/ControllerExtension",

        "sap/m/Dialog",

        "sap/m/DialogType",

        "sap/m/Text",

        "sap/m/Button",

        "sap/m/ButtonType",

        "sap/m/MessageToast",

        "sap/m/MessageBox"

    ],

    function (ControllerExtension, Dialog, DialogType, Text, Button, ButtonType, MessageToast, MessageBox) {

        "use strict";



        return ControllerExtension.extend("activity.list.report.ext.OPExtend", {

            // this section allows to extend lifecycle hooks or override public methods of the base controller

            override: {

                onInit: function () { },

                editFlow: {

                    onBeforeSave: function (mParameters) {

                        var sTodayDate = new Date().toISOString().split('T')[0];

                        return this._createDialog("Activity Date will be changed with today's date.").then(() => {

                            mParameters.context.setProperty('activity_date', sTodayDate)

                        });

                    }

                },

            },

            _createDialog: async function (sText, mParameters) {

                return new Promise(function (fnResolve, fnReject) {

                    var oApproveDialog = new Dialog({

                        type: DialogType.Message,

                        title: "Confirm",

                        content: new Text({ text: sText }),

                        beginButton: new Button({

                            type: ButtonType.Emphasized,

                            text: "Continue",

                            press: function () {

                                oApproveDialog.close();

                                fnResolve();

                            }

                        }),

                        endButton: new Button({

                            text: "Cancel",

                            press: function () {

                                oApproveDialog.close();

                                fnReject();

                            }

                        }),

                        escapeHandler: (pCloseDialog) => {

                            pCloseDialog.resolve();

                            fnReject();

                        }

                    });

                    oApproveDialog.open();

                });

            }

        });

    }

);

This code allows you to change activity date with today’s date before save event.

Remember, Guided Development is another valuable tool that streamlines your app extension at various stages. It's a powerful aid in making your development process smoother and more efficient.

Conclusion

In simple terms, the Flexible Programming Model helps customize apps easily and control how they work. These examples are just the beginning to explore how it all works. Let's dive in together and discover more about how to create and shape apps using this logic. Share your thoughts too — let's explore and learn together!

References

SAP Fiori Elements: Flexible Programming Model Explore

A Scripting Guide For Master Data CRUD Operations in SAP Analytics Cloud Stories

2023-12-24T16:28:18+01:00

SAP Analytics Cloud is an extremely useful business tool for data analysis. It consists of various components, each with individual features to facilitate analysis. In the realm of data analysis, we employ stories and analytical applications. Today, we will focus on understanding how to create, read, update, and delete (CRUD) with model master data using Planning Model scripting

There is four main functions for Planning Model Scripting Object

Function	Description
createMembers	Create new master data in model
getMember and getMembers	Read single or multiple master data
updateMembers	Update exist master data in model
deleteMembers	Delete exist master data in model

Note: Planning Model Script Object only supports Generic dimensions, its not support date, version, account and organization dimensions.

Before staring scripting, you need to create Planning Model Script Object, Follow this blog to know how to create Planning Model step by step.

Video is also available with full guidance step by step

1. Create Member

For creating new master data in model, we have to use createMembers function.

Parameters:
1. dimensionId (Type: string)
  - Represents the ID of the dimension for which the members will be updated.
2. members (Type: PlanningModelMember JSON | PlanningModelMember[] JSON)
  - Represents the member or an array of members in JSON format that contain the updated information.

Return Type:
- boolean
  - The function is expected to return true if the update operation was successful, and false otherwise.

Variable Declaration:
```
var dimensionId = "CARS";
```
This line declares a variable dimensionId and assigns it the value "CARS." This variable represents the ID of the dimension where the new member will be created.

Member Object Definition:

members = {

	id:"Audi",

	description:"Audi Car",

	properties:{

		car_model:"A4"

	}

};

Create variable with name 'members' as Script Variable with data type of PlanningModelMember

The members object is defined with properties for the new member. It has an ID ("Audi"), a description ("Audi Car"), and additional properties, such as "car_model" with a value of "A4."

Function Call to Create Members:
```
PlanningModel_1.createMembers(dimensionId, members);
```
This line calls the createMembers function of the PlanningModel_1 object, passing the dimensionId and members as parameters. This function is responsible for creating planning model members. If the operation is successful, it typically returns true; otherwise, it returns false.

Result:-

2. Get Member

Parameters:
1. dimensionId (Type: string)
  - Represents the ID of the dimension from which the member will be retrieved.
2. memberId (Type: string)
  - Represents the ID of the specific member to be retrieved.

Return Type:
- PlanningModelMember
  - The function is expected to return an object of type PlanningModelMember, which likely contains information about the specified planning model member.

Here's how you might use this function in a practical example:

/* Get single master data */



var dimensionId = "CARS";

var memberId = "Audi";



var member = PlanningModel_1.getMember(dimensionId, memberId);



// Now 'member' contains information about the specified planning model member.

// You can access properties of the member object as needed.



/* Get all master data */



var all_members = PlanningModel_1.getMembers(dimensionId);



//Now 'all_members' contains information about the all planning model member.

In this example, the function is called with a specific dimensionId ("CARS") and memberId ("Audi"). The returned member object likely contains details such as the member's ID, description, and other relevant properties specific to the planning model in SAP Analytics Cloud.

//Output of member variable

{

    "id": "Audi",

    "description": "Audi Car",

    "properties": {

        "car_model": "A4"

    },

    "hierarchies": {}

}



//Output of all_members varibale

[

    {

        "id": "#",

        "description": "Unassigned",

        "properties": {

            "car_model": ""

        },

        "hierarchies": {}

    },

    {

        "id": "Audi",

        "description": "Audi Car",

        "properties": {

            "car_model": "A4"

        },

        "hierarchies": {}

    },

    {

        "id": "Bugatti",

        "description": "Bugatti Chiron",

        "properties": {

            "car_model": "Sport 110 Ans"

        },

        "hierarchies": {}

    }

]

3. Update Member

Parameters:
1. dimensionId (Type: string)
  - Represents the ID of the dimension for which the members will be updated.
2. members (Type: PlanningModelMember JSON | PlanningModelMember[] JSON)
  - Represents the member or an array of members in JSON format that contain the updated information.

Return Type:
- boolean
  - The function is expected to return true if the update operation was successful, and false otherwise.

Note:
- After performing the update, it is recommended to call certain refresh methods (DataSource.refreshData() or Application.refreshData()) to ensure that charts or tables reflect the updated members in subsequent operations.

Create variable with name 'members' as Script Variable with data type of PlanningModelMember

Here's how you might use this function in a practical example:

var dimensionId = "CARS";

members = {

        id: "Audi",

        description: "Audi New Car",

        properties: {

            car_model: "Q3"

        }

    };



var isUpdateSuccessful = PlanningModel_1.updateMembers(dimensionId, members);



// Now 'isUpdateSuccessful' indicates whether the update operation was successful.

// You can handle further logic based on this result.

In this example, the function is called with a specific dimensionId ("CARS") and an data of memebers. The returned isUpdateSuccessful variable indicates whether the update operation was successful.

4. Delete Member

Parameters:
1. dimensionId (Type: string)
  - Represents the ID of the dimension for which the members will be deleted.
2. members (Type: string | string[])
  - Represents the ID of the member or an array of member IDs to be deleted.

Return Type:
- boolean
  - The function is expected to return true if the delete operation was successful, and false otherwise.

Note:
- After performing the delete, it is recommended to call certain refresh methods (DataSource.refreshData() or Application.refreshData()) to ensure that charts or tables reflect the deleted members in subsequent operations.

Here's how you might use this function in a practical example:

var dimensionId = "CARS";

var membersToDelete = ["Audi"]; //or "Audi"



//if you want to delete multiple data just pass as array ex ["Audi","BMW"....]

var isDeleteSuccessful = PlanningModel_1.deleteMembers(dimensionId, membersToDelete);



// Now 'isDeleteSuccessful' indicates whether the delete operation was successful.

// You can handle further logic based on this result.

Conclusion

In this blog post, we explored the powerful capabilities of SAP Analytics Cloud for data analysis, focusing on the manipulation of planning model members through CRUD operations. We learned how to create, read, update, and delete members using scripting functions such as createMembers, getMember, updateMembers, and deleteMembers.

These operations provide a flexible framework for managing data within specific dimensions, offering a seamless experience for users leveraging SAP Analytics Cloud. Whether you are adding new members, retrieving information, updating existing data, or removing members, the scripting functionalities enable efficient interaction with planning models.

Significance of Promises in asynchronous Operations.

2023-12-29T09:06:32+01:00

Intro:

Hello,

I'm Writing my first blog on SAP community network, while developing the application and reviewing the other's code I came across this requirement. many new developers are feared to use the promises. and they develop a logic that is not convenient and increase the execution time.

In this blog I'm trying my best to describe how to use Promises and manage asynchronous operations.

This blog post delve into the world of promises in SAP UI5, exploring their importance and practical implementation.

What is Asynchronous programming?

Asynchronous programming plays a crucial role in modern web development and SAP UI5 developer as can leverage promises to streamline the asynchronous operations.

In asynchronous programming the operation is executed in the background by external process for this JavaScript engine uses the event loop and callback mechanism so the engine can perform the next operation/task in line. after completion of that task the asynchronous operation which is waiting in queue is completed.

In some cases our task is depend on the result of that asynchronous operation results and we get the wrong outcome because our asynchronous function is not executed and our dependant task is executed already, for that many developers use some weird logic of count and setTimeout(). and if the time set in timeout function is passed before executing the asynchronous operation then it will show the wrong result, Promise can help in this area.

Basics of Promise:

A promise is created using the 'Promise' constructor, which take a a single argument function known as "executor".

The executor function takes two arguments resolve and reject. These are the functions provided by the promise implementation.

State of promises:

Pending:

This is the initial state when promise is created

Resolved:

when promise is fulfilled. The promise transition to this state when 'resolve' function is called.

Rejected:

when there is an error or the async operation fails. Promise transition to this state when the 'reject' function is called.

Consuming promise:

Once a promise is created you can use the '.then' method to handle the resolved state and '.catch

method to handle the rejected state.

Promise.all:

The 'Promise.all' method takes an iterable of promise and return a new promise that resolves when

all of the input promise have resolved or rejects.

Result:

async / await:

'async / await' is a feature in JavaScript that simplifies the handling of asynchronous code, It's build on top of promises and provides a more synchronous - looking syntax, making asynchronous code easier to read and write.

async function:

mark a function as 'async' by using 'async' keyword before the function declaration. This signifies that the function will always return a promise.

await operator:

Inside async function you can use the 'await' keyword before a promise to pause the execution of the function until the promise is resolved.

This make asynchronous operation looks like synchronous code.

await keyword only work with Parent level async function.

Wrong example:

above function will throw an error because the await keyword only work with parent level async function here forEach callback function is parent level function so I have to

make the forEach function async.

Correct Example:

Conclusion

The use of promises or async / await and the combination of both is depend on the requirement of the project. promises helps to manipulate the asynchronous operation as per developer need.

You can write your thoughts and questions in the comment section. If you think this blog is helpful please do not forget to like and share 🙂 .

Utilizing SAP Cloud SDK for JavaScript in a BTP Proxy App for non-Web-Apps to access onpremise SAP Systems

2023-12-31T03:44:52+01:00

Introduction

Oftern there is a need for Apps running outside of the corporate network to access SAP onpremise systems. Using a Proxy App running in the BTP (Business Technology Platform) Cloud Foundry Environment utilizing the SAP Cloud Connector is a well known pattern for such requirements.

However using the destination and connectivity service to get access to the tunnel to the onpremise systems is not trivial and is best done with the help of libraries.The approuter (cf. https://www.npmjs.com/package/@sap/approuter) is a well known and proven solution for this. However approuter is aimed at web applications. Using it for eg native applicatios is a bit troublesome.

Since March 2019 there is also the SAP Cloud SDK for JavaScript (in the beginning known as the SAP S/4HANA Cloud SDK for JavaScript and also going by SAP Cloud SDK for Node.js) available. The http-client of this SDK completly handles the interaction with the destination and connectivity service, you just have to provide the destination name (please check out other features of this SDK, there is a lot of other useful stuff there!). This blog intends to give you some guidance for using this SDK for this porpose.

Basics

The SDK is availabe in the public npm repository. Add the line

"@sap-cloud-sdk/http-client": "^3.9.0",

to the dependencies section in your package.json. Use at least version 3.9.0 to avoid being hit by the xssec security vulnerability (cf. Security Note 3411067).

In your JavaScript file to be run add

const httpclient = require('@sap-cloud-sdk/http-client');

The object thus obtained follows the axios HTTP client API with an added first object parameter (second parameter is compatible to RawAxiosRequestConfig), eg to make a POST call to an onpremise destination use this code

await httpclient.executeHttpRequest(

        {

            destinationName: 'MYDESTINATION'

        },

        { 

            method: 'POST',

            url: "/sap/opu/odata/sap/ZMY_SERV_SRV/MyEntitySet",

            headers: {

                "Content-Type":"application/json; charset=utf-8",

                "Accept":"application/json"

            },

            data: body

        }

    ).then(response => {

        // use eg response.status and response.data 

    }).catch(err => {

        // use eg err.code or message

    });

(Note: All code examples in this blog are just examples, do not use in your productive code, eg consider adding logging and a more robust coding)

CSRF handling is done by default.

Proxy with Basic Authentication

For a first simple proxy example we will use Basic Authentication from Outside and also Basic Authentication to the onpremise system. The latter is an easy brainer: Just use Basic Authentication as Authentication Type when defining the destination in the BTP cockpit:

(Do yourself a favor and pay attention to the warning in the picture!)

With such a destination you need merely give the destinationName in the example above.

In the mta.yaml define the depencies to the destination and connectivity service:

...

modules:

- name: myproxy

  type: nodejs

  requires:

  - name: myproxy-destination-service

    parameters:

      content-target: true

  - name: myproxy-connectivity-service

  parameters:

    health-check-type: process

...

resources:

- name: myproxy-destination-service

  type: org.cloudfoundry.managed-service

  parameters:

    config:

      version: 1.0.0

    service: destination

    service-name: myproxy-destination-service

    service-plan: lite

- name: myproxy-connectivity-service

  type: org.cloudfoundry.managed-service

  parameters:

    service: connectivity

    service-plan: lite

Health check is set to process because otherwise health check uses an unauthenticated HTTP access to / which won't work with our basic authentication requirement and thus would give constant app restarts.

For the proxy function we use express and passport, ie in the package.json

      "express": "^4.17.3",

      "body-parser": "^1.20.2",

      "passport": "^0.6.0",

      "passport-http": "^0.3.0"

Preperation in the JavaScript file

const express = require('express');

const bodyParser = require('body-parser')

const passport = require('passport');

const passportHTTP = require('passport-http');



const auth_env = {login: process.env['AUTH_LOGIN'], password: process.env['AUTH_PASSWORD']};

const app = express();

passport.use(new passportHTTP.BasicStrategy(

    function(username, password, done) {

        if (username === auth_env.login && password === auth_env.password) {

            return done(null, username);

        } else {

            return done(null, false);

        }

    }

));

app.use(passport.initialize());

app.use(passport.authenticate('basic', { session: false }));

app.use(bodyParser.text({ type: 'application/json' }));

...

app.listen(process.env.PORT || 5000, function () {

    console.log('Proxy app started');

});

and code for proxying a POST call

app.post('/MyEntitySet', async (req, res) => {

    if (!req.user) { res.sendStatus(403); return; }

    await httpclient.executeHttpRequest(

        {

            destinationName: 'MY_DESTINATION'

        },

        { 

            method: 'POST',

            url: "/sap/opu/odata/sap/ZMY_SERV_SRV/MyEntitySet",

            headers: {

                "Content-Type":"application/json; charset=utf-8",

                "Accept":"application/json"

            },

            data: req.body

        }

    ).then(response => {

        res.send(response.data);

    }).catch(err => {

        res.status(500).send('Backend Error');

    });    

});

(in real life you might want to use wildcards and parse req.url)

Proxy with Principal Propagation

Principal Propagation means the client needs to authenticate the user aka principal against the BTP and obtain tokens which need to be stored securely. When accessing the proxy the token needs to be presented. The token is then forwared to the cloud connector which generates authorization info using the principal for the onpremise system (configuring cloud connector and onpremise systems to achieve this is beyond the scope of this blog).

In this example the native client needs to obtain a JWT token and send it along with request to the proxy. The JWT token will eg be obtained and renewed by utilizing SAML 2.0 and OAuth 2 protocols with the XSUAA service, cf. https://sap.github.io/cloud-sdk/docs/java/guides/cloud-foundry-xsuaa-service . The native client should use libraries for this tasks (this is however beyond the scope of this blog). After deploying the proxy app to the BTP go to the deployed app in the BTP cockpit, select "Service Bindings" on the left and click on "Show sensitive data" to obtain the data for the libraries. You need

token_service_url : Add /oauth/authorize for the SAML 2.0 login endpoint, /oauth/token for the OAuth 2.0 endpoint and /logout.do for the SAML 2.0 logout endpoint

clientid and clientsecret for the OAuth 2 protocol

Also go to "Scopes" on the left and use the displayed scope name in the OAuth 2 protocol.

The configuration for xsuaa in the xs-security.json file is needed (add scopes and role-templates as needed):

{

    "scopes": [

      {

        "name": "$XSAPPNAME.access",

        "description": "Access"

      }

    ],

    "role-templates": [

      {

        "name": "Access",

        "default-role-name": "My Proxy Access Authorization",

        "scope-references": [

          "$XSAPPNAME.access"

        ]

      }

    ],

    "oauth2-configuration": {

        "redirect-uris": [

            "http://localhost:9999/success"

        ]

    }

  }

Use Redirect-URIs as needed by the native libraries (can also use different schemes than http oder https as commonly used on mobile OS).

In the mta.yaml there is now a depedency to the xsuaa service (add role-collections as needed):

  requires:

  - name: my_proxy-uaa

...

resources:

- name: my_proxy-uaa

  type: org.cloudfoundry.managed-service

  parameters:

    path: ./xs-security.json

    service-plan: application

    service: xsuaa

    config:

      xsappname: my_proxy-${space}

      tenant-mode: dedicated

      role-collections:

        - name: 'my_proxy-Access-${space}'

          role-template-references:

            - $XSAPPNAME.Access

The xsappname and the role collections name thus contains the space name in order to be able to deploy the proxy app to multiple spaces in the same subacount (eg for three-tier development, test, production spaces). In this case the destination need to be defined at app-level in the respective destination service instance instead of subaccount level to have identical named destinations pointing to development, test, production onpremise systems respectivly (destination can't be defined at space level). Assign the role collection to users, either individually or via groups or via IdP configuration.

The destination is defined with Principal Propagation:

In the package.json we need now additional dependencies to xsenv and xssec:

       "@sap/xsenv": "^4.2.0",

       "@sap/xssec": "^3.6.0",

(Use at least version 3.6.0 of xssec because of mentioned security issue)

In the JavaScript file the preperation now includes verification of the JWT token with the xsuaa service:

const httpclient = require('@sap-cloud-sdk/http-client');

const express = require('express');

const bodyParser = require('body-parser')

const xsenv = require('@sap/xsenv');

const passport = require('passport');

const xssec = require('@sap/xssec');



xsenv.loadEnv();

const app = express();

const services = xsenv.getServices({ uaa: 'my_proxy-uaa' });

passport.use(new xssec.JWTStrategy(services.uaa));

app.use(passport.initialize());

app.use(passport.authenticate('JWT', { session: false }));

app.use(bodyParser.text({ type: 'application/json' }));

The code for proxying a call now contains code for checking the scope and for fowarding the JWT token for principal propagation:

app.post('/MyEntitySet', async (req, res) => {

    if (!req.authInfo.checkLocalScope('access')) {

        return res.status(403).send('Forbidden');

    }

    await httpclient.executeHttpRequest( 

        {

            destinationName: 'MY_DESTINATION'

            jwt: req.authInfo.getAppToken()

        },

        { 

            method: 'POST',

            url: "/sap/opu/odata/sap/ZMY_SERV_SRV/MyEntitySet",

            headers: {

                "Content-Type":"application/json; charset=utf-8",

                "Accept":"application/json"

            },

            data: req.body

        }

    )

Conclusion

The SAP Cloud SDK for JavaScript makes it easy to use onpremise destinations with principal propagation in a BTP proxy app and hides the complexity in dealing with the destination, connectivity and xsuaa service. Happy Coding and have a succesful and peaceful new year!

re>≡CAP 2024 | Call for Speakers and Sponsors

2024-01-31T10:36:21.388000+01:00

reWhat?

re>≡CAP: The yearly developer (un-) conference all around the SAP Cloud Application Programming Model (CAP). It's the time of the year where our vivid community, customers, and partners meet the CAP team and exchange best practices, technical concepts, current projects, ideas for the future, and way more...
You can get a good impression about the format, content, event impressions here (2023 summary).

So better get excited if you see the blue cap... 🙂

Where and when?

4th of June, 2024 - same location in St.-Leon Rot, Germany.

(There will be streaming for the presentation tracks. The hands-on workshops, meet-the-experts corners and of course the networking and evening events are onsite only).

Become Speaker

The call for speakers is open and we want YOU to be part of it. So don't hesitate and propose your session until end of February latest.

Become Sponsor

Use the chance to support us and present your brand at our conference - check-out the customizable packages at our website!

Early Bird Tickets

You have a long journey and need to plan your trip to re>≡CAP 2024 early (before the official registration starts)? Please send us an email with your name, company, and mailing address.

There is more! UI5con 2024 and ABAPconf 2024

It gets even better - we are in close sync with our friends from UI5 and ABAP: Their conferences - UI5con 2024 and ABAPConf 2024 - will take place in the same week and at the same location. So it becomes even more attractive for you to come to Germany!

We will do a dedicated post highlighting the full conference week soon...

Dynamically show/hide enable/disable fields in Fiori Elements

2024-02-19T08:05:02.709000+01:00

Sometimes you need to hide or disable the field in UI dynamically based on condition, for example based on entered data in edit mode.

You can make it in backend using hide annotation with value based on control field. Changing the value of control field via value help additional bindings or determination with side effects.

Use Case: In our app for order creation user is entering order code first. Based on the value of order code the device location field or the device number field should be enabled dynamically in edit mode. I one is enabled for entering the other must be read only.

1. Hide annotation based on another field

First of all we create two additional read only fields in Interface and projection views

devloc as deviceLocation,
devloc as deviceLocationRO,
...
_Equipment.SerialNumber as deviceNumber,
_Equipment.SerialNumber as deviceNumberRO,

Then we make read only fields read only in behaviour definition

field ( readonly ) deviceNumberRO, deviceLocationRO;

The idea is to hide the editable field showing the readonly field what makes user thinking the field is disabled/enabled dynamically.

So we add another four control fields, which will contain true or false based on condition, and will be used as value for hide annotation

_OrderCode.hideDevLoc as hideDevLocation,
_OrderCode.hideSerNum as hideDevNumber,
_OrderCode.hideDevLocRO as hideDevLocationRO,
_OrderCode.hideSerNumRO as hideDevNumberRO,

We need four of them to be able to hide all of fields until user enters order code.

Now we bind all this together, making aur fields be hideable depending of the value of control fields. I am using annotation.xml in UI, but the same can be done in backend metadata extension.

<Record Type="UI.DataField">
  <PropertyValue Property="Value" Path="deviceNumber"/>
  <Annotation Term="UI.Hidden" Path="hideDeviceNumber" />
</Record>
<Record Type="UI.DataField">
  <PropertyValue Property="Value" Path="deviceNumberRO"/>
  <Annotation Term="UI.Hidden" Path="hideDevNumberRO" />
</Record>
...
<Record Type="UI.DataField">
  <PropertyValue Property="Value" Path="deviceLocationRO"/>
  <Annotation Term="UI.Hidden" Path="hideDevLocationRO" />
</Record>
<Record Type="UI.DataField">
  <PropertyValue Property="Value" Path="deviceLocation"/>
  <Annotation Term="UI.Hidden" Path="hideDevLocation"/>
</Record>
...

In the same way for deviceLocation and deviceLocationRO.

The next step here is to set the values of control fields as additional binding of order code value help view ZI_DM_CSORDER_OCODE_VH:

define view ZI_DM_CSORDER_OCODE_VH
  as select from ...
{
...
@UI.hidden: true
cast(case when bzgsobjtyp='01' then 'X' else '' end as boolean) as hideSerNum,
@UI.hidden: true
cast(case when bzgsobjtyp='03' then 'X' else '' end as boolean) as hideDevLoc,
@UI.hidden: true
cast(case when bzgsobjtyp='01' then '' else 'X' end as boolean) as hideSerNumRO,
@UI.hidden: true
cast(case when bzgsobjtyp='03' then '' else 'X' end as boolean) as hideDevLocRO,
...
}

Value Help for order code is defined as following:

@Consumption.valueHelpDefinition: [
      { entity : {name: 'ZI_DM_CSORDER_OCODE_VH', element: 'orderCode'},
      { localElement: 'hideDevLocation', element: 'hideDevLoc', usage: #RESULT  },
      { localElement: 'hideDevNumber', element: 'hideSerNum', usage: #RESULT  },
      { localElement: 'hideDevLocationRO', element: 'hideDevLocRO', usage: #RESULT  },
      { localElement: 'hideDevNumberRO', element: 'hideSerNumRO', usage: #RESULT  }
      ]
orderCode,

As of now, when user changed order code, the control fields hideDevice* will be updated with the values generated in value help view causing dynamically hiding of fields in edit mode. The same behaviour may be achieved with determination code and side effects.

How it looks in UI.

Case 1 - user enters order code for device location. Device location is showing, device number is hided.

Case 2 - user enters order code for device number. Device number is showing for edit, device location is showing read only, because it will be determined later based on device number data.

Deleting mutiple data in m-table & Deleting multiple data using Batch-call(Consuming OData Service)

2024-02-19T08:06:54.441000+01:00

Hello Everyone,

I am writing this blog to explain how to delete multiple data in m table in SAP UI5 application and also deleting multiple data in m table using Batch call consuming ODATA service.

The m table is also called as responsive table which contains a set of line items and is fully responsive. The control for m-table is sap.m.Table.

Step1: Create a new Project in VS Code. View---Command Palette ---Open Application Generator---Template Type (SAP Fiori)—Select Basic ---Click on Next

Step 2: Data Source ---Select None ---Click on Next

Step 3: Give View name and Project name Click on Finish.

Step 4: Click on model --- Create employee.json file.

Step 5: Configure in manifest.json

Step 6: In View, Create m table.

<mvc:View controllerName="multipledatadelete.controller.View1"
    xmlns:mvc="sap.ui.core.mvc" displayBlock="true"
    xmlns="sap.m">
    <Page id="page" title="{i18n>title}">
        <content>
            <Table items="{emp>/data}" mode="MultiSelect" selectionChange="oSelectedItems" id="mytable"  >
                <columns>
                    <Column >
                        <Text text="Name"></Text>
                    </Column>

                    <Column >
                        <Text text="Id"></Text>
                    </Column>

                    <Column >
                        <Text text="City"></Text>
                    </Column>
                </columns>
                <ColumnListItem >
                    <cells>
                        <Text text="{emp>name}"></Text>
                        <Text text="{emp>id}"></Text>
                        <Text text="{emp>city}"></Text>
                       
                    </cells>   
                </ColumnListItem>
                <headerToolbar>
                    <OverflowToolbar >
                        <Bar >
                            <contentRight>
                                <Button text="Delete" type="Negative" press="oDelete" ></Button>
                            </contentRight>
                        </Bar>
                    </OverflowToolbar>
                </headerToolbar>
            </Table>
        </content>
    </Page>
</mvc:View>

Step 7: In Controller, Write Logic.

Based on selected keys, we can delete multiple data.

sap.ui.define([
    "sap/ui/core/mvc/Controller"
],
    /**
     *  {typeof sap.ui.core.mvc.Controller} Controller
     */
    function (Controller) {
        "use strict";
        var oSelectedPath =[]
        return Controller.extend("multipledatadelete.controller.View1", {
            onInit: function () {

            },
            oSelectedItems:function(oEvent){
             
                oSelectedPath = oEvent.getSource().getSelectedContextPaths()

            },
            oDelete:function(){

                var oModel = this.getView().getModel("emp")
                var aOldData = oModel.oData.data

                var aTemp = []
               for(let j=0;j<oSelectedPath.length;j++)
               {
                   var index =  oSelectedPath[j].split("/")[2]
                    for(let i=0; i<aOldData.length; i++)
                    {
                        
                        if(aOldData[i].id == aOldData[index].id )
                        {
                            aTemp.push(aOldData[i])
                        }
                        
                    }
               }


               for(let k=0;k<aTemp.length;k++)
               {
                    
                    for(let n=0; n<aOldData.length; n++)
                    {
                        
                        if(aOldData[n].id == aTemp[k].id )
                        {
                            aOldData.splice(n,1)
                        }
                        
                    }
               }
               oModel.refresh(true)
               this.getView().byId("mytable").removeSelections(true)

            }

        });
    });

Run the program --- Open Integrated Terminal ---npm run start.

Output look like this.

After deleting multiple data, Output look like this

---------------------------------------------------------------------------------------------------------------------------------------------

Multiple data delete using Batch call.

In some business scenarios multiple entity instances need to be handled together as a single logical unit of work. This is where $batch processing come into picture. $batch request means multiple operations bundled as a single request. Batch processing simple batches several independent OData service call to a single OData call. Batch call Reduce number of Api calls. In a single http request we can do multiple crud operation.

Step 1: Create a Database table in SE11.

Step 2: I have inserted some records. Output look like this.

Step3: After creating Database table. Go to T-Code SEGW. Create OData Project.

Step 4: Import DDIC Structure and Generate Runtime Objects and Also Register Service to open SAP Gateway Client.

Step 5: Click on DPC_EXT.

Step 6: Redefine GET_ENTITYSET and write logic.

Step 7: Redefine GET_ENTITY and write logic.

Step 8: Redefine CREATE_ENTITY and write logic.

Step 9: Redefine UPDATE_ENTITY and write logic.

Step 10: Redefine DELETE_ENTITY and write logic.

Step 11: Redefine CHANGESET_BEGIN AND CHANGESET_END without writing any logic.

Step 12: Go to SAP Gateway Client and Check all crud operations and Batch Call service working or not through URI.

Front end:

Step 1: Create one SAP UI5 application based on Service created in Back-end. Metadata.xml file will be created.

Step 2: Home Page

<mvc:View controllerName="odatabatch.controller.View1"
    xmlns:mvc="sap.ui.core.mvc" displayBlock="true"
    xmlns="sap.m">
    <Page id="page" title="{i18n>title}">
        <content>
        
            <Table items="{employee>/}" mode="MultiSelect" selectionChange="onRead" id="Tableid"  >
                <columns>
                    <Column >
                        <Text text="Employee ID"></Text>
                    </Column>
                    <Column >
                        <Text text="Employee Name"></Text>
                    </Column>
                    <Column >
                        <Text text="Employee Age"></Text>
                    </Column>
                    <Column >
                        <Text text="Employee City"></Text>
                    </Column>
                </columns>

                <items>
                    <ColumnListItem >
                        <cells>
                            <Text text="{employee>Employeeid}"></Text>
                            <Text text="{employee>Empname}"></Text>
                            <Text text="{employee>Empage}"></Text>
                            <Text text="{employee>Empcity}"></Text>
                        </cells>
                    </ColumnListItem>
                </items>
            </Table>
            <Bar >
                <contentRight>
                    <Button text="Delete" type="Negative" id="btnid" press="onMultipleDelete"></Button>
                </contentRight>
            </Bar>
        
        </content>
    </Page>
</mvc:View>

Step 3: Controller logic

onInit logic:

 onInit: function () {
                var oModel = new sap.ui.model.json.JSONModel();
                this.getOwnerComponent().getModel().read("/zemployeeSet", {
                    success: function (oData, response) {
                        debugger
                        // Assuming that the data you want is in the 'results' property
                        oModel.setData(oData.results);
                    },
                    error: function (error) {
                        console.error("Error loading data: " + error);
                    }
                    
                });
                 this.getView().setModel(oModel, "employee");

            }

onRead logic:

onRead:function(oEvent){
                this.getOwnerComponent().getModel().read("/zemployeeSet", {
                    success: function (oData, response) {
                        
                    },
                    error: function (error) {
                        console.error("Error loading data: " + error);
                    }
                    
                });
            },

onMultipleDelete logic:

          onMultipleDelete:function(oEvent){
                var oTable = this.getView().byId('Tableid');
                    var selectItem = oTable.getSelectedItems();

                    var object = [];
                    for (var i = 0; i < selectItem.length; i++) {
                        var selectedrow = {
                            "Employeeid": selectItem[i].getBindingContext('employee').getObject().Employeeid,
                            "Empname": selectItem[i].getBindingContext('employee').getObject().Empname,
                            "Empage": selectItem[i].getBindingContext('employee').getObject().Empage,
                            "Empcity": selectItem[i].getBindingContext('employee').getObject().Empcity,
                        };
                        object.push(selectedrow);
                    }
            
                        var oModel = this.getView().getModel();
                    

                        oModel.setUseBatch(true);
                      var jModel = this.getOwnerComponent().getModel();
                    for(var i = 0; i<object.length; i++){
                        var oEntry = object[i].Employeeid;
                        oModel.remove("/zemployeeSet('" + oEntry + "')",
                        { 
                            method:"DELETE",
                        success:function(response){
                           
                            sap.m.MessageToast.show("Employee Data is deleted");
                        }
                        }
                        );  
                    }
               
                    oModel.submitChanges({
                        success: function(data, response){

                        },
                        error: function(e){

                        }
                    })
                location.reload();       
            }

Step 4: Output before

Step 5: After deleting multiple data output look like this.

In Database table, Multiple data get deleted.

Conclusion:

Instead of deleting single records we can delete multiple data in a single shot.

Thanks & Regards,

Kavya H B

Extracting Excel Data into JSON object and display into sap.ui.table using Javascript and sheetJS

2024-02-21T12:58:44.402000+01:00

Intro:

Hello,

We have some cases where we want to upload the excel file data into database and show this data to UI using table and for that Backend build query and convert excel file into readable format then upload it to table using query and then give GET service to UI and the UI fetch this service and then display this data.

I cam across with this case and for that I use xlsx library featured by sheetJS. It helps to solve this problem and we are able to extract the data from excel sheet to Json object and then we can show this data to sap ui table and also, able to post this data to backend using post service if needed also we are able to apply the validations.

Prerequisites:

JavaScript FileReader object.
Sap UI5 and UI elements.

let's get start.

1. create a sample application.

2. we need a xlsx library

3. add library path to manifest.

4. We create a simple UI where we are able to upload a file and a table where we can display data.

5. We have a sample data file for testing.

6.First select the file and then click on upload.

7.from here our controller comes into picture from here we use the file reader object of javascript and read the file.

What is File Reader?

The FileReader object lets web applications asynchronously read the contents of files (or raw data buffers) stored on the user's computer, using File or blob objects to specify the file or data to read.

onLoad event is fired when a file has been read successfully. This event is not cancelable and does not bubble.

9. In this onload event we are building a code to extract the data in Json Object.

10. Now we want to confirm that the file we upload have the same columns as we mentioned so we will not lose any data

11. If our data is correct, we are now in a place to set this data into model and then send if required post it.

12.Result

13. Show proper messages so that user can be able to identify where the thing is getting wrong.

e.g. if user press upload button without selecting file.

if the column name is wrong.

If the Mandatory data is missing

Limitations:

Developer should pre known the column names means column names should be static
column names and object count should be same if the columns in excel are more then we are not able to capture that data and if the column is missing then we will set the undefined values.
validations to check the column names and mandatory field are manually from developer.

Conclusion:

As sometime user wanted to upload the excel data into system that time user is not required to depend on backend side as he has the application that build to post the data from excel to Database.

many case scenarios can be performed using this library.

It helps me and hope so it will help you to.

If you find this content informative, please share and give feedback.

Amount to Words using SAP Adobe Forms Scripting - JavaScript

2024-04-05T16:31:33.312000+02:00

Problem Overview

It is a common task to add the Amount in words to Adobe Forms in both SAP on-premise and Cloud Systems.

Sometimes we face an issue that there is no enhancement point to write the functionality in ABAP(Backend). To Solve that I had to write the whole functionality in the Form Script Editor.

In this short Blog post, I am going to share with you a repository with the Logic that you can use if you face the same problem.

To achieve that I found a great repository that achieve the needed but it is not compatible with the Form Scripting JS version, So I had to modify it to the simplest form to work properly.

Code :

Here is the repository with the modified version, It is only in Arabic and Saudi Riyal.

But you will find other currencies in the original Repository that you can use.

The Modified Version (For SAP Forms): https://github.com/hazem-jr/AmountInWords_InArabic.git

The Original Version : https://github.com/mmahgoub/tafgeetjs.git

Tests:

Embracing TypeScript in SAPUI5 Development

2024-04-22T11:05:53.164000+02:00

Throughout 11 years of SAP development, I've seen the evolution of SAP's vision for its ERP, particularly with the introduction of FIORI, marking a significant shift towards user-experience-centered innovation. Developers have also been considered with tools like UI5, BAS, and more recently SAP BUILD Code. Now, I will focus on the introduction of TypeScript (TS) into SAPUI5, sharing my experience and observations while developing Fiori applications in TS for a specific project.

Understanding TypeScript: A Brief Introduction

TypeScript (TS), developed by Microsoft, extends JavaScript (JS) by incorporating features like static typing, interfaces, and classes: commonly found in object-oriented programming. The compilation of TypeScript into JavaScript before execution enables the detection of programming errors during development, fostering code quality and robustness.

If you'd like to delve deeper:
TypeScript: JavaScript With Syntax For Types. (typescriptlang.org)

SAP & TypeScript: A Not-So-New Collaboration

SAP's journey with TypeScript began in 2021 as part of a "beta experimental" phase, paving the way for developers to explore this new avenue in application development. In 2023, during UI5con, SAP officially announced TypeScript support for UI5 starting from version 1.116.0.

For further details:
TypeScript for UI5: “Yay, it’s official!” – and a ... - SAP Community

Feedback and Experience Sharing

Today, rather than a tutorial on TypeScript development (perhaps in another blog 🙂), I aim to share my personal experience and insights, motivating those who are curious yet hesitant to take the plunge.

Advantages of TypeScript Integration

Static Typing:

The first error you'll encounter when starting with TypeScript is compilation errors due to missing typings! However, this very aspect underscores one of TypeScript's greatest strengths…

example of static typing for a structure

By explicitly specifying data types, TypeScript detects typing errors during compilation, fostering code reliability and reducing the risk of runtime errors. At the beginning of your project, you might see a lot of errors flagged in red, but it will quickly become a natural part of the development process.

example of TS error for missing types

It prevents errors that might otherwise require tedious debugging later on. And a big plus, it makes understanding the code easier, especially when dealing with a developer who isn't generous with comments 😅. This investment proves to be profitable in the long term for application maintenance, as it helps reduce errors introduced during future modifications.

To find the correct type when using a method, I refer to the API Reference - Demo Kit - SAPUI5 SDK website. Alternatively, we can use BAS; if we hover the mouse over the method, a pop-up appears and provides the types that can be used.

example of documentation included in BAS

Interfaces and Inheritance:

Drawing from object-oriented principles, TypeScript empowers developers with the creation of classes, interfaces, and inheritances. Interfaces offer great convenience as they allow us to precisely define the structure of objects, specifying the necessary properties along with their associated data types. They are truly a "must-have" as they ensure code consistency, making it easier to maintain and evolve. Moreover, the ability to reuse these interfaces throughout the application contributes to a modular and efficient design.

example of interface definition

ES6 Features:

Another aspect I particularly appreciated was the ES6 features. Although not specific to TypeScript, it was my experience with this language that led me to these features. They allow for writing more elegant and clear code, while ensuring application logic with fewer lines, greatly simplifying maintenance.

Challenges Faced and Overcome

Library Integration:

Despite its advantages, integrating TypeScript with SAP libraries sometimes presented challenges. For example, I needed to use the "sap/ushell/Container" libraries into a project extension: my project refused to compile because TypeScript didn't know "sap/ushell/Container".

Issue raised on GitHub :
`sap.ushell.Container` removed in 1.100? · Issue #347 · SAP/ui5-typescript · GitHub

So developers may encounter issues such as missing typings or compatibility issues, requiring workarounds until resolved by SAP through updates.

Learning Curve:

Transitioning from JavaScript to TypeScript may involve a learning curve for developers unfamiliar with static typing and TypeScript-specific syntax. While the initial investment in learning TypeScript pays off in the long run, it may temporarily impact development velocity.

Conclusion

While at first I complained about having to give up my good old JavaScript for TypeScript (like a good Frenchman 😅), I finally got the taste for TypeScript and wouldn't go back for anything in the world. From enhanced development comfort to improved code maintenance and readability, TypeScript has become an indispensable tool in my SAPUI5 arsenal.
With trust in SAP's commitment to resolving library-related issues, my journey with TypeScript continues to evolve, promising a future of enriched development experiences!

credit: Chicken Thoughts (@ChickyThoughts) / X (twitter.com)

SAP CAP: Controller - Service - Repository architecture

2024-04-22T13:52:18.556000+02:00

Hi all,

Introduction

Many of us are leveraging SAP CAP (Node.js with TypeScript) for our projects.

While CAP provides an abstract mechanism to derive RESTful oData services given a CDS data model there's always room for more efficiency and improvement in the implementing communication between business logic, service, and persistence layer.

Blog series

1. CDS-TS-Dispatcher: Simplifying SAP CAP TypeScript Development

2. CDS-TS-Repository: Simplify SAP CAP Entity persistance with BaseRepository

Crafted by developers for developers by ABS & DxFrontier team

Prerequisites

Before we dive in, you should have a basic understanding of CDS-TS-Dispatcher: Simplifying SAP CAP TypeScript Development

Section 1: Introduction to Controller - Service - Repository - design pattern

This pattern provides a structured approach to organizing the various components of our SAP CAP applications, promoting modularity, scalability, and maintainability.

Each layer should be structured based on domain of responsabilities like :

Controller - Responsible for managing the REST interface to the business logic implemented in Service
Service - Contains business logic implementations, the middleware between Controller and Repository.
Repository - This component is dedicated to handling entity manipulation operations by leveraging the power of CDS-QL.

Controller Service Repository design pattern

Section 2: Introduction to Controller (@EntityHandler) layer

Now we will create the Controller layer and for that we created a new class BookHandler which is annotated with the @EntityHandler(Book) decorator.

@EntityHandler decorator takes as an argument the Book entity, this will have effect on all event decorators like @BeforeRead(), @AfterRead() ..., all events will be executed exclusively for this Book entity.

@EntityHandler(Book)
class BookHandler {
  @Inject(SRV) private readonly srv: Service;
  @Inject(BookService) private readonly bookService: BookService;

  @AfterCreate()
  private async afterCreate(@Result() result: Book, @Req() req: Request): Promise<void> {
    this.bookService.validateData(result, req);
  }

  @BeforeRead()
  @Use(MiddlewareMethodBeforeRead)
  private async beforeRead(@Req() req: TypedRequest<Book>): Promise<void> {
    this.bookService.showConsoleLog();
  }

  @AfterRead()
  private async afterRead(
    @Req() req: Request,
    @Results() results: Book[],
    @SingleInstanceSwitch() singleInstance: boolean,
    @IsColumnSupplied<Book>('price') hasPrice: boolean,
    @IsPresent('SELECT', 'columns') hasColumns: boolean,
    @IsRole('Developer', 'AnotherRole') role: boolean,
    @GetRequest('locale') locale: Request['locale'],
   Promise<void> {
    await this.bookService.manageAfterReadMethods({ req, results, singleInstance });
  }

  @AfterUpdate()
  private async afterUpdate(@Result() result: Book, @Req() req: TypedRequest<Book>): Promise<void> {
    await this.bookService.addDefaultTitleText(result, req);
  }

  @AfterDelete()
  private async afterDelete(@Result() deleted: boolean, @Req() req: Request): Promise<void> {
    this.bookService.notifyItemDeleted(req, deleted);
  }
}

export default BookHandler;

@EntityHandler(Book) decorator will registers 5 events :

@AfterCreate() 
@BeforeRead() 
@AfterRead() 
@AfterUpdate() 
@AfterDelete()

Every decorator will create the corresponding event in the SAP CAP CDS event registration, this means that the callback of every decorator will be triggered when a REST (CRUD) Request is performed.

@BeforeRead() and @AfterRead() will be triggered when a new GET request is performed :

Example: GET http://localhost:4004/odata/v4/catalog/Book

@Inject() dependencies

We inject the BookService class by using Dependendy injection and gaining visibility over all public methods created in the BookService class:

@Inject(BookService) private readonly bookService: BookService

Section 3: Introduction to Service (@Servicelogic) layer

In @ServiceLogic() will reside all of the customer business logic. This @ServiceLogic() will make a connection between @EntityHandler(Book) and @Repository()

@ServiceLogic()
class BookService {
  @Inject(SRV) private readonly srv: Service;
  @Inject(BookRepository) private readonly bookRepository: BookRepository;

  // PRIVATE routines

  private async emitOrderedBookData(req: Request) {
    await this.srv.emit('OrderedBook', { book: 'dada', quantity: 3, buyer: req.user.id });
  }

  private notifySingleInstance(req: Request, singleInstance: boolean) {
    if (singleInstance) {
      req.notify('Single instance');
    } else {
      req.notify('Entity set');
    }
  }

  private enrichTitle(results: Book[]) {
    results.map((book) => (book.title += ` -- 10 % discount!`));
  }

  // PUBLIC routines

  public async manageAfterReadMethods(args: { req: Request; results: Book[]; singleInstance: boolean }) {
    await this.emitOrderedBookData(args.req);
    this.notifySingleInstance(args.req, args.singleInstance);
    this.enrichTitle(args.results);
  }

  public notifyItemDeleted(req: Request, deleted: boolean) {
    req.notify(`Item deleted : ${deleted}`);
  }

  public showConsoleLog() {
    console.log('****************** Before read event');
  }

  public validateData(result: Book, req: Request) {
    if (result.currency_code === '') {
      return req.reject(400, 'Currency code is mandatory!');
    }
  }

  public async addDefaultTitleText(result: Book, req: TypedRequest<Book>) {
    await this.bookRepository.update({ ID: req.data.ID }, { title: 'Dracula' });
  }

  public async verifyStock(req: ActionRequest<typeof submitOrder>) {
    const { book, quantity } = req.data;
    const bookFound = await this.bookRepository.findOne({ ID: book! });

    if (quantity != null) {
      if (quantity < 1) {
        return req.reject(400, `quantity has to be 1 or more`);
      }

      // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
      if (!bookFound) {
        return req.error(404, `Book #${book} doesn't exist`);
      }

      if (bookFound.stock !== null && quantity > bookFound.stock!) {
        return req.reject(409, `${quantity} exceeds stock for book #${book}`);
      }

      await this.bookRepository.update(bookFound, {
        stock: (bookFound.stock! -= quantity),
      });
    }
    await this.srv.emit('OrderedBook', { book, quantity, buyer: req.user.id });

    return { stock: bookFound!.stock };
  }
}

export default BookService;

Section 4: Introduction to Repository (@Repository) layer

This BaseRepository will provide out-of-the-box functionalities like:

.create(): Create new records in the table.
.update(): Updates a new record in the table.
.createMany(): Creates many records in the table.
.findAll(): Retrieve all records from the table.
.find(): Query the database to find specific data.
.delete(): Remove records from the database.
.exists(): Check the existence of data in the table.
... and many more actions

@Repository()
class BookRepository extends BaseRepository<Book> {
  constructor() {
    super(Book);
  }
  // ... define custom CDS-QL actions if BaseRepository ones are not satisfying your needs !
}

export default BookRepository;

In the @Repository() we've utilizied the BaseRepository by extending the BookRepository class with CDS-TS-Repository will give us access to the most common CDS-QL actions.

You can find additional documentation for BaseRepository at CDS-TS-Repository GitHub

Conclusion

In conclusion, CDS-TS-Dispatcher combined with CDS-TS-Repository is a powerful tool that can speed up your SAP CAP TypeScript projects by eliminating repetitive code and being a better fit for common team architecture setups.

Additional Resources

Find an example of usage of the CDS-TS-Samples GitHub

Introducing fileUploadXLS: The Ultimate Excel Custom Widget for SAP Analytics Cloud

2024-05-17T14:49:54.822000+02:00

fileUploadXLS custom widget is designed to streamline the process of handling Excel or XLS files within SAP Analytics Cloud (SAC), enabling users to easily retrieve file data in various formats such as JSON, raw text, and more.

Key Features

File Format Flexibility: Supports Excel and XLS files, ensuring compatibility with common data sources.
Data Retrieval: Easily retrieve file data in JSON, raw text, or other formats.
Filtering Capabilities: Apply filters to records based on value or character presence.
Data Hierarchy: Set hierarchical structures for better data organization.

Installation Guide

Watch Full Guidance on YouTube As well

To integrate the fileUploadXLS widget into your SAP application, follow these simple steps:

Download the Widget:
Click the link above to download the fileUploadXLS.json file.
Or Download it from Github : https://github.com/SAP-Custom-Widget/fileUploadXLS
Add to SAC Portal:
- Navigate to your SAC Portal.
- Select "Analytic Application" from the left sidebar.
- Go to the "Custom Widget" tab.
- Click the "+" icon on the right side and upload the fileUploadXLS.json file you downloaded.
Start Using the Widget:
- Once uploaded, the widget is ready to use in your applications.

Methods Overview

The widget offers a range of methods to interact with your data:

Set Methods

Method	Parameter Type	Description
setHierarchyStructure(hierarchy)	Selection/Object array	Sets the hierarchical structure for the data.
setFilterByValue(filterByValue)	Selection/Object array	Applies a filter to records based on a constant value.
setFilterByContains(filterByContains)	Selection/Object array	Applies a filter to records based on a value that contains a specific character.

Get Methods

Method	Return Type	Description
getDataAsJson()	Selection/Object array	Retrieves uploaded data in JSON/Selection/Object format.
getDataAsRaw()	string	Retrieves uploaded data in raw string format.
getTotalRecordsCount()	integer	Gets the total count of records.
getHeaders()	string[] array	Gets the headers of uploaded data as an array.

I hope you find the SAC-P Custom Widget: fileUploadXLS useful for your projects. Your feedback and suggestions are always welcome, as they help in making this tool even better. Thank you for your support, and happy data handling!

Conclusion

The SAC-P Custom Widget: fileUploadXLS is a powerful addition to SAP Analytics Cloud, designed to simplify the process of working with Excel and XLS files. With its robust data retrieval capabilities and flexible filtering options, it enhances your ability to manage and manipulate data efficiently. By following the easy installation steps, you can quickly integrate this widget into your applications and start leveraging its features immediately.

Create Custom Tables in SAP Analytics Cloud with dynamoTable

2024-05-18T17:15:33.400000+02:00

dynamoTable custom widget is designed to help you create dynamic, customizable tables within SAP Analytics Cloud (SAC), enhancing your data presentation and analysis capabilities.

Key Features

Custom Table Creation: Easily create and manage tables to suit your specific data needs.
Flexible Data Handling: Input data as an array of objects for seamless integration.
Simple Integration: Quickly add the widget to your SAC applications with straightforward installation steps.

Installation Guide

YouTube Video Tutorial

To integrate the dynamoTable widget into your SAP application, follow these simple steps:

Download the Widget:
Click the link above to download the dynamoTable.json file.
Or find on GitHub: https://github.com/SAP-Custom-Widget/dynamoTable
Add to SAC Portal:
- Navigate to your SAC Portal.
- Select "Analytic Application" from the left sidebar.
- Go to the "Custom Widget" tab.
- Click the "+" icon on the right side and upload the dynamoTable.json file you downloaded.
Start Using the Widget:
- Once uploaded, the widget is ready to use in your applications.

Methods Overview

The widget offers a simple method to manage your table data:

Method	Return Type	Description
setTableData(arrayOfObject)	Selection/Object array	Sets the table data using an array of objects.

Example Usage

Here’s an example of how to use the setTableData method to populate your table:

var data  = [
  {
    productId: "1",
    productName: "Wireless Mouse",
    category: "Electronics",
    price: "25.99",
    quantitySold: "120",
    dateOfSale: "2024-05-01"
  },
  {
    productId: "2",
    productName: "Bluetooth Headphones",
    category: "Electronics",
    price: "79.99",
    quantitySold: "75",
    dateOfSale: "2024-05-02"
  }
];

dynamoTable_1.setTableData(data);

Output

Conclusion

The SAC-P Custom Widget: dynamoTable is a powerful tool for creating and customizing tables in SAP Analytics Cloud. By following the simple installation steps, you can enhance your data presentations and streamline your analytics processes. Explore the features of dynamoTable and take your data handling to the next level.