SAP Build Code - Speed up your development with Generative AI Assistant - Joule

[abhishekmodi]

Introduction

The newly released SAP Build Code has Joule AI integrated to speed up the development. The AI assistant can be used to generate application logic, data models, fiori apps, test scripts, sample data, service definitions and so on. The assistant can even put the code for intelligent checks automatically in cases where it is not called out implicitly in the requirements. For example, in the tutorial - SAP BUILD Code Test Drive - Joule automatically puts a check to see if customer has enough points to redeem. This ensures the comprehensive validation is in place for the application logic and is extremely helpful. However, it is always recommended to review the generated code to make sure it intends to do exactly as told. 

SAP BUILD Code - Joule capabilities

Joule AI saves a lot of time by understanding the context and generating the code on the fly. It reduces the common errors like misspelling, missing symbols etc. that can take time to fix. 

Within the Business application studio - click on the diamond button on BAS toolbar to launch Joule. The next screen will be listing various contexts with which Joule can be used - keep in mind it is generating a CAP application behind the scenes hence the artifact categories:

1. Data Model and Service Creation - This will help to create the entire data model by narrating the overall business scenario to Joule. The data model includes service creation as well as in oData v2/v4 services.
2. Sample data - This generates sample data using Joule. This utility is extremely helpful when we do not have connectivity to destination system or just getting started with a prototype. After generating the test data, it can even be edited and appended further if needed.
3. Application Logic - This category generates codes for business logic as in validations, special rules, error handling, Please note that it may create additional checks on the basis of it's understanding on business logic, hence it is important to review the generated code.
4. Unit Test - This category generates the unit test cases for the applications. This is very useful to test the apps quickly after making enhancements later on. Joule automatically creates the test cases based on scenario narrations.
5. SAP Fiori UI - This category generates the Fiori app. For example, I used the below prompt to create a full fledged drill down app for navigating across entire schema:

After running the prompt, Joule displays the sample code or the project files in a window called Joule Staging Area. Drag it upwards in case it is hidden. 

Quirks

What is graphical modeler doesn't open or shows a blank window? Try clearing browser cache or opening BAS  in incognito window.

What else can I do with Joule within SAP BUILD Code?

Joule can be launched with a specific CAP aspect as scope - so that it intends to do exactly as in the scope. For example, if the chosen scope is data model it can only create data models and not Fiori apps. However to create entire application at one go, it can be launched as Fiori Tools by typing below in command bar: 

Fiori tools AI: Show Fiori tools Joule.

OR

Start Guide Center tool from command as below:

This brings up Guides on left hand toolbar as below:

Click on "Generative AI-Powered Development" Guide to show all the scopes. Under SAP Fiori UI -> Create an SAP Fiori Application Directly from Your Business Requirements -> Click button Open Joule.

This opens Joule under Fiori tools context where it can generate the entire application - please note that it will replace the entire workspace or any existing CAP applications. This context of Joule tool intends to translate business requirements directly to the code under specific prompt conditions:

• Request should contain a single app only
• Query should be only for generating SAP Fiori elements app
• No second app can be added to existing project
• Joule can generate automatically below items 
  
  • Entities and entity labels
  • Entity properties and property labels
  • Entity associations (1:1 and 1:n)
  • Entities with code lists based on the explicit values in the user input
  • Value help based on 1:1 associations and code lists
  • Criticality highlighting for eligible properties in code lists
  • A single list report/object page application with one or two object pages

• List Report Features
  • Filter fields
  • Table
  • Multiple views for a table
  • Initial data load
• Object Page Features
  • Section tabs
  • Form sections and fields
  • Table sections
  • Navigation from table section to second object page

Any other deviation from above UI structure is not supported by Joule and this seems obvious with other floorplans since they can be implemented in a number of ways. This might seem a rigid output however below are few examples that are worked are are time savers for simple apps:

• Start simple - "Create a simple fiori application to show numbers from 1 to 10"

