Novu•2y ago

Notification Center Configure Settings?

Hey I'm using the notification center in React. I would like to conditionally show the notification settings options based on the user.
Is there a way to configure what settings we show and hide in the frontend?

Ask Inkeep•5/9/24, 9:36 PM

Hi @turtles, I'm an AI assistant for Novu. While a team member reviews this question, I'll see if I can find relevant sources for your question.

Ask Inkeep•5/9/24, 9:36 PM

-----------------------------
While I generate an answer, here are some sources that might be helpful:

React
API Reference
Configuring Multiple Tabs
Customizing Notification Center
-----------------------------

Ask Inkeep•5/9/24, 9:36 PM

Answer

Currently, the official documentation does not provide direct information about conditionally showing or hiding specific settings options in the Novu Notification Center based on the user directly from the frontend. The provided resources do not cover a method to programmatically control the visibility of different settings or preferences on a per-user basis within the Notification Center UI components or APIs.

However, you might find the general concept of customizing the Notification Center's appearance or behavior useful, as indicated in the documentation regarding customizing the Notification Center experience (1) , which includes adjusting styles and behavior. But for user-specific conditional display logic, such capabilities are not explicitly documented in the provided materials.

For more complex user-based conditional logic not covered in the standard documentation, it may involve implementing custom logic outside of the provided Novu components or exploring more advanced configurations that might not be directly supported at this time.

Sources
[1] Customizing Notification Center

Pawan Jain•5/10/24, 5:29 AM

@turtles

prop can be used to hide/show the cog icon
https://docs.novu.co/notification-center/client/react/api-reference#popovernotificationcenter

Pawan Jain•5/12/24, 8:55 AM

@turtles did you get chance to test prop on component?

turtlesOP•5/12/24, 11:18 PM

Hey sorry was the weekend for me (New Zealand).

Ahh yeah, had a look but that's to hide all preferences. I'm trying to show/hide specific preferences. Ideally I want the users account to meet a specific requirement before showing them the notification preferences for 'Job Complete' (see the screenshot from the original post).

We have added a gross hack in the meantime to get the preference id from the button itself (the preference buttons have ) and our backend sends us a list of allowed preferences and we filter them this way.

So is there any prop or way to deal with individual preferences?

Novu_Bot•5/12/24, 11:18 PM

@turtles, you just advanced to level 2!

Pawan Jain•5/13/24, 8:15 AM

@turtles

Checkout function prop
https://codesandbox.io/p/sandbox/kind-nova-xv6s9g?file=%2Fsrc%2FApp.js%3A13%2C1-20%2C1&fontsize=14&hidenavigation=1&theme=dark

turtlesOP•5/14/24, 3:26 AM

ahh exactly what I was after. Thanks