SAP Community - SAPUI5

Change of NumberFormat Behavior for Currencies with UI5 version 1.130

2024-11-27T09:00:00.018000+01:00

Intro

With a recent change in UI5 version 1.130, we corrected the formatting of decimal places for currencies.

We now differentiate between two cases:

Case 1: If the style: "long"/"short" format option is not set, and no decimals are provided in the oFormatOptions of the sap.ui.core.format.NumberFormat.getCurrencyInstance API (either via the direct format option decimals or via currency customizing as specified by the format option customCurrencies), the given value is formatted with the decimals value defined by the CLDR standard.
Case 2: If the style: "long"/"short" format option is set, only the decimals explicitly set in the oFormatOptions of the sap.ui.core.format.NumberFormat.getCurrencyInstance API, are considered for the determination of the number of decimal places in the output.
Any other source for the decimals attribute (i.e. your currency customizing or the CLDR) is not considered anymore.

Case 1: Format option style: "long"/"short" isn't set

What's different?

Previously, applications may have defined currency formats, which relied on the maxFractionDigits format option to specify the number of decimal places. This is incorrect usage, as the maxFractionDigits parameter is meant to define the maximum but not the actual number of decimals.

Example - Prior to the change:

- Values to be formatted: ["123.456", "USD"]
- Format options: {maxFractionDigits: 3}
- Formatted result: "123.456 USD"

With our change, this behavior has changed. Now the semantics of the maxFractionDigits/minFractionDigits format options is correctly interpreted for currency formats, namely as the maximum and minimum number of permitted decimals.

Example - After the chang:

- Values to be formatted: ["123.456", "USD"]
- Format options: {maxFractionDigits: 3}
- Formatted result: "123.46 USD" (rounding is applied)

For the en locale, the formatted result has 2 decimal places:

The maxFractionDigits define a maximum of 3 decimal places
The CLDR data defines the USD currency in the en locale with 2 decimal places

As 2 < 3, this is the correct result. The output does not exceed the maximum number of decimal places in this format, and the currency is formatted according to the locale-specific standard.

This change also affects the formatting of currencies with fewer decimal places than expected by their CLDR configurations.

Example - Prior to the change:

- Values to be formatted: ["123.4", "USD"]
- Format options: {minFractionDigits: 0}
- Formatted result: "123.4 USD"

In the prior behavior, the number of decimal places remained the same if the number given contained more decimal places than defined by the minFractionDigits option.

Example - After the change:

- Values to be formatted: ["123.4", "USD"]
- Format options: {minFractionDigits: 0}
- Formatted result: "123.40 USD"

With the new change in place, this is not the case anymore as the CLDR defines the number of decimal places for the USD currency in the given locale as 2. Therefore, a zero is padded at the end.

Case 2: Format option style: "long"/"short" is set

During the implementation of Case 1 it was discovered that the configuration of decimal places determined via any source (currency customizing or CLDR) is also applied to short or long formats of numbers (e.g. 1000.00 USD -> 1.00K USD). This is unnecessary for such formats; therefore, we have now disabled the application of any currency customzing if the format option style: "long"/"short" is set.

The only remaining way to apply decimal place formatting to short or long formats of currencies is the decimals format option.

What's different?

Previously, an application may have expected its currency short or long formats to have the number of decimal places as defined by the currency customizing for the currency, in its output format; this may no longer be the case.

Example - Prior to the change:

- Values to be formatted: ["123456", "USD"]
- Format options: {style: 'short', maxFractionDigits: 0}
- Formatted result: "123.00K USD"

This result is incorrect, as 2 zeros are padded at the end. The CLDR data determines the decimals format option to 2 for USD. While this is correct for a format without style short or long, formatted numbers with style often contain a metric prefix like “K” so that using the currency’s decimals is wrong.

Example - After the change:

- Values to be formatted: ["123456", "USD"]
- Format options: {style: 'short', maxFractionDigits: 0}
- Formatted result: "123K USD"

With our new change, no decimal places are displayed in the output format.

A similar behavior can be observed when customCurrencies are provided.

Example - Prior to the change:

- Values to be formatted: ["123456", "USD"]
- Format options: {
                      style: 'short', maxFractionDigits: 0, 
                      customCurrencies: {USD: {decimals: 2}}
                  }
- Formatted result: "123.00K USD"

Example - After the change:

- Values to be formatted: ["123456", "USD"]
- Format options: {
                      style: 'short', maxFractionDigits: 0,
                      customCurrencies: {USD: {decimals: 2}}
                  }
- Formatted result: "123K USD"

It can be observed that the currency customizing is ignored if style: "long"/"short" is set.

To avoid any confusion, this rule does apply even if the currency amount is too small to contain a metric prefix (e.g. "K") in its output format.

Example - Prior to the change:

- Values to be formatted: ["123", "USD"]
- Format options: {style: 'short', maxFractionDigits: 0}
- Formatted result: "123.00 USD"

The given number too small to be formatted into a short format in the US locale.

Example - After the change:

- Values to be formatted: ["123", "USD"]
- Format options: {style: 'short', maxFractionDigits: 0}
- Formatted result: "123 USD"

With the new change in place, the currency customizing (in this case via the CLDR) is not applied.

What does that mean for tests and applications?

In case 1:

The new behavior of tests and applications depends on the application setup. If the currency formats either use currency customizing where decimals are defined for all currencies or define a decimals format option for their binding, the behavior stays the same.

If, on the other hand, an application relies on the maxFractionDigits option to always determine the number of decimal places on its currency formats, this cannot be assured anymore. Only if maxFractionDigits < decimals may the maxFractionDigits option still be used to format the output.

Thus, it is up to the application developer to decide, between one of the following alternatives:

Alternative 1 (The application should rely on its currency customizing/the CLDR standard for the decimal places of currencies) - Any failing tests have to be adjusted.
Alternative 2 (The application should continue to determine the number of decimal places for currencies itself) - The application has to use the decimals format option instead of the maxFractionDigits option for that.

In case 2:

With style set to short or long, the same alternatives exist as before, but with a slightly different semantic, and it is still up to the application developer to decide:

