- SAP Managed Tags
Introduction
As we continue to enhance Joule within SAP Build Code, this major UX update and new design marks a significant milestone. For a detailed overview of Joule, see the article Joule in SAP Build Code.
Driven by extensive feedback and many review sessions, our new design focuses on scaling Joule's functionalities. This update brings enhanced usability, streamlined workflows, and a more intuitive interface, boosting productivity and satisfaction.
As the design lead, I’ll take you through the work behind this transformation. Here's what we discovered:
Background and Need for a New Design
Historical Context of Joule in SAP Build Code
Eight months ago, during the announcement of SAP Build Code at TechEd 2023, we introduced Joule with its foundational capabilities: Joule chat, code review, result matching for target artifacts, and an initial AI supporting service and data model creation, sample data, application logic, and unit test generation.
User Feedback and Identified Pain Points
As use cases expanded, we realized the need to enhance our developers’ interactions with Joule. Through numerous reviews, feedback sessions, and validations, we identified the necessity for developers to switch seamlessly between Joule's capabilities.
Goals and Objectives of the New Design and UX Update
Our primary goal is to enable Joule to support a broader range of use cases, allowing developers to transition smoothly between Joule's functionalities. This new design lays a strong foundation for scaling the developer experience, providing robust support for upcoming features and embedded use cases.
Before vs After
Before this update, Joule's entry points were either from the Guide Center in the "Generative AI-Powered Development Guide" (where developers could select Joule's capabilities) or through specific productivity tools (e.g., triggering Joule from the "Enhance" button in the Data Editor). Each Joule configuration was optimized for particular use cases, requiring developers to navigate between separate chats for different tasks. This often led to difficulties, such as switching from generating data models to generating sample data, which required opening another chat and navigating to a different guide. Joule also required developers to trigger it from a specific point to address a specific use case.
With the new design update, Joule now features a unified interface for accessing all functionalities, allowing developers to switch between tasks seamlessly within a single chat. Joule is even more contextually aware, providing smarter, tailored assistance. Developers can also trigger use cases at any time, making Joule always available.
New Features Introduced in the Update
Slash Commands
Slash Commands are special commands that developers can use to access Joule's functionalities. Joule dynamically adjusts the available commands based on the status of the project. For instance, early in the project, available commands might include creating a data model or a UI application, ensuring that developers receive relevant, context-aware assistance tailored to their current development stage.
Commands that developers can use with the new update:
- /fiori-gen-app to generate an SAP Fiori elements application
- /ui5 to get assistance on SAPUI5 topics
- /cap-gen-app to generate a CAP application
- /cap-edit-model to edit an existing CAP data model
- /cap-gen-data to generate CAP sample data
- /cap-edit-data to edit existing CAP sample data
- /cap-app-logic to generate CAP application logic
- /cap-unit-test to generate a CAP unit test
Context Variables
The context variables feature allows developers to use the # symbol in combination with slash commands to reference existing project files in their prompts. Depending on the context, Joule will display the relevant files, and when the developer selects one, Joule can access its content and generate objects more precisely.
Dynamic Suggestions
The dynamic suggestions feature offers predictive slash commands based on the developer’s previous actions. These suggestions appear automatically when no specific command is triggered. In any case, by typing a slash developers can always see all the available commands tailored to their project's current status.
File Management
The file management feature allows developers to see which files Joule is using for generation, both during and after the process. Each of these files is clickable, enabling developers to navigate to them easily. For example, when generating application logic, Joule uses the selected application logic file along with the schema.cds (data model) and service.cds (service) files, as they are codependent.
Joule File Management During Generation
Joule File Management After Generation
File List Block
We’ve also introduced the new File List block UI component for scenarios where multiple files are generated. This component displays "Staging Files," that can be opened and previewed directly in the editor. This allows developers to check the quality of the generation before accepting the result.
Custom Actions
The Custom Actions feature introduces additional buttons tailored to specific use cases, enhancing productivity. For example, after using the /cap-gen-app command to generate data models, services, sample data, and annotations, custom action buttons appear once the result is accepted. These buttons might include options to open the CDS Graphical Modeler, Data Editor, or even the Terminal allowing developers to quickly navigate to and edit the generated results in these specific tools.
Summary
This UX update for Joule in SAP Build Code introduces several new features to enhance usability and streamline workflows. These include a unified interface for seamless task switching, dynamic slash commands tailored to project status, and context variables for referencing existing project files. Additionally, the update offers predictive dynamic suggestions for relevant commands, enhanced file management with clickable links, a new File List block UI component for previewing multiple files, and custom action buttons for quick navigation and edits.
What’s next?
If you haven't considered SAP Build Code, you can learn more here. To migrate from SAP Business Application Studio to SAP Build Code, read this blog.
We have many more exciting features in store for you in 2024, which you can see on our roadmap. We are always open to your feedback and would love to hear your expectations and suggestions in the comments.
Comment on this post to discuss all things SAP Build Code.
Until next time, happy coding!
| User | Count |
|---|---|
| 52 | |
| 22 | |
| 16 | |
| 12 | |
| 9 | |
| 9 | |
| 8 | |
| 7 | |
| 7 | |
| 7 |
