YouBothAgent▾
You — Business rules and flows you own. Read these yourself.
Both — Know the idea; your agent follows the details.
Agent — Conventions and references your agent follows. Look up as needed.
Introduction▾
Tutorials▾
System Architecture▾
Module Convention▾
Scalar Convention▾
Show Details
Imagine walking into an ice cream shop and placing an order. You'd want to see exactly what you ordered, right? Maybe check if you remembered to add those strawberries, or confirm the size you picked. That's exactly what detailed views do in our application - they give customers a full summary of their order that they can access anytime with just a click.
Think of it like the difference between an order ticket and a detailed receipt. The summary card is like a stub - it shows the basics so you can identify the order. But the detailed view is like the full receipt that shows everything: every topping you chose, when you placed the order, and whether it's ready to pick up. It's the complete story of your ice cream order!
In Akan.js, showing detailed views follows a clean architecture pattern. We use three main components that work together:
🎯ViewWrapper (Util.tsx)
A clickable wrapper that triggers the view modal when clicked. Think of it as the "View Details" button functionality.
🖼️ViewModal (Model component)
A modal popup that displays when customers want to see details. It handles opening, closing, and data loading automatically.
📋Detail View (View.tsx)
The actual content inside the modal that displays all the order information in an organized layout.
This separation allows each component to have a single responsibility: the wrapper handles clicking, the modal handles the popup behavior, and the view handles the display formatting.
Add View/Edit Modal
Now let's add a View/Edit modal to our ice cream order page. This creates a popup window where customers can see all their order details in an organized format. The modal functions like a detailed receipt that appears when customers want to review their order information.
apps/koyo/lib/icecreamOrder/IcecreamOrder.Zone.tsx
This code creates a modal system that handles the display and editing of orders. Let's examine what each part does:
👆
Load.Units Component: Renders all order cards in a list format, with each card displaying basic order information
📱
Model.ViewEditModal: Creates the modal popup that appears when customers click to view details. It automatically loads order data and displays it in a structured format
The ViewEditModal component handles opening, closing, data loading, and content display automatically. You specify what content to show, and it manages the technical implementation. This approach allows you to add detailed views throughout your application with minimal code.
Add View Button to Cards
Now let's add a "View" button to each order card. This button provides a clear interface element that customers can click to access detailed order information. The button will be positioned and styled to integrate with the existing card design.
apps/koyo/lib/icecreamOrder/IcecreamOrder.Unit.tsx
The key addition here is the ViewWrapper around the button:
🎯
Model.ViewWrapper: This wraps our button and handles the click functionality to show the detailed view
🆔
sliceName and modelId props: We pass the sliceName and modelId so the modal knows which order to display details for
🎨
Button styling: The button uses btn-primary and btn-xl classes for consistent styling across the app
Design Detail View
Now let's create the detailed view component in View.tsx that displays all the ice cream order information in a structured layout. This component will organize and present the order data in a readable format when the modal opens.
apps/koyo/lib/icecreamOrder/IcecreamOrder.View.tsx
This detailed view component creates a comprehensive display of the ice cream order:
🎨Header Section
Shows an ice cream emoji, the order title from dictionary, and the order ID number for reference
📊Grid Layout
Uses a 2-column grid to organize field labels and values in a clean, scannable format
🏷️Visual Elements
Toppings display as colored badges, status shows with conditional styling, and timestamps are formatted for readability
Test Your Implementation
Let's test the detailed view implementation. Navigate to your ice cream order page and click the "View" button on any order card to verify that the system works correctly.
Testing Steps:
- Navigate to http://localhost:4201/icecreamOrder
- Create a new ice cream order if you don't have any
- Click the 'View' button on any order card
- Verify the modal opens with detailed order information
- Check that all fields display correctly with proper translations
A modal popup should appear displaying all order details: size, toppings (as colored badges), status (with conditional colors), and timestamps. The modal closes when you click outside it or press the X button.
What's Next?
In the next tutorial, we'll add status management functionality that allows shop staff to update orders from "active" to "processing" to "served". This will complete the order workflow system and provide full lifecycle management for ice cream orders.