# clone the repository if you haven't already
git clone https://github.com/uPortal-contrib/notification-web-components
# navigate to the notification-icon folder
cd uPortal-web-components/@uportal/notification-icon
# install the goods
npm install
# start the app
npm start
Pretty simple:
npm run build
This will compile your JavaScript in to build/static/js/main.{buildnumbers}.js
After building, grab the compiled javascript files and place it on your page.
You can now place <notification-icon>
anywhere on your page.
Here's the guts of that html file:
<notification-icon> </notification-icon>
- Note: The component includes bootstrap, so that you can use bootstrap's styles in your content slots. However, font-awesome has issues crossing the shadow-dom boundry, so that if you include an icon in the content slot, you also need to include a
<link>
to the font-awesome stylesheet from uPortal (or elsewhere if you wish).
We have a /proxy/
leading the oidc-url
attribute. This is a developer convenience to be able to query against your local running instance of uPortal. The proxy is configured in package.json
:
"proxy": {
"/proxy": {
"target": "http://localhost:8080",
"changeOrigin": true,
"pathRewrite": {
"^/proxy": "/"
}
}
},
<notification-icon>
takes the following attributes:
Url to connect notification-endpoint. Defaults to /NotificationPortlet/api/v2/notifications
.
<notification-icon
notification-api-url="/NotificationPortlet/api/v2/notifications"
></notification-icon>
Url to connect to oidc. The default for this value is /uPortal/api/v5-1/userinfo
.
<notification-icon user-info-api-url="/uPortal/api/v5-1/userinfo"></notification-icon>
Path to a page in uportal to navigate to for "see all notifications" link.
<notification-icon see-all-notifications-url="/uPortal/p/notification"></notification-icon>
Flag to tell component to count all notifications vs unread notifications in alert icon.
<notification-icon count-all-notifications="true"></notification-icon>
A flag to tell the component to navigate to an external link from data or a provided uPortal page (likely the notification-list).
Options: list, link
<notification-icon navigation-strategy="list"></notification-icon>
Skips oidc call for api token.
<notification-icon debug></notification-icon>
npm install
npm run start
npm run build
npm run test
npm run lint
count-all-notifications
(optional, boolean): by default the notifications icon will display a count of unread items,true
will display a count of all (read and unread) items for the user.