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.

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

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!

Hi Sanchit Gupta (Xebia) . Is that data coming from a process report? I would love to have your input in a similar function I'm building.

The design, in general, can work with data from any source - reports, records, database etc. Just replace the local!notifications configurations to appropriate data query function. You can also create a new post if you face any issues/errors which is not already answered in any of the community posts.