Alternative 1 (The application shouldn't have the currency customizing/the CLDR standard affect its short or long formats by adding decimals) - Any failing tests have to be adjusted.
Alternative 2 (The application should continue to always display decimal places in its short or long formats) - The application has to use the decimals format option instead of the maxFractionDigits option for that.

For more information regarding the format options available for our NumberFormat.getCurrencyInstance API, see: sap.ui.core.format.NumberFormat.getCurrencyInstance

Product Updates for SAP Build Code – November 2024 Edition

2024-11-28T08:36:58.413000+01:00

Dear SAP Community,

Welcome to our November release update! We're excited to present you many powerful new features. Whether you're a seasoned developer or just starting your journey, we have something for you. This update features a range of exciting new capabilities, such as adding explanations to SQL statements for SAP HANA Cloud or an update to our Generative AI capabilities for MDK development.

Join us as we explore the details of what's new!

SAP HANA Cloud SQL Statement Explanation

The SAP HANA Database Explorer SQL Console in SAP Build Code offers a new feature for adding explanations to SQL statements for SAP HANA Cloud. The explanations can make it easier to understand complex or unfamiliar SQL queries.

The statement explanation feature is triggered by selecting an SQL statement in the SQL console and choosing “Explain SQL Statement using AI” from the menu.

Screenshot: Choosing “Explain SQL Statement using AI” from the Menu

The explanations are added to a copy of the original statement into the SQL console. The copy that contains the explanations is delimited by “AI generated SQL query explanation begins/ends” block comments.

Screenshot: AI Generated SQL Query Explanation

As with all AI generated content the generated comments should be reviewed and checked for validity. If the comments are useful, the original statement may be discarded or combined with the comments as needed.

Generative AI Capabilities for MDK

We are thrilled to announce an exciting update to our Generative AI capabilities for MDK (Mobile Development Kit) development. Previously, these capabilities were only available when a single project was opened at the folder level. We have now enhanced this functionality to support more scenarios. Our latest updates now enable you to use Generative AI features when working with multiple projects listed either in the Projects Explorer or at the workspace level.

For example, if you have multiple projects open in the Projects Explorer and want to generate a page in a specific project using the MDK page generation genie, it will now prompt you to select a service file from various service files in multiple projects and a page will be generated in that specific project. This enhancement provides greater flexibility and convenience when working with multiple projects in MDK development.

Screenshot: MDK page generation with Joule

Further readings

Announcing a New Guide: Deep Dive into SAPUI5 Apps on SAP BTP

We are excited to share a new comprehensive guide crafted by our colleague Matthias Schmalz, offering profound technical insights into SAPUI5 applications running on the SAP Business Technology Platform (BTP). In this guide, Matthias delves into essential topics such as how to structure complex SAPUI5 applications to avoid common pitfalls, how multiple apps work with a shared reuse library and how to integrate business solutions as content providers into SAP Build Work Zone.

For further details, dive into Matthias' guide Designing UI5 Apps as Business Solution for SAP Build Work Zone and elevate your expertise in SAPUI5 development.

Explore Our Recent SAP Fiori Tools Release

For a deeper dive into the latest updates and features in SAP Fiori tools, be sure to check out the following blog post: SAP Fiori Tools 2411 Update: Enhanced Full-Stack Development, AI Integration, and More Open Source. This post provides a comprehensive overview of the new features and improvements that combine frontend and backend development, broaden AI-driven functionalities, and further the integration of open-source technologies.

How to Upgrade Your Existing Standalone Service Plans

SAP Build Code offers different types of service plans in SAP BTP: trial, free and standard. For the initial setup, a booster helps you set up SAP Build Code for the plan you want to use. But what if you already use an existing standalone service plan and want to upgrade to one of the SAP Build Code service plans?

We created the following group: Update from Current Service Plan to Build-Code Service Plan. This group consists of tutorials that guide you step by step through the upgrade process:

Our help documentation provides you a list of different current and target service plans and supported migration scenarios.

Webinar Series What's New in SAP HANA 2.0 SPS 08

Interested in discovering the latest innovations in SAP HANA 2.0 SPS 08? Then join our "What's New in SAP HANA 2.0 SPS 08" webinar series! This series is divided into seven captivating sessions, each filled with insights from over a dozen experts straight from our SAP HANA & Database Product Management team. Dive deep into key updates and features while gaining practical industry knowledge.

For further information on new features, please check our roadmaps: roadmap for SAP Build Code, SAPUI5 Road Map. And have a look at What's New in SAP Build Code, the What's New Viewer for SAPUI5 and the SAP Cloud Application Programming Model Release Notes. If you want to stay up-to-date with news, learning resources, and product and strategy updates for SAP Build Code: follow our tag.

We look forward to seeing how you use these new capabilities to create innovative solutions and drive your projects forward. Stay tuned for more updates and happy coding! 😊

🎄💻Advent of Code 2024: Exploring UI5

2024-12-02T20:34:09.228000+01:00

The Advent of Code (AoC) is an annual event that excites the programming SAP community every December. It's a series of daily coding challenges that run from December 1st to December 25th, offering a fun and engaging way to improve your coding skills. This year, let's dive into how you can tackle these challenges using UI5, a powerful framework for building enterprise-ready web applications.

Image source : Google Images

Getting Started with UI5

To get started with UI5 for Advent of Code, you'll need to set up your development environment. Here are the basic steps:

Install Node.js and npm: UI5 requires Node.js and npm for development. You can download and install them from the official Node.js website.
Set Up UI5 CLI: The UI5 Command Line Interface (CLI) is a powerful tool that helps you manage your UI5 projects. Install it using npm:

npm install --global @ui5/cli
npm install --global yo
npm install --global create-easy-ui5

This simple example demonstrates how UI5 can be used to create interactive solutions for Advent of Code challenges. By leveraging UI5's powerful features, you can build robust and visually appealing applications to solve even the most complex problems.

Github repo for AoC 2024
https://github.com/yogananda-muthaiah/adventofcode2024

SAP UI5 Components

https://ui5.sap.com/#/controls

SAP UI5 Icons Explorer

https://ui5.sap.com/test-resources/sap/m/demokit/iconExplorer/webapp/index.html

Live Editor

https://ui5.sap.com/#/liveEditor

UI5 Tooling

https://sap.github.io/ui5-tooling/stable/

UI5 Linter

https://github.com/SAP/ui5-linter

Conclusion

Advent of Code is a fantastic opportunity to sharpen your coding skills and have fun with the global programming community. Using UI5, you can enhance your solutions with rich UI components and efficient architecture. So, get ready to code, learn, and enjoy the Advent of Code 2024 with UI5!

Deprecation of karma-ui5 plugin

2024-12-04T05:27:35.113000+01:00

SAPUI5/OpenUI5 provides several testing options, like unit and integration tests, which are summarized in UI5 Testing:

Picture 1: Testing UI5 applications

To ensure that code is tested thoroughly before it is included in a productive app, using a test runner is best practice to automate the regular execution of tests. The test runner can be included in a project setup to be called whenever code changes are submitted.

In this context, the UI5 team is now faced with a new situation: Handling current problems with browsers would require an update of the Karma test runner, which is deprecated.

The Karma test runner is deprecated since April 2023. Now we have to also deprecate karma-ui5.

(Please note that while karma-ui5 is deprecated and does not receive further updates, it can still be used as long as it fulfils your needs.)

UI5 does not provide features for a specific other test runner, but rather aims for an agnostic approach. To execute functional and integration tests you may use a test runner of your choice with the respective configuration for QUnit and OPA5 tests. In UI5 community projects we listed alternative test runners, e.g.

ui5-test-runner, executing tests in parallel. See more details in this Devtoberfest 2023 session.
wdio-qunit-service, a WebdriverIO plugin

You might also be interested in this UI5ers live webcast which discusses test runners.

SAP Developer News, December 5th, 2024

2024-12-05T21:10:00.038000+01:00

Podcast: https://podcast.opensap.info/sap-developers/2024/12/05/sap-developer-news-december-5th-2024/

DESCRIPTION

Orchestration service of Generative AI Hub

Learning Journey on Generative AI Hub: https://learning.sap.com/learning-journeys/solving-your-business-problems-using-prompts-and-llms-in-sap-s-generative-ai-hub/using-generative-ai-hub-sdk-to-leverage-power-of-llms
SAP Help Orchestration service of Generative AI Hub on SAP AI Core: https://help.sap.com/docs/sap-ai-core/sap-ai-core-service-guide/orchestration-workflow

New UI for SAP Build Apps

Daniel’s blog on new UI: https://community.sap.com/t5/sap-builders-blog-posts/review-new-layout-features-for-sap-build-apps/ba-p/13933240

Updated integration architecture guide and API Management

Integration architecture guide: Updated version available now: https://community.sap.com/t5/technology-blogs-by-sap/integration-architecture-guide-updated-version-available-now/ba-p/13930016
Please share your experience - new API Management survey: https://community.sap.com/t5/technology-blogs-by-sap/please-share-your-experience-new-api-management-survey/ba-p/13950848

karma-ui5 plugin deprecation and upcoming UI5 & CAP events

karma-ui5 deprecation blog post https://community.sap.com/t5/technology-blogs-by-sap/deprecation-of-karma-ui5-plugin/ba-p/13954060
UI5ers Live 12 December https://www.linkedin.com/events/ui5erslive-december20247268259526246645760/about/
CAP Customer Roundtable 12 December https://community.sap.com/t5/technology-blogs-by-sap/sap-cloud-application-programming-model-eighth-customer-roundtable/ba-p/13951006

CHAPTER TITLES

0:00 Intro

0:10 Orchestration service of Generative AI Hub

1:03 New UI for SAP Build Apps

2:10 Updated integration architecture guide and API Management

3:00 karma-ui5 plugin deprecation and upcoming UI5 & CAP events

Transcription

[Intro] This is the SAP Developer News for December 5th, 2024.

[Nora] There's a lot of talk about the integration of Microsoft Co-pilot and Joule here at UKISUG, but if you want to try out and build your own customized AI use cases, then you should try out Generative AI Hub. We had a session on it on Sunday, where we actually used the orchestration service and the JavaScript SDK and the Python SDK to build our own AI use cases. And what I love most about the orchestration service is that you can use the same code base for all the available models that we have, and you just have to change the model name parameter to try out the different models and compare the results which I think is awesome. We also have a lot of other features in the orchestration service for example the content filtering and the data masking the prompt templating and obviously the grounding feature which you need if you want to build your own RAG use cases and the grounding feature is already available in the API in the next coming week it's also going to be available via the SDKs and I'm super excited to try it out myself let me know what you think once you try it out.

[Daniel] SAP Build Apps updated its design time UI to put front and center the things that you use most often and to hide the things that you use less often or even just once during your project development. So the first thing they did is to update the main menu. So you have just the main parts of building an application, which is the UI, the variables, which I consider part of the logic, and connecting to data resources. Then they moved the preview and build or now publish buttons in the upper right in a place where most IDEs would put them. And finally, they created a much easier way to handle managing pages, creating new pages or navigating to those pages. And that way you don't have to go into the page UI. I've written a blog that gives a review of all the changes, some tips on using them or finding what you need, though, and also my opinion on some of the features and perhaps some of the features I would like to see in the future. So check out the blog, and I'll put the link in the description.

[Antonio] Hola, SAP developers. We're here at the UKISUG Connect event in Birmingham, and I have some quick leads to share with you. First, the Integration Architecture Guide was recently updated. It is structured according to the concepts of the Integration Solution Advisor Methodology. And it provides you guidelines about all things integration, including process integration, event-driven integration, API integrations, data integration, and user integration. So make sure to check it out. Also, we want your feedback regarding the API management capability. There is a new server available and we want you to learn more about how you're implementing and benefiting from the capability, or even why you're not using API management. So, we're looking forward to hearing back from you.

[DJ] I've just got time for some news items on count. And UI5, first UI5. As some of you already may be aware, the Karma UI5 plugin is deprecated. This follows the deprecation of the Karma test runner itself upon which the plugin is based. But don't despair, there are plenty of other testing options available, including the UI5 test runner. And also, there's an event next week on Thursday the 12th of December, UI5ers Live, where this deprecation is discussed along with alternative options. And talking of next week, Thursday the 12th of December, there's a second event that day for CAP developers. It's another CAP customer round table with lots of news and updates from the CAP team and discussion of topics from the community. That's you. So check out Oliver's blog post on the deprecation and also the event pages. Links, as always, are in the description.

Introducing Deep Export for Multi-Level Data Extraction in UI5 and Fiori Elements

2024-12-09T10:59:37.060000+01:00

1. Why Did I Create That?

When working with UI5 and Fiori Elements applications, the default options for exporting data to a spreadsheet may not be flexible enough for your needs. You might require special formatting, custom logic, or the ability to handle complex datasets that include multiple related entities. This is where the Spreadsheet Importer comes in. It’s a UI5-based solution that enhances your data handling capabilities beyond standard exports, allowing you to retrieve and organize extensive multi-level data structures with ease.

For example, consider a scenario with Orders, their associated OrderItems, and possibly ShippingInfos. With the Spreadsheet Importer’s deep export feature, you can pull all of this interconnected data in one go. This comprehensive approach makes it simple to review, refine, and then reimport updates, delivering a more efficient and controlled data management workflow.

2. How Do You Use It?

Using the deep download feature is straightforward. All configuration and usage details are documented here:

https://docs.spreadsheet-importer.com/pages/spreadsheetdownload/

In essence, you enable the deep export configuration in the component data and define how many levels of sub-entities you want to include, along with which columns and properties should appear in your exported spreadsheet.

Note: This new feature is experimental and currently only available for OData V4. If you deep download data, the OData Service must support $expand.

In a Fiori Elements List Report Extension, the code can look like this:

this.spreadsheetUpload = await this.editFlow
  .getView()
  .getController()
  .getAppComponent()
  .createComponent({
    usage: 'spreadsheetImporter',
    async: true,
    componentData: {
      context: this,
      action: 'UPDATE',
      createActiveEntity: true,
      i18nModel: this.getModel('i18n'),
      debug: true,
      showDownloadButton: true,
      deepDownloadConfig: {
        deepLevel: 1,
        deepExport: false,
        addKeysToExport: true,
        showOptions: true,
        filename: 'Orders123',
        columns: {
          OrderNo: {
            order: 1,
          },
          buyer: {
            order: 3,
          },
          Items: {
            quantity: {
              order: 2,
            },
            title: {
              order: 4,
            },
          },
          Shipping: {
            address: {
              order: 5,
            },
          },
        },
      },
    },
  });
this.spreadsheetUpload.triggerDownloadSpreadsheet();

This example shows the configuration options available:

deepLevel: How many levels should the export go into the entities? If the value is ‘0’, only the main entity is exported.
deepExport: This activates or deactivates the deep export. When switched off, only the main entity is exported.
addKeysToExport: Normally, fields marked as ‘hidden’ (like GUIDs) are not included. With this setting, they are included, which is also important for a later re-import when data is updated.
filename: The name of the Excel file when it is exported.
columns: An object that determines which columns are exported. In debug mode, all possible columns are logged in the console.
showOptions: Allows changing some settings via a dialog when the export is triggered.

Excel File can then look like this:

2.1 How to Trigger the Export

2.1.2. Directly in Code

You can easily trigger the export directly in code by using the triggerDownloadSpreadsheet method. With this method, it’s also possible to pass other configuration parameters. The settings dialog can be displayed here as well.

this.spreadsheetUpload.triggerDownloadSpreadsheet({
  deepLevel: 1,
  deepExport: true,
  addKeysToExport: true,
  showOptions: true,
  filename: 'Orders_TEST',
  columns: {
    OrderNo: {
      order: 1,
    },
    buyer: {
      order: 3,
    },
    Items: {
      quantity: {
        order: 2,
      },
    }
  },
});

2.1.2 In the Spreadsheet Upload Dialog

With the ‘showDownloadButton’ option, the export button is displayed directly in the upload dialog. You can try this in the Live Demo for my OData V4 Fiori Elements List Report Sample:

https://livedemo.spreadsheet-importer.com/launchpad.html?sap-language=EN#ordersv4fe-120

2.1.3. Without Code in the XML View as a Button

For uploading, you can also integrate the button directly into the XML view without any JavaScript code. This is also available for exporting and could then look like this:

<core:ComponentContainer
  id="test2"
  width="100%"
  usage="spreadsheetImporter"
  propagateModel="true"
  async="true"
  settings="{
    componentContainerData:{uploadButtonPress:'uploadButtonPress',buttonText:'Excel Download with Dialog',buttonId:'downloadButtonDialog',buttonIcon:'sap-icon://download',downloadButton:true},
    deepDownloadConfig:{
      deepLevel: 2,
      deepExport: true,
      addKeysToExport: true,
      showOptions: true,
      filename: 'Orders_Dialog',
      columns : {
        'OrderNo':{
          'order': 1
        },
        'buyer': {
          'order': 3
        },
        'Items': {
          'quantity' : {
            'order': 2
          }
        },
        'Shipping': {
          'address' : {
            'order': 5
          }
        }
      }
    }
  }"
/>

You can check out the sample in my live demo here:

https://livedemo.spreadsheet-importer.com/launchpad.html?sap-language=EN#ordersv4freestyle-120

The code for this app can be found here.
The Documentation for it is here.

3. Events for Interjecting into the Process

You can manipulate the data at various steps. Two events give you the opportunity to influence the final result.

3.1. Event beforeDownloadFileProcessing

This event is fired before the data is converted to a spreadsheet file. Use this event to manipulate the data before conversion. You can change the data parameter of the event directly, as this is a reference.

Documentation: https://docs.spreadsheet-importer.com/pages/Events/#event-beforedownloadfileprocessing

onDownload: async function () {
    // init your spreadsheet upload component
    this.spreadsheetUpload.attachBeforeDownloadFileProcessing(this.onBeforeDownloadFileProcessing, this);
    this.spreadsheetUpload.triggerDownloadSpreadsheet();
},
onBeforeDownloadFileProcessing: function (event) {
    const data = event.getParameters().data;
    // change buyer of first row of the root entity
    data.$XYZData[0].buyer = "Customer 123";
    // change quantity of first row of the Items entity
    data.Items.$XYZData[0].quantity = 4
}

3.2. Event beforeDownloadFileExport

This event is fired just before the file is downloaded. Use this event to manipulate the filename or other parameters before the file is downloaded.

The great flexibility here is that you can use the workbook object of SheetJS and all possible APIs before it is downloaded.

Documentation: https://docs.spreadsheet-importer.com/pages/Events/#event-beforedownloadfileexport

onDownload: async function () {
    // init your spreadsheet upload component
    this.spreadsheetUpload.attachBeforeDownloadFileExport(this.onBeforeDownloadFileExport, this);
    this.spreadsheetUpload.triggerDownloadSpreadsheet();
},
onBeforeDownloadFileExport: function (event) {
    const workbook = event.getParameters().workbook;
    event.getParameters().filename = filename + "_modified";
}

4. Try It in the Live Demo

If you want to see the deep download feature in action before integrating it into your own application, you can test it out in our live demo environment:

https://livedemo.spreadsheet-importer.com/launchpad.html#ordersv4freestyle-120

This demo showcases how to trigger a deep export, configure columns, and retrieve deeply nested data structures from the backend. This is an OData V4 Freestyle App with UI5 Version 1.120.

5. How Does It Work Internally?

Under the hood, the deep download feature relies on OData V4’s $expand capabilities to fetch nested entities in a single request. The Spreadsheet Importer constructs a metadata model that maps out all related entities and their navigation properties. It then dynamically builds a set of expands to retrieve all linked data efficiently.

To dive deeper into the technical details and understand the internals, please visit:

https://docs.spreadsheet-importer.com/pages/Development/SpreadsheetDownload/

There you will find comprehensive documentation on metadata handling, batch fetching, and the steps involved in generating the final spreadsheet.

6. e2e Tests

Of course, no new feature can be developed without testing.
The reliable wdi5 comes into play again for this, and it can also be used to simply check the download of Excel files. Currently, only UI5 version 1.120 is being tested. Other versions will follow.
Various scenarios are tested, including starting from exporting the code and from the button in the XML view.

Here is a run of the test: https://github.com/spreadsheetimporter/ui5-cc-spreadsheetimporter/actions/runs/12206743460/job/34056849369
Here is the test file for wdi5 that runs from now on every PR: https://github.com/spreadsheetimporter/ui5-cc-spreadsheetimporter/blob/main/examples/test/specs/download/DownloadSpreadsheetListReport.test.js

7. What Also Happened in the Last Versions (Since Version 1.0)

The Spreadsheet Importer has been actively developed and improved over time. Since the release of version 1.0, several changes and enhancements have been introduced:

New Configuration excludeColumns: You can specify columns to exclude from the import and the template instead of specifying all columns you want.
New event preFileProcessing: An event fired right after the file is uploaded to the app and before further processing.
New LLM-translated language: Dutch
Drag & Drop support: Easily drag your spreadsheet file onto the upload dialog.
Custom i18n text overwrites: All translated texts can now be overwritten by providing your own i18n model, allowing more flexibility in localization.

For the full list of changes, please refer to our detailed Changelog.

8. What Is Happening in the Future?

The journey doesn’t end here. Future improvements include:

Support OData V2 for Deep Export: Currently, only OData V4 is supported.
Update Support: Currently, only Create is possible via the spreadsheet importer. We plan to enable full Update capabilities so you can round-trip your data effortlessly. The data export is a prerequisite for making updates easily possible.
Support Deep Insert: This is a major challenge, but one of my main goals is to integrate this functionality.

Stay tuned for upcoming releases.

Previous Announcements & Background

For those who missed it, we celebrated the version 1.0 release of the UI5 Spreadsheet Importer earlier this year. The response has been tremendous, and we extend our thanks to everyone who contributed, tested, and provided valuable feedback.

If you have any questions and suggestions, feel free to reach out at marian@marianzeis.de.

For more background and feature highlights, you can read our previous blog post and check out:

Landing Page: https://spreadsheet-importer.com/
GitHub Repo: https://github.com/spreadsheetimporter/ui5-cc-spreadsheetimporter

SAPUI5 Meets TypeScript: A Smooth Migration Journey with Joule

2024-12-10T09:13:54.586000+01:00

