Prerequisites –
Steps –
...
@Core.Computed: false
virtual hideEmployee : Boolean default false;
...
annotate service.Employees with @(
...
UI.Facets : [
{
$Type : 'UI.CollectionFacet',
Label : 'Employee Information',
ID : 'GeneralInformation',
Facets : [
{
$Type : 'UI.ReferenceFacet',
Label : 'Personal Details',
ID : 'EmployeeDetails',
Target : '@UI.FieldGroup#EmployeeDetails',
},
{
$Type : 'UI.ReferenceFacet',
Label : 'Additional Details',
ID : 'AdditionalDetails',
Target : '@UI.FieldGroup#AdditionalDetails',
},
],
![@UI.Hidden] : hideEmployee,
},
{
$Type : 'UI.ReferenceFacet',
Label : 'Org Details',
ID : 'OrgDetails',
Target : '@UI.FieldGroup#OrgDetails',
![@UI.Hidden] : hideEmployee,
},
]);
...
this.after(['READ'], 'Employees.drafts', employeeHandler.hideEmployeeFacet);
this.after(['READ'], 'Employees', employeeHandler.hideEmployeeFacet);
this.before(['CREATE'], 'Employees.drafts', employeeHandler.hideEmployeeFacetDraft);
...
function definition –
async function hideEmployeeFacet(req) {
for(let reqData of req){
switch (reqData.employeeType) {
...
case "Internal":
reqData.hideEmployee = false;
break;
case "External":
reqData.hideEmployee = true;
break;
...
default:
// code block
}
}
}
async function hideEmployeeFacetDraft(req) {
if(req.data.employeeType === "Internal"){
req.data.hideEmployee = false;
}
if(req.data.employeeType === "External"){
req.data.hideEmployee = true;
}
}
Note: You could choose the conditions depending on your use case. In the above code, the employee facet would be hidden based on another element, ’employeeType’.
1. After READ event is registered on both Employees & Employees.drafts.
2. Before CREATE event is registered on Employees.drafts only.
Thats it. With this on CREATE & READ employee facet could be dynamically hidden or displayed.
Thank you!