Content design

Das Modul wurde mit dem Ansatz Mobile First entwickelt. Es beinhaltet die 2 Komponenten Top-Navigation 100% und Main Grid 25% 50% 25%. Es unterstützt 3 Breakpoints für Mobil, Tablet und Desktop . Hierzu hilft das CSS Framework (UIkit).

Suchmaschienenoptimierung mit element application/ld+json in head des document. Für jeden event der auf der Webseite angezeigt wird, wird ein schema.org @type = course erstellt.

@context = 'https://schema.org/';
@type = 'Course'
name = event.Designation
description = EventCategory + event.text.label + event.text.memo 
courseCode = event.Number
provider = {type: 'Organization', name: event.Host}
url = getRootModulUrl() + '#/uid/' + event.Id;

Bei jedem Routen Wechsel wird mittels window.scrollTo({top: settings.headerOffset,behavior: "smooth"}); zum root Element #kursausschreibung-root gescrollt. Ausser beim Anmelden wird zum Anmeldeprozess gescrollt.

Filter: Ist event.DateFrom in der Vergangenheit zum aktuellen Datum wird dieser event nicht mehr anzeigen.

Alle Datumsangaben werden {Wochentag kurz, Tag, Monat ausgeschrieben, Jahr} angezeigt -> bsp Fr, 23. Oktober 2020

Startseite (Suchen)

Komponenten	Daten/Funktion	Mobil	Tablet	Desktop
Top Navigation	Daten von Events AreaOfEducation (Route) Sortierung alphabetisch aufsteigend	100% fixed	100% fixed	100% fixed
Main links	Daten von Events EventCategory (Route) (aktuelle markierte FETT). Sortierung alphabetisch aufsteigend	More Navigation	25% o. settings.js	25% o. settings.js
Center	Alle Events gemäss Abhängigkeit: AreaOfEducation > EventCategory (Je nach Auswahl). Filter (Suche) Funktion > Sie filtert die untenstehende Tabelle der Events direkt oninput. Der input wird in der URL als param search= dargestellt. Sobald ein value im Filter vorhanden wird ein clear-icon angezeigt (Die Filterung berücksichtigt alle Daten aus der Konfiguration der Events und der Details). Auch nicht sichtbare Details werden gefiltered. Die Anzeige der Felder pro Event in der Tabelle kann konfiguriert werden. Dabei sind das erste Feld und die Label immer FETT (seetings.json eventListFields). Der Anmeldestatus wird in seetings.js definiert. Klick auf Anlass wechselt die Route zum Detail des Event.	100%	75%	50%
Main rechts	Konfigurierbarer Bereich -> Logo, Links auf andere URL (mit Logo), Legende Beschreibung der Anmeldestatus (konfigurierbar, mehrsprachig), Kontakte konfigurierbar, Konfigurierbare Timelines (Twitter)	Unterhalb Center 100%	Unterhalb Center 100%	25%

Die Eventlist kann als grid oder als list angezeigt werden. Der Standard kann im settings.js eingestellt werden. Im localStorage wird der letzte gespeicherte Wert des Benutzenden des Browser gespeichert.

Ist in Evento im Konfigeintrag WebM_AnlassCodes_Public_AllowedGroup ein Codegruppe eingetragen und den Events sind Codes dieser Gruppe zugewiesen werden diese Codes als Filter unterhalb der Suche angezeigt (Filter UIkit). Wird in den local Datei kein Übersetzung (FilterTag + CodeId) gefunden. Wird der Codename angezeigt. Wird nach einem Code gefilterd wird dieser als param in der URL abgebildet filter={codeId}

Event Status Definition seetings.js (Tooltip: Mehrsprachig zu jedem Status konfigurieren):

Alle Status werden zusätzlich mit einem icon dargestellt, damit Interessenten mit einer Sehbehinderung auch erkennen können was der Status der Veranstaltung oder des Kurs ist.

Green Event (icon pencil):

• AllowSubscriptionInternetByStatus = true
• TypeOfSubscription === 4 (Standard 2: Person hat kein User-Account)
• SubscriptionDateFrom, SubscriptionTimeFrom und SubscriptionDateTo, SubscriptionTimeTo now valid (From null wird Heute – 1 Tag als vergleichswert benutzt.)
• ((FreeSeats > 0) && ((MaxParticipants - FreeSeats) < MinParticipants) || EventTypeId = 1) (oder es ist ein Studiengang)

chartreuse Event (icon check):

• Wie Green
• (MaxParticipants-FreeSeats) >= MinParticipants

Yellow Event (icon clock):

