Applikationsentwicklung

WebDAV

Einführung

Mit "WebDAV" ("Web-based Distributed Authoring and Versioning"), können Dokumente im Intrexx-Portal direkt mit dem passenden Programm – z.B. Word, Excel oder LibreOffice - geöffnet, bearbeitet und gespeichert werden.

Voraussetzungen

Damit in Intrexx eingebundene Dokumente mit einem Programm geöffnet und bearbeitet werden können, müssen folgende Voraussetzungen erfüllt sein:

Das Dokument wurde im Browser über eine Intrexx-Applikation über eine Dateiauswahl-Kontrolle im Datensatz gespeichert und so auf den Intrexx Portal Server hochgeladen.
Das Programm zur Bearbeitung der Datei muss das WebDAV-Netzwerkprotokoll unterstützen. Gängige Office-Programme – wie Microsoft oder Libre Office – unterstützen WebDAV in der lokal installierten Version.
Das Programm zur Bearbeitung ist lokal auf dem Computer installiert (die Cloud-Variante wird von WebDAV nicht unterstützt!).
Ein valides SSL-Zertifikat für den Intrexx Portalserver (bzw. Nginx als Reverse Proxy mit SSL Zertifikat) wird benötigt.

WebDAV aktivieren

Die Konfiguration von WebDAV befindet sich im Portal Manager im Modul „Integration“ - "WebDAV".

Per Default ist "WebDAV" deaktiviert. Über das Kontextmenü kann "WebDAV" aktiviert werden.

Dateitypen und Programme hinzufügen

Im rechten Bereich werden alle Dateitypen angezeigt, für die der Zugriff auf den Intrexx Portal Server über "WebDAV" voreingestellt sind.

Neue Dateitypen können über das Plus-Symbol hinzugefügt werden.

Wurde ein neuer Dateityp gewählt, können über das Plus-Symbol ein oder mehrere Programme für die Bearbeitung zugeordnet werden. Das URI-Schema wird automatisch ergänzt,

Ein Standardprogramm wird aus den hinterlegten Programmen gewählt.

Die Dateiauswahl kann erweitert werden – beachten Sie den dazugehörigen Artikel in der Onlinehilfe - https://help.intrexx.com/intrexx/steady/de-de/Content/OH/webdav/webdav-configuration.html?tocpath=Daten%20integrieren%7CWebDAV%7C_____1

Authentifizierung

Die Dokumente, auf die Sie als Portalbenutzer zugreifen, wurden zuvor auf den Intrexx Portal Server hochgeladen. Damit Sie aus dem Portal auf die Dokumente zugreifen können, ist eine Authentifizierung des zugreifenden Portalbenutzers für "WebDAV" erforderlich.

Wechseln Sie im Modul "Benutzer" in den Menüpunkt "Benutzer" und wählen den Eintrag "Konfiguration".

Klicken Sie neben dem Eintrag "WebDAV" auf das Stift-Symbol.

Das Binding "WebDAV" kann hier konfigurieren:

Die angebotenen Authentifizierungstypen sind:

Intrexx Authentifizierung

Unabhängig von der Mitgliedschaft in lokalen Domänen meldet sich jeder Benutzer mit dem Benutzernamen und dem Passwort aus der Benutzerverwaltung des Portals an.

Authentifizierung gegen Windows-Domäne mit Benutzername und Passwort

Bei diesem Authentifizierungstyp werden Benutzername und Passwort des Benutzers aus der Windows Active Directory Domäne verwendet und geprüft.

LDAP-Authentifizierung

Eine Authentifizierung wird gegen LDAP geprüft.

Benötigt werden

Servername (FQDN) und Port

Verschlüsselung (LDAP/LDAPS)

Authentifizierung (keine/einfach/sicher)

Benutzer

Andere

Andere Authentifizierungsmodule können nach Ihren Anforderungen entwickelt werden. Als Beispiele könnten hier die Authentifizierung über X509-Zertifikate, die Authentifizierung an Systemen von Drittanbietern etc. angeführt werden. Bei Fragen wenden Sie sich bitte an das Consulting der INTREXX GmbH.

Dateiauswahl erstellen

Damit eingebundene Dokumente bearbeitet werden können, muss der Dateiupload entsprechend konfiguriert werden:

Eine neue Dateiauswahl wird auf einer Eingabeseite Applikationsseite wie gewohnt erstellt.

Im letzten Eigenschaften-Dialog wird das Datenfeld erstellt, in dem das Dokument gespeichert wird (bzw. der Verweis auf das Dokument).

Hier müssen wir neben Name und Dateityp die Datei konfigurieren, indem wir auf den Link "mehr…" klicken.

Ein neuer Dialog öffnet sich. Wählen Sie den Datentyp des Primärschlüssels sowie den Dateispeicherort. Grundlagen dazu finden Sie im Training "Grundlagentraining Applikationsentwicklung".

Neu ist das Kontrollkästchen "Editieren der Datei über WebDAV ermöglichen".

Aktivieren Sie das Kontrollkästchen.

Diese Einstellung kann auch nachträglich aktiviert werden:

In den Eigenschaften der Datengruppe kann im Reiter "Datenfelder" der Eigenschaftendialog des Datei-Datenfeldes aufgerufen werden.

Mit Klick auf das Stift-Symbol kann "WebDAV" aktiviert werden.

Datei für Bearbeitung konfigurieren

Die eingebundenen Dateien werden auf Ansichtsseiten oder in Tabellen angezeigt. Hier muss die Bearbeitung konfiguriert werden:

Ansichtstabelle

Steht die Dateiauswahl in einer Ansichtstabelle zur Verfügung, kann die Datei zur direkten Bearbeitung konfiguriert werden.

Zunächst muss der Kontrolltyp der Tabellenspalte auf "Datei" gestellt sein.

Im Eigenschaften-Dialog der Datei-Spalte muss die neue Vorlage "WebDAV" zugeordnet werden.

Im Reiter "Optionen" ist das Kontrollkästchen "WebDAV" aktiviert. Diese Einstellung wird über die Einstellung des Datenfeldes gesteuert.