• Try Northwind - "Create a fiori application displays the list of all products from   https://services.odata.org/V3/OData/OData.svc/Products"

In this case, it did not make the external connection to Northwind and also did not create any service but it did create the data model and the UI:

• Try a complex app - "Create an app showing the list of incidents. Each incident has a title, description, processor and status, such as “new”, “open”, “resolved”, “canceled”." This creates a drilldown app with List Report navigating to a simple object page.

Even it generated a create screen:

Loved the fact that these apps ran out of the box without any errors and is much more than the boilerplate code!

How can I make Joule work on UI other than List Report and Object floorplans?

To create a free style app or modify the existing app, activate the Joule and open a SAPUI5 view or a controller file. 

Enhancing or editing existing app

Navigate to the Explorer and locate the SAPUI5 project under app/assets/<projectname>. Now click on Joule to launch it in SAPUI5 context. it will look like below:

Below prompts will do exactly as intended:

Prompt	Output
Perform syntax check on the entire project	The syntax of your project files seems to be correct. Both the JavaScript and JSON files are well-structured and don't contain any syntax errors.
Add a new fragment to show current time in the header of objectpage	It gave the detailed explanation of files and places where code needs to be changed. After accepting the code for each file the fragment needs to be manually added to header section via page map to display the current time on object page.
What does this project do?	It gives the detailed explanation of the code - great for reverse engineering the business requirements from existing code!
What are the various enhancements that can be done in this project?	It suggested enhancements like error handling, Improving the custom fragment, enhancing user interaction, more features like filter or sort, performance improvements, unit tests, improving accessibility, documentation etc.

Creating a full stack Fiori App

Finally, let's try to create a full stack application with a prompt that will create the data models, services, sample data and a fiori application. Type Cmd/Win + Shift + P and launch New Project from Template:

 Choose Full Stack Project and provide the project name and click on Finish button. Wait for the project to load in the workspace completely and then click on Joule button. 

Click on Open Guide button and expand the context - Create an SAP Fiori Application Directly from Your Business requirements. Click on Open Joule button to launch the assistant. 

Enter the below prompt to create a personal finance management app:

I want to create an SAP Fiori application that satisfies the requirements from the following user story:

Description
As an individual seeking financial organization and control, I aim to develop a personal budget management application. This application will empower users to efficiently monitor and manage their finances by tracking and categorizing income and expenses

Transaction:
Below are the attributes of a transaction:

1. Date: The date of the income receipt or expense payment.
2. Description: A brief description of the income source or expense category.
3. Source/Payee: Name of the entity providing income or receiving payment for expenses.
4. Category: This can be income, groceries, utilities, housing, transportation, healthcare, dining out, entertainment, shopping, travel, savings, insurance, education, gift, donation and miscellaneous
5. Amount: The monetary value associated with the income or expense transaction.

Acceptance Criteria:
Scenario 1: View Budget Overview Given I am logged into the personal budget management system, when I launch the application, then I should be able to view a report with below fields:

• Date
• Description
• Category
• Amount

Now Joule will start creating the entire full stack application using LLMs. This will take a few minutes. Once it is ready - examine Joule staging area to check the contents of the project. Click on Accept files to proceed with creation. This will take a few minutes to complete the operation. 

We can check the explorer view once below message is shown:

 

Expand the project folder -> app -> db -> data and click on [ProjectName]-Transactions.csv file to launch in the editor. Observe how Joule has created realistic data for income and expenses categories. Turn on Mock Data if it is off and add a few more rows under income, utilities and other categories of expenses. 

Click on Run Configurations icon and arrow to launch the application. 

The project preview now opens in a new tab:

Click on the tile to launch the app:

Click on gear icon to launch settings dialog and Group by Name - save this as default variant:

Now the personal finance app is ready to report by categories:

Hence we can see that Joule AI can speed up the full stack application development and can save a lot of developer's time by not just providing the actual code but additional checks and logic.