UI5ers Buzz #55: Adaptation Project - your one stop tool for extending SAPUI5 Applications

[hristotsolev]

 

Whether you have already been using Adaptation Project in SAP Web IDE and want some fresh features, or you are trying to find the right tool to adapt applications to customer/partner specific needs, look no further. It’s all now available at SAP`s brand new development platform – SAP Business Application Studio. By using it, you are leveraging features of UI5 Flexibility and able to adapt and extend UI5 applications without actually changing the base app, which allows seamless upgrades and lifecycle stability. Adaptation project also comes with an intuitive WYSIWYG tooling and is really fun to use and you are able to add both UI and code changes to your own variant of the application.

Except availability on the new platform, there are a couple of new features available:

• Support for extension points – The so-called extension points were previously matter of another plugin – Extension Project. Its abilities are being brought to Adaptation Project, so it becomes the unified one and only tool for extension and adaptation. This feature is also now available in SAP Web IDE and SAP Business Application Studio.


• Support of Freestyle applications – Till now, it was possible to extend only Fiori Elements-based applications, but from now on you have the ability to extend also Freestyle applications. This feature is now available in both SAP Web IDE and on SAP Business Application Studio, as well.

Let’s go over a simple use case of Adaptation Project on the new platform:

1. Create adaptation project using one of the Yeoman generators available in SAP Business Application Studio. The wizard will guide you through the process and you will be asked to add the initial properties of your project – name, source system, base app, etc.


2. You can start the visual editor which will enable you to both preview and edit the application. The possibilities are the same for both SAP Fiori elements-based and Freestyle applications and you can extend them in the same manner – you can adapt UIs, e.g. add/move/remove fields, rearrange sections or even embed iframes, change control properties, extend i18n texts, add custom content via XML Fragments, etc. You can extend also controllers by using the right-click option “Extend with controller".


3. It’s also possible to use extension points (if the base app has such). XML Fragments can be added using the “Add Fragment at Extension Point” option from the context menu, when right-clicked over an extension point.

 

From now on you can use Adaptation Project to benefit from these great capabilities.

 

You can also take a look at these great posts that explain the broader idea of extending applications with Adaptation Project and give practical example of controller extension:

Extending SAP-delivered SAP Fiori elements apps using adaptation projects to create SAP S/4HANA app ...

SAP Fiori Elements: Adaptation Project – Adding a Custom Filter to the List Report

 

For the complete set of features and technical details you can always refer to the official documentation pages:

Adaptation Project at SAP Web IDE

Adaptation Project at SAP Business Application Studio

Update 14.06.2021: SAPUI5 flexibility offers capabilities for developers, key users and end users to adapt SAPUI5 applications. This includes the creation of adaptation project in SAP Business Application Studio. The prerequisites are given in Create an Adaptation Project, the technical prerequisites for the respective apps are described in SAPUI5 Flexibility: Enable Your App for UI Adaptation. Very few standard apps from SAP are missing these prerequisites and SAP is working on providing these. Until then you can continue to use an extension project in SAP Web IDE, personal edition or in your productive SAP Web IDE Full-Stack.

 

Previous Post: UI5ers Buzz #54: I18n with supportedLocales and fallbackLocale configuration

 

Author

hristotsolev is product owner in CP Extensions team and the Flexibility area. Always looking to improve the customer experience.

 

 

[motiononme1]

Hi hristotsolev ,

Thank you for the post.

I am facing 2 major problem while developing and hope you can provide with some suggestiong.

1. Cache issue, If I do some changes in custom fragment and if I close the "SAPUI5 Visual Editor" and reopen it, the changes are not not reflecting.


2. Is there any better way to refresh "SAPUI5 Visual Editor" , instead of we closing each time. This steps slows down the process and resulting in more time consumtion.

And Please let us know, if there is any possibility of releasing this feature in VS-Code, as BAS take more time for each and every activity. Can you please share us the road map plan.

Regards,

Sandeep

[hristotsolev]

Hi Sandeep,

On the points:

1. There should not be such issues, and if there are it means its a bug. Please, if you can reproduce it, create a ticket for it and it will be resolved with the needed priority.


2. There is a functionality for a restart which is being developed right now and will be made available soon. Also, have in mind that you do not have to restart the visual editor each time, you need to restart it only when you want to view the changes that you have done (i.e. not needed after adding of each fragment, you can finish all your coding and then restart).

Regards,

Hristo

[adamharkus]

HI hristotsolev

Using BAS to try and create an adaptation project for a freestyle app on Cloud Foundry.

I'm getting the following message when trying to select the MTA file

No adaptable business services found in the MTA.

Full details here:

https://answers.sap.com/questions/13599188/can-i-create-a-cloud-foundry-adaptation-project-fo.html

Any ideas?

[hristotsolev]

Hi Adam,

Freestyle applications are available for adaptation if they reside on ABAP On-Premise system. If you want to adapt an application which resides on Cloud Foundry, as you have found it in the documentation, this should be app either developed by SAP or SAP Partner and exposed as business service.

Regards,

Hristo Tsolev

[adamharkus]

Thanks for confirming hristotsolev

[joanzhu]

Hi Hristo,

Thank you very much for sharing the helpful information.

I'm trying a adapt the UI for fin.ap.supplierlist and had the following 403 error when open the visual editor.

Console Log

Based on KBA 3093518, I've already changed the "ui5Version" to "1.71.43" in config.json file, but it still has the error.

Could you please kindly help check the reason?

[hristotsolev]

Hi Ying,

The screenshot with the big error is showing problem which should NOT prevent you from loading the Visual Editor, i.e. the 403 problem is NOT connected with it in any way. This 403 error should be visible in your chrome network tab in a different request, try to look for it and share what is it. This is most probably because somewhere, some rights are lacking for the user used for connection to that system, but I cannot do a solid statement prior to seeing the actual failing request.

Regards,

Hristo

[joanzhu]

Hi Hristo,

Thank you so much for your kind reply.

I got several network errors when I load the page, but when I right click "manifest.appdescr_variant" and choose "Open SAPUI5 Visual Editor", there's no additional network error.

Besides, I wonder why my project doesn't have a manifest.json file which is supposed to be automatically created. I got the following error when I tried to build it.

Looking forward to your reply. Thanks again!

[hristotsolev]

Hi Ying,

If there are no network errors, then this is not a known issue and it will have to be investigated deeper from our team. Please create a support ticket for the following component: CA-UI5-FL-ADP-BAS.

On your next question:

Adaptation Project does not have manifest.json file, and while it does have its kind of similar file called manifest.appdescr_variant), but you do not manifest.json, because there is no need to build the project prior to using it in the Visual Editor or deploying. You can use it for preview/development/deployment just as it is.

Regards,

Hristo

[joanzhu]

Hi Hristo,

Thank you very much for your reply. I've created a ticket "188687 / 2022 403 error when open SAPUI5 visual editor" as you advised.

[luc_olivier2]

Hi Hristo,

We started to extend the app F1852 (Manage Sales Quotations) in our on premice S/4 Hana 2020 FPS01 using SAP BAS (SAP BTP).

We created the Adaptation app based on the standard app using the standard CDS C_QuotationWl_F1852 using a Custom CDS Extension (Fiori Element App). We can see the new fields and Filters in the Visual Editor.

But when we want to modify the existing Filters, we cannot click on them, we can only select the FilterGroup to create a new Fragment or a Controller extension.

Is it the normal behavior or is there something wrong ?

Previously in SAP Web IDE, we could select every field and change some properties, even do some OData Bindings. It seems also there is no more Local Annotations Editor ?

Are there other “limitations” comparing the new BAS Adaptation to the “old” Web IDE?

Did we miss something?

Thanks for any help,

Luc

[former_member709788]

Hi Hristo Tsolev,

When I click on "Edit" button It stops loading and also I can see the popup information as below

"You have higher layer changes in the app. In UI Adaptation mode, the app will reload without those changes"

Note: I am facing this issue in SAP Web IDE Full stack account.

Please find below the Fiori Application details:

My Travel Requests (Version 2)

App ID: F0409A

Application Component : FI-FIO-TV-MTR

Please let me know If there is any support Ticket for this issue.

Issue

[hristotsolev]

Hi Luc,

 

If you need to adapt the customFilterBar, I think that this is doable from 1.95 UI5 version and above. The available options for adaptation depend on each of the controls themselves. You can check in their  documentation for each and every control what features are adaptable (and from which UI5 version).

 

About the Local Annotations Editor - I guess you are comparing Adaptation Project with Extension Project from WebIDE? In Adaptation Project annotations can be added using this (at least currently)  method : https://help.sap.com/viewer/584e0bcbfd4a4aff91c815cefa0bce2d/Cloud/en-US/ef009e3d533940f6b93b6996af4...

 

Regards,

Hristo

[luc_olivier2]

Hi Hristo,

Thanks a lot for the fast answer!

I just checked and our S/4Hana has a SAP UI5 version of 1.84.1. Then no chance to adapt the customFilterBar if I understand well. That's clear for the Controls' Documentation, we will do it.

Yes, I was comparing to what we did 3 years ago for another customer. It was very convenient to use the Local Annotation Editor. I checked your link and I feel it will be less user friendly. Pretty sure, it will be better soon.

Regards,

Luc

 

[arorasar]

Hello hristotsolev ,

We are facing one issue while opening an Adaption project in Visual Editor in BAS.

We have one application "Manage Purchase Requisition Professional" (F2229) and we want to add one facet using adaption to that application so for doing so when we open the app in Visual Editor and when we navigate to the Object Page where we want to add the facet we are getting the below error message.

Error

It seems that this project is using a reusable library and since we do not have that library cloned in  our workspace ( we do not have the GitHub repo for the library to clone ) it is not able to find it and hence it is throwing this error.

Could you please suggest how should we proceed further?

Thanks & Regards
Sarabjit Singh

[hristotsolev]

Hi,

 

This behavior is not expected. Can you please create a ticket for CA-UI5-FL-ADP-BAS component. We will need to investigate it further in order to resolve it.

 

Thanks,

Regards,

Hristo

[Rakesh_Kr]

Hi Hristo,

I am trying to create an adaptation project for standard fiori app "Run Outbound Process - Deliveries" (F1704), however I can't do it as it's showing below error.

I understand the prerequisite for adaptation project required a manifest.json file and flex enabled property to true, but here it's a standard project, and i don't see any way to do changes to standard project files from BAS.

Please suggest.

adaptation project

Thanks,

Rakesh

Adaptation Project Error F1704

[hristotsolev]

Hi Rakesh,

Unfortunately, if the application has no manifest.json file or the property flexEnabled is set to False, this application is not supposed to be used at all with Adaptation Project.

Regards,

Hristo

[Rakesh_Kr]

Hi Hristo,

Thanks! for the quick feedback. In SE80 i can see manifest file exists in standard bsp "EWM_SODLV_MANS1" for F1704, but flex enabled is set to false.

My question here is, can we change this property from customer side, if the requirement can be fulfilled using extension? or does it simply mean we can't extend it?

Thanks,

Rakesh

adaptation project_SE80

[hristotsolev]

Hi Rakesh,

if this property is set to False it generally means the application developers didn't meant for the app to be adaptable. So, most likely, it will not work as you would hope if you just change it manually. Maybe it is worth checking with the application team (i.e. creating a ticket for them) to check if they had any specific precautions for setting flexEnabled to False and if they have plans to make it adaptable.

Regards,

Hristo

[Rakesh_Kr]

Thanks! hristotsolev for the response. I have raised with SAP for the same.

[lfrey91]

Hi Hristo,

we try to extend the app F1813.
We do this in BAS with the Visual Editor.

We could delete most of the Buttons, but "Versionsstückliste anlegen" and "Version anlegen" couldn't be deleted. After set Visual to false or delete. It comes back by the next preview. (There is no Errormssg. )

So we checked the code of the standard app and found that the visibility is set from a model, which is set hard on true in the coding.

We tried now to override this coding by adding a Controller by Visual Editor "Extend with Controller".

But after deploying the coding is not called. We debugged it.

thanks for your help!

Luis

[hristotsolev]

Hi Luis,

the controller not being called should not happen and it does not seem like a known issue. Can you please create a ticket for our component: CA-UI5-FL-ADP-BAS and my colleagues will investigate it with the needed priority.

Thanks,

Regards,

Hristo

[lfrey91]

Hi Hristo,

thanks for your fast answer.

we created an incident with the nr.: 002075129400006914102022

if this makes it faster. 🙂

thanks

by Luis

[hristotsolev]

Hi Luis,

Thanks, we are on it.

Regards,

Hristo

[lfrey91]

Hi Hristo,

sorry but i think we made something false.. ok.. the visibility is hardcoded.. i dont know if this is realy required / desired.

we forgot to add the "override"

than we can add:

"this.getView().getModel("ListViewJson").setProperty("/VersionVisibity", false)"

in onAfterRendering..

bye Luis

[hristotsolev]

Hi Luis,

I am glad you found the solution 🙂

Regards,

Hristo