Ist das Kontrollkästchen "Klick auf Datei öffnet diese in konfiguriertem Editor" aktiviert, kann die Datei direkt bearbeitet werden.

Im Browser kann jetzt das Programm zum Bearbeiten der Datei gewählt werden.

Ansichtsseite

Liegt die Dateiansichtskontrolle auf einer Ansichtsseite, kann in den Eigenschaften der Dateikontrolle die Vorlage "WebDAV" aktiviert werden.

Im Reiter "Optionen" ist das Kontrollkästchen "WebDAV" aktiviert. Diese Einstellung wird über die Einstellung des Datenfeldes gesteuert.

Ist das Kontrollkästchen "Klick auf Datei öffnet diese in konfiguriertem Editor" aktiviert, kann die Datei direkt bearbeitet werden.

Im Browser kann jetzt das Programm zum Bearbeiten der Datei gewählt werden.

Praxisübung

Aufgabenbeschreibung

In unserer kleinen Praxisübung werden wir zunächst die Bearbeitung von "WebDAV" konfigurieren. Anschließend erstellen wir eine Applikation mit einem Dateiupload, der direkt im Browser bearbeitet werden kann

Lernziel

Wirr lernen in dieser Übung das Aktivieren und Konfigurieren von "WebDAV".

Vorbereitung

WebDAV aktivieren

Wechseln Sie zunächst in Ihr Portal. Achten Sie darauf, dass Sie administrative Rechte am Modul "Integration" haben.

Rufen Sie das Kontextmenü der Integration "WebDAV" auf und wählen aktivieren den WebDAV-Service.

Kontrollieren Sie, dass alle Dateitypen hinterlegt sind, die Sie im Browser zur Bearbeitung anbieten möchten. Fügen Sie gegebenenfalls weitere Dateitypen über das Plus-Symbol hinzu.

Neue Applikation erstellen

Wechseln Sie in das Modul "Applikationen".

Öffnete sich der Applikationsmanager nicht automatisch, klicken Sie bitte auf das Symbol "Bestehende Applikation öffnen".

Wählen Sie aus dem Bereich "Neue Applikation" die Vorlage "Basisapplikation" und klicken auf die Schaltfläche "Erstellen".

Dateiauswahl erstellen

Wir werden auf der Eingabeseite zunächst ein neues Element für den Dateiupload erstellen.

Wechseln Sie auf die Eingabeseite der Applikation.

Für das neue Element benötigen wir im Raster einen neuen Container, in dem die Dateiauswahl-Kontrolle eingefügt werden kann.

Wechseln Sie mit einem Doppelklick in die Eigenschaften des äußeren Rasters.

Erstellen Sie einen neuen Container. Platzieren Sie den Container an die vorletzte Position des Rasters.

Der Container hat in allen Bildschirmgrößen eine Breite von 12.

Übernehmen Sie den Dialog mit "OK".

Ziehen Sie per Drag & Drop aus den Elementen die Kontrolle "Dateiauswahl" in den neu erstellten Container.

Sobald Sie die Dateiauswahl platziert haben, öffnet sich automatisch der Eigenschaften-Dialog.

Hinterlegen Sie den Titel "Datei".

Die weiteren Einstellungen belassen wir in der Standardeinstellung.

Klicken Sie ohne Änderungen auf "Weiter", bis Sie im Dialog "Datenfeld" angekommen sind.

Im Eigenschaften-Dialog "Datenfeld" wählen wir die Option "Datenfeld". Wir erstellen über das Plus-Symbol ein neues Datenfeld.

Das neue Datenfeld erhält den Titel "Datei". Als Datentyp wählen wir die Option "Datei" und klicken dann auf den Link "mehr…".

Im Dialog "mehr…" aktivieren wir das Kontrollkästchen "Editieren der Datei über WebDAV ermöglichen". Alle anderen Einstellungen belassen wir in der Standard-Einstellung. Nähere Informationen zu den Einstellungen erfahren Sie im "Grundlagentraining Applikationsentwicklung".

Übernehmen Sie die Dialoge mit "OK" …

… bis Sie wieder im ursprünglichen Dialog "Datenfeld" sind. Klicken Sie hier auf "Weiter" und erzeugen im letzten Dialog einen Feldtitel.

Klicken Sie auf "Fertig stellen".

Dateibearbeitung aktivieren

Die Datei soll nun auf verschiedenen Seiten zur Bearbeitung angezeigt werden.

Ansichtstabelle

Auf der Übersichtsseite „Alle Einträge“ soll die Datei direkt in der Ansichtstabelle zur Bearbeitung angezeigt werden. Wechseln Sie auf die Seite "Alle Einträge".

Wechseln Sie in die Eigenschaften der Ansichtstabelle und nehmen über das Plus-Symbol das Datenfeld "Datei" auf.

Stellen Sie den Kontrolltyp auf "Datei".

Klicken Sie auf das Stift-Symbol, um die Eigenschaften der Datei zu bearbeiten.

Im Eigenschaften-Dialog wählen Sie im Reiter "Allgemein" die Vorlage "WebDAV".

Im Reiter "Optionen" aktivieren Sie das Kontrollkästchen "Klick auf Datei öffnet diese in konfiguriertem Editor".

Schließen Sie alle geöffneten Dialoge mit "OK".

Speichern Sie die Applikation. Wechseln Sie in den Browser und erfassen in der Applikation einen neuen Datensatz mit einer Datei, die bearbeitet werden kann. Speichern Sie die Datei und bearbeiten Sie sie über die Ansichtstabelle.

Ansichtsseite

Die Datei soll nun auch auf einer Ansichtsseite zur Bearbeitung angezeigt werden.

Erstellen Sie aus dem Kontextmenü der Eingabeseite "Eintrag" eine neue Seite mit Ansichtselementen, indem Sie zunächst auf "Neu" und dann auf "Ansichtsseite mit Elementen" klicken. Die Seite erhält den Namen "Ansicht".

Wechseln Sie mit einem Doppelklick in die Eigenschaften der Dateikontrolle.

Im Reiter "Allgemein" wählen Sie die Vorlage "WebDAV".

