Notification bell

Question

Hello everyone, 
 I would like to implement a notification bell on an interface, that would show me notifications, similar to the facebook one attached, where if I click on it I see notification messages. I found a link to the post docs.appian.com/.../ux_messages_comments.html but it doesn't suit for my case : I don't want to take up additional space in my interface, nor is it nice in terms of user experience. 
 Thank you very much in advance

sanchitg0002 · Accepted Answer

Here it is 
 a!localVariables(
 local!notifications: {
 {
 name: "Sanchit Gupta",
 eventName: "Case Progress",
 eventDetails: "Still waiting for Review",
 date: today(),
 time: time(now()),
 
 },
 {
 name: "Alberto",
 eventName: "New Request",
 eventDetails: " How much time it takes approximately for request to be completed?",
 date: today() - 1,
 time: time(now()),
 
 }
 },
 a!sectionLayout(
 label: "Notification",
 labelIcon: "bell",
 iconAltText: "Bell Icon",
 labelSize: "MEDIUM_PLUS",
 labelHeadingTag: "H2",
 labelColor: "#147E82",
 contents: {
 a!forEach(
 items: local!notifications,
 expression: a!cardLayout(
 contents: {
 a!sideBySideLayout(
 items: {
 a!sideBySideItem(),
 a!sideBySideItem(
 item: a!richTextDisplayField(
 labelPosition: "COLLAPSED",
 value: {
 a!richTextIcon(icon: "calendar"),
 a!richTextItem(
 text: concat(" ", property(fv!item, "date", null))
 )
 }
 ),
 width: "MINIMIZE"
 ),
 a!sideBySideItem(
 item: a!richTextDisplayField(
 labelPosition: "COLLAPSED",
 value: {
 a!richTextIcon(icon: "clock-o"),
 a!richTextItem(
 text: concat(" ", property(fv!item, "time", null))
 )
 }
 ),
 width: "MINIMIZE"
 )
 }
 ),
 a!sideBySideLayout(
 items: {
 a!sideBySideItem(
 item: a!stampField(
 text: left(property(fv!item, "name", null), 1),
 backgroundColor: "#0C5659",
 size: "TINY"
 ),
 width: "MINIMIZE"
 ),
 a!sideBySideItem(
 item: a!richTextDisplayField(
 labelPosition: "COLLAPSED",
 value: {
 a!richTextItem(
 text: property(fv!item, "name", null),
 size: "MEDIUM",
 style: "STRONG"
 ),
 char(10),
 a!richTextItem(
 text: property(fv!item, "eventName", null),
 style: "STRONG"
 ),
 a!richTextItem(
 text: concat(
 " ",
 property(fv!item, "eventDetails", null)
 )
 )
 }
 ),
 width: "10X"
 )
 }
 )
 },
 style: "#E9F5FE",
 shape: "SEMI_ROUNDED",
 showBorder: false()
 )
 )
 },
 isCollapsible: true
 )
)

Mathieu Drouin · Answer

This is not possible. I think your best bet is to have a small widget on the right or left of the interface as in the last example in the inspiration page.

sanchitg0002 · Answer

Are you just looking for a design to implement this in Appian? You can show 'em like this in a side section on your site page.

Notification bell

Top Replies