Activity Center

ℹ️

Audience: This article is intended for Syntphony admins

Configuring the Activity Center

Accessing Configuration

To configure the Activity Center:

  1. Navigate to Syntphony settings > This tenant > Activity Center
  2. An editor with JSON code will be displayed that allows you to customize various aspects

Activity Center Code

Configuration Interface

Activity Center Structure

The Activity Center is divided into two main mailboxes:

  1. Priority Mailbox - For high-importance notifications
  2. Non-Priority Mailbox - For regular notifications

Each mailbox has its own configuration and associated events.

IActivityCenterSettings

export interface IActivityCenterSettings {
    priorityMailbox: Mailbox;
    nonPriorityMailbox: Mailbox;
    events: Event[];
    elementsPerPage: number;
}

Properties

priorityMailbox and nonPriorityMailbox

Configure the two mailbox types that organize notifications by importance

events

Array of event configurations that determine notification behavior

elementsPerPage

Defines the number of notifications to load on each scroll in the Activity Center

  • Type: number

  • Required: Yes

Mailbox Interface

export interface Mailbox {
    id: MailboxId;
    active: boolean;
    name: ILocales;
    markNotificationAsReadOnClick: boolean;
    activeNotificationDays: number;
    orderByCategory: boolean;
    categories?: Category[];
    icon: string;
}

Properties

id

Unique identifier for the mailbox

  • Type: MailboxId

  • Required: Yes

active

Enables or disables the mailbox

  • Type: boolean

  • Required: Yes

name

Defines the display name of the mailbox in multiple languages

  • Type: ILocales

  • Required: Yes

markNotificationAsReadOnClick

When true, notifications are marked as read when clicked. When false, notifications will be automatically marked as read as they are loaded/rendered in the interface. This means notifications will be considered “read” without requiring explicit user interaction.

  • Type: boolean

  • Required: Yes

activeNotificationDays

Specifies how many days notifications remain active before expiring

  • Type: number

  • Required: Yes

orderByCategory

If true, notifications will be grouped by categories

  • Type: boolean

  • Required: Yes

categories

Define categories for organizing notifications

  • Type: Category[]

  • Required: No

icon

Specifies a UIFabric icon that will appear in the Profile menu

  • Type: string

  • Required: Yes

Category Interface

export interface Category {
    id: string;
    name: ILocales;
}

Properties

id

Unique identifier for the category

  • Type: string

  • Required: Yes

name

Display name for the category in multiple languages

  • Type: ILocales

  • Required: Yes

Event Interface

export interface Event {
    id: string;
    name: ILocales;
    source: string;
    mailboxId?: MailboxId;
    categoryId?: string;
    notifyCommunityFollowers?: boolean;
    notifyAuthorFollowers?: boolean;
    notifyTagFollowers?: boolean;
    notifyEditorFollowers?: boolean;
    notifyContentFollowers?: boolean;
    notifyContentAuthor?: boolean;
    notifyContentEditor?: boolean;
    notifyCommentCreator?: boolean;
    notifyCommentMentions?: boolean;
    notifyContentApprovers?: boolean;
    image?: IImage;
}

Properties

id

Unique identifier for the event. The following IDs are reserved for Syntphony system events:

  • Publish: Triggered when new content is published

  • Upload: Triggered when a new document is uploaded

  • Update: Triggered when existing content is updated

  • UploadUpdate: Triggered when an existing document is updated

  • Comment: Triggered when a comment is added to content

  • CommentMention: Triggered when a user is mentioned in a comment

  • SharedWithMe: Triggered when content is shared with a user

  • Like: Triggered when content receives a like

  • RequestApproval: Triggered when a content is sent for approval. Approval workflow should be enabled at SharePoint list configuration.

  • Type: string

  • Required: Yes

name

Display name for the event type in multiple languages

  • Type: ILocales

  • Required: Yes

source

Indicates if the event comes from “Syntphony” or an external source

  • Type: string

  • Required: Yes

mailboxId

Specifies which mailbox the event belongs to

  • Type: MailboxId
enum MailboxId {
    priorityMailbox = "priorityMailbox",
    nonPriorityMailbox = "nonPriorityMailbox"
}
  • Required: No

categoryId

Optionally assign the event to a category

  • Type: string

  • Required: No

notifyCommunityFollowers

Send notifications to community followers

  • Type: boolean

  • Required: No

notifyAuthorFollowers

Send notifications to the author’s followers

  • Type: boolean

  • Required: No

notifyTagFollowers

Send notifications to followers of tags used in the content

  • Type: boolean

  • Required: No

notifyEditorFollowers

Send notifications to the content editor’s followers

  • Type: boolean

  • Required: No

notifyContentFollowers

Send notifications to content followers

  • Type: boolean

  • Required: No

notifyContentAuthor

Send notifications to the original content author

  • Type: boolean

  • Required: No

notifyContentEditor

Send notifications to the content editor

  • Type: boolean

  • Required: No

notifyCommentCreator

Send notifications to comment creators when they receive a reply

  • Type: boolean

  • Required: No

notifyCommentMentions

Send notifications to users mentioned in comments

  • Type: boolean

  • Required: No

notifyContentApprovers

Send notifications content approvers when approval workflow is enabled.

  • Type: boolean

  • Required: No

image

Specifies an image to display in the notification card. Only applicable and required for external source events. Not used for Syntphony events.

  • Type: IImage

  • Required: Only for external notifications

IImage Interface

export interface IImage {
    base64?: string;
    name?: string;
    preview?: string;
    url?: string;
    file?: File;
}

Properties

base64

Base64 encoded string representation of the image

  • Type: string

  • Required: No

name

Name of the image file

  • Type: string

  • Required: No

preview

URL for a preview version of the image

  • Type: string

  • Required: No