Im Reiter "Optionen" aktivieren Sie das Kontrollkästchen "Klick auf Datei öffnet diese in konfiguriertem Editor".

Schließen Sie alle geöffneten Dialoge mit "OK".

Damit die Ansichtsseite gewählt werden kann, werden wir nun eine Verlinkung der Ansichtsseite über die Ansichtstabelle erstellen.

Wechseln Sie auf der Übersichtsseite in die Eigenschaften der Ansichtstabelle.

Markieren Sie die Spalte "Titel" und klicken auf das Stift-Symbol.

Im Eigenschaften-Dialog wechseln Sie in den Reiter "Sprungziel". Aktivieren Sie das Kontrollkästchen "Eintrag ist Link" und wählen als Zielseite die Ansichtsseite "Ansicht".

Übernehmen Sie alle Dialoge mit "OK".

Speichern Sie die Applikation. Wechseln Sie in den Browser und klicken in der Ansichtstabelle auf die erste Spalte. Auf der Ansichtsseite bearbeiten Sie die Datei.

Content Editor

Einführung

In diesem Training stellen wir Ihnen die Basiskontrolle "Content Editor" vor. Wir schauen uns dabei an, wann die Kontrolle eingesetzt wird und wie sie in Intrexx konfiguriert und im Browser bedient wird. Wir schließen das Training mit einer kleinen Praxisübung ab.

Definition und Ziele

Im Intrexx Applikationsdesigner ist eine neue Basiskontrolle hinzugekommen – der "Content Editor". Er ist als Eingabe- und Ansichtselement verfügbar. Im Content-Editor kann Markdown erfasst und angezeigt werden. der Content Editor wird mit Datenfelder des Datentyps "Text" verbunden. Die Eingabelänge ist nicht begrenzt.

Abgrenzung

Der Content Editor verwendet die Markdown-Syntax, eine einfache Auszeichnungssprache, die darauf abzielt, die Lesbarkeit und Einfachheit zu maximieren. Formatierungen wie Überschriften, Fettdruck, Listen usw. werden durch einfache Zeichen wie #, *, - usw. realisiert. Durch die WYSIWYG-Vorschau kann der formatierte Text geprüft werden.

Die Markdown-Funktionalität wird insbesondere von Entwicklern und Technischen Redakteuren verwendet, da das Schreiben von Inhalten mit einfacher Formatierung erleichtert wird, ohne von HTML-Code abgelenkt zu werden. Sie sind ideal für Plattformen wie Blogs, Foren und GitHub.

Als Abgrenzung zum TinyMCE-Editor ist festzuhalten, dass dieser eher für Nutzer geeignet ist, die eine reichhaltige Textbearbeitung mit einer visuellen Oberfläche bevorzugen, während Markdown-Editoren für diejenigen ideal sind, die eine schnelle und unkomplizierte Textformatierung mit einer leichten Syntax bevorzugen.

Konfiguration

In den Eigenschaften des "Content-Editors" werden im Reiter "Konfiguration" Schaltflächen zur Verwendung ausgewählt.

Die Schalflächen können aus der Spalte "Ausgewählte Schaltflächen" gelöscht werden. Die Position kann über die Pfeilsymbole nach oben und unten geändert werden.

Die Standardkonfiguration kann über das Symbol am rechten Rand wiederhergestellt werden.

Eigene Konfiguration erstellen

Eine eigene Standardkonfiguration kann erstellt werden.

Im Portalverzeichnis muss dafür eine XML-Datei angelegt werden:

internal/cfg/htmleditor/markdown

Das Format dafür kann von der vorhandenen Datei ixdefault.xml adaptiert werden.

Die eigene Konfiguration kann nach erneutem Öffnen des Content Editors über das Konfigurations-Symbol am rechten Rand ausgewählt werden.

GIPHY

Allgemeines

GIPHY ist eine weit verbreitete Online-Datenbank und Suchmaschine, die es Benutzern ermöglicht, animierte GIF-Dateien zu suchen, zu teilen und zu entdecken. GIPHY bietet eine umfangreiche Sammlung von GIFs aus verschiedenen Kategorien und Anlässen, die in sozialen Medien, Nachrichten-Apps und auf Webseiten verwendet werden können, um Kommunikation ausdrucksstärker und unterhaltsamer zu gestalten.

API-Key

GIPHY bietet APIs an, mit denen Entwickler die Suche und Integration von GIFs in ihre eigenen Anwendungen oder Dienste nahtlos einbinden können.

Diese API-Keys müssen in Intrexx integriert werden, um GIPHY im Content-Editor nutzen zu können.

Zunächst müssen Sie einen Account in GIPHY erstellen. Anschließend haben Sie Zugriff auf die API-Keys. Der "Beta-Key" enthält einen eingeschränkten Zugriff auf GIPHY, der "Production-Key" einen vollen Zugriff.

Weitere Informationen zu GIPHY erhalten Sies in unserer Onlinehilfe https://help.intrexx.com/intrexx/steady/de-de/Content/OH/application-element-content-editor.html?cshid=de_uplanet_lucy_client_appdesigner_sheet_ContentEditorConfigurationPage#GIPHY.

Im Intrexx Integrations-Modul können Sie den API-Key unter "Eigene API-Keys" eintragen. Wählen Sie über das Kontextmenü den Eintrag "Neuen API-Key hinzufügen" und wählen "GIPHY".

Hinterlegen Sie den API-Key und übernehmen den Dialog mit "OK".

Anzeige in Ansichtstabellen

Soll der erfasste Content des Content Editors in Ansichtstabellen korrekt angezeigt werden, muss der Kontroll-Typ des Datenfeldes auf "Content Ansicht" gestellt werden.

Anzeige auf Ansichtsseiten

Wird den erfasste Content des Content Editors auf einer Ansichtsseite dargestellt, muss das Datenfeld mit dem Element "Content Ansicht" verknüpft werden.

Bedienung im Browser

In der Ansichtstabelle wird der formatierte Text angezeigt.

Nachdem die Applikation gespeichert wurde, steht der Content-Editor im Browser zur Verfügung.

