Standard-Widgets PerformX

Event-Publikation und -Anmeldung

Das Widget für Ereignispublikation und -Anmeldung ist eine effiziente Standardlösung für die Integration in Websites. Die inhaltlichen und funktionalen Details sind hier dokumentiert.

Die öffentliche Kursliste ist unter dem folgenden Link erreichbar (die Kunden-Domain muss durch die Domain-Adresse des Kunden ersetzt werden): [Kunden-Domain/public/Ereignis/PublicList]

Terminansicht für Digitale Signage

Das Termin-Widget kann zur Anzeige auf Info-Screens verwendet werden. Es stellt Terminplan mit Informationen zu Ereignis, Dozierenden und Räumen dar. Angezeigt werden aktuelle und zukünftige Termine des aktuellen Tages.

• Kursnummer

• Kurs

• Thema

• Beginnzeit

• Endezeit

• Referierende

• Räume

Einbindung in Webseiten

Konfiguration

Ein öffentliches Widget kann in einer externen Website über ein HTML iframe eingebunden werden.

<iframe src="https://{{grund_url}}/public/{{klasse}}/{{widget_name}}?kriterien={{Publikationskategorien}}</iframe>

Dabei können können die folgenden Parameter gesetzt werden:

• {{grund_url}}: Die Grundurl auf der die Application läuft. z.B. “performx.kunde.ch”

• {{klasse}}: Die betreffende Klasse (z.B. “Ereignis”, “Termin”)

• {{widget_name}}: Der Name des Widgets. Aktuell gibt es das Event-List Widget (publiclist)

• {{Publikationskategorie}}: Der interne Name der Publikationskategorie nach der gefiltert werden soll (nur Event-Publikation)

Beispiel-URL Ereignispublikation:

https://INSTANZ.azurewebsites.net/public/Ereignis/publiclist

Beispiel-URL Ressourcenübersicht:

https://INSTANZ.azurewebsites.net/public/Termin/publiclist

Für eine Darstellung im Desktop-Modus werden für Höhe und Breite mindestens 768 Pixel benötigt. Darunter wechselt die Darstellung in den Mobile-Modus.

Filterkriterien

Mögliche Filterungen die beim Aufruf eines Widgets gesetzt werden können:

