Dialog tabs and permissions

[kevingtan]

Hi all,

I am trying to create a page dialog based on the permissions. If I have tab1...tab5, I like to create the page template with the dialog having 5 tabs for the admin, and only the first 4 tabs for regular content editors.

The "granite:rendercondition" doesn't work for "cq/gui/components/authoring/dialog" sling:resourceType. I wonder if it works by creating a client library. I figure that Granite.author returns "undefined" in my AEM 6.5.11 with Touch UI mode so I can't get any user info from the Granite API. My initial idea is to hide/show the tab as:

if(!Granite.author.ContentFrame.getUserID() belongs to "admin")

   hide tab5

Am I missing something here?

Thanks!

-kt

[ManviSharma]

Hi Kevin,

Creating a dialog in AEM with tabs visible based on user permissions can be achieved, but it requires a combination of server-side logic and client-side customization. The problem you are facing lies in the limitations of the granite:rendercondition and the absence of user information via the Granite API in AEM 6.5.11 Touch UI.

Few approaches:

1. Using Hide Conditions (granite:hide)

granite:hide is another property you can use to hide specific fields or tabs based on conditions. This is handled via policies or design configurations.

Example:

+ tab5
  - granite:hide = "${!cqDesign.isAdmin}"

reference doc: 
https://experienceleague.adobe.com/en/docs/experience-manager-65/content/implementing/developing/com...


2. Customizing Granite UI Components

Customizing a Granite UI component allows for more control over how tabs are displayed. You can create a new Granite UI field component or extend an existing one by overriding its render.jsp.

reference doc:
https://experienceleague.adobe.com/en/docs/experience-manager-65/content/implementing/developing/pla...

[arunpatidar]

Hi @kevingtan 

You can use permission with rendercondition to show hide tab

https://developer.adobe.com/experience-manager/reference-materials/6-5/granite-ui/api/jcr_root/libs/... 

Or you can build your own, example

https://github.com/arunpatidar02/aem63app-repo/blob/master/java/AppSimpleRenderConditionsServlet.jav... 

[kevingtan · Accepted solution]

HI @arunpatidar & @ManviSharma 

Thanks for your help! I actually figured out my own way to achieve the feature using client library.

1. First of all make an ajax call to retrieve the current User ID

2. make another ajax call to retrieve the groups based on the user ID

3. If none of the groups is allowed to access the tab, hide the tab

$(document).on("foundation-contentloaded", function () {
    let s = new Set(getUserGroups());
    let uniqueGroups = [...s];
    if($.inArray("prev-group", uniqueGroups) < 0)
    {
        $("coral-tab").each(function(index, value){
           for (let i = 0; i < value.childNodes.length; i++) {
               const element = value.childNodes[i];
               if(element.nodeValue=="Prev Tab")
               {
                   $(this).hide();
               }

            }
         });
    }
    
    function getUserID(){
        var userID;
        $.ajax({
            url: "/libs/granite/security/currentuser.json",
            ...
        }).done(handler);
        function handler(data){
            // -- set userID based on data
        }
        return userID;
    }

    function getUserGroups(){
        var userGroups=[];
        $ajax({//-- same as getUserID, url: "/bin/security/authorizables.json?filter=" + getUserID()}).handler(data);
        return userGroups;
    }
});