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: 
AndreasKunz
Advisor
Advisor

As announced in this blog post by Oliver Graeff, the UI5 team is delighted to release its first foray into the world of Generative AI, a contribution to Joule in SAP Business Application Studio which helps with freestyle SAPUI5 development.

In this blog post, we explore how this SAP Build Code feature works and how you can benefit most from it. At the end, let’s not forget getting a glimpse of related AI features and prototypes.

Get Help from Joule

As a user of SAP Build Code, you get Joule as assistant in SAP Business Application Studio, accessible via this “Joule jewel” as I like to call it: 

joule-jewel.png

One important thing to note is that in the initial release, Joule is only available in dev spaces of type “Full-Stack Application Using Productivity Tools”. If you e.g. create a dev space of type “SAP Fiori”, you will not see it. The availability in more dev space types

The panel content is context sensitive. This means that for a random file in a random project, it may just tell you that it is not available, but when you open e.g. a UI5 view or controller or most other file types inside a UI5 application project, then it will greet you with all its violet-purple AI glory and ask for your requests:

The Joule PanelThe Joule Panel

Simply enter your request in the chat window – adding, editing, replacing code… anything goes! –  and Joule will respond with code and explanations.

Each code block in the response has a header with a “” and an “Accept” button. “Accept” transfers the code to the respective file, replacing its content. An answer can provide content for different files. If the file to which a code block belongs is currently not open or active, it will automatically be opened when you click “Accept”.

In case this “Accept” button is missing or you want to edit the suggested code first, you can use the ”Copy” button to get the code into the clipboard and paste it manually. This is also useful in the (rare) cases when only a code snippet is provided instead of the entire file, or parts of the previously existing code are omitted.

Think BIG for Biggest Benefit

Actually, those suggested samples in the Joule panel are just simple ones. We really recommend trying bigger steps! Don’t waste time (and AI tokens) by requesting a simple button. Try increments like:

  • Adding a new View with some content and setting up routing
  • Creating a new model with sample data and adding a table displaying certain properties as columns
  • Making all (hardcoded) texts within a view translatable and providing translations

Things like these seem like the sweet spot where Joule speeds up application development most. Taking bigger steps is also a good approach when the AI response times appear a little long. Performance varies, and Joule has no influence on this – most of the time is spent waiting for the response.

You know Generative AI has limits. Requests like the above typically work well, but of course the response can contain issues or be not exactly what you had in mind. Tweaking the result will usually still get you to your goal much faster than typing everything by hand. You can also use the pencil button to edit a request and try again.

Joule is a conversational chat assistant that keeps context. This means it “knows” what you have requested before and you can refer to this knowledge in further requests. Still, we recommend pressing the “Reset Conversation” button at the top once you request something different:

clear.png

This frees the conversation from previous ballast, keeps the AI focused and not least makes responses faster.

Keep in Mind How to Get Joule

As mentioned, the Joule assistant for freestyle UI5 development is active when it seems like you are working on UI5 resources. The actual logic behind that is longer than would fit this blog post, but when Joule’s suddenly not there and you need it, simply open a UI5 view or controller, or work below a directory with ui5.yaml file in it and you should see it again. This behavior, by the way, could change soon, as Joule is still growing up into its role of an always-available assistant with multiple capabilities.

How Does it Work?

There’s a lot of stuff going on behind the scenes.

For example, there is AI-powered logic to select the files which are likely needed to be modified – or maybe just known – to fulfill your request. Of course, it would be too much to send all the code of your entire project along with every AI request.

Above you read that Joule keeps context and remembers the previous conversation. Yes, it has to, in order to reasonably converse with you. Otherwise, it would not be able to make sense of a request that is logically connected to what you did before. Still, it does not need to remember every single bit and byte for that! Hence, we condense the history to reduce the context size consumed by that.

Possibly there is some similarity to other AI tools you have seen recently, and this market is definitely a very agile and vivid one, but what differentiates this tool is its knowledge of UI5 and increasingly the knowledge how to support typical steps best which you are likely to do in any freestyle UI5 project.

Much of it is still evolving and being enhanced as you read this.

More Joule Goodness: Create an Application from Business Requirements

A related Joule feature provided by the Fiori tools team allows you to create an entire SAP Fiori elements list report application, including the respective CAP project, directly from your business requirements. Look here for more details.

This gets you started with a pretty complete app – and with our Joule feature for freestyle UI5 development, you can continue from there, e.g. when using custom pages. So both of these Joule features nicely complement each other.

Even More AI

It’s only the beginning. We have been experimenting for quite some time with how Generative AI could benefit not only UI5 application developers, but also end-users.

One such prototype, internally dubbed “ChatUI5”, aims to help end-users to interact with UI5 applications in natural language. It will be presented in the upcoming “UI5ers live” webcast on April 11th. Others look at how setting complex filters in applications could be simplified or how the UI5 documentation could be made more helpful.

To make it very clear: that’s all prototypes and we can’t tell whether any of them will ever see the light of being productized. But we’re looking further into the topic for sure.