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!

[BrijeshGandhi]

Thank you for the Blog.

Could you please help to handle visibility with the User Scope in BTP ? Thank you !

[AjayRathore]

Have you already checked the req.user object or user.is (role) method?

[BrijeshGandhi]

Yes , I have checked.

I was looking something simple solution which can be implemented directly with UI annotations.

[AjayRathore]

As ![@UI.Hidden] expects a boolean value, Dynamic Expressions could be tried.
If you want it to be interpreted in accordance with the user scope on BTP, then the User API Service could be used to retrieve the details first and then use custom logic to set the flag.