As announced in March in this blog post by @OliverGraeff, the UI5 team has taken its first glance into the world of generative AI as a contribution to Joule in SAP Build Code. This blog post is dedicated to providing insights into the latest feature that offers AI-driven migration of UI5 applications to TypeScript.

TypeScript and UI5 – how can I use it ?

Since 2023, UI5 applications can officially be implemented in TypeScript by generating projects configured for transpiling of TypeScript or by migrating the project structure as described in this blog post by @AndreasKunz.

In addition to converting the JavaScript code to TypeScript, migrating UI5 projects to use TypeScript requires installing the required dependencies to the project and to enhance the build and server configuration with the ‘ui5-tooling-transpile-task’ and ‘ui5-tooling-transpile-middleware’.

Joule now provides AI-driven convenience functionality to migrate existing UI5 applications according to the latest recommendations on how to enable TypeScript.

Let’s migrate to TypeScript with Joule!

When using Joule in SAP Business Application Studio, there is now an additional /ui5 prefixed slash command /ui5-typescript for UI5 applications available.

While the standard /ui5 command can be used for general queries regarding UI5 development, /ui5-typescript will specifically provide options meant to migrate existing JavaScript-based UI5 applications to TypeScript. As soon as the command is selected, a list of suggestions will appear.

Migrating the project setup

If you begin to write controller code in TypeScript, you need to migrate the existing project first to enable the required tooling.

What’s happening here? After sending the prompt, Joule will recognize the project structure of the application and adjust the dependencies in the package.json and configuration in the ui5.yaml. A click on the files displayed in the list will show the changes made by Joule and AI, here, for example, the changes made for package.json:

In addition to using AI, Joule will check the npm registry to retrieve the latest stable releases for the required dependencies, therefore the responses are a hybrid of AI and tooling-driven migration. The results should nevertheless always be double-checked before accepting them. For example, as shown in this screenshot, AI recommends doing a major upgrade of the UI5 CLI, which should be evaluated and tested.

The “Accept” button in the file list can be used to accept all file changes at once. This will also include necessary files, such as the newly added tsconfig.json, to configure your migrated UI5 project.

Migrating controller files

After successfully migrating the project, we recommend to migrate smaller batches of controllers to TypeScript. Again, select the /ui5-typescript command in Joule – the suggestions will provide the currently selected controller file in your project that will be migrated to TypeScript. The results can again be checked by clicking on the resulting files to view the differences.

As soon as the “Accept” button is pressed, the previous *.controller.js file will be deleted and replaced with the accepted *.controller.ts file.

You can also directly use /ui5-typescript and specifically ask for certain JavaScript files to be migrated. The recommendation is to migrate files in your application step by step to get the best possible results.

Still eager to learn more about UI5 and AI? These blog posts might be interesting for you!

Extending SAPUI5 apps: Adaptation projects vs. Extension projects

2024-12-12T07:39:28.256000+01:00

SAPUI5 flexibility to adapt standard SAP apps

SAPUI5 is SAP’s strategic Web framework for Web applications such as SAP Fiori. In this context, SAPUI5 flexibility offers capabilities to adapt standard apps, not only for developers but also for key users and end users using simple WYSIWYG drag and drop tools. Learn about all the capabilities: SAPUI5 Flexibility - All You Need to Know. SAPUI5 flexibility provides features to realize a clean core approach with on-stack extensions: SAP standard apps remain untouched, no modifications are needed, and even predefined extension points are unnecessary.

SAPUI5 flexibility - Developer adaptation

Developers can leverage the concepts of SAPUI5 flexibility by using SAPUI5 adaptation projects in SAP Business Application Studio (BAS), the development environment of SAP Build Code. Those projects contain all code-based custom adaptations, created in the new Adaptation Editor and other code editors of BAS.

Picture: The new Adaptation Editor in SAP Business Application Studio

Extension project vs. Adaptation project

While adaptation projects are the strategic, advanced technology for code-based extensions of SAPUI5 apps, we also have the predecessor extension projects. To address frequent confusions, I want to summarize the differences to help understanding what you see in your system:

	Extension project	Adaptation project
SAP strategy	Legacy usage	Strategic, advanced approach, leveraging SAPUI5 flexibility concepts
Extend	only legacy apps not (yet) compliant to SAPUI5 adaptation projects (1.)	most apps, as given in SAP Fiori Apps Reference Library -> Implementation Information -> Extensibility via SAPUI5 Adaptation Projects. (2.)
Prerequisites	Individual, predefined extension points in each app	General enablement of app (1.)
Supported applications	Freestyle SAPUI5 apps only	Any SAPUI5 app (freestyle SAPUI5 and SAP Fiori elements apps)
Extension options	Limited options (e.g. no extension of lifecycle methods)	Increased options for all essential app artefacts
Extension location	Extend in predefined extension points only	Extend anywhere (3.) (unless blocked by application logic)
Stability with upgrades	Limited stability	Improved stability
Future-proof concept	One layer of changes	Multiple layers possible (planned)
Platform support	SAP S/4HANA on-prem only	Any platform (4.)

Footnotes

Details on prerequisites for respective platforms in Extending SAP Fiori Applications.
If an adaptation project is being created for an app not compliant to SAPUI5 adaptation projects, the wizard in SAP Business Application Studio automatically creates an extension project. (An example for such an app is My Inbox.)
including existing extension points, controller hooks
See details in Features and Availability.

What does this mean for existing extension projects?

If you have an existing extension project, you can continue using it, i.e. running it and also maintaining it. In case a) you are planning to add new extensions due to bigger requirements and b) the underlying standard app supports SAPUI5 adaptation projects (see above), SAP recommends to manually migrate the extension project to an adaptation project to make use of its advanced options. (The UI5 team currently plans to provide guidance for this manual migration.)

Further references

Migrate from SAP Web IDE to SAP Business Application Studio: Blog post & Mission
SAP Fiori Elements: Adaptation Project – Adding a Custom Filter to the List Report
Adaptation Project: Freestyle SAPUI5 App – Adding a Search Link to Items on a Table
Work with SAPUI5 Adaptation Projects to extend SAP S/4HANA Cloud Public Edition

Theme-specific CSS for your application

2024-12-12T08:35:12.488000+01:00

Do you have self-developed applications built with SAPUI5, UI5 WebComponents, Fundamental NGX or even one of SAPs classic UIs? Or e.g. your own in-house SAPUI5 component library? Then, it is likely that you've felt the need for theme-specific CSS.

How it was: JavaScript and FOUC

In the past, this was barely possible. In the SAPUI5 world, you had to resort to the Parameters.get() API and create your CSS in JavaScript. In general, you had to inspect the applied theme at runtime, using JavaScript, and serve your theme-specific CSS based on the inspection result. This leads to flashes-of-unstyled-content (FOUC), which, again, has to be treated.

What we have now: sapSapThemeId

But not anymore! [1]

With theming base content 11.23.0, we introduced the new theming parameter sapSapThemeId. This parameter always contains the technical id of the SAP-provided theme the applied theme is based on (in case of a custom-theme) or of the applied theme itself. I.e. --sapSapThemeId of sap_horizon is sap_horizon, and sapSapThemeId of my_horizon (a custom theme based on sap_horizon) is also sap_horizon.

Disclaimer: use existing parameters

The technique I'm about to describe, is a "last resort" solution. Always check first

if there is already a theming parameter you could use instead – Use the parameter explorer of the theming base content to get an overview of what's already there;
if it would make sense to add a theming parameter to the theming base content – Write a comment here, create an issue for the theming base content or contact the development team directly.

Only if both checks are answered negatively, you should use sapSapThemeId to bring your own "delta" css.

The idea: container style queries

The idea is to craft a container style query against --sapSapThemeId (the CSS custom property version of sapSapThemeId), and define your own custom properties based on the result. In the example, I'll use relative colors to darken a background in light themes and lighten it in dark themes; and I'll use CSS nesting for a more concise example; but both are not strictly necessary.

Example: a custom list item

As an example, imagine the background color of a custom list item (which is identified by the CSS class myListItem). It should depend on sapList_Background, but be 10% darker than that in light themes, 10% lighter than that in dark themes, with 30% instead of 10% for high-contrast themes.

For that, we'll create our own CSS custom property, --myList_Background, that defaults to --sapList_Background:

:root {
  --myList_Background: var(--sapList_Background);
}

Next, we'll use that custom property in the .myListItem selector:

.myListItem {
  background-color: var(--myList_Background);
}

And now, we'll overwrite the value of --myList_Background in the body selector based on the container style query value of --sapSapThemeId:

body {
  /* light low-contrast themes */
  @container style(--sapSapThemeId: sap_horizon)
          or style(--sapSapThemeId: sap_fiori_3) {
    /* darken by 10% */
    --myList_Background: hsl(from var(--sapList_Background) h s calc(l - 10));
  }
  /* dark low-contrast themes */
  @container style(--sapSapThemeId: sap_horizon_dark)
          or style(--sapSapThemeId: sap_fiori_3_dark) {
    /* lighten by 10% */
    --myList_Background: hsl(from var(--sapList_Background) h s calc(l + 10));
  }
  /* light high-contrast themes */
  @container style(--sapSapThemeId: sap_horizon_hcw)
          or style(--sapSapThemeId: sap_fiori_3_hcw) {
    /* darken by 30% */
    --myList_Background: hsl(from var(--sapList_Background) h s calc(l - 30));
  }
  /* dark high-contrast themes */
  @container style(--sapSapThemeId: sap_horizon_hcb)
          or style(--sapSapThemeId: sap_fiori_3_hcb) {
    /* lighten by 30% */
    --myList_Background: hsl(from var(--sapList_Background) h s calc(l + 30));
  }
}

That's it, now our custom list item has a custom background that is still connected to the official theming variables, and that depends on the actually applied theme.

A bit of background: container style queries

So, why does that work?

MDN does a good job explaining container style queries, so this is just a small gist.

The --sapSapThemeId custom property is, like all custom properties of the theming base content, defined at :root, which usually is the <html> element. It is crucial that this also is a containment context (the outermost containment context even).

The <body> is inside :root (the <html>), so container styles applied to the <html> containment context have an effect on the <body>.

The CSS

body {
  @container style(--sapSapThemeId: sap_horizon) {
    --myList_Background: #c0ffee;
  }
}
/* which is a more concise version of */
@container style(--sapSapThemeId: sap_horizon) {
  body {
    --myList_Background: #c0ffee;
  }
}

could be read as

In any container (@container without a <container-name>),
on which the custom property --sapSapThemeId has the value sap_horizon,
in body elements (which is only the one <body> that contains all visible parts of an html page)
the custom property --myList_Background
has the value #c0ffee

In the example, we also used relative colors, which could be the topic of a separate blog post.

Recap: theme-specific CSS without JavaScript

We have seen that since theming base content 11.23.0, which will soon be available in SAPUI5 (likely version 1.132, but I can't promise anything) and classic UIs (UR/c2 2413), you can write a container style query against --sapSapThemeId to change values of your own CSS custom properties, or even add theme-specific selectors.

Please try that out and leave a comment how it went.

Footnotes

[1] The described technique relies on container style queries for custom properties, actively implemented but not yet supported in Firefox (see tracking bug 1795622)

NFC scanning in Work Zone

2024-12-17T07:41:35.705000+01:00

Introduction

With the evolution of browsers on mobile devices more native functionalities are possible in browser based application on a mobile device, a good example of this it NFC scanning. In the past this required you to make a Hybrid or Native mobile app. Nowadays, this is perfectly possible on any Android device that has NFC scanning from in the browser using the web NFC api: Web NFC API - Web APIs | MDN (mozilla.org)

For iOS, this is still not possible because security constrains in iOS. In case of Fiori, you’ll have to create an MDK application with a plugin for NFC scanning as explained here: https://community.sap.com/t5/technology-blogs-by-members/mdk-ios-nfc-uid-scanner-how-to-use-native-functionalities-in-sap-mdk-using/ba-p/13553764

This could help you for your new Fiori projects to have NFC scanning functionality. It can also help you to move away from Hybrid or Native Mobile applications which you might have running on BTP Mobile Services. This will save costs of Mobile Service, Mobile Device Management and simplify your application.

Problem

Using this in a UI5/Fiori application is super easy to do using the browser API for this. Unfortunately, when you want to integrate this application in BTP Work Zone, it won’t work anymore. Work Zone uses iframes for opening applications and the NFC API can only be used on the top level frames for security reasons.

See the documentation:

Scan: NDEFReader: scan() method - Web APIs | MDN (mozilla.org)

“Web NFC is only available to top-level frames and secure browsing contexts (HTTPS only). ”

Interact with NFC devices on Chrome for Android | Capabilities | Chrome for Developers

Solution

As a workaround, I came up with a plugin for Work Zone to make this possible. This plugin will be loaded on the top level frame of Work Zone and trigger the scanning. To notify the application running in Work Zone, I use IFrame communication.

The plugin contains only a “Component.ts” file:

In the Component.ts file, I create the NDEFReader object, provide a success handler to get the scanned object and error handler to know in case something goes wrong. In the end, this will activate the NFC scanner of the device and capture any NFC scanned during your session:

const ndef = new NDEFReader();
ndef.onreading = (event) => {
    console.log("Message:");
    console.log(JSON.stringify(event.message));
    const data = event.message.records[0].data;
    let decoder = new TextDecoder("utf-8");
    let scan = decoder.decode(data);
};
ndef.onreadingerror = (event) => {
    
  };
await ndef.scan();

Now, to inform the application that triggered the NFC scan with the result, I add the following code to the onRead event handler:

It gets all the iframe’s in Work Zone
Loops over them
Posts the result to all the iframes

const iframes = document.querySelectorAll('iframe');
for (const iframe of iframes) {
    iframe.contentWindow?.postMessage({ action: "NFCSCANNED", tag: {id:scan} }, "*");
}

Same for the Error event handler but using another action:

const iframes = document.querySelectorAll('iframe');
for (const iframe of iframes) {
    iframe.contentWindow?.postMessage({ action: "NFCSCANNED", tag: {id:scan} }, "*");
}

Full code of the Component.ts file:

import MessageBox from "sap/m/MessageBox";
import BaseComponent from "sap/ui/core/UIComponent";

/**
 * @namespace be.nmbs.plugins.nfcscanning
 */
export default class Component extends BaseComponent {

    public static metadata = {
        manifest: "json"
    };

    /**
     * The component is initialized by UI5 automatically during the startup of the app and calls the init method once.
     * @Public
     * @override
     */
    public async init() {
        // call the base component's init function
        super.init();
        if ('NDEFReader' in window) {
            const ndef = new NDEFReader();
            ndef.onreading = (event) => {
                console.log("Message:");
                console.log(JSON.stringify(event.message));
                const data = event.message.records[0].data;
                let decoder = new TextDecoder("utf-8");
                let scan = decoder.decode(data);
                const iframes = document.querySelectorAll('iframe');
                for (const iframe of iframes) {
                    iframe.contentWindow?.postMessage({ action: "NFCSCANNED", tag: {id:scan} }, "*");
                }
            };
            ndef.onreadingerror = (event) => {
                const iframes = document.querySelectorAll('iframe');
                for (const iframe of iframes) {
                    iframe.contentWindow?.postMessage({ action: "NFCSCANNED-ERROR", tag: {id:""} }, "*");
                }
              };
            await ndef.scan();
        }
    }
}

To consume this in an application, I do the following in the eventhandler of a button:

Register an eventhandler to catch the result
Trigger the message to the parent to inform that we want to start a scan

Consuming could look like this:

onclick: async function (oEvent) {
  window.addEventListener('message', (event)=>this.readTag(event));
},
readTag: function (event) {
   if(!event.data || !event.data.action || event.data.action !== "NFCSCANNED"){
       return;
   }
       MessageToast.show(`NFC Scan result: ${event.data.tag}`);
   }
}