Die konfigurierte Symbolleiste wird angezeigt.

Praxisübung

Vorbereitung

Erstellen Sie eine neue Applikation auf der Vorlage "Basis Applikation".

Wechseln Sie auf die Eingabeseite "Eintrag".

Wechseln Sie in die Eigenschaften des Rasters und erstellen einen neuen Container, den Sie über die volle Breite an die vorletzte Position des Rasters verschieben.

Übernehmen Sie den Dialog mit "OK".

Benennen Sie schließlich die Applikation um in "Content-Editor".

Content Editor erstellen

Wechseln Sie auf die Eingabeseite "Eintrag".

Ziehen Sie das Element "Content Editor" in den neuen Container.

Hinterlegen Sie folgende Eigenschaften:

Titel: "Content Editor"

Klicken Sie auf "Weiter".

Erzeugen Sie einen Feldtitel und schließen den Dialog mit "Fertigstellen" ab.

Wechseln Sie mit einem Doppelklick auf das Element auf der Arbeitsfläche in den Eigenschaften-Dialog.

Im Reiter "Konfiguration" wählen Sie ihre gewünschten Schaltflächen zur Bearbeitung.

Übernehmen Sie den Dialog mit "OK".

Anzeige in Ansichtstabelle

Wir werden nun das neu erstellte Datenfeld "Content Editor" in der Ansichtstabelle aufnehmen.

Wechseln Sie auf der Seite "Alle Einträge" in die Eigenschaften der Ansichtstabelle.

Nehmen Sie über das Plus-Symbol auf der rechten Seite neben den Spalten das Datenfeld "Content Editor" auf.

Wählen Sie den Kontrolltyp "Content Ansicht". Standardmäßig ist dieser Kontrolltyp voreingestellt.

Übernehmen Sie den Dialog mit "OK".

Anzeige auf Ansichtsseite

Wir werden das Datenfeld "Content Editor" auf einer Ansichtsseite darstellen.

Erstellen Sie über das Kontextmenü der Datengruppe "Datengruppe" eine Ansichtsseite.

Wählen Sie eine leere Seite. Vergeben Sie den Titel "Ansicht".

Ziehen Sie die Kontrolle "Content Ansicht" auf die Ansichtsseite.

Übernehmen Sie den Dialog mit "OK".

Sobald das Element positioniert ist, öffnet sich der Eigenschaften-Dialog.

Verknüpfen Sie das Element mit dem Datenfeld "Content Editor".

Klicken Sie auf "Weiter" und deaktivieren den Feldtitel.

Schließen Sie den Eigenschaften-Dialog mit "Fertigstellen" ab.

Damit wir die Ansichtsseite sehen können, verknüpfen wir die Seite in der Ansichtstabelle.

Wechseln Sie auf der Seite "Alle Einträge" in die Eigenschaften der Ansichtstabelle.

Erstellen Sie über das Plus-Symbol eine Schaltfläche.

Markieren Sie die neu gewählte Schaltfläche – in unserem Beispiel die Lupe – und wählen das Sprungziel "Ansicht". Beim Klick auf die Lupe wird nun auf die Zielseite "Ansicht" verlinkt.

Klicken Sie auf das Stift-Symbol, um die Eigenschaften der Lupe zu bearbeiten.

Im Reiter "Aktionen" wechseln Sie in den Bereich "Zieloptionen".

Die Zielseite soll im Modalen Tooltip geöffnet werden:

Wählen Sie die Option "In Tooltip öffnen" und aktivieren die Kontrollkästchen

Modal öffnen

Schließen-Symbol anzeigen

Übernehmen Sie den Dialog mit "OK".

Content im Browser erstellen

Zunächst speichern wir die Applikation und öffnen das Portal im Browser. Klicken Sie dazu in der Symbolleiste auf das erste Symbol "Verbundenes Portal im Browser öffnen".

Wechseln Sie in ihre Applikation und erstellen über die Schaltfläche "Neu" einen neuen Datensatz.

Hinterlegen Sie neben einem beliebigen Titel Content im Content Editor. Formatieren Sie Ihren Content.

Speichern Sie den Datensatz mit der Schaltfläche "Speichern".

Wechseln Sie auf die Seite "Alle Einträge" und klicken in der Ansichtstabelle auf die Lupe. Die Ansichtsseite mit dem erfassten Content wird angezeigt.

Binding "Weiteres" – Bindingtyp

Im Anzeigewert "Weitere" kann jetzt der Bindingtyp gewählt werden.

Bindingtyp "appUserProfile"

Einführung

Einsatz

Mit dem neuen Bindingtyp "appUserProfile" können Daten im Profil des Users gespeichert werden. Damit stehen Informationen eines Benutzers in einem beliebigen Wert gespeichert und jederzeit abgerufen werden, zum Beispiel als Vorgabewert in Eingabefeldern.

Abgrenzung

Mit dem Bindingtyp "appUserProfile" erweitern sich die Möglichkeiten, beliebige Informationen individuell zu einem Benutzer zu speichern und zu verarbeiten:

Methode	Benutzerabhängig	Verfügbarkeit
SharedState / Verarbeitungskontext	Nein	Userunabhängig, bis neuer Wert gesetzt wird
Sessionvariable	Ja	innerhalb einer Session
Requestwert / Parameter	Nein	Für eine Aktion
Systemdatengruppe	Nein	Innerhalb der Applikation dauerhaft
appUserProfile	Ja	Userabhängig, bis neuer Wert gesetzt wird

Umsetzung "No code"

Wird der Wert auf Eingabeseiten definiert und gespeichert, kann das Binding ohne Programmierung verwendet werden.

Definiert wird es hier im WriteContainer der Eingabeseite. Beim Erstellen neuer WriteContainer steht uns eine neue Benutzerdefinierte Klasse "AppUserProfile" zur Verfügung.

Die Kontrolle, die den Wert definiert, wird in diesen WriteContainer gezogen.

In den Eigenschaften des Bindings wird das Ziel definiert

Anschließend kann der Wert im Default einer Kontrolle hinterlegt werden. Dazu kann unter "Weitere" der Bindingtyp "appUserProfile" gewählt und der definierte Wert hinterlegt werden.

