NotificationInbox

TsgcHTMLComponent_NotificationInbox: een bel met een ongelezen-badge en een dropdownlijst met de meldingen van één gebruiker, in Delphi, C++ Builder en .NET. Je applicatie bewaart de rijen, het component rendert ze.

TsgcHTMLComponent_NotificationInbox

De bibliotheek slaat niets op. Je applicatie beantwoordt OnLoadNotifications met de rijen die ze bewaart en krijgt via OnMarkRead en OnMarkAllRead te horen wat de gebruiker deed, zodat ze dat kan vastleggen. Het component rendert UI en dwingt geen autorisatie af. Het werkt op elke editie, via WebSocket of Server-Sent Events.

Componentklasse

TsgcHTMLComponent_NotificationInbox (unit sgcHTML_Component_NotificationInbox)

Rendert

Bootstrap-dropdownmarkup: een bel, een ongelezen-badge en een lijst

Talen

Delphi, C++ Builder, .NET

Maak het aan, handel drie gebeurtenissen af, routeer de acties

Geef de inbox een InboxID, vul die vanuit je eigen opslag in OnLoadNotifications, leg vast wat de gebruiker deed in OnMarkRead en OnMarkAllRead, en routeer de geposte acties naar ProcessAction met de gebruiker uit de sessie.

uses
  sgcHTML_Session, sgcHTML_Component_NotificationInbox;

var
  oInbox: TsgcHTMLComponent_NotificationInbox;
begin
  oInbox := TsgcHTMLComponent_NotificationInbox.Create(nil);
  try
    oInbox.InboxID := 'inbox';
    oInbox.Title := 'Notifications';
    oInbox.MaxItems := 10;
    oInbox.OnLoadNotifications := InboxLoad;
    oInbox.OnMarkRead := InboxMarkRead;
    oInbox.OnMarkAllRead := InboxMarkAllRead;

    // the user comes from the session, never from the form
    oInbox.LoadNotifications(sgcHTMLRequestSession.UserID);
    Response := oInbox.HTML;   // bell, unread badge and dropdown
  finally
    oInbox.Free;
  end;
end;

// the application owns the rows: fill the list, newest first
procedure TMain.InboxLoad(Sender: TObject; const aUserID: string;
  aList: TsgcHTMLInboxItems);
begin
  with aList.Add do
  begin
    Id := '1042';
    Title := 'New order';
    Text := 'Order #1042 was placed.';
    Timestamp := '2 min ago';
    Read := False;
  end;
end;

procedure TMain.InboxMarkRead(Sender: TObject; const aUserID,
  aNotificationID: string);
begin
  // persist it, after checking that aUserID owns aNotificationID
end;

// in the message handler that receives the actions the inbox posts
if oInbox.ProcessAction(vUser, vAction, vNotificationID) then
  oHTMX.PushFragment(vGuid, oInbox.GetListFragmentHTML +
    oInbox.GetBadgeFragmentHTML);
// includes: sgcHTML_Session.hpp, sgcHTML_Component_NotificationInbox.hpp

TsgcHTMLComponent_NotificationInbox *oInbox = new TsgcHTMLComponent_NotificationInbox(NULL);
try
{
  oInbox->InboxID = "inbox";
  oInbox->Title = "Notifications";
  oInbox->MaxItems = 10;
  oInbox->OnLoadNotifications = InboxLoad;
  oInbox->OnMarkRead = InboxMarkRead;
  oInbox->OnMarkAllRead = InboxMarkAllRead;

  // the user comes from the session, never from the form
  oInbox->LoadNotifications(sgcHTMLRequestSession()->UserID);
  String html = oInbox->HTML;   // bell, unread badge and dropdown
}
__finally
{
  delete oInbox;
}

// the application owns the rows: fill the list, newest first
void __fastcall TMain::InboxLoad(TObject *Sender, const String aUserID,
  TsgcHTMLInboxItems *aList)
{
  TsgcHTMLInboxItem *item = aList->Add();
  item->Id = "1042";
  item->Title = "New order";
  item->Text = "Order #1042 was placed.";
  item->Timestamp = "2 min ago";
  item->Read = false;
}

void __fastcall TMain::InboxMarkRead(TObject *Sender, const String aUserID,
  const String aNotificationID)
{
  // persist it, after checking that aUserID owns aNotificationID
}

// in the message handler that receives the actions the inbox posts
if (oInbox->ProcessAction(vUser, vAction, vNotificationID))
  oHTMX->PushFragment(vGuid, oInbox->GetListFragmentHTML() +
    oInbox->GetBadgeFragmentHTML());
using esegece.sgcWebSockets;

var inbox = new TsgcHTMLComponent_NotificationInbox();
inbox.InboxID = "inbox";
inbox.Title = "Notifications";
inbox.MaxItems = 10;
inbox.OnLoadNotifications += InboxLoad;
inbox.OnMarkRead += InboxMarkRead;
inbox.OnMarkAllRead += InboxMarkAllRead;

// the user comes from the session, never from the form
string user = sgcHTMLSessionHelpers.sgcHTMLRequestSession()?.UserID ?? "";
inbox.LoadNotifications(user);
string html = inbox.HTML;   // bell, unread badge and dropdown

