Customizing User Settings modal in Right Drawer at Tenant Level

Forum
1

Hello,

To add new custom fields in User Settings of the Right Drawer, after referring to Can we add a custom link to the user settings? I was able to add the new User settings modal and remove existing User Setting modal, but it is reflecting at the application level, how do I make it reflect at the tenant level?

image
image594×425 16.6 KB

Thanks,
Divya K

2

Hi @Divya_Krishnamurthy,

every UI application is an UI on it’s own. Making changes to one application, won’t apply to the others.
You could develop your custom user settings as a plugin and install that plugin to all of your applications.

Regards,
Tristan

3

Hello @Tristan_Bastian, thanks for the response,
I remember trying it out and even according to this Micro Front-end - Customize the left navigation menu, removing an existing User settings modal won’t work in the micro front-end/plugin. Can you please clarify my understanding is correct, If yes then any alternative suggestion?

Thanks,
Divya K

4

Hi @Divya_Krishnamurthy,

you might still be able to use the remove method of the UserMenuService to remove certain items from there.
As an alternative you could also add a stylesheet that would take care of hiding the default user menu entry.

The approach that you tried in Micro Front-end - Customize the left navigation menu (replacing the default implementation of a service with custom implementation of that service) will not work with micro frontends. You can how ever still use the API offered by these services to remove certain elements from their state if supported. How ever this is still not how micro frontends were meant to be used as they were meant to add functionality, not remove it.

Regards,
Tristan

5

Thanks a lot, @Tristan_Bastian for the support.
Below snippet example of the remove method for reference

this.userMenu.items$
      .pipe(
        map((res) => res.find((item) => item.label === "User settings")),
        filter(Boolean),
        first()
      )
      .subscribe((res) => {
        return this.userMenu.remove(res as unknown as UserMenuItem);
      });