Umsetzung "Low Code"

Steht zur Definition kein WriteContainer zur Verfügung, in dem der Bindingtyp "appUserProfile" definiert werden kann, kann dieser auch per Velocity und Groovy gesetzt werden.

Informationen zu "appUserProfile" in Velocity finden Sie in der Velocity-Dokumentation unter https://docs.intrexx.com/intrexx/version/steady/api/velocity/jdk/de/uplanet/lucy/server/auxiliaries/util/VCApplicationUserProfile.html

Informationen in "Groovy finden Sie in der Groovy-Dokumentation unter https://docs.intrexx.com/intrexx/version/steady/api/groovy/jdk/de/uplanet/lucy/server/businesslogic/util/scriptable/GroovyApplicationUserProfile.html

Praxisübung: Umsetzung "No-Code"

Aufgabenbeschreibung

Die Zeichenfolge eines Datenfeldes (Titel) soll - je Benutzer und dauerhaft! - abrufbar sein und als Vorgabe für neue Datensätze dienen.

Die zuletzt definierte Vorgabe soll also auch Tage später als Vorgabe für den aktuellen Benutzer gesetzt werden.

Vorbereitung

Erstellen Sie im Applikationsdesigner eine neue Applikation auf Basis der Vorlage "Basisapplikation".

Benennen Sie die Applikation um in "appUserProfile".

Wert definieren

Zunächst müssen wir einen Wert definieren, in dem wir eine Zeichenfolge speichern.

Wechseln Sie auf die Eingabeseite der Applikation. Der Inhalt des Feldes "Titel" soll den Wert des Bindings füllen.

Wir wechseln in den WriteContainer der Eingabeseite. Über das Plus-Symbol erstellen wir einen neuen Write-Container.

Wir tragen als Namen "User_Titel" ein.

Als Typ wählen wir den Eintrag "Benutzerdefiniert".

Wählen Sie die Benutzerdefinierte Klasse "AppUserProfile".

Übernehmen Sie den Dialog mit "OK".

Ziehen Sie jetzt das Eingabefeld "Titel" in den Bindings-Bereich des neu erstellten WriteContainers.

Wechseln Sie in die Eigenschaften des Bindings, indem Sie das Binding markieren und dann auf das Stift-Symbol klicken.

Hinterlegen Sie im Ziel die Zeichenfolge "myTitle".

Übernehmen Sie den Dialog mit "OK".

Wechseln Sie jetzt in die Eigenschaften der Schaltfläche "Speichern".

Im Reiter "Aktionen" wechseln Sie in den Bereich "WriteContainer".

Klicken Sie auf das Plus-Symbol und fügen den neuen WriteContainer "UserTitel" mit einem Doppelklick hinzu.

Übernehmen Sie alle geöffneten Dialoge mit "OK".

Wert als Vorgabewert hinterlegen

Wir möchten nun, dass der für den Benutzer gespeicherte Wert des Bindings "appUserProfile" als Vorgabewert im Feld „Titel“ übernommen wird.

Auf der Eingabeseite der Applikation

wechseln Sie in die Eigenschaften der Eingabekontrolle "Titel".

Wechseln Sie in den Reiter "Bindings".

Aktivieren Sie im Bereich "Vorgabe" das Kontrollkästchen "Bei neuen Datensätzen".

Klicken Sie auf das Stift-Symbol.

Im Dialog "Vorgabe" aktivieren Sie die Option "Weiter".

Wählen Sie den Bindingtyp "appUserProfile" und hinterlegen den Wert "myTitle".

Übernehmen Sie alle Dialoge mit "OK" und speichern die Applikation.

Test im Browser

Schauen wir uns nun die Auswirkung im Browser an.

Damit wir unseren Test vollständig durchführen können, wechseln wir zunächst in die Intrexx Benutzerverwaltung und fügen einen beliebigen Benutzer in die Gruppe "Administratoren" hinzu.

Sie können das Portal direkt über den Applikationsdesigner starten. Im Portal im Browser sind Sie dann mit dem User angemeldet wie im Portalmangers.

Wechseln Sie in die Applikation appUserProfile.

Erzeugen Sie einen neuen Datensatz und hinterlegen einen beliebigen Titel. Speichern Sie den Datensatz ab.

Erzeugen Sie einen weiteren Datensatz – als Vorgabe wird unsere letzte Eingabe angezeigt.

Loggen Sie sich aus dem Portal aus und wieder ein. Erzeugen Sie erneut einen neuen Datensatz – die Vorgabe wird erneut angezeigt, also auch in der neuen Session.

Authentifizieren Sie sich nun mit dem User, dem Sie gerade administrative Rechte zugeordnet haben.

Wechseln Sie in ihre Applikation und erzeugen einen neuen Datensatz. Es wird kein Vorgabewert angezeigt. Der Wert wurde also Benutzerabhängig gespeichert.

Hinterlegen Sie einen Titel und speichern den Datensatz ab. Erstellen Sie dann einen neuen Datensatz – der Titel wird angezeigt.

Damit ist unser Test erfolgreich abgeschlossen.

Praxisübung: Umsetzung "Low Code"

Aufgabenbeschreibung

In der Applikation "Schwarzes Brett" können auf der Übersichtsseite Kategorien gewählt und die darunterliegende Tabelle danach gefiltert werden.

Wir werden die Filterkriterien je User speichern und als Default im Filter hinterlegen. So wird beim Aufruf der Seite der letzte Filterausdruck je Benutzer automatisch vorbelegt.

Vorbereitung

Importieren Sie die Vorlage "Schwarzes Brett" aus der Vorlagen-Kategorie "Wissen".

JavaScript Funktion erstellen

Zunächst benötigen wir ein JavaScript, das per Ajax Call den gesetzten Filter im Userprofil speichert.

Wählen Sie dazu über die Menüleiste den Eintrag "JavaScript für alle Endgeräte bearbeiten…".

Hinterlegen Sie im Skript-Editor das folgende Skript:

function saveCategoryFilter(filterKey, filterValueFieldGuid)

Kopieren

