Let's try creating a UI5 Task Form for SAP Build Process Automation using AI.

[NaotoSakai]

Hello everyone! Have you tried the newly added AI Chat feature in SAP Build Code yet?
It's incredibly convenient, isn't it?
I received a request to write a blog post introducing how to use it. However, since it's pretty self-explanatory and others have already covered how to build CAP or UI5 applications with it, I wanted to try something different. I wondered if it could generate a UI5 Task Form for SAP Build Process Automation, so I decided to test it out using the AI Chat feature.

---

What is a UI5 Task Form in SAP Build Process Automation?

The "UI5 Task Form" in SAP Build Process Automation (SBPA) is a feature that allows you to import and use a custom SAPUI5 screen—developed in tools like SAP Build Code—as a screen for user manual tasks (such as approvals or data entry) within a process.

While the standard low-code form functionality is handy, it cannot handle complex requirements like "multi-column intricate layouts," "dynamic input validation," or "advanced data search and display integrated with external APIs." By leveraging the UI5 Task Form, you can fully achieve advanced UI design and complex screen requirements that are impossible with standard forms. This is a must-know feature for pro-developers who want to go beyond citizen development and deliver the ultimate user experience for business operations without compromise.

For specific development steps and implementation constraints, please check the Official Help Documentation (Import an SAPUI5 Form).
By using this approach, you can, for example,

embed a shopping cart form like this directly into SAP Build Process Automation. You can run your own JavaScript logic in the browser, utilize Freestyle UI5, and even access external resources using Destinations within this screen—unlocking capabilities that standard forms simply cannot offer.

---

However, building these UI5 Task Forms is actually quite tedious. It feels a bit different from writing a standard Fiori app.
I tried to see if I could generate it using the AI Chat feature or Cline. Long story short, I managed to create it, but it took a considerable amount of time. Rather than building the UI itself, the bottleneck was configuring the settings to make it importable into SAP Build Process Automation—specifically, writing the `sap.bpa.task` related settings in `manifest.json`. The LLM didn't inherently understand these unique UI5 Task Form specifications, and the UI5 MCP (Model Context Protocol) didn't know about them either.

But if the LLM doesn't know, we just have to teach it. By repeatedly telling the LLM "fix it this way" or "build it like that," I finally got the desired UI5 Task Form. To be honest, I felt it might have been faster to write it from scratch myself. However, after making it generate a few different forms, I compiled the interaction history into a structured Markdown file. I found that if you provide this Markdown as a reference in your initial prompt, you can get a working UI5 Task Form on the very first try. So, I'm sharing it here:

https://gist.github.com/naotos-git/214fbcabe81fb41fbbf28e539358f9d4

(You can click the "Download ZIP" button, unzip it, and use it.)

To use it, whether you are using the AI Chat feature or Cline, simply attach the downloaded Markdown file to your prompt and write something like this:

Please refer to the attached Markdown file to create a UI5 Task Form for SAP Build Process Automation.
The form should allow users to select products and create a shopping list using Product data from an OData service. Please access this service using a Destination named "northwind".
This Destination has been configured with the URL up to https://services.odata.org/V4/Northwind/Northwind.svc.

Form Specifications:
- Enable users to search and filter products using Northwind's Suppliers, Categories, and Products data.
- Selected products should be added to the shopping list at the bottom of the screen.
- The form receives an input value named "Allowed Amount" (numeric type). If the total amount of the items in the shopping list exceeds the Allowed Amount, display a warning message in red.
- The values passed from the form back to SBPA should be the Product ID, Product Name, and Price from the shopping list.
- The form should have a single submit button.

You start by saying, "Please refer to the attached Markdown file to create a UI5 Task Form for SAP Build Process Automation," and then you just outline the specifications of your form. By the way, the prompt above is the exact one used to generate the example shopping cart form mentioned earlier.
If you are doing this in SAP Build Code, create a Full-Stack Node.js project first, and then

drag and drop the Markdown file into the EXPLORER panel on the left to upload it to your DevSpace. Once uploaded, you will be able to select it as an attachment in the chat input field.

While UI5 Task Forms are powerful, unlike the standard SAP Build Process Automation forms that can be built completely no-code, they require pure pro-code development. This sudden steep learning curve has been a major drawback. Thanks to AI-driven coding, I believe that hurdle has been significantly lowered. Give it a try!

Please Note:

• This Markdown does not guarantee flawless operation. It is provided as-is with no warranties or support.
  • I have only verified the behavior by generating forms that I previously wrote by hand.
• Naturally, there is no guarantee regarding the generated code output either. Please review the code yourself to ensure there are no suspicious or incorrect snippets.
• I might update the Markdown on GitHub over time.
  • Specifically, I will likely update it whenever I discover failure patterns while building new forms.

For the LLM, using high-reasoning models like "Claude Opus" is highly recommended.

Regards,