TsgcHTMLComponent_Tour: eine geführte Produkttour für das Onboarding. Sie hebt die Elemente der Seite Schritt für Schritt mit einem Spotlight und einer Karte hervor, startet von selbst beim ersten Besuch, über eine Schaltfläche oder vom Server und meldet den Fortschritt jedes Benutzers über Server-Ereignisse, in Delphi, C++ Builder und .NET.
Fügen Sie die Schritte hinzu, richten Sie jeden auf ein Element und setzen Sie AutoStart oder fügen Sie eine Start-Schaltfläche hinzu. OnStepChange, OnSkip und OnComplete melden dem Server, wie weit jeder Benutzer gekommen ist.
TsgcHTMLComponent_Tour mit einem TsgcHTMLTourStep pro Schritt in Schritte
Ein verstecktes Element mit der Konfiguration als JSON und das Tour-Skript, mit eingebetteten Stilen, ohne externe Dateien und ohne CDN
Delphi, C++ Builder, .NET
Mit AutoStart startet die Tour von selbst, wenn ein Browser die Seite zum ersten Mal öffnet, und die Start-Schaltfläche spielt sie jederzeit erneut ab. Ist eine HTMXEngine zugewiesen, sendet der Browser die Ereignisse, für die ein Handler existiert.
uses
sgcHTML_Session, sgcHTML_Component_Tour;
// Einmal erstellt: Es beantwortet seine Server-Ereignisse, nachdem die Seite gerendert wurde
oTour := TsgcHTMLComponent_Tour.Create(Self);
oTour.Name := 'onboarding';
oTour.AutoStart := True;
oTour.HTMXEngine := HTMXEngine1;
oTour.OnComplete := TourComplete;
oTour.OnSkip := TourSkip;
with oTour.Steps.Add do
begin
Title := 'Welcome'; // kein Ziel: eine zentrierte Karte
Content := '<p>Take a minute to see what is where.</p>';
end;
with oTour.Steps.Add do
begin
Target := '#sidebar';
Title := 'Navigation';
Content := '<p>Every module of the app is here.</p>';
Placement := trpRight;
end;
sHtml := oTour.HTML + oTour.GetStartButtonHTML('Restart tour');
procedure TForm1.TourComplete(Sender: TObject; var aResponse: string);
var
oSession: TsgcHTMLSession;
begin
oSession := sgcHTMLRequestSession; // die Sitzung dieser Anfrage
if oSession <> nil then
SaveOnboardingDone(oSession.UserID); // Ihr eigener Code
end;
procedure TForm1.TourSkip(Sender: TObject; aStep: Integer; var aResponse: string);
var
oSession: TsgcHTMLSession;
begin
oSession := sgcHTMLRequestSession;
if oSession <> nil then
SaveOnboardingSkipped(oSession.UserID, aStep);
end;@* Der Inhalt jedes Schritts ist das HTML seiner Karte *@
<sgc-tour name="onboarding" auto-start="true" on-complete="Model.TourDone" on-skip="Model.TourSkipped">
<sgc-tour-step title="Welcome"><p>Take a minute to see what is where.</p></sgc-tour-step>
<sgc-tour-step target="#sidebar" title="Navigation" placement="right">
<p>Every module of the app is here.</p>
</sgc-tour-step>
<sgc-tour-step target="#btnSettings" title="Settings" image="/img/settings.png">
<p>Change the theme and your profile here.</p>
</sgc-tour-step>
</sgc-tour>using esegece.sgcWebSockets;
var tour = new TsgcHTMLComponent_Tour { Name = "onboarding" };
tour.AutoStart = true;
tour.HTMXEngine = htmxEngine;
tour.OnComplete += TourDone;
tour.OnSkip += TourSkipped;
var step = tour.Steps.Add();
step.Title = "Welcome";
step.Content = "<p>Take a minute to see what is where.</p>";
step = tour.Steps.Add();
step.Target = "#sidebar";
step.Title = "Navigation";
step.Content = "<p>Every module of the app is here.</p>";
step.Placement = TsgcHTMLTourPlacement.trpRight;
string html = tour.HTML + tour.GetStartButtonHTML("Restart tour");
public void TourDone(object sender, ref string response)
{
SaveOnboardingDone(User.Identity?.Name);
}
public void TourSkipped(object sender, int step, ref string response)
{
SaveOnboardingSkipped(User.Identity?.Name, step);
}Ein erster Start, der neuen Benutzern zeigt, was wo ist, und ein Protokoll auf Ihrem Server, wie weit jeder gekommen ist.
Jeder Schritt hebt ein Element mit einem Spotlight-Ausschnitt in einem abgedunkelten Hintergrund hervor und zeigt daneben eine Karte mit Titel, HTML-Inhalt, optionalem Bild, einem Schrittzähler mit Fortschrittspunkten und den Schaltflächen Zurück, Weiter, Tour überspringen und Fertig. Ein Schritt ohne Ziel zeigt die Karte zentriert auf der Seite.
Von selbst beim ersten Besuch (AutoStart), über eine Schaltfläche (GetStartButtonHTML oder data-sgc-tour-start auf einem beliebigen Element), über Ihr eigenes Skript (GetStartScript) oder vom Server für einen Benutzer (GetStartHTML).
Fertig oder Tour überspringen wird im localStorage des Browsers unter StorageKey gespeichert, standardmäßig sgc-tour:<Name>, und AutoStart startet die Tour dort nicht erneut. Ändern Sie StorageKey, um allen eine überarbeitete Tour zu zeigen.
Ein Schritt, dessen Ziel fehlt oder versteckt ist, etwa ein Bereich einer Rolle, die der Benutzer nicht hat, wird in beiden Richtungen übersprungen, und der Zähler zählt nur die Schritte, die angezeigt werden können. Die Karte bleibt im Viewport, und auf schmalen Bildschirmen weicht sie nach unten, oben oder in die Mitte aus.
Die Karte ist ein Dialog, der nach seinem Titel benannt ist. Der Fokus wandert auf Weiter, wenn ein Schritt erscheint, und kehrt dorthin zurück, wo er war, wenn die Tour endet, und in einer modalen Karte läuft Tab um ihre Schaltflächen herum. Die Pfeiltasten wechseln zwischen den Schritten, Esc beendet, und ein höflicher Live-Bereich kündigt "Schritt n von m: Titel" an.
Die Schaltflächen und der Schritttext gibt es in den 17 Sprachen der Bibliothek. Seiten von rechts nach links spiegeln die Platzierung und die Pfeiltasten, und die Karte übernimmt das data-bs-theme der Seite, folgt also einem dunklen Thema. Die Stile werden beim Start der Tour hinzugefügt und am Ende entfernt.
Die Member, zu denen Sie am häufigsten greifen.
Jeder Schritt hat ein Ziel (einen CSS-Selektor, dessen ersten Treffer) oder eine TargetComponent, einen Title als einfachen Text, Content als mit sgcHTMLSanitizeHTML bereinigtes HTML, eine Image-URL, die durch sgcHTMLSanitizeURL läuft, ein Placement, sein eigenes ShowBackdrop und ScrollIntoView.
ShowBackdrop, ShowProgress und ShowSkip schalten den Hintergrund, den Zähler mit den Punkten und die Schaltfläche Tour überspringen ein oder aus. Padding (standardmäßig 6) ist der Abstand in Pixeln um das Ziel, AllowKeyboard aktiviert Esc und die Pfeiltasten, und CloseOnBackdropClick beendet die Tour bei einem Klick auf den Hintergrund.
OnStepChange wird jedes Mal ausgelöst, wenn ein Schritt angezeigt wird, OnSkip, wenn der Benutzer vor dem Ende aussteigt, mit dem Index des Schritts, und OnComplete, wenn der Benutzer im letzten Schritt auf Fertig klickt. Der Browser sendet nur die Ereignisse, für die ein Handler existiert, und ein Schrittindex außerhalb von Schritte wird abgelehnt.
Der Handler läuft im Thread der Anfrage, wo sgcHTMLRequestSession die Sitzung und den Benutzer liefert. Das HTML, das er in aResponse zurückgibt, tauscht htmx aus, wenn seine Elemente mit hx-swap-oob="true" markiert sind.
Weisen Sie HTMXEngine zu, oder setzen Sie ActionURL und rufen Sie DispatchComponentEvent('tour', Params, Response) aus Ihrer eigenen Route auf. Ohne beides läuft die Tour im Browser und sendet nichts. Mit htmx auf der Seite sendet sie über htmx.ajax, sonst über XMLHttpRequest mit den CSRF-Meta-Tags der Seite.
GetStartHTML gibt ein Fragment zurück, das die Tour im empfangenden Browser startet, als htmx-Antwort oder als Push an eine Verbindung. Die Start-Schaltfläche, GetStartScript und GetStartHTML ignorieren den im Browser gespeicherten Eintrag.
window.sgcHTMLTour bietet start(id[, step]), next, back, end, reset und active. Jede Funktion nimmt die ID der Tour, den Wert von GetElementIdentifier. reset entfernt den gespeicherten Eintrag, sodass AutoStart die Tour erneut ausführt.
In einer Razor-View rendert der Tag Helper <sgc-tour name="..."> die Tour, mit einem <sgc-tour-step>-Kind pro Schritt, dessen Inhalt das HTML der Karte ist. Das erste Rendern erstellt eine Komponente pro Engine und Name, registriert bei der Engine von AddSgcHtml, sodass sie ihre Server-Ereignisse beantwortet, nachdem die Seite gerendert wurde.
Demos\60.HTML\01.RunTime\29.Tour ist die sgc Cloud Console auf Port 8131: eine Erststart-Tour mit acht Schritten und Spotlight, eine zweite Tour Was ist neu auf derselben Seite, Tooltips auf den Symbolleisten-Schaltflächen, Statistikkarten und Formularfeldern und ein Onboarding-Trichter, den der Server pro Benutzer aufzeichnet. Die Designtime-, Lazarus- und .NET-Versionen spiegeln sie.
| Online ausprobierenSehen Sie es in der Demo Tour & Tooltips, live auf dem eSeGeCe-Demoserver. | Öffnen | |
| Online-HilfeVollständige API-Referenz und Verwendungshandbuch für diese Komponente. | Öffnen | |
| Tooltip-KomponenteHinweise auf Schaltflächen und Feldern, in derselben Demo zusammen mit der Tour gezeigt. | Öffnen | |
| Alle sgcHTML-KomponentenDurchsuchen Sie die vollständige Funktionsmatrix von über 80 Komponenten. | Öffnen | |
| Kostenlose Testversion herunterladenDie 30-Tage-Testversion enthält die 60.HTML-Demoprojekte. | Öffnen | |
| PreiseSingle-, Team- und Site-Lizenzen mit vollständigem Quellcode. | Öffnen |