CAP - Dynamically hide UI facets in Fiori Elements

[AjayRathore]

Prerequisites -

1. Hiding Features Using the UI.Hidden Annotation https://sapui5.hana.ondemand.com/sdk/#/topic/ca00ee45fe344a73998f482cb2e669bb


2. Virtual Elements - https://cap.cloud.sap/docs/cds/cdl#virtual-elements


3. Event handlers - https://cap.cloud.sap/docs/node.js/events#cds-event

Steps -

1. Add the required virtual elements to the entity definition.
   

           ...        
   
           @Core.Computed: false
   
           virtual hideEmployee        : Boolean default false;​
   
           ...

   
   


2. Ensure that the annotation '![@UI.Hidden]' is included in the annotations.cds file of the application..
   

   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,
   
           },
   
       ]);​

   
   


3. As 'hideEmployee' is set to false, the above UI facets are now visible on the UI by default.


4. Dynamically changing the 'hideEmployee' flag can be achieved using the event handlers below.event handler registration -
   

       ...    
   
       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!