DACHNUG50 LeapTippsAndTricks.pdf

HCL Domino Leap
Tipps & Tricks für den fortgeschrittenen Citizen Developer
Andreas Zapke
+49 (0) 172 833 9413
andreas.zapke@hcl.com

.
.
4
Haftungsausschluss
ZEITPLANUNG
Die Entwicklung, Freigabe und der Zeitpunkt der Entwicklung zukünftiger Features oder Funktionen, die für unsere Produkte beschrieben werden, liegt in
unserem alleinigen Ermessen.
HAFTUNGSAUSSCHLUSS
Nichts, was in dieser Präsentation oder diesen Materialien enthalten ist, hat die Absicht oder die Wirkung,
Garantien oder Zusicherungen von HCL oder seinen Lieferanten oder Lizenzgebern zu schaffen oder
die Bedingungen der geltenden Lizenzvereinbarung, die die Nutzung der HCL-Produkte regelt, zu ändern.
PERFORMANCE
Die Performance basiert auf Messungen und Projektionen unter Verwendung von Standard-HCL-Benchmarks in einer kontrollierten Umgebung. Der
tatsächliche Durchsatz oder die tatsächliche Leistung, die jeder Benutzer erfährt, hängt von vielen Faktoren ab, darunter auch von Aspekte wie der Arbeitslast
des Systems/der Umgebung des Benutzers, der E/A-Konfiguration, der Speicherkonfiguration und der allgemeinen Arbeitslast. Daher kann nicht zugesichert
werden, dass ein einzelner Benutzer ähnliche Ergebnisse wie die hier angegeben erzielt.
VERTRAULICHE INFORMATIONEN
Der Inhalt dieser Präsentation kann Informationen enthalten, die vertraulich sind, Produktstrategien, Preise und andere Informationen im Zusammenhang mit
HCL Software-Produkten widerspiegeln, die vertraulich behandelt und nicht ohne vorherige Genehmigung eines HCL-Vertreters verbreitet werden sollten.
ZUKÜNFTIGE PRODUKTE
Informationen über mögliche zukünftige Produkte sollen unsere allgemeine Produktausrichtung umreißen und sollten bei der Kaufentscheidung nicht als
Grundlage dienen. Die erwähnten Informationen über potenzielle zukünftige Produkte stellen keine Verpflichtung, Versprechung oder rechtliche Verpflichtung
zur Lieferung von Material, Code oder Funktionalität dar. Informationen über potenzielle zukünftige Produkte dürfen nicht in einen Vertrag aufgenommen
werden.
https://www.hcltechsw.com/wps/portal/legal/hcl-software-disclaimer

.
.
Zielgruppe dieser Session
“Der Vortrag richtet sich primär an Personen, die bereits ein
Grundverständnis zur Erstellung von Leap Applikationen erlangt haben.”
Anders ausgedrückt:
• Wenn Sie noch nicht mit HCL Domino Leap (oder HCL Leap) gearbeitet
haben, werden Sie vermutlich trotzdem einiges mitnehmen können.
• Wenn Sie bereits viel Erfahrung mit der Erstellung von Leap Applikationen
gesammelt haben, dann erfahren sie möglicherweise nicht viel neues.

• Leistungsstarke, intuitive und einfach zu
erlernende ‘No Code’ Plattform
• Business User und IT können innovative Ideen
umsetzen und Prozesse digitalisieren
• Deckt eine große Bandbreite möglicher
Applikationen ab
• Automatisierung von Geschäftsprozessen durch
eingebaute Workflow Funktionalität
• Einfache Erweiterung der Anwendungen mit
gebräuchlichen Web Development Kenntnissen
(HTML, CSS, JavaScript)
• Integration mit externen Backends und
Datenquellen
6
Recap: HCL Domino Leap / HCL Leap
- Die Plattform für den Citizen Developer

.
.
Eine Lösung, zwei Plattformen
• Domino Leap für Domino Kunden
• Leap für DX und Connections Kunden
Gemeinsame Codebasis und weitgehend
gleiche Funktionalität
• Einige Funktionen machen nur Sinn für
Domino Umgebungen
(z.B. Notes DB Integration)
Updates für beide Plattformen etwa zur
gleichen Zeit werden angestrebt
7
HCL Leap und HCL Domino Leap
WebSphere
DB2
oder
Oracle
Domino