// the application owns the rows: fill the list, newest first
void InboxLoad(object sender, string userID, TsgcHTMLInboxItems list)
{
    var item = list.Add();
    item.Id = "1042";
    item.Title = "New order";
    item.Text = "Order #1042 was placed.";
    item.Timestamp = "2 min ago";
    item.Read = false;
}

void InboxMarkRead(object sender, string userID, string notificationID)
{
    // persist it, after checking that userID owns notificationID
}

// in the message handler that receives the actions the inbox posts
if (inbox.ProcessAction(user, action, notificationId))
    htmx.PushFragment(guid, inbox.GetListFragmentHTML() + inbox.GetBadgeFragmentHTML());

Belangrijkste eigenschappen en methoden

De members die je het vaakst gebruikt.

Items

Items is een TsgcHTMLInboxItems-verzameling; elk TsgcHTMLInboxItem heeft Id, Title, Text, Timestamp, Url, Icon en Read. Alles in een rij is data en wordt bij het renderen geëscaped, ook de Icon: geef een letterlijke glyph mee, nooit een HTML-entiteit of markup. Url wordt gesanitized en links met javascript: en data: worden geweigerd.

Opslaggebeurtenissen

Het component bewaart alleen wat het rendert. OnLoadNotifications(aUserID, aList) wordt aangeroepen met een aList die al is leeggemaakt: vul die met de meldingen van de gebruiker, nieuwste eerst. OnMarkRead(aUserID, aNotificationID) wordt aangeroepen nadat het item als gelezen is gemarkeerd, en OnMarkAllRead(aUserID) nadat elk item dat is.

Server-side acties

LoadNotifications(aUserID), MarkRead(aUserID, aNotificationID) en MarkAllRead(aUserID) doen het werk. ProcessAction(aUserID, aAction, aNotificationID) routeert één geposte actie naar de juiste en geeft False terug wanneer de actie geen inbox-actie is, zodat je verder kunt zoeken naar de eigenaar ervan.

Acties die het post

De dropdown post inboxMarkRead (velden action, inbox, id), inboxMarkAllRead en inboxRefresh (velden action, inbox) als data-sgc-ws-send-formulieren. Het veld inbox bevat de element-id van de inbox die het formulier heeft gerenderd, en dat is InboxID wanneer je die instelt. Zo routeert een pagina met meerdere inboxen de actie naar het juiste component.

Autorisatie

Het component rendert UI en dwingt geen autorisatie af. Elke actie reist als data die door de client wordt verstuurd, dus een vijandige client kan elke actie en elke id van een melding vervalsen. Er wordt geen gebruikers-id in de markup geschreven: neem de handelende gebruiker uit de sessie van het verzoek (sgcHTMLRequestSession), nooit uit het formulier, en controleer of de gebruiker eigenaar is van de melding waarvan de id binnenkwam voordat je iets vastlegt.

Uiterlijk

Title is de kop van de dropdown, EmptyText de tijdelijke tekst wanneer er niets te tonen is en BellIcon het trigger-glyph, vertrouwde markup met standaard een HTML-entiteit. MaxItems beperkt de zichtbare rijen (standaard 10, met 0 worden ze allemaal getoond), ShowMarkAllRead en ShowBadge staan standaard aan, en AddNotification(aId, aTitle, aText, aTimestamp, aUrl, aIcon) voegt een rij toe of werkt die met dezelfde id bij.

Live-updates

Elke melding, de badge en de lijst hebben een stabiele element-id. Render na één wijziging alleen de betreffende markup met GetItemFragmentHTML(aId), GetBadgeFragmentHTML of GetListFragmentHTML en push die met TsgcHTMX_Engine_Server.PushFragment of BroadcastFragment, in plaats van de pagina opnieuw te renderen. UnreadCount telt de items waarvan Read False is.

Edities en kanalen

De unit compileert wanneer SGC_HTML is gedefinieerd, wat sgcVer.inc niet doet voor Android en iOS. Het werkt op elke editie, via WebSocket of Server-Sent Events. sgcHTML is een zelfstandig pack, los van sgcWebSockets verkocht.

Pagina of push

De inbox kiest zelf niet tussen de pagina en een push: dat doet TsgcHTMLComponent_Notification, zie Notification en WebPush. Welke kanalen elke gebruiker wil, wordt ingesteld in NotificationPreferences.

Blijf ontdekken

Online helpVolledige API-referentie en gebruikshandleiding voor dit onderdeel.
Alle sgcHTML-componentenBlader door de volledige functiematrix van 80+ componenten.
Download gratis proefversieDe proefversie van 30 dagen bevat de 60.HTML-demoprojecten, waaronder 17.FieldService, dat de inbox gebruikt.
PrijzenSingle-, Team- en Site-licenties met volledige broncode.
De beste deal: All-AccessElk eSeGeCe-product, inclusief Premium-ondersteuning, vanaf €1,059 per jaar.
Bekijk de All-Access-prijzen

Klaar om te beginnen?

Download de gratis proefversie en begin met het bouwen van web-UI's in Delphi, C++ Builder en .NET.