1
2
3
4
5
6
7
8
9
10
11
12
function saveCategoryFilter(filterKey, filterValueFieldGuid){
var filterValue = Browser.getValue(ix.util.getHtml(filterValueFieldGuid))
var el = ix.util.getHtml(""); /*FormGroup  formgroup*/
ix.ajax().requestAppGroovy("", {
dataType: "json",
data: {
"fr_filterKey": filterKey,
"fr_filterValue": filterValue.toString()
        }
}, el);
}

Die Guid der FormGroup wird benötigt.

Die Guid des Filters wird beim Aufruf übergeben.

Benötigt wird die Guid der Form. Die Beschreibung finden Sie im nächsten Schritt.

Weiterhin wird Name der Groovy-Datei angegeben, die wir danach erstellen.

Die Guid der Form Sie erhalten Sie über die Applikationsstruktur.

Groovy Skript erstellen

Als nächstes hinterlegen wir ein Groovy-Skript.

Dieses Skript erledigt folgende Aufgaben:

Werte werden aus dem Request geholt
Kommas werden durch Pipes ersetzen
Und schließlich wird der Wert in das Profil des Users geschrieben

Öffnen Sie dazu in der Menüleiste "Groovy-Skript bearbeiten…".

Erstellen Sie über das Plus-Symbol eine neue Groovy-Datei mit dem Namen "saveDocumentFilter.groovy".

Klicken Sie auf das Stift-Symbol, um in den Skript-Editor zu gelangen.

Hinterlegen Sie im Skript-Editor das folgende Skript:

Kopieren

1
2
3
4
5
6
7
8
9
10
// Werte aus dem request holen
def strFilterkey = g_request.get('fr_filterKey')
def strFiltervalue = g_request.get('fr_filterValue')
// Kommas mit Pipes ersetzen
strFiltervalue = strFiltervalue.replaceAll(',','||')
// Wert in das Profil schreiben
g_appUserProfile.setProfileValue('', strFilterkey, strFiltervalue)
// response
response.json()
writeJSON("done": 'ja');

Fügen Sie an der markierten Stelle die Guid der Applikation ein. Übernehmen Sie alle geöffneten Dialoge mit "OK" und "Schließen".

JS Aufruf in dynamischem Filter

Auf der Übersichtsseite „Anzeigen“ hinterlegen wir in den Eigenschaften der Auswahlliste "Kategorie" den JavaScript-Aufruf:

In den Eigenschaften der Auswahlliste klicken Sie im Reiter "Skript" auf das Plus-Symbol und wählen:

Event: onchange

Funktion: saveCategoryFilter

Übergeben werden die Parameter (filterKey, [filterValueFieldGuid])

Die Parameter müssen wie folgt gefüllt werden:

FilterKey: categoryUser

filterValueFiledGuid: [Guid der Kategorie]

Bitte hinterlegen Sie beide Parameter in einfachen Hochkommas.

Schließen Sie alle Dialoge mit OK.

JS Aufruf im onload der Seite

Wechseln Sie in die Eigenschaften der Ansichtsseite. Hinterlegen Sie im Reiter Skript auch im Onload-Event den Aufruf der Funktion saveCategoryFilter mit den gleichen Parametern, wie in der Auswahlliste.

Übernehmen Sie alle Dialoge mit "OK".

Vorgabewert setzen

Als letztes müssen wir in der Auswahlliste den Vorgabewert hinterlegen:

Wechseln Sie in die Eigenschaften der Auswahlliste. Im Reiter "Vorgabe" aktivieren Sie das Kontrollkästchen "Bei neuen Datensätzen".

Wählen Sie die Option "Weitere" und hinterlegen:

Bindingtyp: AppUserProfile

Wert: categoryUser

Beim Wert handelt es sich um den FilterKey, den Sie im Aufruf des JavaScripts definiert haben.

Alternativ kann dieser Eintrag gewählt werden:

appUserProfile[GUID].documentCategory

Die Guid entspricht der Guid der Applikation.

Image Editor

Einführung

Zielsetzung

Ziel des Image-Editor ist es, Bilder in den Grafikformaten .jpg, .jpeg und .png direkt im Browser zu bearbeiten. Dabei sollen sie sowohl mit Beschriftungen und Annotationen versehen sowie Bearbeitungen wie Zuschneiden, Drehen und Skalieren möglich sein.

Dialog Applikationsdesigner

Konfiguration

Im Dialog der File-Kontrolle kann die Bearbeitung des Bildes aktiviert werden.

Die Bearbeitungsmöglichkeiten des Editors können konfiguriert werden:

Mögliche Einstellungen sind:

Zuschneiden, drehen und skalieren

Zeichnen, beschriften und annotieren

Wurde eine dieser Einstellungen aktiviert, kann der Anzeigemodus gewählt werden.

Hier kann zwischen

Inline und

Popup

gewählt werden. Ist das Bild zu klein für den Inline-Modus, wird es automatisch im Popup-Modus geöffnet.

Die Bildkomprimierung kann aktiviert werden. Je niedriger die Qualität, desto weniger Speicherplatz wird benötigt. Der Kompressor funktioniert nur mit dem JPEG-Format.

Wurde die Option "Zeichnen, beschriften und annotieren" gewählt, werden im nächsten Schritt die verfügbaren Werkzeuge angeboten. Standardmäßig sind alle Werkezuge ausgewählt.

Im Bereich "Optionen" können Schaltflächen zum Löschen, Rückgängig, Wiederherstellen und Herein-/Herauszoomen aktiviert werden.

Die verfügbaren Farben können z.B. in Anlehnung an das CI definiert werden.

Reiter "Skript"

In den Eigenschaften der Dateiauswahl befinden sich im Reiter "Skript" zwei Bereiche, JavaScript zu hinterlegen.

Im oberen Bereich kann JavaScript hinterlegt werden, dass auf ein Event der Upload-Kontrolle reagiert.

Im unteren Bereich kann JavaScript hinterlegt werden, dass auf ein Event der beiden Editoren ("Zeichnen, beschriften, annotieren" sowie "Zuschneiden, drehen und skalieren") reagiert.

