Technology Blogs by SAP
Learn how to extend and personalize SAP applications. Follow the SAP technology blog for insights into SAP BTP, ABAP, SAP Analytics Cloud, SAP HANA, and more.
cancel
Showing results for 
Search instead for 
Did you mean: 
OliverGraeff
Product and Topic Expert
Product and Topic Expert
9,886

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:

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

  2. 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.
18 Comments
junwu
Active Contributor
Can't wait to try it.
Frank1
Participant
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
Product and Topic Expert
Product and Topic Expert
Hi Frank,

  1. 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.

  2. 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
Participant
Hi Oliver,

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

Regards, Frank

 
Murilo
Discoverer

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
Newcomer

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...

Tagiltsev_0-1707824467141.jpeg

 

emalelez
Explorer

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
Product and Topic Expert
Product and Topic Expert

Hi Emalelez,

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

Regards,

Hristo

emalelez
Explorer

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:

emalelez_0-1710427289445.png

 

Nicole-A
Newcomer

Hi everybody, 

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

NicoleA_0-1710840876459.png

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. 

NicoleA_1-1710841279261.png

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
Explorer

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
Product and Topic Expert
Product and Topic Expert

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
Explorer

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

Thanks & Regards,

Pavan.

hristotsolev
Product and Topic Expert
Product and Topic Expert

Hi Pavan24,

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

Regards,

Hristo

rkuip
Explorer

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
Product and Topic Expert
Product and Topic Expert

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
Participant
0 Kudos

Hi Experts,

Thanks for your response.

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

Thanks & Regards,

ZFiori.

🙂

 

sensen_wei2
Product and Topic Expert
Product and Topic Expert

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.

sensen_wei2_0-1724319899902.png

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