DocumentationAEM GuidesAEM Guides Documentation

Show/Hide ‘Create DitaMAP’ from folder context menu in webeditor

Last update: Sat Mar 23 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

CREATED FOR:

  • User

In this article, we will learn how to customize the Guides Web Editor to hide or show the “Create DitaMap” option in folder context menu on the basis on user/group permissions.
In this use-case we will hide this option for all non-author users.

Pre-requisites

We will be leveraging the AEM Guides Extension package which allows you to customize the UI of your app as per you requirements.
Please go through this documentation to get more insights on how Guides Extension Framework works.

Now lets get started and learn how to customize the folder context menu to hide this option for all non-author users.

As you can see from below snippet, the “create DitaMap” option is visible for an author user.

Show create DitaMap option

Let us now see how we can hide this option using Guides Extension Framework.

Implementation Steps

The implementation is broken in below parts:

  • Changes in Folder_options controller

    Each context menu has a controller id associated with it. This controller handles the on-event functionality for the various context menu options.

    In this example, we will customize the folder context menu to hide the “Create DitaMap” option for non-authors. For this, we will make changes to the folder_options.ts file present under /src in guides extension framework repository.

    We are using “viewState” as “REPLACE” to hide this option from context menu.
    We are calling a new widget in this folder_options through the key ‘id’.

const folderOptions = {
  id: "folder_options",
  contextMenuWidget: "repository_panel",
  view: {
    items: [
      {
        component: "widget",
        id: "customditamap",
        target: {
          key: "displayName",
          value: "DITA Map",
          viewState: VIEW_STATE.REPLACE,
        },
      },
    ],
  },
};

  • Creation of a new widget to handle the logic

    A new widget creation (customoptions.ts) is needed to write the logic to hide this option for non-author users only. To achieve this we have used the ‘show’ key which acts as a toggle in our JSON structure.

    You can write your own external servlet to check the group details. This way, you can customize folder menu options for your custom group as well.
    In this example, We have leveraged the OOTB AEM ‘rolesapi’ call to fetch the user details and set the response in ‘isAuthor’ as shown in above snippets.

const folderOptions = {
  id: "customditamap",
  view: {
    component: "button",
    quiet: true,
    icon: "breakdownAdd",
    label: "DITA Map",
    "on-click": "createNewDitaMap",
    show: "@extraProps.isAuthor",
  },
};

Through this, we are able to hide the button with label as “Dita Map” based on the value of ‘show’.

We have added a controller to set the ‘isAuthor’ attribute in the model, this can be done using the following syntax in the controller.

this.model.extraProps.set("key", value);

Here the key is ‘isAuthor’ and the value is the response from the rolesapi call.
We have also defined ‘createNewDitaMap’ event to enable the create DitaMap option (for author users).

controller: {
    init: function () {
      this.model.extraProps.set("isAuthor", false);

      rolesApiResponse.then((result) => {
        console.log(result);
        this.model.extraProps.set(
          "isAuthor",
          result["/content/dam"].roles.authors
        );

        console.log("testresult" + result["/content/dam"].roles.authors);
      });
    },
    createNewDitaMap() {
      repositoryController && repositoryController.next("create_new.map");
    },
  },

  • Adding the customized code

    Import the folder_options.ts and customoptions.ts to the index.ts file under /src.

Testing

  • Login to AEM with a user who is not a part of authors group. The Create DitaMap option would be hidden on any folder’s context menu as shown below.
    This use-case has been added to GIT, please find related resources below.

Hide create DitaMap option

recommendation-more-help
11125c99-e1a1-4369-b5d7-fb3098b9b178