Notification bell

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.

Hi Sanchit, thanks for the reply. Is this screenshot present somewhere in the documentation. If it possible, can you give me the url please? Thanks in advance

Hi Sanchit, thanks for the reply. Is this screenshot present somewhere in the documentation. If it possible, can you give me the url please? Thanks in advance

I took this from one of the projects I worked on, If you want I can share the code.

Ok Sanchit, if you want you can share the code, please

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
  )
)

Thank you!