Introducing SAPUI5 Adaptation Projects in Visual S...

OliverGraeff · ‎2023 Dec 22

SAPUI5 flexibility to adapt standard SAP apps

SAPUI5 is SAP’s strategic Web framework, core part of the SAP Fiori user experience, SAP Build Code and the SAP BTP Developer’s Guide. While SAP delivers many standard SAPUI5 apps, e.g. in SAP S/4HANA, often partners and customers need to tailor the standard to their individual needs. 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 in SAPUI5 Flexibility - All You Need to Know.

Creating adaptation projects in SAP Business Application Studio

SAP Business Application Studio (BAS) is SAP’s tool for professional developers. It provides a turnkey environment, based on industry standards, and is tailored for efficient development in the SAP ecosystem.
Developers can leverage the concepts of SAPUI5 flexibility by creating adaptation projects for freestyle SAPUI5 or SAP Fiori elements apps in BAS. Those projects contain all custom adaptations, which are created in visual or code-based editors of BAS. At the same time, the standard SAP app remains untouched, no modifications are needed, and even predefined extension points are unnecessary. Once tested successfully, the adaptation project is deployed and can be integrated into an SAP Fiori launchpad or other homepages, just like a normal app. See details in SAP Help: SAP Business Application Studio - Extending SAP Fiori Applications.

NEW 👉 Create SAPUI5 adaptation projects in VS Code

Most developers leverage BAS on SAP Business Technology Platform (SAP BTP) as a managed, preconfigured environment, with its tight integration to SAP BTP services and SAP systems. Some developers need an offline IDE to have full control of their local installation, e.g. when there is no internet connection. SAP Fiori tools are available in both, in BAS as well as in VS Code, delivering regular updates and continuous innovations. In the same way, now also adaptation projects of SAPUI5 flexibility can be created in VS Code.

Please note that we are releasing adaptation projects in VS Code in December 2023 as experimental. This means the functionality is not complete, may evolve, and might not have complete documentation. The SAPUI5 team provides this version to receive early feedback from our developer community about creating new adaptation projects in VS Code.

Also note a few restrictions, compared to using adaptation projects in BAS:

Legacy standard apps not supporting adaptation projects have no fallback to extension projects.

Safe mode is not supported

The minimum SAPUI5 version is 1.72. It is planned to soon use a minimum version of 1.71, just like in BAS.

The Preview of an adaptation project opens in a separate browser tab.

There is no automatic update of npm modules for the project.

Nevertheless, adaptation projects created with the new tool in VS Code can be used in productive scenarios.

How to use adaptation projects in VS Code?

See the SAP Help documentation on Adapting an Application. The high-level steps are:

Download Microsoft Visual Studio Code and install SAP Fiori tools (see tutorial).

Launch the command 'Fiori: Open Adaptation Project Generator'.

Adaptation Project Editor

We have also introduced the Application Information page for adaptation projects so you can easily find all the relevant commands and links on one page:

Application Information for Adaptation Projects

Next steps

Independent of this new capability, SAP Business Application Studio remains the strategic direction for professional developers. As soon as this new implementation for VS Code has full functionality (planned for 2024), it will replace the current implementation in BAS.

Stay tuned, the UI5 team is adding full capabilities to the new implementation and plans to deliver a next version soon. For this, the team encourages you to use it and to provide feedback in the comments section below.

junwu · ‎2023 Dec 22

Can't wait to try it.

Frank1 · ‎2023 Dec 23

Hi Oliver,

Good to know adaption project can be created based on the SAP standard Fiori app and it does not matter if it is SAP free style or SAP Fiori Elements app.

Developer Adaptation | SAP Help Portal,

Regarding the above developer adaptation, I have the below questions.

1: It states that can replace the original app OData service("Replacing the OData service of an app"), which kind of scenario needs this? If replace the original OData service, why need to create an adaption and why not create a new app directly with the target OData service? What's the benefit of replacing the original OData service?

2: It states that can add a new OData service("Adding an OData service and a new SAPUI5 model to an app"). I am not sure if this is the best practice, if I remember correctly SAP recommends that within one APP, no more than one OData service.

Any comments are very appreciated. Thank you.

OliverGraeff · ‎2023 Dec 23

