CA261 | Create great UX with AI, SAP Design System, SAP Fiori elements, and SAPUI5

Description

This repository contains the material for the SAP TechEd 2025 session CA261 | Create great UX with AI, SAP Design System, SAP Fiori elements, and SAPUI5.

---

Overview

In this hands-on tutorial you will work through a set of exercises that highlight the benefits and capabilities of the SAP Design System, the Figma design tool, and the MCP servers developed by SAP and Figma to create and modify SAP Fiori applications with the help of AI coding assistants.

You will gain comprehensive knowledge of AI assisted full-stack development, and learn how to use Figma and the SAP Design System to kickstart your SAP Fiori elements application development.

Using AI during App Development

We are using Cline as AI client within VSCode and Anthropic claude-4-sonnet LLM (Large Language Model) throughout the exercises. When developing SAP Fiori applications with LLMs, you may encounter situations where a prompt is not executed as intended, or technical errors occur when calling MCP server tools. Knowing how to approach these issues systematically can save time and prevent disruption. Cline and the choosen LLM are powerful assistants for problem resolution.

General steps in case of issues:

Detailed steps and examples of resolving common issues

1. Verify connectivity:

   • Check if your machine has network access.
   • Confirm that the MCP server is up and running.

2. Approach errors systematically

   • Pause before panicking
     • Use natural pauses when the client asks for approval to inspect the current results and chat history.
     • Stop execution with the "Cancel" button. You can always proceed from there with a new prompt
   • Identify the source: Check if the issue is:
     • CDS compiler error
     • SQLite/database error
     • Console/browser runtime error

3. Using the LLM to solve an issue

   • The LLM occasionally makes mistakes, or forgets required steps leading to error situations
   • But the LLM can read the terminal output and react to API reponses, and correct error visible there
   • Other issues, like from browser console output, can be resolved by copy-pasting the full error message into the chat and ask for a fix in a prompt
   • LLM works best when exact messages are provided rather than manual descriptions.

4. Use Restore Points if Needed

   • If a solution strategy does not work, you can always restore the files and chat to a previous checkpoint using Cline’s restore functionality.

5. Don’t be afraid to retry an exercise or step after restoring to a checkpoint.

Exercises

Begin your exercises here. At the end of each section, there is a link to continue to the next section.

• Exercise 1 - Open the Figma Design file in your Figma client

  • Exercise 1.1 - Adjust the buttons in the object page header
  • Exercise 1.2 - Add a form item in the object page
  • Exercise 1.3 - Edit the new form item in the object page
  • Exercise 1.4 - Export your designs
  • Exercise 1.5 - Enable your MCP Server in Figma

• Setup Visual Studio Code Development Environment

• Exercise 2 - Create fiori app based on figma design

  • Exercise 2.1 Enable automatic data loading in List Report
  • Exercise 2.2 Add table actions from design to list report table
  • Exercise 2.3 Apply business logic for action accept travel
  • Exercise 2.4 Configure filter travel status as valuehelp and display it as dropdown
  • Exercise 2.5 Apply criticality to travel status column

• Exercise 3 - Modify travel object page based on figma design

  • Exercise 3.1 Adjust Object Page Title and Description
  • Exercise 3.2 Set Label for Object page sub sections
  • Exercise 3.3 Rearrange fields in General information section as per design
  • Exercise 3.4 Set Criticality for status field
  • Exercise 3.5 Add Custom Section with RichTextEditor Building Block

• Exercise 4 - Create booking object page based on figma design

• Exercise 5 - Add Analytical chart to list report page