Als Event können "render" und "close" gewählt werden.

Die Ereignis-Listener geben das vom jeweiligen Editor ausgeführte Ereignis als Ausgabe zurück. Dieses Ereignis kann als Parameter an eine Funktion übergeben werden. Der Aufbau ist abhängig vom Ereignistyp und vom Editor. Der Name des Parameters lautet "editorEvent".

Ein Beispiel-Code kann über den Link "Beispiel" aufgerufen werden.

Bearbeitung im Browser

Schauen wir uns nun die Bearbeitung eines Bildes im Browser an:

Das Öffnen der Editoren erfolgt über Symbole …

… beziehungsweise über das Stift-Symbol. Die Art ist abhängig von der gewählten Vorlage.

Ob das Bild anschließend im Popup oder inline geöffnet wird, ist vom gewählten Anzeigemodus sowie der Größe des angezeigten Bildes abhängig. Das angezeigte Bild würde zum Beispiel immer im Popup geöffnet werden.

Zuschneiden, drehen, skalieren

Die Grafik kann über den Eckpunkt zugeschnitten werden.

Im unteren mittigen Bildschirmabschnitt kann über das Lineal die Grafik rotiert werden.

Das Seitenverhältnis kann in der oberen linken Ecke definiert werden.

Das danebenliegende Raster-Symbol blendet ein Rater ein/aus.

Über das Lupen-Symbol wird der Bildausschnitt gezoomt werden.

Die Änderungen werden über das Häkchen am oberen rechten Bildschirmrand gespeichert bzw. über das Schließen-Kreuz ohne Speichern geschlossen.

Wichtig ist hier, dass der Datensatz, in dem das Bild eingebunden ist, gespeichert wird. Anderenfalls werden die Änderungen nicht übernommen.

Am unteren linken Bildschirmrand kann die Grafik über die Rotations-Pfeile nach links und rechts gedreht werden.

Über die Symbole am unteren rechten Bildschirmrand kann die Grafik horizontal und vertikal gespiegelt werden.

Zeichnen, beschriften und annotieren

Wählt man den Editor zum Zeichnen, Beschriften und Annotieren, stehen folgende Bearbeitungsmöglichkeiten zur Verfügung:

Am oberen Bildschirmrand werden die gewählten Werkzeuge eingeblendet.

Um unteren Bildschirmrand kann eine Farbpalette …

… sowie die Deckkraft eingestellt werden.

Praxisübung

Vorbereitung

Erstellen Sie eine neue Applikation auf der Vorlage "Basis Applikation".

Wechseln Sie auf die Eingabeseite "Eintrag".

Wechseln Sie in die Eigenschaften des Containers und erstellen einen neuen Container, den Sie über die volle Breite an die vorletzte Position des Rasters verschieben.

Übernehmen Sie den Dialog mit "OK".

Wechseln Sie in die Speichern-Schaltfläche und korrigieren die Einstellungen wie folgt:

Reiter "Aktionen"

Sprungziel:

Wählen Sie die Option: "Sprung auf bestehenden Datensatz".

Zielseitenoptionen:

Deaktivieren Sie das Kontrollkästchen "Tooltip schließen".

Übernehmen Sie den Dialog mit "OK".

Bild Editor aktivieren

Ziehen Sie das Element "Dateiauswahl" in den neuen Container.

Hinterlegen Sie folgende Eigenschaften:

Titel: "Bild"

Aktivieren Sie beide Editoren zur Bildbearbeitung. Aktivieren Sie den Anzeigemodus "Popup".

Klicken Sie auf "Weiter".

Wählen Sie alle vorhandenen Werkzeuge zur Bildbearbeitung aus.

Aktivieren Sie die Schaltflächen zum "Löschen", "Rückgängig/Wiederherstellen" sowie "Heraus-/Hereinzoomen".

Klicken Sie auf "Weiter".

Hinterlegen Sie die gängigen Grafikformattypen

.jpg, .jpeg, .png

Bitte beachten Sie, dass andere Grafikformate zwar hochgeladen, jedoch nicht bearbeitet werden können.

Übernehmen sie den Dialog mit "OK".

Speichern Sie die Applikation.

Bild im Browser bearbeiten

Zunächst öffnen wir die Applikation im Browser. Klicken Sie dazu in der Symbolleiste auf das erste Symbol "Verbundenes Portal im Browser öffnen".

Wechseln Sie in Ihre Applikation und erstellen über die Schaltfläche "Neu" einen neuen Datensatz. Hinterlegen Sie einen beliebigen Titel und wählen eine Bilddatei – zum Beispiel die bereitgestellte Datei "dialog-dateikontrolle.jpg".

Speichern Sie anschließend den Datensatz.

Nach dem Speichern des Datensatzes können Sie über das Stift-Symbol das Bild bearbeiten. Klicken Sie auf das Stift-Symbol und wählen den Eintrag "Zuschneiden, drehen und skalieren".

Greifen Sie mit gedrückter Maustaste die runden Eckpunkte und wählen so den oberen Bildausschnitt. Übernehmen Sie die Einstellung über das Häkchen in der oberen rechten Fensterecke "Speichern und Schließen".

Klicken Sie erneut auf das Stiftsymbol der Datei und wählen den Eintrag "Zeichnen, beschriften und annotieren"

Wählen Sie aus der oberen Symbolleiste das erste Werkzeug "Frame maker", ziehen um den Bildausschnitt "Bildbearbeitung" einen Rahmen.

Färben Sie den Rahmen mit dem Farbpaletten-Symbol der unteren Symbolleiste rot ein.

Übernehmen Sie die Einstellung, indem Sie auf das Häkchen in der oberen rechten Fensterecke "Speichern und Schließen" klicken.

Die Änderungen an dem Bild sind jetzt noch temporär. Erst nach dem Speichern des Datensatzes werden die Änderungen am Bild final übernommen.

Sonstiges

Suche

In Facetten können nun auch ein Typ gewählt werden. Bisher war der Datentyp fest mit String definiert.