url

Full URL to access the image

  • Type: string

  • Required: No

file

Optional File object representing the image

  • Type: File

  • Required: No

External Source Events

For events coming from external sources, you need to add an image that will appear in the notification card:

{
  "id": "NewExternalPost",
  "name": {
    "default": "New External Blog Post",
    "en-US": "New External Blog Post",
    "es-ES": "Nueva Entrada de Blog Externa",
    "it-IT": "Nuovo Post del Blog Esterno"
  },
  "source": "External",
  "mailboxId": "priorityMailbox",
  "categoryId": "external-content",
  "image": {
    "url": "https://cdn.company-domain.com/blog/external-notification-icon.png"
  }
}

Default Configuration Example

const activityCenterDefaultSettings: IActivityCenterSettings = {
  priorityMailbox: {
    id: 'priorityMailbox',
    active: false,
    icon: 'Ringer',
    name: {
      default: 'Priority Mailbox',
      'en-US': 'Priority Mailbox',
      'es-ES': 'Buzón prioritario',
      'it-IT': 'Casella prioritaria',
    },
    markNotificationAsReadOnClick: true,
    activeNotificationDays: 30,
    orderByCategory: false,
    categories: null,
  },
  nonPriorityMailbox: {
    id: 'nonPriorityMailbox',
    active: true,
    icon: 'AlarmClock',
    name: {
      default: 'Activity Center',
      'en-US': 'Activity Center',
      'es-ES': 'Centro de actividad',
      'it-IT': 'Centro attività',
    },
    markNotificationAsReadOnClick: true,
    activeNotificationDays: 30,
    orderByCategory: false,
    categories: [
			{
				'id': 'social',
				'name': {
					'default': 'Social',
					'en-US': 'Social',
					'es-ES': 'Social',
					'it-IT': 'Social'
				}
			}
		]
  },
  events: [
    {
      id: 'Publish',
      categoryId: null,
      name: {
        default: 'New Content',
        'en-US': 'New Content',
        'es-ES': 'Nuevo contenido',
        'it-IT': 'Nuovo contenuto',
      },
      source: 'Syntphony',
      mailboxId: 'nonPriorityMailbox',
      categoryId: 'social',
      notifyCommunityFollowers: true,
      notifyAuthorFollowers: true,
      notifyTagFollowers: true,
    },
    {
      id: 'Upload',
      categoryId: null,
      name: {
        default: 'New document',
        'en-US': 'New document',
        'es-ES': 'Nuevo documento',
        'it-IT': 'Nuovo documento',
      },
      source: 'Syntphony',
      mailboxId: 'nonPriorityMailbox',
      categoryId: 'social',
      notifyCommunityFollowers: true,
      notifyAuthorFollowers: true,
      notifyTagFollowers: true,
    },
    {
      id: 'Update',
      categoryId: null,
      name: {
        default: 'Content update',
        'en-US': 'Content update',
        'es-ES': 'Actualización en contenido',
        'it-IT': 'Aggiornamento contenuto',
      },
      source: 'Syntphony',
      mailboxId: 'nonPriorityMailbox',
      categoryId: 'social',
      notifyCommunityFollowers: true,
      notifyAuthorFollowers: true,
      notifyTagFollowers: true,
      notifyContentFollowers: true,
      notifyContentAuthor: true,
    },
    {
      id: 'UploadUpdate',
      categoryId: null,
      name: {
        default: 'Document update',
        'en-US': 'Document update',
        'es-ES': 'Actualización en documento',
        'it-IT': 'Aggiornamento documento',
      },
      source: 'Syntphony',
      mailboxId: 'nonPriorityMailbox',
      categoryId: 'social',
      notifyCommunityFollowers: true,
      notifyAuthorFollowers: true,
      notifyTagFollowers: true,
      notifyContentFollowers: true,
      notifyContentAuthor: true,
    },
    {
      id: 'Comment',
      name: {
        default: 'Comment',
        'en-US': 'Comment',
        'es-ES': 'Comentario',
        'it-IT': 'Commento',
      },
      source: 'Syntphony',
      mailboxId: 'nonPriorityMailbox',
      categoryId: 'social',
      notifyContentAuthor: true,
      notifyContentEditor: true,
      notifyContentFollowers: true,
      notifyCommentCreator: true,
      notifyCommentMentions: true,
    },
    {
      id: 'CommentMention',
      name: {
        default: 'Mention',
        'en-US': 'Mention',
        'es-ES': 'Mención',
        'it-IT': 'Menzione',
      },
      source: 'Syntphony',
      mailboxId: 'nonPriorityMailbox',
      categoryId: 'social'
    },
    {
      id: 'SharedWithMe',
      name: {
        default: 'Shared with me',
        'en-US': 'Shared with me',
        'es-ES': 'Compartido conmigo',
        'it-IT': 'Condiviso con me',
      },
      source: 'Syntphony',
      mailboxId: 'nonPriorityMailbox',
      categoryId: 'social'
    },
    {
      id: 'Like',
      name: {
        default: 'Like',
        'en-US': 'Like',
        'es-ES': 'Me gusta',
        'it-IT': 'Mi piace',
      },
      source: 'Syntphony',
      mailboxId: 'nonPriorityMailbox',
      categoryId: 'social',
      notifyContentAuthor: true,
      notifyContentEditor: true,
    },
    {
      id: 'RequestApproval',
      name: {
        default: 'Request approval',
        'en-US': 'Request approval',
        'es-ES': 'Solicitud de aprobación',
        'it-IT': 'Richiedi approvazione'
      },
      source: 'Syntphony',
      mailboxId: 'nonPriorityMailbox',
      categoryId: 'social',
      notifyContentApprovers: true
    }
  ],
  elementsPerPage: 10,
};