.
.
• Bestandslisten anzeigen und pflegen mit dem Data Grid
• Data Grid mit Spaltensortierung und dynamischer Filterung
• Werte aus dem Data Grid weiterverarbeiten mit ‘rowData’
• Methoden zur Übernahme von Daten aus separaten Formularen
• Verschachtelte Dropdown Felder und Befüllung über Services
• Zuordnung von Array Daten aus einem Service zu einem einzelnen Feld
• Methode zum verstecken von Feldern
Wiederverwendbare Muster für den Citizen Developer

.
.
Bestandslisten anzeigen und pflegen
• Alle Datensätze anzeigen im Data Grid
• Vorhandene Daten aktualisieren
• Neue Daten erfassen
Update
Neu
DACHNUG-TrackingPattern.dleap

.
.
Bestandslistenverwaltung in 6 Schritten
1. Hinzufügen eines Data Grids zu einer neuen App Seite oder Formular
und setzen dieser Seite als Home Page (unter Settings)
2. Setzen der Data Grid Einstellungen “Open in same tab”
3. Setzen der Formulareigenschaften “Schaltflächen für Drucken und
Löschen” nicht auswählen (Form)
4. Setzen der Workflow Eigenschaften bei Beendigung der Aktion auf
“redirect to Homepage” und “Submission message” deselektieren (Form,
unter Workflow)
5. Hinzufügen eines Links oder Buttons unter dem Data Grid, ‘navigate to
Form’ selektieren und ‘open in new tab’ deselektieren.
6. Hinzufügen eines Links oder Buttons auf “Form”, um zum Data Grid
zurück zu navigieren und ‘open in new tab’ deselektieren.

.
.
Bestandslistenverwaltung in 6 Schritten
1. Hinzufügen eines Data Grids zu einer neuen App Seite oder Formular
und setzen dieser Seite als Home Page (unter Settings)
2. Setzen der Data Grid Einstellungen “Open in same tab”
3. Setzen der Formulareigenschaften “Schaltflächen für Drucken und
Löschen” nicht auswählen (Form)
4. Setzen der Workflow Eigenschaften bei Beendigung der Aktion auf
“redirect to Homepage” und “Submission message” deselektieren (Form,
unter Workflow)
5. Hinzufügen eines Links oder Buttons unter dem Data Grid, ‘navigate to
Form’ selektieren und ‘open in new tab’ deselektieren.
6. Hinzufügen eines Links oder Buttons auf “Form”, um zum Data Grid
zurück zu navigieren und ‘open in new tab’ deselektieren.
Demo

.
.
Data Grid mit Spaltensortierung und dynamischer Filterung
DACHNUG-DataGridTricksandTips1.dleap

.
.
Data Grid mit Sortierung der Spalten*
1. Sortieroption auf den Quellformular
setzen
* Nur für Domino Leap notwendig
2. ‘Allow users to sort’ in Data Grid
Spalteneigenschaften selektieren

.
.
Data Grid mit dynamischer Filterung
1. Dropdown Felder auf der Seite
hinzufügen und über einen ‘Search
Service’ befüllen.
2. Default Text setzen
mit ‘All ...’

.
.
‘Another Item’ auswählen und dann
das entsprechende Dropdown Feld

.
.
‘Another Item’ auswählen und dann
das entsprechende Dropdown Feld
Demo

.
.
Informationen des ausgewählten Datensatzes anzeigen
Alle Informationen
des ausgewählten
Datensatzes sind
verfügbar, auch
wenn diese nicht im
Data Grid angezeigt
werden.

.
.
‘rowData’ im ‘onRowSelect’ Event nutzen, um die Daten abzurufen
rowData.<Feld ID des Feldes im Formular>