For using typescript, it might be useful to have the NFC typescript definition file: Web-nfc.d.ts

// Type definitions for Web NFC
// Project: https://github.com/w3c/web-nfc
// Definitions by: Takefumi Yoshii <https://github.com/takefumi-yoshii>
// TypeScript Version: 3.9

// This type definitions referenced to WebIDL.
// https://w3c.github.io/web-nfc/#actual-idl-index

interface Window {
  NDEFMessage: NDEFMessage
}
declare class NDEFMessage {
  constructor(messageInit: NDEFMessageInit)
  records: ReadonlyArray<NDEFRecord>
}
declare interface NDEFMessageInit {
  records: NDEFRecordInit[]
}

declare type NDEFRecordDataSource = string | BufferSource | NDEFMessageInit

interface Window {
  NDEFRecord: NDEFRecord
}
declare class NDEFRecord {
  constructor(recordInit: NDEFRecordInit)
  readonly recordType: string
  readonly mediaType?: string
  readonly id?: string
  readonly data?: DataView
  readonly encoding?: string
  readonly lang?: string
  toRecords?: () => NDEFRecord[]
}
declare interface NDEFRecordInit {
  recordType: string
  mediaType?: string
  id?: string
  encoding?: string
  lang?: string
  data?: NDEFRecordDataSource
}

declare type NDEFMessageSource = string | BufferSource | NDEFMessageInit

interface Window {
  NDEFReader: NDEFReader
}
declare class NDEFReader extends EventTarget {
  constructor()
  onreading: (this: this, event: NDEFReadingEvent) => any
  onreadingerror: (this: this, error: Event) => any
  scan: (options?: NDEFScanOptions) => Promise<void>
  write: (
    message: NDEFMessageSource,
    options?: NDEFWriteOptions
  ) => Promise<void>
  makeReadOnly: (options?: NDEFMakeReadOnlyOptions) => Promise<void>
}

interface Window {
  NDEFReadingEvent: NDEFReadingEvent
}
declare class NDEFReadingEvent extends Event {
  constructor(type: string, readingEventInitDict: NDEFReadingEventInit)
  serialNumber: string
  message: NDEFMessage
}
interface NDEFReadingEventInit extends EventInit {
  serialNumber?: string
  message: NDEFMessageInit
}

interface NDEFWriteOptions {
  overwrite?: boolean
  signal?: AbortSignal
}
interface NDEFMakeReadOnlyOptions {
  signal?: AbortSignal
}
interface NDEFScanOptions {
  signal: AbortSignal
}

SAPUI5 Custom Application: Digital Signature Draw Pad

2024-12-18T20:11:32.809000+01:00

Business Case

This blog showcases a custom SAP UI5 application that allows users to draw a signature on a digital pad, clear it, download it as an image (JPEG), or upload it to an SAP backend server for further processing. The application is built using the HTML5 control within the SAP UI5 framework.
It is designed to handle both desktop and touch devices such as mobile phones and tablets, ensuring broad usability across platforms.

Features

Draw Signature: Users can draw their signatures on a responsive digital canvas.
Clear Pad: The pad can be reset with a single click.
Download Signature: Users can save their signature locally as a JPEG file.
Upload to Server: The application provides functionality to save the signature to an SAP server for storage or further processing.
Touch Device Support: Fully functional on mobile devices and tablets with touch input support.

Application Structure

The application is implemented with a combination of SAP UI5 and HTML5 canvas features. Below is a breakdown of the technical components.

XML View

The XML view defines the structure and layout of the application, incorporating an HTML control for the canvas and buttons for actions:

<mvc:View controllerName="digitalsignature.controller.View1"
xmlns:mvc="sap.ui.core.mvc"
xmlns:core="sap.ui.core"
xmlns="sap.m">
  <Page id="_IDGenPage" title="Digital Signature">
    <content>
      <VBox id="_IDGenVBox1" class="sapUiSmallMargin">
        <HBox id="_IDGenHBox">
          <Text id="_IDGenText" text="Draw your signature below:" />
        </HBox>
        <HBox id="_IDGenHBox1">
          <core:HTML id="signaturePad" content="{/signatureHTML}" afterRendering=".onAfterRenderingHTML" />
          <HBox alignItems="End" id="_IDGenHBox2" justifyContent="SpaceBetween" class="sapUiSmallMarginTop">
            <Button id="_IDGenButton1" text="Clear" press=".onClearPress" />
            <Button id="_IDGenButton2" text="Download as JPEG" press=".onDownloadPress" />
            <Button id="_IDGenButton3" text="Upload to Server" press=".onPostToServer" />
          </HBox>
        </HBox>
      </VBox>
    </content>
  </Page>
</mvc:View>

Controller Logic

The controller implements the core functionality of the application. It handles user interactions, such as drawing on the canvas, clearing it, and downloading the signature as an image.

Initialization and Canvas Rendering

onInit: function () {
    const signatureHTML = "<canvas id='signatureCanvas' width='500' height='300' style='border:1px solid #000;'></canvas>";
    const oModel = new sap.ui.model.json.JSONModel({ signatureHTML: signatureHTML });
    this.getView().setModel(oModel);

    this._canvas = null;
    this._ctx = null;
    this._isDrawing = false;
},

onAfterRenderingHTML: function () {
    this._canvas = document.getElementById("signatureCanvas");

    if (this._canvas) {
        this._ctx = this._canvas.getContext("2d");
        this._setCanvasBackground();
        this._attachMouseEvents();
        this._attachTouchEvents();
    } else {
        console.error("Canvas element not found. Check your HTML content and IDs.");
    }
},

Drawing and Clearing Signature

_startDrawing: function (event) {
    this._isDrawing = true;
    this._ctx.beginPath();
    this._ctx.moveTo(event.offsetX, event.offsetY);
},

_draw: function (event) {
    if (!this._isDrawing) return;
    this._ctx.lineTo(event.offsetX, event.offsetY);
    this._ctx.strokeStyle = "#000";
    this._ctx.lineWidth = 2;
    this._ctx.stroke();
},

onClearPress: function () {
    if (this._canvas) {
        this._ctx.clearRect(0, 0, this._canvas.width, this._canvas.height);
        this._setCanvasBackground();
        MessageToast.show("Signature pad cleared.");
    }
},

Full Controller Code:

sap.ui.define([
   "sap/ui/core/mvc/Controller",
    "sap/m/MessageToast", 
    "sap/ui/model/json/JSONModel",
],
    function (Controller, MessageToast, JSONModel) {
        "use strict";

        return Controller.extend("digitalsignature.controller.View1", {
            onInit: function () {
                const signatureHTML = "<canvas id='signatureCanvas' width='500' height='300' style='border:1px solid #000;'></canvas>";
                const oModel = new sap.ui.model.json.JSONModel({ signatureHTML: signatureHTML });
                this.getView().setModel(oModel);

                this._canvas = null;
                this._ctx = null;
                this._isDrawing = false;
            },

            onAfterRenderingHTML: function () {
                this._canvas = document.getElementById("signatureCanvas");

                if (this._canvas) {
                    this._ctx = this._canvas.getContext("2d");
                    this._setCanvasBackground();
                    this._attachMouseEvents();
                    this._attachTouchEvents();
                } else {
                    console.error("Canvas element not found. Check your HTML content and IDs.");
                }
            },

            _setCanvasBackground: function () {
                this._ctx.fillStyle = "#FFFFFF"; // White background
                this._ctx.fillRect(0, 0, this._canvas.width, this._canvas.height);
            },

            _attachMouseEvents: function () {
                this._canvas.addEventListener("mousedown", this._startDrawing.bind(this));
                this._canvas.addEventListener("mousemove", this._draw.bind(this));
                this._canvas.addEventListener("mouseup", this._stopDrawing.bind(this));
                this._canvas.addEventListener("mouseleave", this._stopDrawing.bind(this));
            },

            _attachTouchEvents: function () {
                this._canvas.addEventListener("touchstart", this._startTouchDrawing.bind(this));
                this._canvas.addEventListener("touchmove", this._drawTouch.bind(this));
                this._canvas.addEventListener("touchend", this._stopDrawing.bind(this));
            },

            _startDrawing: function (event) {
                this._isDrawing = true;
                this._ctx.beginPath();
                this._ctx.moveTo(event.offsetX, event.offsetY);
            },

            _draw: function (event) {
                if (!this._isDrawing) return;
                this._ctx.lineTo(event.offsetX, event.offsetY);
                this._ctx.strokeStyle = "#000";
                this._ctx.lineWidth = 2;
                this._ctx.stroke();
            },

            _startTouchDrawing: function (event) {
                event.preventDefault(); // Prevent scrolling
                this._isDrawing = true;
                const touch = event.touches[0];
                const rect = this._canvas.getBoundingClientRect();
                const x = touch.clientX - rect.left;
                const y = touch.clientY - rect.top;
                this._ctx.beginPath();
                this._ctx.moveTo(x, y);
            },

            _drawTouch: function (event) {
                if (!this._isDrawing) return;
                event.preventDefault(); // Prevent scrolling
                const touch = event.touches[0];
                const rect = this._canvas.getBoundingClientRect();
                const x = touch.clientX - rect.left;
                const y = touch.clientY - rect.top;
                this._ctx.lineTo(x, y);
                this._ctx.strokeStyle = "#000";
                this._ctx.lineWidth = 2;
                this._ctx.stroke();
            },

            _stopDrawing: function () {
                this._isDrawing = false;
                this._ctx.closePath();
            },

            onClearPress: function () {
                if (this._canvas) {
                    this._ctx.clearRect(0, 0, this._canvas.width, this._canvas.height);
                    this._setCanvasBackground();
                    MessageToast.show("Signature pad cleared.");
                }
            },

            onDownloadPress: function () {
                if (this._canvas) {
                    const link = document.createElement("a");
                    link.href = this._canvas.toDataURL("image/jpeg");
                    link.download = "signature.jpeg";
                    link.click();
                    MessageToast.show("Signature downloaded as JPEG.");
                }
            },

            onPostToServer: function () {
                if (this._canvas) {
                    const imageData = this._canvas.toDataURL("image/jpeg");
                    // Add server upload logic here
                    MessageToast.show("Signature uploaded to server (mockup).");
                }
            }
        });
    });

Upload to SAP Server

While the implementation of server upload is included as a mockup, it can be achieved using the sap.ui.model.odata or fetch API. The signature can be sent as a base64 string to an SAP OData service.

Conclusion

This SAP UI5 custom application serves as a practical example of how HTML5 capabilities can be integrated within the SAP UI5 framework to meet real-world business requirements. The Digital Signature Draw Pad enhances user experience, supports digital transformation, and simplifies workflows.

Feel free to implement this application in your SAP projects and customize it as per your needs.
Happy coding!😉

SAP Developer News, December 19th, 2024

2024-12-19T21:10:00.040000+01:00

Podcast: https://podcast.opensap.info/sap-developers/2024/12/19/sap-developer-news-december-19th-2024/

DESCRIPTION

SAP Developer News End of Year Schedule

New in SAP SDKs for AI

SAP Cloud SDK for AI (JavaScript): https://github.com/SAP/ai-sdk-js/releases/
SAP Cloud SDK for AI (Java): https://github.com/SAP/ai-sdk-java/releases
Generative AI Hub SDK (Python): https://help.sap.com/doc/generative-ai-hub-sdk/CLOUD
Understand the World of AI with SAP Learning: https://community.sap.com/t5/artificial-intelligence-and-machine-learning-blogs/understand-the-world-of-ai-with-sap-learning/ba-p/13968267

New series: The Art and Science of CAP with Daniel Hutzel

Episodes and show notes https://qmacro.org/blog/posts/2024/12/06/the-art-and-science-of-cap/
Live stream series playlist https://www.youtube.com/playlist?list=PL6RpkC85SLQAe45xlhIfhTYB9G0mdRVjI

Extending SAPUI5 Apps

Blog post: https://community.sap.com/t5/technology-blogs-by-sap/extending-sapui5-apps-adaptation-projects-vs-extension-projects/ba-p/13961264

SAP Data & Analytics Advisory Methodology

SAP Data & Analytics Advisory Methodology Overview | SAP Help Portal: https://help.sap.com/docs/sap-btp-guidance-framework/sap-data-methodology/sap-data-analytics-advisory-methodology-overview
Highlights of SAP Datasphere in 2024: https://www.linkedin.com/posts/activity-7275068742051450881-iHTy
Watch out for our Q4 release for SAP HANA Cloud: https://www.linkedin.com/posts/thomashammersap_saphanacloud-sapbtp-saphana-activity-7272528046564282368-t2GE