• AllowSubscriptionInternetByStatus = true
• TypeOfSubscription === 4 (Standard 2: Person hat kein User-Account)
• SubscriptionDateFrom, SubscriptionTimeFrom und SubscriptionDateTo, SubscriptionTimeTo now not valid

Red Event (icon close):

• AllowSubscriptionInternetByStatus = true
• TypeOfSubscription === 4 (Standard 2: Person hat kein User-Account)
• FreeSeats = 0

Orange Wenn Green, Yellow und Red nicht zutreffen dann ist der Status Orange (icon ban).

Detailbeschreibung (Anlass)

Bemerkung: Die URL #/uid/{{eventId}} leitet weiter auf die Detailbeschreibung des gegebenen Anlasses.

Details des Events werde wie folgt geladen.

• GET Events/id
• GET EventTexts/ (CultureInfo “en-US” für “fr-CH”)
• GET EventLocations/?EventId={{eventId}}
• GET Lessons/{{searchParams}} (Aufruf mit Parameter "EventId")

Komponenten	Daten/Funktion	Mobil	Tablet	Desktop
Top Navigation	Breadcrumb AreaOfEducation > EventCategory	100% fixed	100% fixed	100% fixed
Center	Die Anzeige Details der Felder pro Event kann konfiguriert werden. Dabei sind das erste Feld und die Label immer FETT. Felder mit leerem Inhalt nicht anzeigen. Seetings.js eventDetailsFields ShowEventText: true/false. Wenn ein Label kein Memo hat soll auch das Label nicht angezeigt werden. Eventtext werden gemäss Number aufsteigend angezeigt. Ab 450px breite wird die Tabelle nur noch einspaltig Label über dem Inhalt. Button Zurück	100%	Container 75%	Container 50%
Main rechts	Konfigurierbarer Bereich -> Logo, Links auf andere URL (mit Logo), Legende Beschreibung der Anmeldestatus (konfigurierbar, mehrsprachig), Kontakte konfigurierbar, Konfigurierbare Timelines (Twitter, Facebook)	Unterhalb Center 100%	Unterhalb Center 100%	Container 25%

---

Definition EventText

Es gibt immer 2 Objekte des EventText (pro AnlassId und CultureInfo). Die Number ist dabei die Beziehung zwischen Label und Memo. Der Type kennzeichnet «Label» oder «Memo». Im Value ist der effektive Wert.

EventText Feld 13

Ist im Event Text 13 eine URL vorhanden wird dieser Link beim Anmelde Button hinterlegt (target:"_blank"). Der Freie Plätze counter wird ausgeblendet.

---

Lektionen:

Sind Lektionen auf dem Event, wird das Label zum Link für eine ics Datei die als Kalendereintrag heruntergeladen werden kann (Tooltip local key lessonExportToIcs). Die ics Datei wird mittels ics.js erstellt.

ics Eigenschaften

• SUMMARY: event.Designation +' ('+event.Leadership+')' falls Leadership nicht leer
• LOCATION: event.ResourceDesignation + ', ' + event.BuildingName + ', ' + event.BuildingAddress + ', ' + event.BuildingZip +' '+ event.BuildingLocation falls kein Raum zugewiesen ist wird die Location des events angezeigt
• DESCRIPTION: lesson.Designation

bsp. Darstellung

• Fr, 30. Oktober 2020 09:00 - 16:00
• Sa, 31. Oktober 2020 09:00 - 16:00

Anmeldebutton:

• Label mehrsprachig
• Tooltip Status
• canDoSubscription pro Status «deaktiviert» werden
• Fixed, bottom, center
• Action > Personendaten

badgeFreeseats:

• activ (bool)
• intervalSec int
• Funktionalität: Wenn «activ» true wird gemäss «intervalSec» GET Events/{id} abgefragt, wie viele Plätze noch frei sind. Die Anzeige erfolgt Top Left des Anmeldebutton.

Personendaten (Anmeldung)

Beim Wechsel der Route zur Anmeldung wird mittels scrollIntoView zu subscriptionForm gescrollt. Bei einer Anmeldung wir immer der Request …/UserSettings/ abgefragt werden. Ist die Response Eigenschaft IdPerson = 0 muss der Interessent seine Personendaten eingeben.

Ist die IdPerson != 0 Wird der Fullname angezeigt und der Interessent muss keine Personenangaben eingeben.

Ihre Anmeldung wird gemäss Ihrem Login {{Fullname}} erstellt .

Bsp. Response UserSeetings:

{ "Id": "L2575", "IdPerson": 2575, "FullName": "Max Muster", "UiCulture": "de-CH", "ApplicationScope": "Public" }

Die Person muss nur die Anmeldedetails falls vorhanden eingeben.