Hi Frank,

The scenario could be that you want to leverage the standard SAP Fiori app (UI) and only adapt 'a little', probably related to the (extended?) Data service. If the required UI is far from the standard, a separate custom app might be the better choice.

For performance reasons SAP recommends a single OData service. A specific scenario might need additional considerations, e.g. deviating from the best practice in favour of leveraging more standard and maintain less own code.

Regards, Oliver

Frank1 · ‎2023 Dec 23

Hi Oliver,

Thank you for your fast response. Merry Christmas and Happy New Year.

Regards, Frank

Murilo · ‎2024 Jan 30

That is really great news!!!
Could you please tell me where we can check if SAPUI5 minimum version required already changed to 1.71?

Tagiltsev · ‎2024 Feb 13

Can you please let us know where we can submit different issues regarding this new feature for VS Code? As I am working with a customer without internet access, we are running into some issues...

emalelez · ‎2024 Mar 08

Hi all,

I created an madaptation project with VSCode but when I try to launch the Adaptation Editor i get this error message:

The adaptation project at 'c:\Users\<path of project folder>' does not have a 'start-editor' script in package.json.

I already updated all the libraries but I still have this error. Does anyone else got this?

hristotsolev · ‎2024 Mar 13

Hi Emalelez,

Do you have start-editor command in your package.json file?

Regards,

Hristo

emalelez · ‎2024 Mar 14

Hi Hristo,

thank you for your answer. Maybe you are referring to the commands under the tag "scripts"? I think the answer to your question is "No". This is my package.json file:

Nicole-A · ‎2024 Mar 19

Hi everybody,

unfortunately my editing (and preview) mask is always empty. 😞

After creating the Adaptation Project with the wizzard I noticed that I was missing the .adp folder. (The folder is not hidden either.)

I haven't got any error message by creating the new project.

Does anyone else have the same problem? Is the problem already known? Is there a solution or workaround for this? 🙂

Best regards,
Nicole

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

Update (June 2024)

In the meantime, the problem has been resolved itself through an update of the VS Code extension. 🙂

Pavan24 · ‎2024 Apr 25

Did anyone tried the Adaption process? if Yes, pls attach the Process to Adapt the app and deployment into the System.

Thanks,

Pavan.

@Nicole-A @hristotsolev @OliverGraeff

hristotsolev · ‎2024 Apr 25

Hi Pavan24,

The official documentation for Adaptation Project for VSCode is here: https://help.sap.com/docs/SAP_FIORI_tools/17d50220bcd848aa854c9c182d65b699/802f01cb252746468038b856b...

Regards,

Hristo

Pavan24 · ‎2024 Apr 26

Hi @hristotsolev ,
Thanks for your response . I Have seen this but not able to deploy extended app into launchpad.

Thanks & Regards,

Pavan.

hristotsolev · ‎2024 Apr 29

Hi Pavan24,

Can you please bring more clarity. Do you get any specific error which prevents you from deploying, or what?

Regards,

Hristo

rkuip · ‎2024 Jun 18

Hi,

Connection from VSC (on premisse) backend: okay.

Reading the list of apps available for adaptation: takes quite a long time, but okay

After selecting app I cannot select the SAPUI5 version of the app. Server shows a timeout message in red.

How to remedy this?

Regards, R

hristotsolev · ‎2024 Jun 18

Hi Rkuip,

Unfortunately, this does not sound like a known issue and it might need some debugging to resolve it. Please create ticket for CA-UI5-FL-ADP-VSC and my colleagues will handle it with the needed priority.

Regards,

Hristo

zfiori · ‎2024 Jun 19

Hi Experts,

Thanks for your response.

We've seen this but not able to deploy extended app into launchpad.

Thanks & Regards,

ZFiori.

🙂

sensen_wei2

Hi @OliverGraeff

I tasted adaption project in BAS, it works fine; but later on I open the same project in my local VS code, the preview/visual editor reported error.

It seems authentication problem with Livereload middleware, I tried both authentication method:

Basic - (username/password?) - socket hang up
SAP reentrance tickets - it could not open the url because the server unexpectedly dropped the connection.

Is it because I didn't login the cloud foundry? For some reason my BTP account didn't provide cf api.

Thanks