TsgcHTMLComponent_Tour: przewodnik po produkcie do wdrażania użytkowników. Podświetla elementy strony krok po kroku reflektorem i kartą, startuje sam przy pierwszej wizycie, z przycisku lub z serwera, i raportuje postęp każdego użytkownika przez zdarzenia serwera, w Delphi, C++ Builder i .NET.
Dodaj Kroki, wskaż w każdym element i ustaw AutoStart albo dodaj przycisk startu. OnStepChange, OnSkip i OnComplete informują serwer, jak daleko doszedł każdy użytkownik.
TsgcHTMLComponent_Tour, z jednym TsgcHTMLTourStep na krok w Kroki
Ukryty element z konfiguracją jako JSON i skrypt przewodnika, ze stylami wbudowanymi, bez plików zewnętrznych i bez CDN
Delphi, C++ Builder, .NET
Z AutoStart przewodnik startuje sam, gdy przeglądarka po raz pierwszy otwiera stronę, a przycisk startu odtwarza go w dowolnej chwili. Po przypisaniu HTMXEngine przeglądarka wysyła zdarzenia, które mają procedurę obsługi.
uses
sgcHTML_Session, sgcHTML_Component_Tour;
// Tworzony raz: odpowiada na zdarzenia serwera po wyrenderowaniu strony
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'; // brak celu: wyśrodkowana karta
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; // sesja tego żądania
if oSession <> nil then
SaveOnboardingDone(oSession.UserID); // Twój własny kod
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;@* Treścią każdego kroku jest HTML jego karty *@
<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);
}Pierwsze uruchomienie, które pokazuje nowym użytkownikom, co gdzie jest, oraz zapis na Twoim serwerze, jak daleko doszedł każdy z nich.
Każdy krok podświetla element wycięciem reflektora w przyciemnionym tle i pokazuje obok karty z tytułem, treścią HTML, opcjonalnym obrazem, licznikiem kroków z kropkami postępu oraz przyciskami Wstecz, Dalej, Pomiń przewodnik i Gotowe. Krok bez celu pokazuje kartę na środku strony.
Sam przy pierwszej wizycie (AutoStart), z przycisku (GetStartButtonHTML albo data-sgc-tour-start na dowolnym elemencie), z własnego skryptu (GetStartScript) lub z serwera dla jednego użytkownika (GetStartHTML).
Gotowe lub Pomiń przewodnik jest zapisywane w localStorage przeglądarki pod StorageKey, domyślnie sgc-tour:<Name>, a AutoStart nie uruchamia tam przewodnika ponownie. Zmień StorageKey, aby pokazać wszystkim poprawiony przewodnik.
Krok, którego cel jest nieobecny lub ukryty, na przykład panel roli, której użytkownik nie ma, jest pomijany w obu kierunkach, a licznik zlicza tylko kroki, które można pokazać. Karta pozostaje w oknie widoku, a na wąskich ekranach wraca na dół, górę lub środek.
Karta jest oknem dialogowym nazwanym swoim tytułem. Fokus przechodzi na Dalej, gdy pokazuje się krok, i wraca tam, gdzie był, gdy przewodnik się kończy, a w modalnej karcie Tab krąży po jej przyciskach. Klawisze strzałek przechodzą między krokami, Esc kończy, a uprzejmy region na żywo ogłasza „Krok n z m: tytuł”.
Przyciski i tekst kroku występują w 17 językach biblioteki. Strony od prawej do lewej odbijają położenie i klawisze strzałek, a karta kopiuje data-bs-theme strony, więc podąża za ciemnym motywem. Style są dodawane, gdy przewodnik startuje, i usuwane, gdy się kończy.
Składowe, po które sięgasz najczęściej.
Każdy krok ma Target (selektor CSS, jego pierwsze dopasowanie) lub TargetComponent, Title jako zwykły tekst, Content jako HTML oczyszczony przez sgcHTMLSanitizeHTML, adres URL Image przechodzący przez sgcHTMLSanitizeURL, Placement oraz własne ShowBackdrop i ScrollIntoView.
ShowBackdrop, ShowProgress i ShowSkip włączają lub wyłączają tło, licznik z kropkami i przycisk Pomiń przewodnik. Padding (domyślnie 6) to odstęp w pikselach wokół celu, AllowKeyboard włącza Esc i klawisze strzałek, a CloseOnBackdropClick kończy przewodnik po kliknięciu tła.
OnStepChange uruchamia się przy każdym pokazaniu kroku, OnSkip gdy użytkownik wychodzi przed końcem, z indeksem kroku, a OnComplete gdy użytkownik naciska Gotowe na ostatnim kroku. Przeglądarka wysyła tylko zdarzenia, które mają procedurę obsługi, a indeks kroku spoza Kroki jest odrzucany.
Procedura obsługi działa w wątku żądania, gdzie sgcHTMLRequestSession daje sesję i użytkownika. HTML zwrócony w aResponse jest podmieniany przez htmx, gdy jego elementy są oznaczone hx-swap-oob="true".
Przypisz HTMXEngine albo ustaw ActionURL i wywołaj DispatchComponentEvent('tour', Params, Response) z własnej trasy. Bez jednego i drugiego przewodnik działa w przeglądarce i niczego nie wysyła. Przy htmx na stronie wysyła przez htmx.ajax, w przeciwnym razie przez XMLHttpRequest z metaznacznikami CSRF strony.
GetStartHTML zwraca fragment, który uruchamia przewodnik w przeglądarce, która go otrzymuje, jako odpowiedź htmx lub wypchnięcie do jednego połączenia. Przycisk startu, GetStartScript i GetStartHTML ignorują wpis zapisany w przeglądarce.
window.sgcHTMLTour oferuje start(id[, step]), next, back, end, reset i active. Każda funkcja przyjmuje identyfikator przewodnika, wartość GetElementIdentifier. reset usuwa zapisany wpis, więc AutoStart uruchamia przewodnik ponownie.
W widoku Razor Tag Helper <sgc-tour name="..."> renderuje przewodnik, z jednym potomkiem <sgc-tour-step> na krok, którego treścią jest HTML karty. Pierwsze renderowanie tworzy jeden komponent na silnik i nazwę, zarejestrowany w silniku z AddSgcHtml, więc odpowiada na zdarzenia serwera po wyrenderowaniu strony.
Demos\60.HTML\01.RunTime\29.Tour to sgc Cloud Console na porcie 8131: ośmiokrokowy przewodnik pierwszego uruchomienia z reflektorem, drugi przewodnik Co nowego na tej samej stronie, podpowiedzi na przyciskach paska narzędzi, kartach statystyk i polach formularza oraz lejek wdrożenia, który serwer zapisuje dla każdego użytkownika. Wersje design time, Lazarus i .NET są jego odpowiednikami.
| Wypróbuj onlineZobacz to w demie Przewodnik i podpowiedzi, działającym na żywo na serwerze demo eSeGeCe. | Otwórz | |
| Pomoc onlinePełna dokumentacja API i przewodnik użytkowania tego komponentu. | Otwórz | |
| Komponent TooltipWskazówki na przyciskach i polach, pokazane razem z przewodnikiem w tym samym demo. | Otwórz | |
| Wszystkie komponenty sgcHTMLPrzejrzyj pełną matrycę funkcji 80+ komponentów. | Otwórz | |
| Pobierz bezpłatną wersję próbną30-dniowa wersja próbna zawiera projekty demonstracyjne 60.HTML. | Otwórz | |
| CennikLicencje Single, Team i Site z pełnym kodem źródłowym. | Otwórz |