SAP Build code, which focuses on pro-code development, offers a variety of GenAI functionalties to support the development process using CAP, HANA development, as well as UI5.
In this blog post, I’ll focus on the freestyle aspect of UI5 development, demonstrating how to get started with a freestyle UI5 application. My aim is to showcase how Joule can be used to both accelerate the development and provide support for those who may not be UI5 experts to the very fingertips.
The following simple scenario will give you a glimpse into developing applications with SAP Build Code. Using the BTP Trial version you can currently setup a SAP Build Code instance to try Joule’s GenAI capabilities.
Getting Started
Open the SAP Build Lobby from the BTP Subaccount Cockpit under Services > Instances and Subscriptions > SAP Build Code.Create a new SAP Build Code Fiori, Full-Stack, or Mobile application. For this scenario, a SAP Fiori Application is suitable.Enter a project name. If no dev space exists, it will be prefilled to create a new Fiori dev space:
4. Once the project is created and the SAP Business Application Studio (BAS) dev space starts, click on the project name to open BAS.
Creating a UI5 Application
Create a UI5 application using the template wizard in BAS:
Go to Get Started > New Project from Template > SAP Fiori GeneratorUse the Basic template to start from scratchFor the OData service, create a destination to the OData V2 as an example OData connection Add a view name – In my case MainOptionally, set the deployment configuration and add the app to the managed application router if you want to deploy and consume the app from within SAP Build Work Zone
Leveraging Joule for UI5 Development
Recently, major UX updates were introduced to the Joule capabilities, moving from mainly being able to access Joule from the Guide Center towards a single chat, where users can use different slash commands to invoke tailored Joule functionalities.
For UI5 questions and development the /ui5 slash command is there to achieve this:
Example: Creating a Product Table
In the yet empty project, in order to see the /ui5 slash command, we firstly need to open the controller or view that was created from the template. Afterwards, the /ui5 slash command is suggested and we can directly start with a sample prompt to show products of the OData service:
“/ui5 create a table in the main view that displays the products of the northwind service. Provide data bindings to the properties of this odata entity.”
After invoking the prompt, Joule already looked up files considered important for executing the task:
In the answer, Joule provided the code in the Main.xml.view including the product table. Since the screenshot of the whole response is large and thus difficult to paste here, this is the code it provided :
<mvc:View controllerName=”demoapp.controller.Main”
xmlns:mvc=”sap.ui.core.mvc” displayBlock=”true”
xmlns=”sap.m”>
<Page id=”page” title=”{i18n>title}”>
<content>
<Table id=”productTable” items=”{
path: ‘/Products’
}”>
<headerToolbar>
<Toolbar>
<Title text=”Products” />
</Toolbar>
</headerToolbar>
<columns>
<Column>
<Text text=”Product ID” />
</Column>
<Column>
<Text text=”Product Name” />
</Column>
<Column>
<Text text=”Quantity Per Unit” />
</Column>
<Column>
<Text text=”Unit Price” />
</Column>
</columns>
<items>
<ColumnListItem>
<cells>
<Text text=”{ProductID}” />
<Text text=”{ProductName}” />
<Text text=”{QuantityPerUnit}” />
<Text text=”{UnitPrice}” />
</cells>
</ColumnListItem>
</items>
</Table>
</content>
</Page>
</mvc:View>
As you can see, the suggestions looked good, also containing data binding to 4 properties of the Products entity. That already saves some manually coding time for developers and can be further adapted to include more columns and properties.
An explanation at the end is also provided:
Afterwards, the application can be previewed using the green play button in BAS for example. The result already looks promising:
Formatting and Adding Functionality
Now, I wanted to format the Unit Price to make it look a little bit nicer and also display the sign of the Euro currency after the number. Additionally, I wanted to create a custom column with some sort of action that can be invoked on each product. So, Joule was asked again:
“/ui5 format the unit price in the table to round to 2 decimals and include an euro sign after the number. Create a formatter file with a function for this. Additionally, include another column in the table named Order where each cell is composed of a button that indicated that the user wants to buy this product. Provide a basic press event handler one of this button is pressed.”
Multiple files were suggested to be adapted and/or changed, such as creating a formatter.js file to format the UnitPrice property.
On top of that, it created a column Order, a function onPressOrder in the Main.controller.js file, and a press event in the Main.view.xml in order to show an UI5 MessageToast of the order placed for a certain product:
To further add some application logic, Joule assisted to create a condition when clicking the button:
“/ui5 please change the onOrderPress function that checks if the unit price of the product is above 50 €. If this is the case, show a message dialog indicating that the products above 50 € can currently not be ordered.“
Result, only when clicking a product over 50 (€):
Using AI-Powered Code Completion
Besides Joule, since very recently SAP Build Code introduced code completion and suggestions directly in the editor. Therefore, we can also make use of this AI feature.In order to show this, I added a comment in the onOrderPress code and described that I want to have a confirmation dialog instead of a message toast. Shortly after, a code suggestion was directly available in the function:
I had to remove the MessageToast line of code, but besides that, it immediately worked:
Understanding Your Code with Joule
Coming to the end, one more thing to highlight: Using Joule to help explaining code. As such, the following prompt was sent:
“/ui5 what does the main view do?”
Here is an extract of Joule’s answer, which helps to understand the code even further:
Conclusion
As you can see, SAP Build Code with Joule supports a variety of use cases for UI5 development, in addition to its other GenAI focus on CAP and Full-Stack development. Please keep in mind that prompt responses can vary, thus potentially leading to slighty different code proposals. Nonetheless, it’s a powerful feature that can enhance your development process, whether you’re an experienced UI5 developer or just getting started. Let’s see what the future brings with more and more features getting introduced!
SAP Build code, which focuses on pro-code development, offers a variety of GenAI functionalties to support the development process using CAP, HANA development, as well as UI5.In this blog post, I’ll focus on the freestyle aspect of UI5 development, demonstrating how to get started with a freestyle UI5 application. My aim is to showcase how Joule can be used to both accelerate the development and provide support for those who may not be UI5 experts to the very fingertips.The following simple scenario will give you a glimpse into developing applications with SAP Build Code. Using the BTP Trial version you can currently setup a SAP Build Code instance to try Joule’s GenAI capabilities. Getting StartedOpen the SAP Build Lobby from the BTP Subaccount Cockpit under Services > Instances and Subscriptions > SAP Build Code.Create a new SAP Build Code Fiori, Full-Stack, or Mobile application. For this scenario, a SAP Fiori Application is suitable.Enter a project name. If no dev space exists, it will be prefilled to create a new Fiori dev space:4. Once the project is created and the SAP Business Application Studio (BAS) dev space starts, click on the project name to open BAS. Creating a UI5 ApplicationCreate a UI5 application using the template wizard in BAS:Go to Get Started > New Project from Template > SAP Fiori GeneratorUse the Basic template to start from scratchFor the OData service, create a destination to the OData V2 as an example OData connection Add a view name – In my case MainOptionally, set the deployment configuration and add the app to the managed application router if you want to deploy and consume the app from within SAP Build Work Zone Leveraging Joule for UI5 DevelopmentRecently, major UX updates were introduced to the Joule capabilities, moving from mainly being able to access Joule from the Guide Center towards a single chat, where users can use different slash commands to invoke tailored Joule functionalities.For UI5 questions and development the /ui5 slash command is there to achieve this: Example: Creating a Product TableIn the yet empty project, in order to see the /ui5 slash command, we firstly need to open the controller or view that was created from the template. Afterwards, the /ui5 slash command is suggested and we can directly start with a sample prompt to show products of the OData service:”/ui5 create a table in the main view that displays the products of the northwind service. Provide data bindings to the properties of this odata entity.”After invoking the prompt, Joule already looked up files considered important for executing the task:In the answer, Joule provided the code in the Main.xml.view including the product table. Since the screenshot of the whole response is large and thus difficult to paste here, this is the code it provided : <mvc:View controllerName=”demoapp.controller.Main”
xmlns:mvc=”sap.ui.core.mvc” displayBlock=”true”
xmlns=”sap.m”>
<Page id=”page” title=”{i18n>title}”>
<content>
<Table id=”productTable” items=”{
path: ‘/Products’
}”>
<headerToolbar>
<Toolbar>
<Title text=”Products” />
</Toolbar>
</headerToolbar>
<columns>
<Column>
<Text text=”Product ID” />
</Column>
<Column>
<Text text=”Product Name” />
</Column>
<Column>
<Text text=”Quantity Per Unit” />
</Column>
<Column>
<Text text=”Unit Price” />
</Column>
</columns>
<items>
<ColumnListItem>
<cells>
<Text text=”{ProductID}” />
<Text text=”{ProductName}” />
<Text text=”{QuantityPerUnit}” />
<Text text=”{UnitPrice}” />
</cells>
</ColumnListItem>
</items>
</Table>
</content>
</Page>
</mvc:View> As you can see, the suggestions looked good, also containing data binding to 4 properties of the Products entity. That already saves some manually coding time for developers and can be further adapted to include more columns and properties.An explanation at the end is also provided:Afterwards, the application can be previewed using the green play button in BAS for example. The result already looks promising: Formatting and Adding FunctionalityNow, I wanted to format the Unit Price to make it look a little bit nicer and also display the sign of the Euro currency after the number. Additionally, I wanted to create a custom column with some sort of action that can be invoked on each product. So, Joule was asked again:”/ui5 format the unit price in the table to round to 2 decimals and include an euro sign after the number. Create a formatter file with a function for this. Additionally, include another column in the table named Order where each cell is composed of a button that indicated that the user wants to buy this product. Provide a basic press event handler one of this button is pressed.”Multiple files were suggested to be adapted and/or changed, such as creating a formatter.js file to format the UnitPrice property.On top of that, it created a column Order, a function onPressOrder in the Main.controller.js file, and a press event in the Main.view.xml in order to show an UI5 MessageToast of the order placed for a certain product: To further add some application logic, Joule assisted to create a condition when clicking the button:“/ui5 please change the onOrderPress function that checks if the unit price of the product is above 50 €. If this is the case, show a message dialog indicating that the products above 50 € can currently not be ordered.“Result, only when clicking a product over 50 (€): Using AI-Powered Code CompletionBesides Joule, since very recently SAP Build Code introduced code completion and suggestions directly in the editor. Therefore, we can also make use of this AI feature.In order to show this, I added a comment in the onOrderPress code and described that I want to have a confirmation dialog instead of a message toast. Shortly after, a code suggestion was directly available in the function:I had to remove the MessageToast line of code, but besides that, it immediately worked: Understanding Your Code with JouleComing to the end, one more thing to highlight: Using Joule to help explaining code. As such, the following prompt was sent: “/ui5 what does the main view do?”Here is an extract of Joule’s answer, which helps to understand the code even further: ConclusionAs you can see, SAP Build Code with Joule supports a variety of use cases for UI5 development, in addition to its other GenAI focus on CAP and Full-Stack development. Please keep in mind that prompt responses can vary, thus potentially leading to slighty different code proposals. Nonetheless, it’s a powerful feature that can enhance your development process, whether you’re an experienced UI5 developer or just getting started. Let’s see what the future brings with more and more features getting introduced! Read More Technology Blogs by SAP articles
#SAP
#SAPTechnologyblog