Wird als Typ "Datum/Uhrzeit" oder "Numerisch" gewählt, kann der Suchbereich gruppiert werden kann. Dabei wird ein Bereichsanfang, ein Bereichsende sowie ein Gruppenumfang definiert.

Die Facetten werden in den im Portal definierten Sprachen hinterlegt.

Facetten

Gruppierung Typ "Datum/Uhrzeit"

Für eine Facette mit Typ "Datum/Uhrzeit" kann je ein Bereichsanfang und -Ende werden hinterlegt werden.

Per Klick auf die Schaltfläche neben den jeweiligen Feldern können folgende Optionen als Vorgabe im Browser gewählt werden:

Aktuelles Datum / Uhrzeit:

Das aktuelle Datum wird beim jeweiligen Bereich hinterlegt. Ein Versatz - in Stunden / Tagen / Monaten / Jahren - kann definiert werden.

Der Versatz kann absolut oder relativ angegeben werden. Bei der relativen Angabe wird der Zahl ein Operator mit + (Plus) oder – (Minus) vorangestellt.

Beispiel – erfasst am 15.04.2024:

Fix: 5 Tage

Ergebnis: 05. Aktueller Monat, Aktuelles Jahr 05.04.2024

Relativ: -5 Tage

Ergebnis: aktuelles Datum -5 Tage, aktueller Monat, aktuelles Jahr 10.04.2024

Festes Datum:

Im Bereichsanfang und -ende kann auch ein fixes Datum manuell oder über das Kalendersymbol gewählt werden. Optional kann eine Uhrzeit hinterlegt werden.

Ein Gruppenumfang in Tagen / Monaten Jahren kann hinterlegt werden:

Im Browser kann das Suchergebnis über die Datums-Facette weiter eingeschränkt werden. Anfangs- und Endbereiche werden als Default hinterlegt und können korrigiert werden.

Über den Schieberegler kann der Zeitraum im hinterlegten Gruppenumfang (z.B. 10 Tage-Schritte) sowie im Rahmen des hinterlegten Bereiches geändert werden.

Ohne Bereichsdefinition kann nach einem fixen Datum gesucht werden.

Gruppierung Typ "Numerisch"

Für eine Facette mit Typ "Numerisch" kann je ein Bereichsanfang und -Ende werden hinterlegt werden.

Die Werte werden manuell hinterlegt.

Ein Gruppenumfang kann hinterlegt werden:

Im Browser kann das Suchergebnis über die Datums-Facette weiter eingeschränkt werden. Anfangs- und Endbereiche werden als Default hinterlegt und können korrigiert werden.

Ohne Bereichsdefinition kann nach einem fixen Datum gesucht werden.

Synonymlisten

Im oberen Bereich werden Synonymlisten definiert. Die Synonyme werden mit Komma getrennt in der Liste hinterlegt.

Neue Listen werden über das Plus-Symbol erstellt.

Begriffe ersetzen

Im unteren Bereich der Synonyme können Suchbegriffe ersetzt werden:

In der ersten Spalte werden die Begriffe hinterlegt, die in einer Suche mit den Begriffen der zweiten Spalte ersetzt werden.

Über das Plus-Symbol wird eine neue Liste angelegt.

Import / Export

Im unteren Bereich der Synonyme findet man die Schaltflächen "Import" und "Export". Damit können Synonymlisten ausgewählt und dann entsprechend importiert bzw. exportiert werden.

Über die Schaltfläche "Zurücksetzen" kann der letzte Zustand wieder hergestellt werden.

TinyMCE-Editor

Im TinyMCE wird der bisherige Filebrowser durch den neuen "File Manager" ersetzt.

Beim Einfügen eines Bildes wird bei der Wahl der Quelle auf das Filesystem zugegriffen.

Der bisherige "Filebrowser" …

…. wurde durch einen neuen "File-Manager" mir mehr Funktionalität ersetzt.

Baumkontrolle

Die "Pfadnavigation" kann beim Erstellen einer neuen Baumkontrolle gleich mit angelegt werden.

Kopieren von Seitenrechten

Seiten können mit Berechtigung kopiert werden.

Mehrfachauswahl – PK Kinddatengruppe

In den Speicheroptionen kann nun jeweils beim Erstellen einer neuen Kind-Datengruppe entschieden werden, ob der Primärschlüssel als GUID oder als Ganzzahl angelegt werden soll.

Raster

Verschachtelte Raster werden auf der Arbeitsfläche nun insgesamt kontrastreicher dargestellt, damit die einzelnen Raster besser erkennbar sind.

Wird ein Raster als Element-Vorlage definiert, so gibt es dabei die neue Einstellung "Inhalt des Rasters verwerfen". Die reine Rasterstruktur kann über das neue Menü "Rasterstruktur kopieren" ohne Inhalte kopiert werden.

Kennzeichnung für "Bedingte Anzeige"

Gruppierung, Raster und Schaltfläche erhalten auf der Arbeitsfläche eine orangefarbene Markierung in der unteren rechten Ecke, wenn eine bedingte Anzeige aktiv ist.

Vorbelegung von Dateinamen beim Export von Applikationen

Wenn Sie beim Export von Applikationen eine Applikation auswählen, kann der Dateiname nun automatisch vorbelegt werden.

Auch ein Zeitstempel kann in den Dateinamen aufgenommen werden.

Globale Sprachkonstanten in Applikation erstellen

Globale Sprachkonstanten können jetzt direkt im Applikationsdesigner erstellt werden.

Im Eigenschaftendialog eines Elementes kann man per Klick auf das "A" direkt in den Dialog der Sprachkonstanten wechseln. An dieser Funktion hat sich nichts geändert.

Neu in diesem Dialog ist, dass man bei der Erstellung der Kontante wählen kann, ob es sich um eine Applikationskonstante oder eine globale Konstante handelt.

Suche nach Bildern

Im Dialog der Bildauswahl steht eine Suche zur Verfügung

Maximalgröße des Thumbnail bei Dateien

Im Eigenschaftendialog von Dateien muss im Dialog "Darstellung" eine Maximalgröße für Thumbnails angegeben werden. Entfällt diese Angabe, wird das Bild in der Originalgröße angezeigt.