• Publikationskategorie (interner Name; …/PublicList?publikationskategorie={{Publikationskategorie}}

• Angebot (Kurzzeichen; …/PublicList?angebot={{Angebot}})

• Ereignis (Id; nur Detail; …/PublicDetail/Id={{Id}})

Widget mit dynamischer Höhe einbinden

Falls in einem Widget nur wenige Einträge aufgelistet werden, führt das bei einfacher Einbindung dazu, dass viel Weissraum angezeigt wird. Daher empfiehlt es sich, folgendes Script beim Laden der Seite auszuführen:

<script>
	const iframe = document.getElementById('remote');
	window.addEventListener("message", (event) => {

		const minHeight = 375;
		const maxHeight = 2000;
		const drilldownHeight = 800;

		if (event.data && event.data.source === 'bloqs-list' && event.data.event === 'loaded') {
			const calculatedHeight = 250 + (event.data.content.visibleElements +1) * 33.5;
			if (calculatedHeight < minHeight) {
				iframe.height = minHeight
			} else if (calculatedHeight >= minHeight && calculatedHeight < maxHeight){
				iframe.height = calculatedHeight;
			} else {
				iframe.height = maxHeight;
			}
		}

		if (event.data && event.data.source === 'bloqs-detail' && event.data.event === 'loaded'){
			iframe.height = drilldownHeight;
		}
	});
</script>

Variablen

• minHeight: Mindesthöhe*

• maxHeight: Maximale Höhe*

• drilldownHeight: Höhe der Detailansicht*

• calculatedHeight: Berechnete Höhe der Listenansicht

Variablen mit * legen den Einfluss auf das Layout der Website fest. Sie sind daher i.d.R. mit der für die Website verantwortlichen Stelle zu bestimmen.

Verhalten

In der Listenansicht wird beim Laden der Seite die Anzahl der anzuzeigenden Elemente an den Browser übergeben. Mithilfe dieser Zahl wird die Variable ‘calculatedHeight’ berechnet (Anzahl * 33.5 Pixel + 250 Pixel für den Header). Befindet sich das Ergebnis dieser Berechnung zwischen minimaler und maximaler Höhe, wird das Widget mit diesem berechneten Wert als Höhe angezeigt. Ansonsten werden Minimum, bzw. Maximum verwendet.

In der Detailansicht steht kein bestimmter Faktor für die Berechnung zur Verfügung. Ausserdem ändert sich die effektive Höhe mit dem Auf- und Zuklappen der Akkordeon-Elemente auch nach dem Laden des Details. Zu diesem Zeitpunkt wird kein Script mehr ausgeführt, das die Höhe neu berechnen könnte. Die Variable 'drilldownHeight' muss daher mit einem fixen Wert - basierend auf gestalterischen Überlegungen sowie der im Regelfall anzutreffenden Höhe - ausgestattet werden.

Darstellung auf Bildschirmen mit grosser Auflösung

Bei der Darstellung auf Bildschirmen mit grosser Auflösung werden Widgets unter Umständen zu klein dargestellt.

In solchen Fällen kann das iframe in ein eigenes HTML-Dokument eingebunden und dort vergrössert werden. Anschliessend wird dieses HTML-Dokument angezeigt.

• -xy-transform:scale bestimmt den Vergrösserungsfaktor (in Klammern; kann zur Verkleinerung auch unter 1.00 liegen) für die entsprechende Browser-Technologie

• -xy-transform-origin zentriert den Inhalt für die entsprechende Browser-Technologie

Beispiel für Darstellung auf einem 4K-Monitor:

<html>
	<style>
		#wrap {
			height:770px,
			width: 100%;
			padding: 0;
			overflow: hidden;
		}
		
		#scaled-frame {
			width: 100%;
			height: 100%;
			border: 0px;
		}
		
		#scaled-frame {
			zoom: 2.00;
			-moz-transform: scale(2.00);
			-moz-transform-origin: 0 0;
			-o-transform: scale(2.00);
			-o-transform-origin: 0 0;
			-webkit-transform: scale(2.00);
			-webkit-transform-origin: 0 0;
		}
		
	</style>
	<div id="wrap">
		<iframe id="scaled-frame" src="https://instanz-plus-test.azurewebsites.net/public/Termin/PublicList" height=100% width=100%></iframe>
	</div>
</html>

Empfehlung für CMS-Integration

Grundlagen

• Die Widgets zur Kurspublikation und -anmeldung sind funktionale Elemente, die dynamischen Inhalt interaktiv zur Verfügung stellen. Dieser Inhalt stammt direkt aus PerformX Cloud und wird nirgends zwischengespeichert

• In den Widgets werden nebst der Präsentation von Informationen der komplette Anmeldeprozess inklusive Warenkorb, Preisberechnung, Online-Zahlung etc. abgewickelt

• Die Widgets ersetzen nicht die marketingorientierte Produktpräsentation und sind nicht für die Anzeige von SEO-relevanten Inhalten ausgelegt. Sie ersetzen damit nicht den suchmaschinen-relevanten Content der Website

Optimale Integration

• Idealerweise wird die Publikation der Angebotseckwerte inklusive Strukturierung und Bildmaterial im CMS abgebildet. Diese Informationen sind mehrheitlich statisch und ändern sich kaum (Hoheit Marketing)

• Pro Angebot ergänzt werden diese Daten mit den entsprechenden Durchführungen aus PerformX. Hier geht es um die Fakten wie verfügbare Termine, freie Plätze, Kosten sowie den kompletten Anmeldeprozess (Hoheit Bildungsadministration)

• Somit kann eine klare Trennung von den beiden Zuständigkeiten und Daten definiert werden, so dass keine Überschneidungen entstehen und somit auch nicht doppelt geführt werden müssen

• Für Marketing-Aktivitäten wie E-Mail-Newsletter, LinkedIn-Posts oder Verlinkung mit QR-Codes kann auch direkt auf einzelne Kursdetails im Widget verlinkt werden
  

  

Beispiel einer Web-Integration

Beispiel globaler Kurskalender