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.

 

 

[pieterjanssens]

Good to hear!

 

Is it on a public roadmap? If so, could you provide a reference to it?

 

Regards,

 

Pieter

[hristotsolev]

Hi Pieter,

 

Unfortunately, not officially yet.

 

Regards,

Hristo

[mhappe]

Hello hristotsolev ,

 

We have an issue when extending a freestyle app using an adaptation project using Business Application Studio. Our UI5 version is 1.78.20

 

When adding a fragment using an extension point no additional changes file is created:

A new fragment file is created:

But no additional changes files to link the newly created fragment to the extension point.

What is going wrong here?

 

Thanks in advance!

 

Mattijs

[hristotsolev]

Hi Mattijs,

This does not look like a known issue - can you please submit support ticket to CA-UI5-FL-ADP-BAS component, so you can provide more details about the system/app/setup, etc. Your ticket will be handled right away by our support team.

Regards,

Hristo

[former_member755551]

Dear Hristo Tsolev ,

Do you know how to open the existing SAP UI5 application(e.g. BPC4WEBCLIENT) on the bw4 system using VS code? Many thanks.

Regards

Min

[hristotsolev]

Hi Min Zeng,

If you mean to open this app as basis for SAPUI5 Adaptation Project - It cannot be done in VSCode - Adaptation Project plugin is not yet available for it. You can use it in SAP Business Application Studio for now.

 

Regards,

Hristo

[rdvnatcnibm]

Hello hristotsolev and gurusingh

