ex2.0

Generate CAP Project and Fiori List Report App from Figma Design

1. In the Cline panel, choose Plan Mode.

2. Copy and paste the following prompt into the task input:

   Generate a new CAP project and SAP Fiori app based on following Figma design.
   Include technical key and business key for all entities.
   Use MCP servers and follow all rules.
   
   <Copy and Paste Figma screenshot(png) for Screen 1 - List Report here> 
   

3. Open Figma, right-click on "Screen 1 - List Report" -> Copy/Paste as -> Copy as PNG

Note

Refer to ex 1.4 Export your designs to copy Figma PNG for list report.

4. Press Enter to execute the task.

5. Cline prepares an Implementation Plan using the AI model and MCP servers.

   • During preparation, Cline may request approval to use MCP servers.
   • Click Approve.

   

   • After executing 20 API requests Cline needs manual approval click to proceed.

   

   Issue --> Cline remains pending

   • If the status in Cline remains pending and commands (such as npm install) are not executed in the VS Code terminal, toggle between Act and Plan mode, then click Resume Task.

   

   Solution:

   

Note:

• Cline may ask additional questions to prepare the plan. Enter the following information only if cline asks for it:
  1. Would you like to specify a project name? travel-management
  2. Would you like to provide a Fiori app name? process-travels
  3. Would you like to include sample data? yes
  4. Would you like to specify any additional features beyond what's shown in Figma? no additional features required beyond figma design

6. Once the implementation plan is ready, review it.

Note

The implementation plan generated by Cline may differ from the example shown below. Below image is just for reference.

7. Switch to Act mode.

8. Cline executes the implementation plan with the following steps:

   Monitor the execution process and manually approve Cline requests whenever prompted to proceed

   • Automatically runs the command to initialize your CAP project:

     cds init travel-management
     

   • Uses the cds-mcp server to generate the data model and service. When prompted, click Approve to allow this action.

   • Before saving the generated data model to your project, Cline will ask you to review and confirm the content. Click Save to proceed.

   [!Note] Enable Edit to auto-approve future save requests.

   

   In the latest version of Cline, the Edit option has been moved to the Auto-approve actions section. Activate both Edit project files and Edit all files to auto-approve future save requests.

   

   • Cline then creates sample data files (in .csv format) for your project automatically.

   • To generate the Fiori app, Cline requests permission to use specific fiori-mcp server functionalities:

     • Approve the get-functionality-details request.
     • Approve the execute-functionality-details request.

   

   • After the app is generated successfully, Cline installs all required dependencies for your project:

     cd <project-name> && npm install

   • Finally, Cline starts the application for you:

     cd <project-name> && npm run watch-<project-name>

---

9. After completing all the planned steps, the application should automatically open in your browser, displaying a travel list report application that matches the Figma design.

Troubleshoot

1. Application preview does not open automatically in the browser:

   • Close current task and start new task.
   • Enter prompt Preview application
   • If the issue still exists, then you can start watch script manually.
     • Open the package.json file.
     • Right click on watch script and select Run Script.

   

2. If the application prompts for authentication, use username: dummy and password: dummy

3. In the browser, If your application does not load or displays a blank page:

• Open Developer Tools in your browser to check the error message.

  • Windows: Press F12 or Ctrl + Shift + I

  • Mac: Press Cmd + Option + I

    

• For a 404 error, enter the prompt:
  Error: Could not load metadata: 404 Not Found

  • Press Enter and Cline will fix the service URL path issue.

• For a 200 error, enter the prompt:
  Check if the EDM JSON expression ($edmJson) syntax is incorrect and validate it using CAP MCP.

• If the issue still exists, enter this prompt: Remove all instances of EDM JSON ($edmJson) expression syntax from the code.

---

Continue to - Exercise 2.1 - Enable automatic data loading in List Report