[[{“value”:”
Hi Everyone,
Today, I would like to share a blog about building interactive SAPUI5 UI Integration Cards using List and Object Cards with local JSON data.
SAPUI5 UI Integration Cards provide a lightweight and reusable way to display business information in a compact and visually appealing format. They can be embedded into SAP Fiori applications, SAP Build Work Zone, dashboards, and other SAP solutions to create rich and interactive user experiences.
In many business scenarios, users first view summarized information in a List Card and then need to access more detailed information. This is commonly known as the Master-Detail pattern. By combining a List Card with an inline Object Card using the ShowCard action, users can quickly navigate from a summary view to detailed information without leaving the current context.
In this blog, we will build an interactive SAPUI5 UI Integration Card application using local JSON data. We will create a List Card, configure an inline Object Card, and implement a Master-Detail experience using the ShowCard action. By the end of this blog, you will understand how to build interactive and reusable UI Integration Cards within a single card manifest.
Overview
SAPUI5 UI Integration Cards are reusable UI components that display business information in a compact format. They help developers build interactive dashboards and applications while keeping the UI clean and modular.
In this blog, we will use two card types:
- List Card – Displays a collection of records in a summarized format.
- Object Card – Displays detailed information about a selected record.
To make the application interactive, we will use the ShowCard action. When a user clicks an item in the List Card, an inline Object Card opens and displays the corresponding details, creating a Master-Detail experience.
For demonstration purposes, I am using an Employee example with local JSON data.
Step 1: Create a New SAPUI5 Application
Create a new SAPUI5 application using the SAP Fiori Application Generator in SAP Business Application Studio (BAS) or Visual Studio Code.
Select the following options:
- Application Type: Basic SAPUI5 Application
- Framework: SAPUI5
- Minimum UI5 Version: 1.150.0
- Project Name: intergrationuicards
After creating the project, the structure will look like:
Step 2: Add the UI Integration Library
UI Integration Cards are provided by the sap.ui.integration library.
Open:
webapp/manifest.json
Under:
sap.ui5
└── dependencies
└── libs
Add the following library:
“sap.ui5”: {
“flexEnabled”: true,
“dependencies”: {
“minUI5Version”: “1.150.0”,
“libs”: {
“sap.m”: {},
“sap.ui.core”: {},
“sap.ui.integration”: {}
}
},
This library enables the use of the Card control within SAPUI5 applications.
Step 3: Create the Required Project Structure
Inside the webapp folder, create the following folders:
webapp
│
├── cards
└── model
These folders will be used for:
- cards – Stores the UI Integration Card manifest (cardManifest.json).
- model – Stores the local JSON data (employees.json).
Note: You can refer to the project structure shown in the Step 1 screenshot to see where these folders should be created.
Step 4: Create Local JSON Data
Inside the model folder, create a file named:
model/employees.json
Add your sample employee data.
{
“employees”: [
{
“firstName”: “Deepa”,
“lastName”: “Ragho”,
“name”: “Deepa Ragho”,
“gender”: “Female”,
“department”: “SAP Technology”,
“location”: “Pune”,
“photo”: “https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=150”
},
{
“firstName”: “Rahul”,
“lastName”: “Sharma”,
“name”: “Rahul Sharma”,
“gender”: “Male”,
“department”: “Development”,
“location”: “Mumbai”,
“photo”: “https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=150”
},
{
“firstName”: “Priya”,
“lastName”: “Patel”,
“name”: “Priya Patel”,
“gender”: “Female”,
“department”: “Consulting”,
“location”: “Hyderabad”,
“photo”: “https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=150”
},
{
“firstName”: “John”,
“lastName”: “Smith”,
“name”: “John Smith”,
“gender”: “Male”,
“department”: “Architecture”,
“location”: “Bengaluru”,
“photo”: “https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=150”
},
{
“firstName”: “Ananya”,
“lastName”: “Rao”,
“name”: “Ananya Rao”,
“gender”: “Female”,
“department”: “Design & UX”,
“location”: “Bengaluru”,
“photo”: “https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=150”
},
{
“firstName”: “Michael”,
“lastName”: “Chang”,
“name”: “Michael Chang”,
“gender”: “Male”,
“department”: “Quality Assurance”,
“location”: “Pune”,
“photo”: “https://images.unsplash.com/photo-1539571696357-5a69c17a67c6?w=150”
},
{
“firstName”: “Vikram”,
“lastName”: “Malhotra”,
“name”: “Vikram Malhotra”,
“gender”: “Male”,
“department”: “DevOps”,
“location”: “Gurugram”,
“photo”: “https://images.unsplash.com/photo-1519085360753-af0119f7cbe7?w=150”
},
{
“firstName”: “Sarah”,
“lastName”: “Jenkins”,
“name”: “Sarah Jenkins”,
“gender”: “Female”,
“department”: “Product Management”,
“location”: “Mumbai”,
“photo”: “https://images.unsplash.com/photo-1544005313-94ddf0286df2?w=150”
},
{
“firstName”: “Amit”,
“lastName”: “Verma”,
“name”: “Amit Verma”,
“gender”: “Male”,
“department”: “Security & Cloud”,
“location”: “Hyderabad”,
“photo”: “https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?w=150”
},
{
“firstName”: “Elena”,
“lastName”: “Rostova”,
“name”: “Elena Rostova”,
“gender”: “Female”,
“department”: “Data Science”,
“location”: “Delhi NCR”,
“photo”: “https://images.unsplash.com/photo-1554151228-14d9def656e4?w=150”
}
]
}
This JSON file acts as the data source for the List Card.
Step 5: Create the Card Manifest
Inside the cards folder, create a file named:
card/cardManifest.json
Add the following code:
{
“_version”: “1.15.0”,
“sap.app”: {
“id”: “employee.card”,
“type”: “card”,
“title”: “Employee Card”,
“applicationVersion”: {
“version”: “1.0.0”
}
},
“sap.card”: {
“type”: “List”,
“configuration”: {
“childCards”: {
“employeeDetail”: {
“manifest”: {
“sap.app”: {
“id”: “employee.detail.card”,
“type”: “card”
},
“sap.card”: {
“type”: “Object”,
“header”: {
“title”: “{employee>/name}”,
“subtitle”: “{employee>/department}”,
“icon”: {
“src”: “{employee>/photo}”,
“shape”: “Circle”
}
},
“content”: {
“groups”: [
{
“title”: “Personal Details”,
“items”: [
{
“label”: “First Name”,
“value”: “{employee>/firstName}”
},
{
“label”: “Last Name”,
“value”: “{employee>/lastName}”
},
{
“label”: “Full Name”,
“value”: “{employee>/name}”
},
{
“label”: “Gender”,
“value”: “{employee>/gender}”
}
]
},
{
“title”: “Professional Information”,
“items”: [
{
“label”: “Department”,
“value”: “{employee>/department}”
},
{
“label”: “Office Location”,
“value”: “{employee>/location}”
}
]
}
]
}
}
}
}
}
},
“header”: {
“title”: “Employee List”,
“subTitle”: “Explore departments and locations”
},
“content”: {
“data”: {
“request”: {
“url”: “/model/employees.json”
},
“path”: “/employees”
},
“item”: {
“icon”: {
“src”: “{photo}”,
“shape”: “Circle”
},
“title”: “{firstName}”,
“description”: “{location}”,
“actions”: [
{
“type”: “ShowCard”,
“parameters”: {
“childCardKey”: “employeeDetail”,
“data”: {
“employee”: {
“firstName”: “{firstName}”,
“lastName”: “{lastName}”,
“name”: “{name}”,
“gender”: “{gender}”,
“department”: “{department}”,
“location”: “{location}”,
“photo”: “{photo}”
}
}
}
}
]
}
}
}
}
This manifest contains the complete configuration for both the List Card and the inline Object Card. The List Card displays a summary of the available records, while the Object Card displays detailed information about the selected record. Instead of creating separate card manifests, the Object Card is defined as a child card within the same manifest and is displayed using the ShowCard action. This approach creates a simple Master-Detail experience within a single card configuration.
Understanding the Card Manifest
List Card
The List Card serves as the master view of the application, displaying a summary of the available records. It is configured using the sap.card section with the card type set to List.
The List Card includes the following sections:
- Header – Displays the card title and subtitle.
- Data Source – Loads data from the local employees.json file.
- Item Template – Displays each record with a profile image, name, and location.
- Click Action – Uses the ShowCard action to open the Object Card when a user selects a list item.
This provides users with a clean and interactive summary view of the available records.
Object Card
The Object Card serves as the detail view of the application and is defined as a child card using the configuration.childCards section.
When a user selects an item from the List Card, the selected data is passed to the Object Card, which displays detailed information such as:
- First Name
- Last Name
- Full Name
- Gender
- Department
- Office Location
For better readability, the information is organized into the following groups:
- Personal Details
- Professional Information
ShowCard Action
The ShowCard action connects the List Card with the Object Card.
When a user clicks a record in the List Card:
- The selected record’s data is passed to the child Object Card.
- The ShowCard action automatically opens the Object Card.
- The Object Card displays the detailed information for the selected record.
This provides a smooth Master-Detail navigation experience without requiring additional pages or routing.
Step 6: Display the Card in SAPUI5
Open:
View/App.view.xml
Import the UI Integration Card namespace and add the Card control.
<mvc:View
controllerName=”intergrationuicards.controller.App”
displayBlock=”true”
xmlns:mvc=”sap.ui.core.mvc”
xmlns=”sap.m”
xmlns:card=”sap.ui.integration.widgets”>
<App id=”idApp”>
<pages>
<Page id=”idMainPage” title=”UI Integration Card”>
<content>
<card:Card id=”idEmployeeCard” manifest=”/cards/cardManifest.json” width=”400px”/>
</content>
</Page>
</pages>
</App>
</mvc:View>
This renders the UI Integration Card inside the SAPUI5 application.
Step 7: Run the Application
Open the terminal and execute the following command:
npm start
Once the application starts successfully, open:
The application displays the List Card populated with data from the local JSON file.
Output:
Step 8: Test the Master-Detail Interaction
Click any record displayed in the List Card.
When a user selects a record:
- The ShowCard action is triggered.
- The inline Object Card opens automatically.
- The selected record’s detailed information is displayed.
- The detail view remains within the same interaction flow, creating a simple Master-Detail experience.
Output:
Final Output
Click any item in the List Card to open the Object Card and view the selected record’s detailed information.
Conclusion
In this blog, we learned how to build interactive SAPUI5 UI Integration Cards using local JSON data. We created a List Card to display summarized information and configured an inline Object Card using the ShowCard action to implement a simple Master-Detail experience.
This approach helps create interactive, reusable, and user-friendly interfaces while keeping the implementation simple within a single card manifest. I hope this blog helps you understand the fundamentals of building List Cards, Object Cards, and implementing Master-Detail navigation using SAPUI5 UI Integration Cards.
Thanks and Regards,
Deepa Ramesh Ragho
“}]]
#abap