Komponenten	Daten/Funktion	Mobil	Tablet	Desktop
Top Navigation	Prozess: Personaldaten > Bestätigung	100% fixed	100% fixed	100% fixed
Main links	Daten von Events EventCategory (Route) (aktuelle markierte FETT). Sortierung alphabetisch aufsteigend	More Navigation	25% o. settings.js	25% o. settings.js
Center	Detail des ausgewählten Events. Personendetail Daten (konfigurierbar pro EventTyp). Anmeldedetails des Events falls sichtbar Internet. button ANMELDEN und ZURÜCK	100%	Container 75%	Container 50%
Main rechts	Konfigurierbarer Bereich -> Logo, Links auf andere URL (mit Logo), Legende Beschreibung der Anmeldestatus (konfigurierbar, mehrsprachig), Kontakte konfigurierbar, Konfigurierbare Timelines (Twitter, Facebook)	Unterhalb Center 100%	Unterhalb Center 100%	Container 25%

Personendetail: Die auszufüllenden Felder können mit den folgenden Eigenschaften pro «EventTypeId» gesteuert werden (Standard Mussfelder: LastName, FirstName). Die anzuzeigenden Label müssen mehrsprachig sein.

• Label string
• FieldId string
• Required bool

TypeAhead: Zip: oninput wird dem Benutzer PLZ und Ort vorgeschlagen. Wenn er auf ein Datensatz auswählt wird der Ort direkt ausgefüllt (Endpunkt /PostalCodes/?filter.Code=~31*).

Folgende Felder werden oninput validiert (Ok grüner Rahmen; NOK roter Rahmen)

• Birthdate input Types date Datum darf nicht grösser als der aktuelle Tag sein
• Email2 input Types email
• PhoneMobile input Types tel
• PhonePrivate input Types tel
• SocialSecurityNumber: Es wird dem Benutzer/in abgenommen die Nummer korrekt zu formatieren. Der/die Benutzer/in kann nur Ganzzahlen eingeben. Sobald 16 Zeichen erreicht sind wird die Prüfziffer gemäss -> EAN13 https://www.sozialversicherungsnummer.ch/aufbau-neu.htm geprüft.
• Wenn StayPermit gefüllt muss auch StayPermitExpiry date ausgefüllt werden

Anmeldedetails: Folgende Eigenschaften werden für die Darstellung ausgewertet werden:

• DropdownItems
• "VssInternet": "M"
• ShowAsRadioButtons
• Sort
• Tooltip Wird als Hinweis im form mit der class="uk-meta" dargestellt
• VssStyle
• ReadOnly
• VssBezeichnung

"VssStyle": "HE" (Überschrift) wird Fett angezeigt und ohne Eingabefeld

Anmeldedetail mit dem "VssTypeId": 293, "VssType": "Text" wird als Textarea angezeigt

Anmeldedetail Sichtbarkeit ist abhängig von aus NG

• Alle Anmeldedetails die von einem anderen abhängig sind werden beim Initial laden mit der class=uk-hidden versehen
• Es werden Datentypen unterstützt -> checkbox, date, dropdown, freeform-dropdown, file, number, string, textarea
• Es werden folgende Operatoren unterstützt -> contains, not contains, empty, not empty
• Mittels focusOut wird geprüft, ob die Bedingung für die Sichtbarkeit true ist
• Soll das Anmeldedetail sichtbar gestellt werden. Wird die class="uk-hidden" entfernt und die Eigenschaft required auf true gestellt
• Ist die Sichtbarkeit nicht mehr gewährleistet wird die class="uk-hidden" hinzugefügt und die Eigenschaft required auf false gestellt

Anmeldedetail Dateien hochladen:

• Es werden die Werte VssStyle DA = Zip | PD = PDF | PF = JPG unterstützt.
• Falls MaxFileSize (Byte) vorhanden wird diese geprüft
• Wird der Filetype nicht akzeptiert erscheint eine Fehlermeldung. Es wird allerdings bereits beim File Upload eingeschränkt, dass nur die zulässigen Files angezeigt werden
• Bei PF (Image) wird das Foto in einem Rahmen angezeigt, damit es auf 300x400 zentriert, gezoomt zugeschnitten werden kann. Diese Feature wurde mittels der JS Lib Croppie umgesetzt.
• Ist das File validiert wird der Button Text durch den Filenamen ersetzt und ein Delete icon wird am ende dargestellt damit das File wieder gelöscht werden kann.

Upload Files:

1. In einer Funktion werden der Endpunkte POST SubscriptionDetails/files der den Upload Bereich erstellt.
2. Das File wird von base64 nach arrayBuffer konvertiert und über PUT response location header aus schritt 1 hochgeladen.

DropdownItems:

• FormsOfAddress > GET DropDownItems/FormsOfAddress
• Country > GET DropDownItems/Countries
• NativeLanguage > GET DropDownItems/NativeLanguages
• Nationality > GET DropDownItems/Nationalities > der Code 8100 Schweiz wird als Standard Wert gesetzt im Select
• StayPermit > GET DropDownItems/StayPermits
• Profession > GET DropDownItems/Professions

Rechnungsadresse an Firma (Model Addresses):

• Company
• AddressLine1
• Zip
• Location

Weitere Personen anmelden

• Wenn das Anmeldedatail Id 10893 vorhanden ist wird am Ende des Anmelde Form der Button Weitere Personen anmelden angezeigt
• Für jede Person wird eine Überschrift (Person 1, Person 2 usw.) dargestellt
• Wenn beim Button weitere Person anmelden die Freien Plätze erreicht ist, wird ein Modal mit einer Fehlermeldung angezeigt
• Die FormFields für weiter Person kann im settings.js unter formFields.[EventTypeId].additionalPeopleFields definiert werden. Wenn nicht definiert wird ein Fallback auf die formFields des ersten Form angezeigt.
• Alle Anmeldedetails die der erste Person angegeben hat werden übernommen und im Anmeldedetail 10893 wird die Anzahl zusätzlichen Personen erfasst
• Validierung: Wird der dataType=email auch bei den weiteren Personen angezeigt. Wird validiert ob die Mailadresse nicht mehrfach vorhanden ist. Wenn ja, erscheint eine Fehlermeldung (Die Mail muss unterschiedlich sein, ansonsten kann das Formular nicht übermittelt werden.).

Anmeldedetails (SubscriptionDetails)

• GET Events/{idevent}/SubscriptionDetails

Anmelden: Beim POST muss die folgende Reihenfolge eingehalten werden: Vor der definitiven Anmeldung wird in jedem Fall nochmals geprüft, ob es möglich ist, sich an den Kurs anzumelden. GET Events/{id} der Event Status ist “green”. Wenn eintrifft, dass der Event nicht mehr anmeldbar ist, wird dem Interessenten die folgende Meldung angezeigt.

«Der Kurs ist inzwischen nicht mehr anmeldbar. »

1. POST Persons/ > Wenn 202 Accepted mit dem Custom-Header > X-Duplicate als Anwort zurück kommt wird ein PUT Request abgesetzt. Wird beim PUT (Duplikat) ein Error > http-status 400 < 499 zurückgemeldet. Wird ein Anmeldung ohne Änderung der Personendaten vorgenommen
2. POST Addresses/ (idPerson)
3. POST Subscriptions/ (idEvent, idPerson). Bei einem error > http-status 400 zwischen 499 wird dem Benutzer die Fehlermeldung der Antwort angezeigt.
4. Ist die Anmeldung erfolgreich, aber in POST SubscriptionsDetails/Files wird ein 4xx oder 5xx Error vom Server gemeldet wird auf der Bestätigungsseite eine Warnung angezeigt (locale key subscriptionFilesUploadFailed).

Bestätigung (Anmeldung)

Komponenten	Daten/Funktion	Mobil	Tablet	Desktop
Top Navigation	Prozess: Personaldaten > Bestätigung	100% fixed	100% fixed	100% fixed
Main links	Daten von Events EventCategory (Route) (aktuelle markierte FETT). Sortierung alphabetisch aufsteigend	More Navigation	25% o. settings.js	25% o. settings.js
Center	Überschrift FETT mit einem Anmeldebestätigungstext aus den local keys thankYou oder thankYouWaitingList und officeAddress. Ihre Angaben: Alle von der Person ausgefüllten Formularfelder und Anmeldedetails. Button Zurück zur Kursübersicht	100%	Container 75%	Container 50%
Main rechts	Konfigurierbarer Bereich -> Logo, Links auf andere URL (mit Logo), Legende Beschreibung der Anmeldestatus (konfigurierbar, mehrsprachig), Kontakte konfigurierbar, Konfigurierbare Timelines (Twitter, Facebook)	Unterhalb Center 100%	Unterhalb Center 100%	Container 25%

Fehler Handling

Das CLX.Evento JS Framework (Ember) hat ein «Error Handling» für jqXHR Request eingebaut. Die Rest API von CLX ist auch mit einem eigenen «Error Handling» ausgestattet.

In der JS Applikation wird der/die Interessent/in informiert falls ein API Request auf Evento nicht erfolgreich abgeschlossen werden konnte und es bei weiteren Verarbeitung zu Folgefehler kommen kann.

local key errorMessage

Es ist zu einem unvorhergesehenen Fehler gekommen. Bitte versuchen Sie es nochmals.