Components / Library version 3.3.1
This component allows Watermark users to switch between products. It displays a dropdown menu with a list of products that a Watermark user has permission to access, as well as the option to log out.
The product data can be retrieved from an endpoint (with
load-from-userinfo set to
true), or passed via props (props mode).
* Required property ** Required in certain cases
user-nameis the only required prop.
JSON string | array
The products, i.e., user modules, accessible to the user. The user's modules should be fetched, and the data should be filtered to include the
id of the product, its
Depending on the framework of your app, set
products to this array of objects, or stringify the array to set
products to a JSON string.
The component will redirect to this link when the user clicks the logout option. You can leave this out if you prefer to handle the logout yourself (using the
1 | 2 | 3
saml_link_urlof the user's modules. Set the value as follows:
- none or off:
- username-password or username_password_sso:
- saml or saml_sso:
Usage in HTML
Edit the code below to see changes reflected in the example above.
Note: When in "endpoint mode" (
load-from-userinfo="true"), the component expected the data as JSON at the endpoint
For the example below to work this site serves fake data at this endoint, which you can see by clicking here
Usage in Elm
Code generated from HTML.
Screen readers announce whether the menu is expanded or collapsed.
|Escape||Closes the menu.|