ex4

Create Booking Object Page Based on Figma Design

1. In the Cline panel, close the previous task and start a new one. Select Plan Mode.

2. Open Figma, right-click on "Screen 3 - Object Page" -> Copy/Paste as -> Copy as PNG

3. Enter the following prompt in the task input:

   Create booking object page based on Figma design:
   <Copy and Paste Figma screenshot(png) for Screen 3 - Object Page here>
   

   [!NOTE] Refer to ex 1.4 Export your designs to copy Figma screenshot(png) for Screen 3 - Object Page.

4. Press Enter to start the task.

5. Cline will generate an Implementation Plan.

6. Review the plan once it's ready.

Note

The implementation plan generated by Cline may differ from the example shown below.

7. Switch to Act mode.

8. Cline will execute the implementation plan.

9. After completion, check the booking object page in the application preview.

Troubleshoot

• Error Composition in draft-enabled entity can't lead to another entity with “@odata.draft.enabled” (in entity:“TravelService.Travel”/element:“Bookings”). Copy and paste above error message, Cline will fix issue.
• Could not navigate to booking object page. Execute prompt: could not navigate to booking object page
• Section Booking Extras missing in the booking object page. Execute prompt add booking extras table section based on figma design
• Booking Extras table has no data. Execute prompt add mock data for booking extras
• If the object page looks different and does not match figma, execute prompt match figma with object page

Continue to - Exercise 5 - Add Analytical chart to list report page