.
.
rowData Schema
{ uid: "f308d85b-9bd6-449f-87b7-b09ea27fa23c",
stageId: "ST_Submitted",
stageTitle: "Submitted",
lastModified: Date obj,
lastModifiedBy: {
displayName: "Daisy Dixon/Acme",
email: "Daisy Dixon/Acme",
login: "CN=Daisy Dixon/O=Acme"
}
created: Date obj,
createdBy: {
},
F_SingleLine1: "hello world",
F_EmailAddress1: "test@example.com",
F_Number1: 56.89,
F_Currency1: 12.34,
F_CheckBox1: true,
F_RichText1: "this isrich
text",
F_DropDown1: {savedValue: "opt1", displayValue: "Option 1"},
F_SelectOne1: {savedValue: "opt1", displayValue: "Option 1"},
F_SelectMany1: [
{savedValue: "opt1", displayValue: "Option 1"},
{savedValue: "opt2", displayValue: "Option 2"}
],
F_Attachment1: {
uid: "abc123",
fileName: "MyFile.png",
viewUrl: "https://...",
downloadUrl: "https://..."
},
F_Name1 {
displayName: "Doug D'Antonio",
id: "CN=Doug D'Antonio/O=Acme",
email: "Doug D'Antonio/Acme",
type: "user
}};
Beispiel:
rowData.F_SingleLine1 liefert den Wert für das Feld
F_SingleLine1 des ausgewählten Datensatzes zurück

.
.
rowData Schema
{ uid: "f308d85b-9bd6-449f-87b7-b09ea27fa23c",
stageId: "ST_Submitted",
stageTitle: "Submitted",
lastModified: Date obj,
lastModifiedBy: {
}
created: Date obj,
createdBy: {
},
F_SingleLine1: "hello world",
F_EmailAddress1: "test@example.com",
F_Number1: 56.89,
F_Currency1: 12.34,
F_CheckBox1: true,
F_RichText1: "this isrich
text",
F_DropDown1: {savedValue: "opt1", displayValue: "Option 1"},
F_SelectOne1: {savedValue: "opt1", displayValue: "Option 1"},
F_SelectMany1: [
{savedValue: "opt1", displayValue: "Option 1"},
{savedValue: "opt2", displayValue: "Option 2"}
],
F_Attachment1: {
uid: "abc123",
fileName: "MyFile.png",
viewUrl: "https://...",
downloadUrl: "https://..."
},
F_Name1 {
displayName: "Doug D'Antonio",
id: "CN=Doug D'Antonio/O=Acme",
email: "Doug D'Antonio/Acme",
type: "user
}};
Beispiel:
rowData.F_SingleLine1 liefert den Wert für das Feld
F_SingleLine1 des ausgewählten Datensatzes zurück
Demo

.
.
Sicherstellen dass immer ein Datensatz ausgewählt ist
Die angezeigten
Details unter dem
Data Grid sind
nicht valide
solange kein
Datensatz
ausgewählt ist.

.
.
‘selectFirstRow()’ stellt sicher, dass immer ein Datensatz ausgewählt ist
page.F_DataGrid1.selectFirstRow();
Diese Zeile JavaScript zum
‘onDataChange’ Event des
Data Grid hinzufügen.
Dieser Event wird
ausgeführt wenn:
• das Data Grid erstmalig
geladen wird
• sich die Filter ändern
• die Spalten neu sortiert
werden
• durch die Ergebnisse
geblättert wird

.
.
‘selectFirstRow()’ stellt sicher, dass immer ein Datensatz ausgewählt ist
page.F_DataGrid1.selectFirstRow();
Diese Zeile JavaScript zum
‘onDataChange’ Event des
Data Grid hinzufügen.
Dieser Event wird
ausgeführt wenn:
• das Data Grid erstmalig
geladen wird
• sich die Filter ändern
• die Spalten neu sortiert
werden
• durch die Ergebnisse
geblättert wird
Demo

.
.
Für das ausgewählte Seminar registrieren
Das Registrierungsformular muss mit
den Daten des ausgewählten
Seminars befüllt werden.

