This feature enables administrators to embed custom service list views within both standard and custom UIs via adaptation configuration, with support for passing contextual parameters from the host UI.
Business Benefits:
By embedding relevant custom service lists views directly in the application UI where users need them, employees spend less time navigating between screens and more time focusing on value-added tasks. Also ensures consistency with the native look and feel of the application.
Passing parameters from the host UI enables users to see contextually filtered or relevant records automatically.
Example Scenario
Consider a work order management system where each work order is linked to an employee. An employee needs quick access to view all work orders assigned to them without navigating away from their current workspace.
Solution: Embed the work order list view directly in the employee's details, automatically filtered by their employee ID to display only their assigned work orders.
Please Note : This blog focuses exclusively on embedding the list view component —not on building the underlying work order example service itself.
How to do:
The work order-to-employee(project Lead) relationship is defined in the service metadata JSON configuration, establishing the association between work orders and their assigned employees.
{
“name”: “projectLead”,
“dataType”: “OBJECT”,
“creatable”: true,
“updatable”: true,
“nullable”: true,
“sortable”: false,
“filterable”: true,
“searchable”: false,
“label”: “Project Lead”,
“objectDefinition”: [
{
“name”: “id”,
“dataType”: “STRING”,
“creatable”: true,
“updatable”: true,
“nullable”: true,
“sortable”: false,
“filterable”: true,
“searchable”: false,
“label”: “Project Lead ID”,
“dataFormat”: “UUID”,
“descriptionAttribute”: “formattedName”,
“keyType”: “FOREIGN”,
“objectReference”: {
“targetAttribute”: “id”,
“targetEntity”: “sap.crm.md.employeeservice.entity.employee”,
“keyGroup”: “projectLead”,
“targetService”: “sap.crm.md.service.employeeService”,
“sourceEntity”: “customer.ssc.workorderservice.entity.workOrder”,
“associationType”: “ASSOCIATION”,
“sourceAttribute”: “projectLead.id”
},
“analyticsRelevant”: true,
“labelTextId”: “workOrder.projectLead_id”,
“searchWeightage”: 1
},
{
“name”: “displayId”,
“dataType”: “STRING”,
“creatable”: false,
“updatable”: false,
“nullable”: true,
“sortable”: true,
“filterable”: false,
“searchable”: true,
“displayId”: true,
“label”: “Employee Display ID”,
“dataFormat”: “ALPHANUMERIC”,
“objectReference”: {
“associationType”: “REFERENCE”,
“targetAttribute”: “displayId”,
“keyGroup”: “projectLead”,
“sourceEntity”: “customer.ssc.workorderservice.entity.workOrder”
},
“analyticsRelevant”: true,
“labelTextId”: “workOrder.projectLead_displayId”,
“searchWeightage”: 1
},
{
“name”: “formattedName”,
“dataType”: “STRING”,
“creatable”: false,
“updatable”: false,
“nullable”: true,
“sortable”: true,
“filterable”: false,
“searchable”: true,
“label”: “Employee Name”,
“objectReference”: {
“associationType”: “REFERENCE”,
“targetAttribute”: “formattedName”,
“keyGroup”: “projectLead”,
“sourceEntity”: “customer.ssc.workorderservice.entity.workOrder”
},
“analyticsRelevant”: true,
“labelTextId”: “workOrder.projectLead_formattedName”,
“searchWeightage”: 1
}
],
“analyticsRelevant”: true,
“labelTextId”: “workOrder.projectLead”,
“searchWeightage”: 1
},
To enable filtering by employee, then as shown above in metadata json for the projectLead(employee) ID field must be configured with the filterable property set to true. This marks the field as a valid filter criterion.
In external service handle the filter logic based on employee ID.
- Design App configuration
In the design App, add List Card available under Embedded Component section.
Select the filter parameters you want to apply to the embedded view.
A dialog will display all available filterable fields from your service metadata—these are fields marked with filterable: true.
For this example, select the Project Lead ID field (which represents the project lead or assigned employee) as your binding parameter.
Confirm and save your design changes to the application. The embedded component now knows which parameters to filter by.
Open the desired UI application where you want to embed the work order list view .Add a new section to the UI layout. Click Add Embedded Component.
A list displays all custom services that have embedded component (EC) added in their respective design apps.
Select the work order custom service from this list, then add its list view component to the section.
Click on bind parameters icon and bind the employee ID. This step is similar to mashup parameter binding.
Click on apply. Exit adaptation mode. The embedded list view is displayed on UI as shown below.
Employee ID is sent as Filter Parameter in Request :
When a filter parameter is passed from the UI to the embedded component, the external service must intercept and process this request(get request with filter parameter). The external service returns the filtered dataset back which is displayed in the embedded component on the UI. Filter parameters are optional and can be configured as per use case.
Note: Since the embedded component feature is available for custom UIs, in this example EC is added in workorder custom UI for demonstration. .If the embedded component feature is not available for your desired standard UI application, please raise a feature request against the specific application component.
