How to create custom display notification in workshop

Hello,

Is this possible to make in the workshop?
How can I design a custom error notification system (similar to the one in the image with a red exclamation icon and expandable details) that effectively communicates both a high-level summary of the issue and the specific technical details causing it, while ensuring it doesn’t disrupt the user experience?

Hi! Many of the components we used internally to build this linting system are available in Workshop, but a couple are not.

For the top-level button, you can use the Button Group widget. The text of this button can be controlled using a variable, so if you have a variable keeping track of the errors you can use it here, combined with variable transformations or a function-backed variable to get the complete button text you want.

The linting buttons above use a popover to display more information. Popovers are not available when building a Workshop module, but we do have 2 different types of overlays - drawer or modal. You can fill these overlays with any widgets, meaning you could use a property list or other widgets to display the full information for the notifications.

With these two pieces you can then configure your button to open your overlay on click.

Happy building!

1 Like

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.