were you able to resolve this issue or is there a support ticket (couldn't find one)?
I am coming across this error everytime I am trying to open the visual editor in the adaptation project.

Thanks and regards,

Ridvan

[former_member714823]

Dear Hristo Tsolev,

 

Can you please help me out deploying the design time adaption projects to on-premise system.

Thanks and Regards,

Karteek

 

[hristotsolev]

Hi Ridvan

Can you show some screenshot of your browser console, when the visual editor is stuck ?

Regards,

Hristo

[hristotsolev]

Hi Karteek,

Have you checked the official documentation page for that ?

https://help.sap.com/viewer/584e0bcbfd4a4aff91c815cefa0bce2d/Cloud/en-US/420da4b6a7f047eea57608b0d37...

Regards,

Hristo

[davide-grosso]

Hi,

I'm using Sap Business Application Studio on Cloud Foundry enviroment with a trial user.

I created Dev space giving all the available tool for SAP Fiori but The Yeoman Generators is not  available from menu.

What I need  to do to  install it ?

thanks  and regards,

Davide

[hristotsolev]

Hi Davide,

Can you try accessing the generators from View/Find Command -> Open Template Wizard . There you should see all the available yeoman generators.

Regards,

Hristo

[davide-grosso]

Hi Hristo,

there  is an "Adaptation project" but it seems to me that  is a litte  bit difficult.

It ask  to  indicate an "MTA Project" and then a service name. It seems to me that is different from the Yoman template that I see in other tutorial(that are more simple, they ask only the application name that you want to adapt and the namespace ).

Is it  the  correct one ?

thanks and regards,

Davide

[hristotsolev]

Hi,

You should choose your TARGET environment to be ABAP, and you will have the same experience as shown on tutorials. When you have chosen Cloud Foundry in the first step, you had chosen the path in the wizard for CF, so it has different steps.

Regards,

Hristo

[davide-grosso]

Hi Hristo, thank you very much,

Davide

[rdvnatcnibm]

Hi Hristo,

this is all I have. It gets stuck in the loading screen when trying to adapt the app "Manage Business Partner".

[jorgecarvalhoaw]

Also facing the same issue with the same app on my system.

Just to add to that, the other day I've tried to extend "Manage Prices - Sales" app, and when I added the extension controller, after this loading screen that says "loading with controller extension" it looks the extension faces an error and nothing is shown afterwards. If I remove the controller it works again.

[hristotsolev]

Hi Ridvan,

 

Can you please show a screenshot of the console of the browser developer tools (where the javascript errors are displayed), so I can try to diagnose what are the problems that might lead to such hanging.

 

Regards,

Hristo

[hristotsolev]

Hi Jorge,

 

Also, can you please show the browser console so I can see what errors are being displayed there and check for possible solution or diagnose?

 

Regards,

Hristo

[jorgecarvalhoaw]

Hi Hristo,

thanks for your reply!

Sure, related with the BP I have this:

For the Manage Prices - sales, I got this:

This last one happens due to this line here: var oExtensions = this["_sapui_Extensions"]; returning undefined.

 

Thank you and Regards,

Jorge

[rdvnatcnibm]

Hi Hristo,

here is the output of the console.

Thanks,

Ridvan

[hristotsolev]

Hi Jorge,

that does not seem like a common problem and need to be investigated further. Could you please submit support ticket to CA-UI5-FL-ADP-BAS.

Regards,

Hristo

[hristotsolev]

Hi Ridvan,

This error should not prevent Visual Editor from loading, it might just get some text not translated in the right manner.

So, there should be another error, can you also show screenshot of the network tab of the developer tools, and more specifically of the requests there that didnt get completed.

Regards,

Hristo

[rdvnatcnibm]

Hi Hristo,

although there are lot of errors in the network tab, the SAPUI5 Visual Editor loads in "Preview".

It only stops loading when I click on "Edit" mode on the top right corner. I also get the Information popup saying

"Higher-layer changes are available for this app. In UI adaptation mode, the app will not reload without these changes."

 

I have attached the according screenshots.

Thanks for your support,

Ridvan

[former_member770907]

Hi Hristo,

I have already created the Adaptation in my BAS Account. The Project only has  "manifest.appdescr_variant: file Only. When i Try to Run the OPEN SAP UI5 Visual Editor Command, I am getting Below Error.

"An error has occurred: Error: Request Failed: Forbidden URI: /destinations/DEW/sap/bc/lrep/appdescr_variant_preview/"

Any Idea on how to rectify it? It will be Great help.

 

Thank You,

Kumaran M

[hristotsolev]

Hi Kumaran,

Please check if you have access to these:

https://help.sap.com/viewer/825270ffffe74d9f988a0f0066ad59f0/CF/en-US/5c3debce758a470e8342161457fd6f...

Also check if you have access to 'sap/bc/lrep/'. 

You should have access to this paths in order to use the Adaptation Project and its Visual Editor.

Regards,

Hristo

[former_member770907]

Hi Hristo,

I forgot to update the Issue was resolved. it was my company Policy which blocked the Odata Call at the time of Opening SAP Ui5 Visual Editor. its cleared now.

Currently i am trying to Extend a Standard Fiori Application in the Business Application Studio. i can't see any option to create a new Extension project, instead i am choosing to go with Adaptation project. There i am finding Issue to modify the Existing View & Controller Files. I can't Access any of it. i can't run the Application in the Browser. Its only opened in SAP Ui5 Visual editor. Can't debug any changes i made. You have any Blogs or reference on that? it will be a great help.

 

Thanks,

Kumaran M.

[hristotsolev]

Hi Kumaran,

Extension Project is no longer supported in BAS and the Adaptation Project is the way to go from now on.

Adaptation Project currently can be previewed only inside the Visual Editor and its Preview tab. We are working on the standalone opening of the project and it should be available, but I cannot give you any specific timeline for it.

What exactly is the issue that you are having while trying to extend a view or a controller?

Changes and code is debuggable as the Visual Editor starts in an iframe and you can use your browser's developer tools for example to debug it.

 

Regards,

Hristo

[former_member770907]

Hi Hristo,

Thanks for the Confirmation.

Currently i am trying to Add an Extension in the Fiori App. This is not a Fiori Element Based Application

Application URL: https://fioriappslibrary.hana.ondemand.com/sap/fix/externalViewer/#/detail/Apps('F3193')/S20OP

In the Below i am trying modify the Reference No Input Field. i am trying to add an Valuehelp to the Input.

 

In Sap Ui5 Visual Editor, i am trying to change the Property of the Input. But when I try to select the Field, the Whole View is getting selected. Like below.

I have created a Controller Extension for this Particular View.

I have multiple Methods in the Controller Like Public, Private, and Override Methods.

I have tried to access the Input Box Instance from my Extended Controller File. But Its not working.

I wanted to debug the Customized code in the Extended Controller File

As you mentioned, i can't run the app as standalone. this is where i am facing issue.

Can you help me with this?

 

 

[hristotsolev]

Hi Ridvan,

The 'higher layer...' problem means most probably that the actual problem is in the base application - they have introduced changes in layer higher than the one the Visual Editor produces and this causes it to not load. I cannot view what is the application name/id just from the screenshots, so can you please provide me with the app name/fiori id, so we can try to contact the team responsible for it and try to find a solution.

 

Regards,

Hristo

[rdvnatcnibm]

Hi Hristo,

 

the application is following:

Manage Business Partner Master Data - F3163

https://fioriappslibrary.hana.ondemand.com/sap/fix/externalViewer/#/detail/Apps('F3163')/S21OP

 

Thanks and regards,

Ridvan

[former_member509756]

Hi, everyone.

I generated an adaptation project for "fin.gl.documentdisplay" standard application on Business Application Studio and when I try to open SAPUI5 Visual Editor and preview it I'm getting the following message error:

"App could not be opened because the SAP UI5 component of the application could not be loaded."

"Failed to load UI5 component for navigation intent "#adaptationproject-display"

I checked on the navigator console the following error (404):

"Failed to load UI5 component for navigation intent #adaptationproject-display - failed to load 'fin/gl/documentdisplay/Component.js' from ../../resources/fin/gl/documentdisplay/Component.js: 404"

I don't know why this is happening and appreciate someone could help.

Thank you in advance.

error

[stefan_heitzer]

Thanks Hristo,

 

this was exactly the problem we had... Subpath was not entered in the Cloud Connector.

 

Greetings

[former_member509756]

Hi, everyone.

I've been facing the same issue trying to edit an adaptation project for standard application Manage Journal Entries (F0717).

Application details

Issue when trying to edit

Console details (Last error "reading 'getSelector' " happens after click on "Edit" button)

[former_member509756]

Issue was fixed after Gergana Marcheva guidance below:

https://answers.sap.com/questions/13511803/business-application-studio-failed-to-load-ui5-com.html

[hristotsolev]

Hi Ridvan,

Can you please create a support ticket for that, I will make sure it is handled with priority.

Regards,

Hristo

[jorgecarvalhoaw]

Hi hristotsolev and rido can you please share here the solution when the ticket is solved? We have created the ticket and we got no response so far. 😞

[hristotsolev]

Hi Jorge,

can you please send me the number of your ticket?

Regards,

Hristo

[jorgecarvalhoaw]

Hi Hristo,

 

thanks again for your quick reply. Sadly it makes sense that we didn't get the reply as the ticket was not correctly created, but it is now:

786055 / 2021

Thanks for your support, this will be an issue for us in a near future as we have in a few standard apps to extend in pipeline for our greenfield implementation. We have already contacted SAP reporting these BAS issues (not via support ticket) but we didn't have any clarity on this and it's great to have this channel.

[hristotsolev]

Hi Kumaran,

We are not able to reproduce the problem internally. Look at our screenshot:

Unfortunately this is not a known issue and we will need some more info and maybe debug it together with you. Will you be fine to create a ticket for it, so we can handle it ?

Thanks,

Regards,

Hristo

[rdvnatcnibm]

Hi hristotsolev

 

do you still want me to create a ticket or is the one from Jorge sufficient?

Btw, I can't find the ticket, could you provide a link to it jorgecarvalho1990?

 

Regards,

Ridvan

[hristotsolev]

Hi Ridvan.

Yes, please create a ticket, as it might need to go to a different team , in case of different applications/debug log errors , etc.

Thanks,

 

Regards,

Hristo

[jorgecarvalhoaw]

Hello,

 

just a quick update on this topic from SAP ticket, Adapt UI Team:

 

"So this will need the application team, as they have to make a correction on their applications to get this corrected so you can adapt the application.  I will forward this over to the Application team for Manage Business Partners Master Data.

For "Manage Price - Sales" you will need to open a second incident in this component. SD-MD-CM  Please attach your document there as well.  That team will need to look at their app and its extension"

Regards,

Jorge

[stefan_heitzer]

Hi experts,

 

we are currently trying to build up an adaption project for an application which needs specific startup parameters for starting the application itself.

The question is now: How can we achieve to pass the parameters into the adaption project for opening it with the SAPUI5 Visual Editor.

 

Greetings & thanks

Stef

[hristotsolev]

Hi Stefan,

As stated in our documentation (the 3rd point in the Note section) - currently Adaptation Project does not support such applications.

Regards,

Hristo

[azogiani]

Hi Hristo,

I've been trying to add new custom columns and custom cell items to this SAP Fiori Elements application for ListReport view
https://fioriappslibrary.hana.ondemand.com/sap/fix/externalViewer/#/detail/Apps('F0869A')/S21OP

but I keep running into issues such as when using UI5 version 1.71.16 which is the same as in the S/4HANA system where I'm trying to deploy this adaptation project.

When running in version 1.71.16 using Web IDE Full-Stack the application is not starting at all due to this error below but by changing the version for example to 1.75.5  in project settings under SAPUI5 tab it starts fine. (even though when typing in console sap.ui.version it shows 1.71.20... ?)

The next issue where I ran is that in SAPUI5 Visual Editor no extension points for this application exist and I'm able to add fragment to the Table for custom columns and the custom columns are visible at least in the SAPUI5 Visual Editor but still seems to lack the support of custom cell items for custom columns.

Custom columns fragment

 

 

 

When adding fragment for items like this to the table items aggregation (I also tried the SmartTable items aggregation and didn't work either)

I get error "Log-dbg.js:456 2021-11-26 11:06:14.672800 Change 'id_1637917545274_116_addXML' could not be applied. Merge error detected while processing the JS control tree. - Error: The content of the xml fragment does not match the type of the targetAggregation: sap.m.ListItemBase"

 

I was able to get the columns to show but not cells.

While investigating this issue I did increase project UI5 version in web ide for example to 1.85.5 and I was able to see two extension points "ResponsiveTableCellsExtension|C_OutboundDeliveryCreate" and "ResponsiveTableColumnsExtension|C_OutboundDeliveryCreate".

Is the column and cell item extensions only available with higher UI5 version like 1.85.5 and higher and this version I have in the system 1.71 not supported or is there any other way to add few custom columns to the ListReport table?

I tried to deploy then with these two extension points but the columns were not visible at all in the system. (probably because of UI5 version)

 

 

I've tried to do the same using Business Application Studio but same issues there.

I would appreciate a lot if you can give few instructions on how to do this properly and is there another way or if I'm doing something wrong here.

Main goal is to extend the OData service and add few fields and display them in the application.

 

Best Regards,

Arianit

 

[hristotsolev]

Hi Arianit,

The usage of extension points in Adaptation Project is available since 1.78 version of SAPUI5, you can take a look here at the official documentation for this:  Add Fragments to an Extension Point

Also, as you see in the documentation, there is also a prerequisite for SAP_UI version to be at least 7.55. So, until you have lower version of both SAPUI5 and SAP_UI installed on your system, you will not be able to see the extension points working properly when deployed. The option for you until an eventual update is to test/preview them inside the SAPUI5 Visual Editor with SAPUI5 version adjusted to be 1.78 or above (as you have found out yourself).

The possibility for adaptation of the different types of controls is matter of the control themselves and might or might not be supported to some extent, but this should be described by the control documentation.

Regards,

Hristo

[_jonas_]

Hi hristotsolev

Is there any workaround to leverage controller extensions for non Fiori elements standard apps (2nd remark on Controller Extensions) using BAS?

The app in question is ui.s2p.mm.requisition.maintain.s1. The visual editor allows us to create a controller extension (bug?) but it never gets loaded in the preview mode. Is there anything we can do about it? Using Web IDE is not an option.

Cheers
--jonas

[hristotsolev]

Hi Jonas,

Actually, SAPUI5 Adaptation Project supports Freestyle applications too and you should be able to use the controller extensions with the application. However, not being able to load the created extension is not a known issue and will have to be further investigated - please create a ticket and it will be handled with the needed priority, thanks.

 

Regards,

Hristo

[stefan_heitzer]

Ups! Read over this point!

Anyway! Thank you very much. We just passed a default parameter into the application 🙂