CHAPTER TITLES

0:00 Intro
0:10 Dev News Schedule
1:01 New in SAP SDKs for AI
2:27 New series: The Art and Science of CAP with Daniel Hutzel
3:52 Extending SAPUI5 Apps
4:49 SAP Data & Analytics Advisory Methodology

Transcription

[Intro] This is the SAP Developer News for December 19th, 2024.

[Tom] I just want to let everybody know about the upcoming plans for the developer news as we take our annual end of year break. This is the last regular news episode that we'll have for 2024. And like the previous years, we have special year and review episodes coming up for the last week of December and the first week of December. January. So you hear from each of the team members about what they reflect upon 2024, their major accomplishments, things that they've enjoyed, all those sort of things. And be on the lookout for our special bloopers. We'll throw some fun, exciting bloopers in at the end of each of those episodes and probably release that separately as well. So we look forward to seeing you back here for new episodes the second week of January 2025.

[Witalij] SAP Cloud SDK for AI is our official software development kit for SAP AI core, SAP Generative AI hub and orchestration service. The JavaScript TypeScript version was introduced two months ago, and last week we released version 1.4. This new version odds support for the orchestration services grounding capabilities. Grounding allows you to integrate external, contextually, relevant, domain-specific or real-time data into your AI processes. This data supplements the natural language processing capabilities of pre-trained models, which are typically trained only on general data sets. Additionally, the Java version of the SDK has reached a significant milestone with the release of version 1.0, bringing numerous new features and enhancements. You can find the complete documentation and sample projects in the Git repository. For Python users, the Generative AI Hub SDK has recently released version 4.1.1, which is a new introduces support for prompt registry templates in orchestration. I hear feeling overwhelmed by all these terminology. No worries. If you are new to AI are wondering how SAP is embedding AI into our portfolio, check out the recent post by my teammate Nora. She guides you through relevant courses and activities available on SAP learning. Links are provided in the description.

[DJ] If you've ever wanted to gain a deeper of CAP. Learn more about its design and the fundamental core computing building blocks upon which it's based. Then we've got a series for you. On the Hands on SAP Dev show, which we've been running since early 2019, we've got a new mini -series with none other than the creator of CAP himself, Daniel Hutzel. The series is called the Art and Science of CAP. and in each episode, Daniel takes us on journeys deep and wide, bringing enlightenment and wonder in equal measure. Now, the series was kicked off during Devtoberfest 2024. It's still running. There's an episode or two to go. And alongside the episodes, the live stream episodes, there are also show notes that you can dive into afterwards. Or you can just watch the replays of the live stream episodes. and dive into the show notes as well. There's a ton of stuff to explore and learn about. So, this holiday season, treat yourself to some amazing insights and check out the episodes that we have on offer along with your company notes. And we'll see you online.

[Michelle] Hey y'all. If you're a developer working with SAPUI5, you want to check out this blog post about extension projects versus adaption projects. It's all about how SAP is moving towards a more advanced way of customizing apps with adapt projects. The post explains how Adaption Projects created an SAP Business Application Studio lets you adapt apps without modifying the standard code. You get powerful new features, improved upgrade stability, and the flexibility to work with on any SAP app, not just legacy ones. It also compares the older extension projects to adaption projects showing why adaption projects are the way forward and to give you a better idea of the differences between the two. If you're working with existing extension projects, don't worry, you can still use them, but SAP recommends migrating to an adaption project for bigger or new requirements. To learn more about the blog post, it's linked below and as always, happy coding.

[Witalij] Just in time for the year end, we are happy to share that the SAP Data and Analytics advisory methodology is now officially available as part of the SAP Help Documentation. The methodology provides a comprehensive framework for enterprise and data architects to evaluate data strategies, develop solution architectures and foster a data-driven culture through a structured four-phase approach. This process is supported by a data domain reference model to establish a common understanding of SAP data, a data and analytics capability model to enhance the architectural definition process, and data-driven use-case patterns and reference architecture. to accelerate solution architecture development. Use the holiday season as an opportunity to get inspired and set the groundwork for successful data and analytics projects in the coming year. And while beyond the topic, I'd like to highlight two product-specific resources from the respective managers. The SAP DataSphere 2024 highlights presented by KP Sauer and the teaser for the Q4 release of SAP HANA cloud shared by Thomas Hammer. The links are in the description, as always.

SAPUI5 Custom App: Shipment Tracking with SAPUI5 and Google Maps Integration

2024-12-23T22:35:09.074000+01:00

Business Case:

In the logistics industry, real-time shipment tracking is a necessity. Traditional systems often lack a visual component, leaving businesses without critical insights into routes, distances, and potential delays. Shipment Tracking Application, built with SAPUI5 and Google Maps, addresses these challenges by combining route visualization, detailed instructions, and multilingual support into a single application.

Features:

1. Interactive Map Integration

Seamless integration with Google Maps to display real-time shipment routes.
Dynamic updates based on user input, such as shipment ID.

2. Step-by-Step Directions

Instructions and distances for each step in the route.
Multilingual support to cater to global users.

3. Shipment Search

Simple search functionality to retrieve shipment routes using shipment IDs.

4. Real-Time Distance Calculation

Display total distance for the shipment route instantly.

Setup Instructions

Step 1: Configure Google Maps API
To integrate Google Maps, you need to set up an API key:

Go to the Google Developers Console.
Create or select a project:
- If you don’t have an existing project, create a new one.
Enable Google Maps JavaScript API:
- Search for "Google Maps JavaScript API" in the library and enable it.
Create API Credentials:
- Navigate to the "Credentials" page.
- Generate a Browser Key for your application.
Set API Restrictions:
- Restrict the key to your application’s domain for security purposes.

Example API URL for integration:

https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap

Replace YOUR_API_KEY with the key generated in the Google Developers Console.

Step 2: Configure OData Service

Create an OData service with an entity set, e.g., ShipmentSet.
Ensure the service fetches StartCoords and EndCoords based on the shipment number.

{
    "StartCoords": { "lat": 30.0444, "lng": 31.2357 },
    "EndCoords": { "lat": 31.2023, "lng": 29.9014 }
}

XML View

<mvc:View controllerName="shiptrack.controller.View1"
    xmlns:mvc="sap.ui.core.mvc" displayBlock="true 
    xmlns:core="sap.ui.core"
    xmlns="sap.m" xmlns:l="sap.ui.layout">
    <Page id="page" title="Shipment Tracker">
        <VBox>
            <SearchField id="searchField" placeholder="Enter Shipment ID" search=".onFindShipment" />
            <Text id="totalDistanceText" text="Total Distance: {route>/distance}" />
            <l:Splitter orientation="Horizontal" width="100%" height="500px">
                <l:Splitter>
                    <!-- Directions List -->
                    <List id="directionsList" items="{route>/steps}">
                        <CustomListItem>
                            <VBox>
                                <Text text="{route>instruction}" />
                                <Text text="{route>distance}" />
                            </VBox>
                        </CustomListItem>
                    </List>
                </l:Splitter>
                <l:Splitter>
                    <!-- Map Container -->
                     <Core:HTML id="mapContainer" width="70%" height="500px" />
                </l:Splitter>
            </l:Splitter>
        </VBox>
    </Page>
</mvc:View>

Full Controller Code:

sap.ui.define([
    "sap/ui/core/mvc/Controller",
    "sap/m/MessageToast",
    "sap/ui/model/json/JSONModel"
], function (Controller, MessageToast, JSONModel) {
    "use strict";

    return Controller.extend("shiptrack.controller.View1", {
        onInit: function () {
            this._map = null;
            this._directionsService = null;
            this._directionsRenderer = null;

            const oModel = new JSONModel({ steps: [], distance: "" });
            this.getView().setModel(oModel, "route");

            this._loadGoogleMaps().then(() => {
                this._initializeMap();
            }).catch((error) => {
                console.error("Google Maps could not be loaded:", error);
                MessageToast.show("Unable to load Google Maps. Please try again later.");
            });
        },

        _loadGoogleMaps: function () {
            return new Promise((resolve, reject) => {
                if (typeof google !== "undefined" && google.maps) {
                    resolve();
                    return;
                }
                const script = document.createElement("script");
                script.src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=geometry";
                script.async = true;
                script.defer = true;
                script.onload = resolve;
                script.onerror = reject;
                document.head.appendChild(script);
            });
        },

        _initializeMap: function () {
            const mapContainer = this.byId("mapContainer").getDomRef();
            this._map = new google.maps.Map(mapContainer, {
                center: { lat: 0, lng: 0 },
                zoom: 2
            });
            this._directionsService = new google.maps.DirectionsService();
            this._directionsRenderer = new google.maps.DirectionsRenderer({ map: this._map });
        },

        onFindShipment: function () {
            const shipmentId = this.byId("searchField").getValue();
            if (!shipmentId) {
                MessageToast.show("Please enter a shipment ID.");
                return;  }

   // Fetch shipment details using OData service.
         /*   const oDataModel = this.getOwnerComponent().getModel(); // 
              Replace with your OData model.
            oDataModel.read(`/ShipmentSet('${shipmentNumber}')`, {
                success: (data) => {
                    const startCoords = data.StartCoords;
                    const endCoords = data.EndCoords;
                    this._displayRoute(startCoords, endCoords);
                },
                error: (error) => {
                    console.error("Failed to fetch shipment details:", 
                     error);
                    MessageToast.show("Unable to retrieve shipment 
                 details.");
                }
            }); */


            const startCoords = { lat: 30.0444, lng: 31.2357 };
            const endCoords = { lat: 31.2023, lng: 29.9014 };

            this._displayRoute(startCoords, endCoords);
        },

        _displayRoute: function (startCoords, endCoords) {
            const request = {
                origin: startCoords,
                destination: endCoords,
                travelMode: google.maps.TravelMode.DRIVING
            };

            const oModel = this.getView().getModel("route");

            this._directionsService.route(request, (result, status) => {
                if (status === google.maps.DirectionsStatus.OK) {
                    this._directionsRenderer.setDirections(result);

                    const route = result.routes[0];
                    const distance = route.legs[0].distance.text;
                    const steps = route.legs[0].steps.map((step) => ({
                        instruction: step.instructions.replace(/<[^>]+>/g, ''),
                        distance: step.distance.text
                    }));

                    oModel.setProperty("/steps", steps);
                    oModel.setProperty("/distance", distance);

                    MessageToast.show(`Total distance: ${distance}`);
                } else {
                    MessageToast.show("Unable to retrieve directions.");
                }
            });
        }
    });
});

Final Demo Video

Watch the application in action:

Conclusion

With the combination of SAPUI5 and Google Maps API, our Shipment Tracking Application delivers a powerful solution for real-time logistics management. By following the provided setup instructions and integrating the Google Maps API securely, you can create an efficient and user-friendly tool for your business.

Feel free to implement this application in your SAP projects and customize it as per your needs.
Happy coding! 😉

Let's Create a JSON Path Query Tool In SAP UI5 As Simple as Possible

2024-12-24T12:50:17.368000+01:00

Hello Everyone,

Most of us are aware about JSON and its significance in SAP UI5 for all the data handling, often its observed that we need a complex coding to manipulate the Json Data, so we are trying to address this by Query based program originally introduced by Stefan Goessner's original post and we will crate a tool around it.

A frequently emphasized advantage of XML is the availability of plenty tools to analyze, transform and selectively extract data out of XML documents. XPath is one of these powerful tools.

It's time to wonder, if there is a need for something like XPath4JSON and what are the problems it can solve.

Data may be interactively found and extracted out of JSON structures on the client without special scripting.
JSON data requested by the client can be reduced to the relevant parts on the server, such minimizing the bandwidth usage of the server response.

If we agree, that a tool for picking parts out of a JSON structure at hand does make sense, some questions come up. How should it do its job? How do JSONPath expressions look like?

We will be using a library developed by Stefan Goessner's original post introducing JSONPath in 2007.

We will be developing a UI5 App using this library so that we can us the app for doing a query over a JSON object.

Skil Set Involved: - JSON, UI5, Java Script and Any SAP web Based tool (WEB IDE, BAS)

For a Quick Reference we can check below details

We will be developing a UI5 App using this library so that we can us the app for doing a query over a JSON object.

Skill Set Involved: - JSON, UI5, Java Script and Any SAP web Based tool (WEB IDE, BAS)

Once Application is developed, the application should look like below.

Step1 :- Create a SAP UI5 Basic app by using template below structure

Step2: - we will be taking library reference from below URL, and I have modified as per my need.

https://code.google.com/archive/p/jsonpath/downloads

Seep3:- we will create a new folder ‘external’ and add a js file name ‘jsonpath.js’ and the content will be like below.

/* JSONPath 0.8.0 - XPath for JSON
 *
 * Copyright (c) 2007 Stefan Goessner (goessner.net)
 * Licensed under the MIT (MIT-LICENSE.txt) licence.
 */