.
.
Zwei mögliche Methoden
Auswahl Registrierung
Auswahl
und
Registrierung
1 Formular 2 Formulare (oder 1 App Page und 1 Formular)
Methode B
Verwendung eines separaten Registrierungsformulars
und eines Auswahlformulars oder App Page
Methode A
Die Registrierung ist Teil des Auswahlformulars
Pro’s:
• Einfacher zu erstellen
Con’s:
• Potentiell komplexere Datenstruktur
• Verwendung einer App Page nicht möglich
Pro’s:
• Vereinfacht das Formular
• Saubere Trennung zwischen Auswahl und
Registrierung
Con’s:
• Ein wenig komplexer zu erstellen

.
.
Methode A
Auswahl- und Registrierungsformular
Über ‘rowData’ werden die
notwendigen Felder in das
Formular übertragen
onRowSelect
BO.F_Location.setValue(rowData.F_Location1.savedValue);
BO.F_Course.setValue(rowData.F_Title1);
BO.F_Date.setValue(rowData.F_Date1);
BO.F_Cost.setValue(rowData.F_Cost1);
Auswahlseite Registrierungsseite
DACHNUG-DataGridTricksandTips4A.dleap
onNew
BO.F_Name.setValue
(app.getCurrentUserDisplayName());

.
.
Methode A
Auswahl- und Registrierungsformular
Über ‘rowData’ werden die
notwendigen Felder in das
Formular übertragen
onRowSelect
BO.F_Location.setValue(rowData.F_Location1.savedValue);
BO.F_Course.setValue(rowData.F_Title1);
BO.F_Date.setValue(rowData.F_Date1);
BO.F_Cost.setValue(rowData.F_Cost1);
onNew
BO.F_Name.setValue
(app.getCurrentUserDisplayName());
Demo

.
.
Methode A
Auswahl- und Registrierungsformular Alternative Darstellung:
Anzeige der Feldwerte auf
der Registrierungsseite als
Text

.
.
Methode A
Auswahl- und Registrierungsformular Alternative Darstellung:
Anzeige der Feldwerte auf
der Registrierungsseite als
Text
Demo

.
.
Auswahl Registrierung
Die UID des ausgewählten
Seminars wird als Parameter
übergeben
UID
Basierend auf der UID
werden die notwendigen
Felder mit einen Service
übertragen
register
Formular oder App Page Formular
Methode B
Verwendung eines separaten Registrierungsformulars und eines Auswahlformulars / App Page

.
.
Auswahl
onRowSelect
app.getSharedData().uid = (rowData.uid);
onClick
var uid = app.getSharedData().uid;
var url = app.getFormLaunchURL("F_Request")+'&recordNum='+uid;
page.F_RegisterLink.setLinkValue(url);
register
Der Link mit Übergabe der UID als URL Parameter wird konstruiert
UID wird als globale Variable gesetzt
Die Link Navigation wird
auf das Registrierungs-
formular gesetzt
DACHNUG-DataGridTricksandTips4B.dleap
Die Warnung bei
Verlassen der Seite
wird unterdrückt
Methode B

.
.
Auswahl
onRowSelect
app.getSharedData().uid = (rowData.uid);
onClick
var uid = app.getSharedData().uid;
var url = app.getFormLaunchURL("F_Request")+'&recordNum='+uid;
page.F_RegisterLink.setLinkValue(url);
register
Der Link mit Übergabe der UID als URL Parameter wird konstruiert
UID wird als globale Variable gesetzt
Die Link Navigation wird
auf das Registrierungs-
formular gesetzt
Die Warnung bei
Verlassen der Seite
wird unterdrückt
Methode B
Demo

.
.
onNew (form event)
BO.F_uid.setValue(app.getUrlParameter('recordNum'));
Registrierung
onNew (form event)
Service ruft Feldwerte für UID ab
1. UID Parameter im Formular speichern 2. Informationen in das Formular übernehmen,
basierend auf UID
Input
Output
Muss in dieser
Reihenfolge erfolgen
Methode B

.
.
UID Parameter im Formular
speichern
Aufruf des Service zur
Übernahme der Feldwerte,
basierend auf der UID.
Übertragen des Namens
des eingeloggten Benutzers
‘onNew’ Event wird ausgeführt wenn eine neue Instanz des Formulars erstellt wird
Methode B
Ausführung über JavaScript,
um die Reihenfolge zu
kontrollieren.