sap.ui.define([
	"sap/m/library"
], function (mobileLibrary) {
	"use strict";
	// shortcut for sap.m.URLHelper
	var URLHelper = mobileLibrary.URLHelper;

	return {

		jsonQuery: function (obj, expr, arg) {
			var P = {
				resultType: arg && arg.resultType || "VALUE",
				result: [],
				normalize: function (expr) {
					var subx = [];
					return expr.replace(/[\['](\??\(.*?\))[\]']/g, function ($0, $1) {
							return "[#" + (subx.push($1) - 1) + "]";
						})
						.replace(/'?\.'?|\['?/g, ";")
						.replace(/;;;|;;/g, ";..;")
						.replace(/;$|'?\]|'$/g, "")
						.replace(/#([0-9]+)/g, function ($0, $1) {
							return subx[$1];
						});
				},
				asPath: function (path) {
					var x = path.split(";"),
						p = "$";
					for (var i = 1, n = x.length; i < n; i++)
						p += /^[0-9*]+$/.test(x[i]) ? ("[" + x[i] + "]") : ("['" + x[i] + "']");
					return p;
				},
				store: function (p, v) {
					if (p) P.result[P.result.length] = P.resultType == "PATH" ? P.asPath(p) : v;
					return !!p;
				},
				trace: function (expr, val, path) {
					if (expr) {
						var x = expr.split(";"),
							loc = x.shift();
						x = x.join(";");
						if (val && val.hasOwnProperty(loc))
							P.trace(x, val[loc], path + ";" + loc);
						else if (loc === "*")
							P.walk(loc, x, val, path, function (m, l, x, v, p) {
								P.trace(m + ";" + x, v, p);
							});
						else if (loc === "..") {
							P.trace(x, val, path);
							P.walk(loc, x, val, path, function (m, l, x, v, p) {
								typeof v[m] === "object" && P.trace("..;" + x, v[m], p + ";" + m);
							});
						} else if (/,/.test(loc)) { // [name1,name2,...]
							for (var s = loc.split(/'?,'?/), i = 0, n = s.length; i < n; i++)
								P.trace(s[i] + ";" + x, val, path);
						} else if (/^\(.*?\)$/.test(loc)) // [(expr)]
							P.trace(P.eval(loc, val, path.substr(path.lastIndexOf(";") + 1)) + ";" + x, val, path);
						else if (/^\?\(.*?\)$/.test(loc)) // [?(expr)]
							P.walk(loc, x, val, path, function (m, l, x, v, p) {
							if (P.eval(l.replace(/^\?\((.*?)\)$/, "$1"), v[m], m)) P.trace(m + ";" + x, v, p);
						});
						else if (/^(-?[0-9]*):(-?[0-9]*):?([0-9]*)$/.test(loc)) // [start:end:step]  phyton slice syntax
							P.slice(loc, x, val, path);
					} else
						P.store(path, val);
				},
				walk: function (loc, expr, val, path, f) {
					if (val instanceof Array) {
						for (var i = 0, n = val.length; i < n; i++)
							if (i in val)
								f(i, loc, expr, val, path);
					} else if (typeof val === "object") {
						for (var m in val)
							if (val.hasOwnProperty(m))
								f(m, loc, expr, val, path);
					}
				},
				slice: function (loc, expr, val, path) {
					if (val instanceof Array) {
						var len = val.length,
							start = 0,
							end = len,
							step = 1;
						loc.replace(/^(-?[0-9]*):(-?[0-9]*):?(-?[0-9]*)$/g, function ($0, $1, $2, $3) {
							start = parseInt($1 || start);
							end = parseInt($2 || end);
							step = parseInt($3 || step);
						});
						start = (start < 0) ? Math.max(0, start + len) : Math.min(len, start);
						end = (end < 0) ? Math.max(0, end + len) : Math.min(len, end);
						for (var i = start; i < end; i += step)
							P.trace(i + ";" + expr, val, path);
					}
				},
				eval: function (x, _v, _vname) {
					try {
						return $ && _v && eval(x.replace(/@/g, "_v"));
					} catch (e) {
						throw new SyntaxError("jsonPath: " + e.message + ": " + x.replace(/@/g, "_v").replace(/\^/g, "_a"));
					}
				}
			};

			var $ = obj;
			if (expr && obj && (P.resultType == "VALUE" || P.resultType == "PATH")) {
				P.trace(P.normalize(expr).replace(/^\$;/, ""), obj, "$");
				return P.result.length ? P.result : false;
			}
		}
	};

});

Step4 :- Modify the View1.xml Content for the required screen.

<mvc:View controllerName="Test.TEST.controller.View1" xmlns:mvc="sap.ui.core.mvc" displayBlock="true" xmlns="sap.m"
	xmlns:code="sap.ui.codeeditor">
	<Shell id="shell">
		<App id="app">
			<pages>
				<Page id="page" title="JSON Path Query Tool">
					<content>
						<OverflowToolbar id="otb1">
							<Button type="Accept" text="Execute" press="onExecutePress"/>
							<Button type="Accept" text="Template" press="onTemplatePress"/>
						</OverflowToolbar>
						<!--<Button text="ok" press=".onPress"></Button>-->
						<Input id="inputText" placeholder="Enter Query" class="sapUiSmallMarginBottom"/>
						<code:CodeEditor id="inputTextCode" type="json" value='' height="200px"/>
						<TextArea id="idQueryOutput" editable="false" growingMaxLines="7" width="100%" height="50%"></TextArea>
					</content>
				</Page>
			</pages>
		</App>
	</Shell>
</mvc:View>

Step5:- View1.controller.js

sap.ui.define([
	"sap/ui/core/mvc/Controller",
	"../external/jsonpath",
	"sap/ui/model/json/JSONModel"
], function (Controller, jsonpath, JSONModel) {
	"use strict";

	return Controller.extend("Test.TEST.controller.View1", {
		onInit: function () {

		},
		onExecutePress: function () {

			var codeEditorData = JSON.parse(this.getView().byId("inputTextCode").getValue());
			this.getView().setModel(new JSONModel(codeEditorData), "codeEditorDataModel");
			var queryString = this.getView().byId("inputText").getValue().trim();
			var productNames = jsonpath.jsonQuery(codeEditorData, queryString);
			this.getView().byId("idQueryOutput").setValue(productNames);

		},
		onTemplatePress: function () {
			var jsonData = {
				"store": {
					"book": [{
						"category": "reference",
						"author": "Nigel Rees",
						"title": "Sayings of the Century",
						"price": 8.95
					}, {
						"category": "fiction",
						"author": "Evelyn Waugh",
						"title": "Sword of Honour",
						"price": 12.99
					}, {
						"category": "fiction",
						"author": "Herman Melville",
						"title": "Moby Dick",
						"isbn": "0-553-21311-3",
						"price": 8.99
					}, {
						"category": "fiction",
						"author": "J. R. R. Tolkien",
						"title": "The Lord of the Rings",
						"isbn": "0-395-19395-8",
						"price": 22.99
					}],
					"bicycle": {
						"color": "red",
						"price": 19.95
					}
				}
			};

			this.getView().byId("inputTextCode").setValue(JSON.stringify(jsonData));
			this.getView().byId("inputText").setValue("$.store.book[*].author");
		}
	});
});

Regards,

Dibyajyoti Nanda

https://www.linkedin.com/in/dibyajyoti-nanda-23907429/

Designing UI5 Apps as Business Solution for SAP Build Work Zone - Part 3

2025-01-08T16:13:07.296000+01:00

Content Navigation

Part 1: A simple UI5 app that runs in the SAP Build Work Zone Service

Part 2: Multiple Apps with a Shared Reuse Library

Part 3:Splitting bigger projects (Current post)

Part 4:Advanced splits (Planned)

Splitting Bigger Projects

In the last posts, you have learnt how to build multiple apps and move common parts of them into a reusable library. Everything is deployed using one MTA.
In this part, we will have a look at how to split this into smaller parts. This enables us to have independent lifecycles and helps distribute responsibilities between different developer groups.
For example, the reusable library might have a different lifecycle than the apps and is not changed frequently. Maybe they are also maintained by other developers and should be stored in a separate Git repository.

The sample code can be found in the GitHub repository.

Current State

Let us have a quick look at the starting point. There are three HTML5 apps, which are all deployed to the same app-host. There is one XSUAA and one set of runtime/design-time destinations for the integration into SAP Build Work Zone. All sap.cloud/service names in manifest.json files ([Shared], [App1], [App2]) are the same and the DT destination refers to it as well:

"sap.cloud": {
    "public": true,
    "service": "btp.samples.cdm.multiple.apps"
}

URL: https://html5-apps-repo-rt.${default-domain}/applications/cdm/btp.samples.cdm.multiple.apps

In their manifest.json the apps declare a dependency to the reuse library ([App1], [App2]).

"sap.ui5": {
    "dependencies": {
        "libs": {
            "btp.samples.cdm.multiple.apps.lib": {}
...

The corresponding MTA looks like this:

A First Split for the App-Hosts

The first split you would do, is to use multiple HTML5 app-hosts and distribute the HTML5 apps to them.
Since this is an intermediate step, there is no sample code available.

Deployment

Both apps are moved to their own app-host while the shared library stays on the previously used app-host. If you have more apps, you can distribute them across app-hosts as needed.
Every app-host is connected to the same XSUAA and all apps on the app-hosts use the same cloud service name, specified by the DT destination.
There are no changes for the apps themselves and for the content of the cdm.json.
For now, the cdm.json remains on the shared app-host. In be consistent, the shared app-host additionally depends on the app-hosts with the consuming apps.
This way the platform understands that the content of these app-hosts is relevant for the content of the cdm.json and that the apps which are specified inside can be found and the library dependencies of the apps can be resolved as well.

MTA

The corresponding MTA would look like this:

There are now three managed resources for the app-hosts and Three HTML5 app content deployers. The deployer of the shared app-host additionally requires the app-hosts of the apps. This will establish the needed dependencies between them and binds them together.

Problems

Only splitting the app-hosts as we have done until now does not add real value because everything is still contained in one MTA.
It's also not ideal that the shared app-host depends on the app-hosts containing the apps. A successful deployment requires to first deploy the apps and then the shared app-host. Otherwise, the contained CDM would not be consistent.
You might have noticed that there is even a circular dependency because the apps itself depend on the shared library.
Nevertheless, it is a good starting point for the next step.

Split the CDM Model

We are now going to split the cdm.json. With this, we can avoid the bad structuring of dependencies and the circular dependencies between the app-hosts caused by the single shared cdm.json. This will also inverse the dependencies.
Since this is an intermediate step, there is no sample code available.

Deployment

The new deployment would look like this:

We now have a cdm.json on all three app-hosts ([Shared, App1, App2]). The shared cdm.json contains common definitions. The two app-specific ones extend them by adding the apps. Because all three app-hosts have the same sap.cloud/service, which is specified in the DT destination, they will all be merged together. We will take a closer look at this below.
Note that now the dependencies between the app-hosts have been inverted and the app-hosts holding the apps depend on the shared app-host. There is no longer one leading app-host which binds them all together but independent groups which are still consistent. For example, app-host 1 is bound together with the shared app-host. Therefore, the cdm.json of app-host 1 can find the defined app 1 and the library dependency of the app can be resolved. However, the cdm.json of app-host 1 cannot refer to app 2, because the app-host containing is not bound to it.
This way you achieve good isolation between independent applications.

MTA

The corresponding MTA would look like this:

There is only a slight change in the requirements of the HTML5 app deployer. Now the deployer modules for the apps require the shared app-host, whereas the shared module deployer no longer requires the app-hosts of the apps.

How to split the cdm.json

Before we split the CDM model into multiple parts we must understand how it is structured. In the CDM model, we have different types of entities like catalogs, groups, and roles.
They all have some header attributes like an ID, a translatable title, and a description. Additionally, they have references to other entities or apps. E.g., catalogs and groups refer to the tiles of the included apps (which is defined in the app manifest). Roles also refer to the contained apps as well as to the contained groups and catalogs.
For the full CDM model please refer to About the Common Data Model.
When splitting the model there can be different cases:

If the CDM Models of your apps are completely independent of each other, which means they have their own roles catalogs and groups, you can just move them accordingly.
However, in most cases you want to have common entities or even just one catalog, role and group which contain all apps.
In this case you can split the definition of the entities across the different cdm.json file. E.g. The shared cdm.json just describes the connection of role, catalog, and group and the cdm.json of the apps describe that the app is contained there. The platform will merge them together.

The merge of cdm.json files will collect the entities of all files. Then it will match them by type and ID and merge the matching ones by merging their references.
However, there is currently an inconvenient limitation:
While the merge works fine for references, for simple header attributes like the title and description it will pick one of the matched entities randomly and take its definition. This means that currently the header definitions of the split entities must be exactly the same in all cdm.json files to avoid unpredictable behavior.

In the samples the 2nd case has been modeled in the [shared cdm.json], [app1 cdm.json] and [app2 cdm.json] (The links refer to the sample of the next split)

How to verify the final CDM model

You might want to verify how the final MTA of your solution looks like and whether the CDM content has been merged as you expect.
After you have deployed the MTAs, you can access it the same way as SAP Build Work Zone will do it, which is configured in the design-time destination.
You will need an HTTP REST client to do this. SAP Business Application Studio or MS Visual Studio Code provide a REST Client extension which is installed by default.

You can find the created design-time destination in the BTP Cockpit in your sub account under Connectivity -> Destinations.
Here you will find the target URL which looks as follows:
https://html5-apps-repo-rt.cfapps.<landscape domain>.hana.ondemand.com/applications/cdm/<sap.cloud/service name>
The destination also specifies everything that is needed to obtain an access token. This information is taken from a service key of the HTML5 app-runtime instance. It consists of

a token URL which looks like
https://<subaccount domain>.authentication.<landscape domain>.hana.ondemand.com/oauth/token
a client ID
a client secret. You will not be able to retrieve the client secret from the destination, therefore you must retrieve this from the service key of the app-runtime instance instead.

To retrieve the CDM model you have to first retrieve an access token from the token URL using the client credentials and then use the token to call the target URL.
The following code can be used in the REST Client extension to do this:

# @name getToken

GET https://<subaccount domain>.authentication.<landscape domain>.hana.ondemand.com/oauth/token?grant_type=client_credentials HTTP/1.1 

Authorization: Basic <client ID>:<client secret>


###


GET https://html5-apps-repo-rt.cfapps.<landscape domain>.hana.ondemand.com/applications/cdm/<sap.cloud/service name> HTTP/1.1

Authorization: Bearer {{getToken.response.body.$.access_token}}

The response will provide the fully merged CDM model of your solution. It also includes more information about the contained apps and their visualizations which is derived from the defined navigation inbounds in the manifest.json.

Problems

We have now solved the bad structuring of dependencies, but still everything is contained inside a single MTA file.

Split the MTAs

In the next step, we will split the single MTA into multiple ones.
The sample code can be found here

Deployment

Every app and app-host will be moved to a separate MTA. The XSUAA and the destination service will still be shared by all and therefore move to the MTA containing the shared library. The result of the deployment will not change at all. Below, the colors indicate which MTA will deploy which content.

The cloud service name will still be the same everywhere.

MTAs

The MTAs [Shared, App1, App2] will look like this.

Note that the XSUAA service and the shared app-host resources in the app MTAs are of the type "existing service". Only the shared MTA defines it as a "managed service" because this MTA owns the service instance and will create it. Therefore, the shared MTA must be deployed first.

This setup already fulfils most use cases. The apps and shared library can now be developed and deployed independently. They can also be moved to different Git repositories.

Split the XSUAAs

Until now, the MTA projects are already quite independent, but they still share the same XSUAA and the contained authorization objects. However, your apps might contain complex back-end services and have complex authorization objects. In that case, developers would not want to maintain the xs-security.json files in the central MTA but move the app-specific parts to the MTA of the app. This is a good reason to split the XSUAAs.

Deployment

Now we have three XSUAA instances. Each one is deployed by one MTA. Each app-host binds against its corresponding XSUAA instance. This way the authorization handling is bound to the correct XSUAA, and its authorization model applies. Example: If you have routes in xs-app.json that require a given scope, they are defined by the corresponding XSUAA. The same would happen for any back-end apps that are possibly contained in your MTA.
Previously the connection between the app-host and the XSUAAwas based on the cloud service name. Therefore, in the former version of this blog it has been necessary to split the cloud service name at this point. This is no longer needed here and even has a different effect, which is needed for splitting the service provider.

The MTAs [Shared, App1, App2] will look like this:

MTAs

Every MTA now contains its own xs-security.json [Shared, App1, App2] with its own unique xsappname.

Next Steps

Now you know about the most relevant splits for your use cases.
A more advanced use case which also requires splitting the destination service instance is described in Part 4 of this blog.

SAP Developer News, January 9th, 2025

2025-01-09T21:00:00.041000+01:00

Podcast Version: https://podcast.opensap.info/sap-developers/2025/01/09/sap-developer-news-january-9th-2025/

DESCRIPTION

Welcome to 2025

Mastering SAP S/4HANA Extension with SAP Build- Discovery center mission

New Discovery Center mission for SAP Build: https://discovery-center.cloud.sap/missiondetail/4420/4706/
BTP Discovery Center: https://discovery-center.cloud.sap/

What’s New in SAP HANA Cloud 2024/Q4

What’s New in SAP HANA Cloud – December 2024: https://community.sap.com/t5/technology-blogs-by-sap/what-s-new-in-sap-hana-cloud-december-2024/ba-p/13967275
New Machine Learning and NLP features in SAP HANA Cloud 2024 Q4: https://community.sap.com/t5/technology-blogs-by-sap/new-machine-learning-and-nlp-features-in-sap-hana-cloud-2024-q4/ba-p/13953934
Calculation View Features of 2024 QRC4: https://community.sap.com/t5/technology-blogs-by-sap/calculation-view-features-of-2024-qrc4/ba-p/13965370

SAP Open Source Report 2024

Blog post “A year of Collaboration and Innovation: SAP Open Source Report 2024”: https://community.sap.com/t5/technology-blogs-by-sap/a-year-of-collaboration-and-innovation-sap-open-source-report-2024/ba-p/13978967
SAP Open Source Report 2024: https://d.dam.sap.com/a/wxgtG2E/SAP%20Open%20Source%202024%20Report.pdf

Video: UI5 Web Components 2.0

https://www.youtube.com/watch?v=1ERrvS5-MpM

CAP Node.js Plugins live stream mini-series

The series post with all the links to the live streams, recordings and blog posts: https://qmacro.org/blog/posts/2024/12/30/cap-node.js-plugins/

CHAPTER TITLES

0:00 Intro

0:10 Welcome to 2025

1:35 Discovery center mission “Mastering SAP S/4HANA Extension with SAP Build”

2:39 What’s New in SAP HANA Cloud 2024/Q4

4:46 SAP Open Source Report 2024

5:35 Video: UI5 Web Components 2.0

5:59 CAP Node.js Plugins live stream mini-series

Transcription

[Intro] This is the SAP Developer News for January 9th, 2025.

[Thomas] Welcome everybody to the developer news in 2025. We've got more of the same great little newsbytes coming your way every week. We want to keep you up to date on what's going on in the SAP world for all of our developer ecosystem. But we also have some great new things planned for this year. We're going to continue with the CodeJams, of course. We want to bring up. Bring more road shows to areas that we've not been able to visit in the past couple years. We also will continue the TechEd on Tour, bringing the TechEd in-person experience to more locations near you. Be on the lookout for some of those locations announced probably about mid-year because most of that will happen in the fourth quarter of this year. And we've got some fun new things planned for the developer challenges this year as well. Already by mid-January, so in another week or so, you'll be able to try out the new SAP Community Escape Room Challenge. Can't wait for you to see what fun that's going to be. We've got some other great new things planned as well. We've got some new CodeJams on advanced topics that we're working on, and we'll continue to bring you all the same great experiences on the SAP developers YouTube channel that you've come to expect. So we look forward toa great 2025 with you.

[Rekha] Hello, everybody. Are you using SAP BTP or have plans to use SAP BTP in the future, then SAP BTP Discovery Center website is a must-know resource. The Discovery Center has missions with use cases, step-by-step guides, reference architecture, SAP BTPs related details, and information related to newly added SAP Business AI features. A new mission called mastering SAP S/4HANA extensions with SAP Build has been made available in the Discovery Center. Here you find the use case, managing incident reporting and resolution, the SAP BTP services and components that are required to realize this use case. You also get access to SAP expert support and SAP community support while learning about this mission. Do check this out on the Discovery Center. Links are provided in the description box. Keep learning. Thank you.

[Witalij] During the holiday season, I celebrated my birthday on December 23rd. And the SAP HANA product team marked the occasion with a special surprise for me and every one of you, the Q4, 24 release of a SAP HANA Cloud. This release brings a host of features designed to benefit data scientists, developers, and AI engineers alike. The Q42024 release introduces native multi-tenancy at the database level. This allows customer data to be managed in database tenants that share the same database instance while remaining logically separated. Multi-tenancy capability ensures enterprise-grade qualities at the tenant level, including customer-specific encryption, recovery, and resource isolation. With every quarterly release, the SAP HANA Cloud predictive analytics library, or PAL, has been enhanced with new embedded machine learning AI and NLP functions. Key highlights of this release include the introduction of text analysis and text authorization, as well as expanded support for vector data as input for additional machine learning functions such as classification and regression. Among the new calculation view features, the graphical expression editor null offers vector functions as well, such as causal similarity to calculate the similarity between the vectors, as well as the function to create a vector embedding from the text, using the vector embedding function obviously. The new SPL plan advisor enables the identification of performance issues in deviating SQL statements. It detects and optimizes SQL performance by comparing execution engine plans. By automatically testing and comparing execution performance across different plans, the advisor recommends and applies optimized execution plans for improved SQL performance. As always, be sure to check the blog posts from SAP Product Managers for all the details. Links are provided in the description. Wishing you a peaceful 2025. Bye. Bye.

[DJ] 2024 was a great year for SAP and the Open Source Program Office and their activities. They've just published the Open Source Program Office and their activities. the SAP Open Source Report 24, which has some great insights as well as listing many of their accomplishments. And having read that report myself, I come away with the key concepts being all about people, community, commitment and collaboration. Basically, it's all about working together in the ecosphere. Anyway, there's a blog post from Ulrika about. the report and also the report itself linked both in the description. Happy reading.

[Nico] Hi everyone and welcome to the SAP developer news. You would like to point your attention to a cool video from the UI5 core team about the UI5 Web Components 2.x release, including the new popover API, new AI components, and the enhanced toolkit. So go check it out and hope to see you soon.

[DJ] We just wanted to let you know that right now we're running a new three-part live stream series on the Hands on SAP Dev show on our YouTube channel, all about CAP Node.js plugins. We had part one last week, which was all about understanding how the plug-in mechanism works. Part two is this week where we learn to all about understanding how the plug-in mechanism works. introspect our service in the CDS repel and the final part three is next week where we actually use the knowledge we've gained in the first two parts and write our plugin. Anyway, there's a link to a series post in the description to this video. In that series post there are links to the live streams, the replays and also to the accompanying blog posts. See you online. Thank you.

SAP Developer Challenge - SAP Community Escape House - UI5

2025-01-13T00:00:00.016000+01:00

The new year starts with a brand new SAP Developer Challenge! The Developer Advocates have created the SAP Community Escape House - a virtual escape house (consisting of multiple rooms) that you can play in your browser. Read on for all the details.

SAP Developer Challenges are all about having fun, trying new things, and learning along the way. You can also earn a badge in the SAP Community upon successful completion. For this year, all SAP Developer Challenges will happen in the SAP Community Escape House. For each challenge we will unlock a new room in the house, and they all have a specific focus topic. Completing a challenge means successfully escaping the room by solving a series of coding-related tasks. The first room we unlocked for January (see schedule below) is about UI5, more specifically about how to scaffold a UI5 application using the command line.

How to participate

Visit the SAP Community Escape House and enter your numeric SAP Community user ID. If you don't know your user ID, go to your SAP Community profile. You can find the numeric ID at the end of the URL.

Once you see the SAP Community Escape House, select the UI5 room and start exploring it.

The user interface of an escape room includes the room itself as well as a terminal. You can click the objects in the room to receive tips. Like in a real (physical) escape room, you will have to try out a few things and explore the room until you receive helpful tips and eventually instructions. These tips and instructions are printed in the terminal next to the room. The terminal is also used to submit solutions to tasks. Read the instructions you receive carefully to understand how.

If you successfully escape the room (you will know when that happens), you will receive a badge in the SAP Community. We will assign the badges once the challenge closes.

The schedule

The UI5 room was unlocked on January 13th and will stay unlocked until the end of the year. However, the challenge closes on January 31st, so you will have to escape the room until then to qualify for a badge. Unlike the previous year, this SAP Developer Challenge does not consist of weekly sub-challenges. The next room (next challenge) will be unlocked in February.

Good luck and happy escaping!

SAP Fiori development newsletter January 2025 (issue #32)

2025-01-13T21:39:55.968000+01:00

Happy New Year!

Based on what we are seeing in the early days of the year, it promises to be a busy one. SAP is continuing to roll out more AI tools to make it easier to develop applications. To keep you informed, we have our first SAP Fiori Innovation Day of 2025 in Palo Alto on February 5.
https://events.sap.com/sap-fiori-innovation-day-2025/en/home
If you cannot attend, we will have more events in other locations during the year.

For ongoing updates, I encourage you to join our monthly SAP Fiori development roundtable. You can meet online with fellow developers and the SAP engineers who build our professional development tools. Register online or email me for an invitation. Our next meeting is Wednesday, February 12, 2025.

If you prefer to receive this in your inbox, please subscribe to the SAP Fiori development newsletter.

Development News

SAP Fiori tools 2411 update: enhanced full-stack development, AI integration, and more open source

The latest release of SAP Fiori tools introduces several new features that bring together frontend and backend development, expand AI-driven capabilities, and further our journey towards open-source integration. Here’s a look at what’s new and what you can expect.

https://community.sap.com/t5/technology-blogs-by-sap/sap-fiori-tools-2411-update-enhanced-full-stack-development-ai-integration/ba-p/13929515

SAP Fiori tools 2501 update: elevating development with AI, usability, and flexibility

The latest enhancements in SAP Fiori tools focus on leveraging AI, simplifying the user interface for adaptations, and improving the overall usability of the tools. This post explains what they mean for your SAP Fiori development experience.

https://community.sap.com/t5/technology-blogs-by-sap/sap-fiori-tools-2501-update-elevating-development-with-ai-usability-and/ba-p/13968245

SAP Fiori elements extension: upload Excel files to create new entries using building blocks

This post guides you through the process of implementing an SAP Fiori elements application by leveraging the newly released SAP Fiori elements field building block, which simplifies the implementation compared to the previous method.

https://community.sap.com/t5/technology-blogs-by-sap/sap-fiori-elements-extension-upload-excel-files-to-create-new-entries-using/ba-p/13943173

Joule to migrate SAPUI5 apps to TypeScript

As you probably know, Joule helps writing freestyle SAPUI5 code in SAP Build Code. Joule's latest feature offers an AI-driven migration of UI5 applications to TypeScript, which, compared to JavaScript, enables an improved development efficiency. See the details in https://community.sap.com/t5/technology-blogs-by-sap/sapui5-meets-typescript-a-smooth-migration-journey-with-joule/ba-p/13958872

Building SAPUI5 Apps for SAP Build Work Zone

This new guide gives a lot of technical insights into SAPUI5 apps running on SAP BTP: You will learn how to structure complex SAPUI5 applications to avoid common pitfalls, how multiple apps work with a shared reuse library and how to integrate business solutions as content providers into SAP Build Work Zone.
https://community.sap.com/t5/technology-blogs-by-sap/designing-ui5-apps-as-business-solution-for-sap-build-work-zone-part-1/ba-p/13923459

SAPUI5 flexibility to adapt standard SAP apps

SAPUI5 flexibility provides features to align with a clean core approach with on-stack extensions. SAP standard apps remain untouched, no modifications are needed, and even predefined extension points are unnecessary.
https://community.sap.com/t5/technology-blogs-by-sap/extending-sapui5-apps-adaptation-projects-vs-extension-projects/ba-p/13961264

AI is NOT invited to our meetings

In our monthly SAP development roundtable several people have been recording our calls and generating AI summaries. We have received some complaints. Going forward, we ask that you don’t do this. Our goal is for everyone to share openly. Having a recording and/or transcript might prevent this. If we demo something new and exciting, we’ll create a recording to share. Otherwise, please do not invite your AI or chatbot to join. People only!

SAP S/4HANA extensibility: A holistic summary

This series of articles is a holistic summary of extensibility with SAP S/4HANA. It captures the challenges and shows the essence of what we do at SAP, together with partners and customers (beyond providing the business solutions of course).

https://community.sap.com/t5/technology-blogs-by-members/why-s-4hana-extensibility-options-are-crucial/ba-p/13921038

SAP Build Code updates

Read about the latest updates to SAP Build Code. There are enhancements for experts, beginners, and everyone in between.

https://community.sap.com/t5/technology-blogs-by-sap/product-updates-for-sap-build-code-november-2024-edition/ba-p/13948533

Behind the curtain on our development processes

SAP UX Engineering is moving from traditional scrum/agile to a product-oriented model. This will redefine how we deliver value. Scrum has brought structure and efficiency, but we are now bringing together teams comprised of Product Management, Engineering, and Design. This will all us to focus on what matters most: customer outcomes over feature output or velocity. Read the first post of the 4-part series

https://www.linkedin.com/pulse/why-ux-engineering-changing-sebastian-steinhauer-pkofe/

Events

SAP Fiori Innovation Day Silicon Valley on Feb 5

New innovations make the user experience for SAP S/4HANA intuitive, modern, and highly configurable. People have the information they need at their fingertips and can collaborate with colleagues to make better decisions. It’s easier than ever to adapt apps to meet your needs or to create new ones using our powerful and easy-to-use tools.

In this full-day workshop, we will cover:

SAP’s UX strategy and how it is evolving to fulfill the promise of the intelligent, collaborative enterprise
Extending SAP S/4HANA while keeping a clean core
Building apps using the latest tools and technologies – the same ones SAP uses to build apps for SAP S/4HANA, including a hands-on session
How to move your organization forward, including how to take advantage of AI for developing applications

If you can't make it to Palo Alto, where should we have our next SAP Fiori Innovation Day?

We are planning our 2025 SAP Fiori Innovation Day schedule. Please let us know in which location you might be interested in joining us.

We will not have events in every location, but we want to get a sense of where you are willing to travel to learn about SAP Fiori app development (see topics above).

https://events.sap.com/sap-fiori-innovation-day-2025/en/home

SAP Fiori Innovation Day Heidelberg recap

SAP Fiori Innovation Day in Heidelberg was a full day of learning, networking, and fun. Read about what you missed. Hope you can join us next time.

https://community.sap.com/t5/enterprise-resource-planning-blogs-by-sap/sap-fiori-innovation-day-in-heidelberg-focused-on-using-ai-to-make-apps/ba-p/13949089

ASUG Annual Conference call for papers is now open

SAP Sapphire is scheduled for May 19-21, 2025. If you want to speak at the ASUG Annual Conference, their call for papers is open until February 14. Details on their site:

https://www.cvent.com/c/abstracts/71738f29-f5f6-4b3d-9738-ae643a743457

Back issues from the past year

SAP Fiori development newsletter November 2024 (issue #31)

SAP Fiori development newsletter September 2024 (issue #30)

SAP Fiori development newsletter July 2024 (issue #29)

SAP FIori development newsletter May 2024 (issue #28)

SAP Fiori development newsletter March 2024 (issue #27)

SAP Fiori development newsletter January 2024 (issue #26)

3/3 From JavaScript to TypeScript: The Shocking Results of Our SAPUI5 Transformation

2025-01-14T16:25:23.164000+01:00

In the first two parts of this series, we explored why we transitioned to TypeScript and how we structured the adoption process for our SAPUI5 applications. Now, in this final part, we’ll evaluate the results of this shift and discuss how TypeScript has fundamentally transformed not only the quality of our applications but also the efficiency and productivity of our development team.

What TypeScript Has Brought to Our Development Process

The transition to TypeScript has proven to be a game changer, delivering improvements on multiple fronts. Let’s break down the key areas where we’ve seen tangible benefits:

1. Dramatic Reduction in Bugs

With TypeScript’s static typing and robust type checking, we’ve eliminated 35–45% of errors in our applications. These were primarily the kinds of technical bugs that often led to runtime crashes, frozen interfaces, or non-functional features. Now, the vast majority of reported issues pertain to business logic, such as missing inputs or incomplete processes, rather than underlying technical faults.

This shift allows us to focus our efforts on collaborating with clients to refine their workflows rather than troubleshooting application failures.

2. Increased Team Efficiency

One of the most immediate and measurable impacts of adopting TypeScript has been the boost in our team’s efficiency. Here’s why:

Autocomplete and IntelliSense: Developers now benefit from features like autocomplete, which provide instant suggestions for available properties, methods, and data types. This not only reduces the time spent referencing documentation but also ensures that the code being written is accurate and complete.

const user: User = {
  id: 1,
  name: "John Doe",
  email: "john.doe@example.com",
};

// Autocomplete helps ensure property names and methods are correctly used:
console.log(user.email); // Suggestions for 'id', 'name', 'email' appear instantly.

Faster Development: With TypeScript guiding developers and preventing many errors at compile time, the need for extensive debugging is reduced. This means more time spent on new features and improvements, rather than firefighting bugs.
Simplified Maintenance: TypeScript’s stricter structure makes the codebase more predictable and easier to navigate. As a result, maintaining and extending our applications has become far less time-consuming.

3. Improved Application Architecture

TypeScript encourages a more thoughtful approach to designing applications. With tools like interfaces, enums, and generics, we can define clear data models and relationships, making our applications more robust and easier to extend in the future. For example:

Better modularity: We’ve been able to break down applications into smaller, reusable modules.
Scalability: The strong typing system ensures that as our applications grow, the structure remains sound and consistent.

Practices That Ensure Long-Term Success with TypeScript

To maximize the benefits of TypeScript, we’ve implemented several key practices:

Centralized Declarations: All type definitions, enums, and interfaces are stored in a single declarations file to maintain consistency and ensure changes propagate across the codebase.
Avoid Overusing Type Assertions: We explicitly account for undefined or null values, preventing errors caused by assumptions about data availability.
Ban on the any Type: Using any is strictly prohibited as it negates the advantages of static typing. Instead, we leverage generics and proper type definitions to ensure flexibility without compromising safety.
Thoughtful Code Reviews: Our reviews now emphasize adherence to TypeScript’s principles, such as avoiding unnecessary complexity in type definitions or ensuring proper handling of edge cases.

OpenAI. (2025). A cartoon illustration of a software web developers avoiding any keyword in TypeScript [AI-generated image]. DALL-E

General Outcomes: A More Effective and Resilient Team

The move to TypeScript has had a profound impact on how our team works. Here’s a summary of the key outcomes:

Higher Productivity: By eliminating many common sources of bugs, our team spends significantly less time on reactive tasks like debugging and maintenance. This allows us to focus on proactive work, such as new feature development and optimizing business processes.
Faster Development Cycles: Autocomplete and intelligent type checking accelerate coding, even if TypeScript’s syntax is occasionally more verbose. This faster pace has enabled us to deliver solutions more quickly and with greater confidence.
Better Client Collaboration: With fewer technical issues to address, we can work more closely with clients on refining their requirements and ensuring our applications align with their business goals. This has strengthened relationships and opened doors to new opportunities.
Future-Proof Applications: TypeScript has made our applications more robust and scalable. Its strong typing system ensures that as our solutions evolve, they remain easier to maintain and extend.

Conclusion: A Transformative Shift for SAPUI5 Development

Transitioning to TypeScript has fundamentally transformed our approach to development. By reducing errors, improving productivity, and fostering a more resilient architecture, we’ve not only improved the quality of our applications but also elevated our team’s effectiveness.

This journey has shown us that adopting modern tools like TypeScript is more than just a technical upgrade—it’s an investment in the long-term success of our team and our solutions. The efficiency gains, combined with the trust and confidence we’ve built with our clients, have set the stage for continued growth and innovation.

OpenAI. (2025). A cartoon illustration of a software web developer handing over application created in TypeScript technology [AI-generated image]. DALL-E

Join the Discussion

Have you implemented TypeScript in your projects? How has it influenced your team’s workflow and application quality? Share your experiences in the comments — we’d love to hear your insights and ideas as we continue to learn and improve together. Let’s shape the future of SAPUI5 development as a community!

SAP Developer News, January 16th, 2025

2025-01-16T21:10:00.023000+01:00

Podcast: https://podcast.opensap.info/sap-developers/2025/01/16/sap-developer-news-january-16th-2025/

DESCRIPTION

Upload Files from Build Apps to DMS, DOX and Other Services

Video #1: Set Up SAP Build Apps to Work with DMS – https://youtu.be/lhBB2mM9Nho
Video #2: Call DMS from SAP Build Apps – https://youtu.be/SJt_BzctwbI
Video #3: Upload a File from Build Apps to DMS – https://youtu.be/gIW_tHOaNuY
Free DMS projects: https://github.com/sap-tutorials/sap-build-apps/tree/main/projects/dms
Document Management Service Playlist: https://www.youtube.com/playlist?list=PL6RpkC85SLQCsKSvIOqMzFKW30B4TKXh-
Ming Kho’s blog post on Build Apps and DMS: https://community.sap.com/t5/technology-blogs-by-sap/sap-build-apps-upload-files-to-sap-document-management-service-dms/ba-p/13963628
Ming Kho’s blog post on Build Apps and DOX: https://community.sap.com/t5/technology-blogs-by-sap/sap-build-apps-upload-files-to-sap-document-information-extraction-dox/ba-p/13964007

CAP December 2024 Release

Release notes https://cap.cloud.sap/docs/releases/dec24

Joule ABAP Developer Capabilities Early Adopter Program

https://influence.sap.com/sap/ino/#/campaign/3822

How to implement "readonly : update" for draft instances

https://community.sap.com/t5/technology-blogs-by-sap/how-to-implement-quot-readonly-update-quot-for-draft-instances/ba-p/13981904

SAP Fiori Innovation Day & UI5 Road Map 2025

SAP Fiori Innovation Day Silicon Valley: https://events.sap.com/noam/sap-fiori-innovation-day-silicon-valley/en/home
UI5 Road Map Explorer: https://roadmaps.sap.com/board?PRODUCT=73554900100800001361&range=CURRENT-LAST#Q1%202025

CHAPTER TITLES

0:00 Intro
0:10 Upload Files from Build Apps to DMS, DOX and Other Services
1:51 CAP December 2024 Releas
5:06 Joule ABAP Developer Capabilities Early Adopter Program
6:02 How to implement "readonly : update" for draft instances
6:58 SAP Fiori Innovation Day & UI5 Road Map 2025

Transcription

[Intro] This is the SAP Developer News for January 16th, 2025.

[Daniel] SAP Build Apps has just released a new flow function that lets you upload documents to the BTP Document Management Service, the document information extraction service, or any service that requires a binary upload. Minko, a developer at SAP Build Apps, created the HTTP Destination and request flow function, which takes a multi-part request body and lets you specify a destination, both of which enable you to upload to the services. He has written two blogs, one on using it with DMS and one on using it with DMS, but I want to point out that I've just released three short videos on how to use this flow function with build apps and DMS, and I want to point out that I've just released three short videos on how to use this flow I've released an entire application that lets you navigate through a DMS repo. So it will list all the documents in the root or any folder in the DMS repo, let you upload documents, let you create folders, and let you delete folders and documents. All you need to do is attach your destination to your DMS repo. And I want to point out that we also have a playlist dedicated just to the document management service. It has videos on setting up DMS, unrelated to SAP Build, as well as how to use it with process automation, and build apps. Links to all of that content are in the description.

[DJ] While most of us were taking some time off over the holiday period recently, the CAP team has kept on working and put out another regular monthly release. December 24 of this. As usual, there are plenty of highlights, some of which I want to bring to your attention here. There are so many I've actually got a list and a read through. Got some notes. And this also sees CAP Node.js at 8.6 and CAP Java at 3.6. Okay, so what have we got? There are changes and improvements in the CDS language and compiler area, specifically For example, a completely rewritten CQN specification using TypeScript declaration files, which in turn brings about improved documentation and also some Intellisense operations that are also improved. There's a new beta feature where foreign key elements of managed associations can be explicitly annotated. Moving to the Node.js flavor of CAPs specifically, there are new compiler related life cycle events. They're also in beta. There are some enhancements to CDS Env. These enhancements relate to source formats and profile-specific endv files. And CDSQL has some enhancements. And these enhancements bring about a more robust operation in general and also some new functions for CQN object construction. In the OData arena, there are also some additions and improvements relating to the OData containment feature, and also a move to allow query option-based provision of function parameters, which some of you, I'm sure, will enjoy. In the Java flavor of CAP, there are some important changes in the area of NPM build plugin support, and also the new Calaisi plugin for the document management service is now open source. Last but not least, in the tools area, there are many enhancements to the CDS REPL. Some of you may have seen these enhancements sort of take shape over the course of the first six episodes of the art and science of CAP, a live stream series that we ran recently with the one and only Daniel Hutzl. So I'll put a link to that also in the description to this item, as well as the link to this December 2024. for Capphire release notes, but also for TypeScript developers out there, you can now just use CDS watch to start the server and it will automatically detect a TypeScript project and under the hood it will run CDSTSX for you. There's also more, even more, in this December 2024 release, but I'll leave it to you to go and check out the release notes in Capphire. Until then, see you online.

[Rich] Hey friends, Rich Heilman here. I just wanted to stop in a bit and let you know about the Joule ABAP Developer Capabilities Early Adopter Program for Customers and Partners. That's right, do you want to check out the Bleeding Edge technology helping ABAP developers become more efficient developers? If so, then go to the Influence. site and register for the early adopters program. Registration started on January 15th and will end on February 15th the same day we plan to release to customers. So again, if you are ready to get your hands dirty with AI and using Joule within ADT to help you with ABAP development, then please sign up for this excellent opportunity to try it out, give us some feedback, and make the product better for all. Thanks to ABAP developers, and we'll see you. See you soon. Bye for now.

[Sheena] You might have noticed that when a field is defined as Read Only for updates in a Draft-enabled application, it cannot be edited after an initial value is provided. Andre Fischer in his latest blog post explains how to achieve the editing of such fields in Draft using the dynamic feature control option. For this, just replace the statement read-only update with features instance in your behavior definition. Then in your behavior implementation method, verify whether an active instance of the entity already exists. If yes, the field will be made read only, however, if no active instance exists, the field will remain editable. Please note that this is applicable only when an object is being created as a draft and has not yet been persisted. Check out the details and sample code in the blog post link provided in the description.

[Nico] Hi everyone and welcome to the SAP Developer News. We have some updates in the Fiori and U5 area that we want to put your attention to. First of all, the SAP Fiori Innovation Day happens on February 5th in Silicon Valley. Definitely check it out if you're in the area. AI is going to be a hot topic, there's going to be a partner session, hands -on sessions and an outlook from the Fiori team on what's to come in the future. Check out the link to register in the future. the description of this video. And also related to Fiori, more UI5. The 2025 Roadmap is out now. Go check it out. If you're interested in UI5, there's some interesting items on there, and go follow. All right, check it out. Hope you see you soon. Bye.