.
.
UID Parameter im Formular
speichern
Aufruf des Service zur
Übernahme der Feldwerte,
basierend auf der UID.
Übertragen des Namens
des eingeloggten Benutzers
‘onNew’ Event wird ausgeführt wenn eine neue Instanz des Formulars erstellt wird
Methode B
Ausführung über JavaScript,
um die Reihenfolge zu
kontrollieren.
Demo

.
.
Verschachtelte Dropdown Felder
1. Über einen Search Service die Werte für das
erste Dropdown Feld abrufen
2. Über einen weiteren Search Service die
Werte für das zweite Dropdown Feld abrufen,
basierend auf der Auswahl des ersten
Dropdowns.
Der Aufruf des Service erfolgt über den
‘onChange’ Event des ersten Dropdowns
Setzt eine Datenquelle mit Feldern voraus,
die den Dropdowns entsprechen
DACHNUG-CascadingDropdown.dleap

.
.
Löschen des Wertes für das zweite Dropdown
wenn das erste Dropdown sich ändert.
JavaScript wird immer vor dem Service Aufruf
ausgeführt.
Wie man das Problem der übrig gebliebenen Option lösen kann

.
.
Löschen des Wertes für das zweite Dropdown
wenn das erste Dropdown sich ändert.
JavaScript wird immer vor dem Service Aufruf
ausgeführt.
Wie man das Problem der übrig gebliebenen Option lösen kann
Demo

.
.
Service: Zuordnung von Daten aus einem Array zu einem einzelnen Feld
Bei der Zuordnung von Quell- und Zieldaten in einer Leap Servicedefinition müssen diese das gleiche
Format haben.
Wie bekomme ich das Textergebnis aus einer Tabelle (Array) in ein Textfeld?
DACHNUG-LeapChatGPT.dleap

.
.
var tbl = BO.F_Table1;
BO.F_Answer.setValue(tbl.get(0).F_AnswerTable.getValue());
1. Eine Tabelle zum Formular hinzufügen
2. Das Ergebnis des Service der Tabelle zuordnen
3. Über den Table ‘onChange’ Event per JavaScript den Wert
aus der Tabelle in ein Textfeld schreiben
4. Die Tabelle verstecken

.
.
var tbl = BO.F_Table1;
BO.F_Answer.setValue(tbl.get(0).F_AnswerTable.getValue());
1. Eine Tabelle zum Formular hinzufügen
2. Das Ergebnis des Service der Tabelle zuordnen
3. Über den Table ‘onChange’ Event per JavaScript den Wert
aus der Tabelle in ein Textfeld schreiben
4. Die Tabelle verstecken
Demo

.
.
Hidden Fields
Häufig sind versteckte Felder in einem Formular notwendig. Eine effektive Methode über eine Checkbox
1. Alle Hidden Fields in einer Section unterbringen
2. Eine Checkbox ‘Show Hidden Fields’ in der
Section hinzufügen
3. Eine Regel definieren, die die Section nur
anzeigt, wenn die Checkbox ausgewählt ist.
Vorteil:
• Für die Fehlersuche während des Designs
können versteckte Felder angezeigt werden.
• Nach der Fertigstellung muss nur die
Checkbox deaktiviert werden.

.
.
Hidden Fields
Häufig sind versteckte Felder in einem Formular notwendig. Eine effektive Methode über eine Checkbox
1. Alle Hidden Fields in einer Section unterbringen
2. Eine Checkbox ‘Show Hidden Fields’ in der
Section hinzufügen
3. Eine Regel definieren, die die Section nur
anzeigt, wenn die Checkbox ausgewählt ist.
Vorteil:
• Für die Fehlersuche während des Designs
können versteckte Felder angezeigt werden.
• Nach der Fertigstellung muss nur die
Checkbox deaktiviert werden.
Demo

DACHNUG50 LeapTippsAndTricks.pdf

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Ähnlich wie DACHNUG50 LeapTippsAndTricks.pdf

Ähnlich wie DACHNUG50 LeapTippsAndTricks.pdf (20)

Mehr von DNUG e.V.

Mehr von DNUG e.V. (20)

DACHNUG50 LeapTippsAndTricks.pdf