4D für iOS: Benutzerdefinierte Eingabesteuerungen

Bisher konnten Sie mit benutzerdefinierten Formatierern Text oder Bilder an den Inhalt eines Feldes anpassen, z. B. Wahr/Falsch durch ein Bild oder 1, 2 durch Textbeschriftungen ersetzen. Mit 4D v19 R3 können Sie nun Eingabefelder für Aktionen erstellen, die über Aktionsformulare verfügbar sind, z. B. eine Auswahlliste mit vordefiniertem Text. Und was noch besser ist, diese Liste kann dynamisch mit einer Datenquelle, z. B. einer Liste von Arbeitgebern, gefüllt werden. Lassen Sie uns in die Details gehen!

ERINNERUNG AN BENUTZERDEFINIERTE FORMATIERER

Benutzerdefinierte Formatierer ermöglichen es Ihnen, mit Aufzählungen umzugehen, indem Sie eine einfache JSON-Datei verwenden, um die entsprechenden Werte in Abhängigkeit von Ihren Datenbankwerten anzuzeigen.

Hier ist ein Beispiel für die Datei manifest.json :

{
    "name": "integerToString",
    "type": [
        "integer"
    ],
    "binding": "localizedText",
    "choiceList": {
        "0":"To Do",
        "1":"In Progress",
        "2":"Done"
     }
}

Mit dieser einfachen JSON-Datei können Sie ganze Zahlen in Zeichenketten umwandeln, die in Ihrer iOS-App angezeigt werden. Sie können diese Art von Formatierern aber auch erstellen und verwenden, um Bilder, Ganzzahlen, Emojis usw. anzuzeigen.

Wenn Sie sie in einem bestimmten Ordner „Formatierer“ ablegen, können Sie sie beispielsweise einem Textfeld zuweisen, um ein solches Ergebnis zu erhalten:

Die Statusfeldwerte „Zu erledigen“, „In Bearbeitung“ und „Erledigt“ am unteren Bildschirmrand werden entsprechend dem Integer-Wert in Ihrer Datenbank korrekt angezeigt.

Dies ist eine einfache Möglichkeit, formatierte Werte in Ihren mobilen Anwendungen anzuzeigen. Der Vorteil ist, dass diese Auswahllisten automatisch in Ihren Aktionsformularen verwendet werden, so dass Sie einen der Werte in der Liste auswählen können, um ihn als Parameter zu verwenden. Eine der Einschränkungen ist jedoch, dass diese Listen statisch sind, da sie auf einer JSON-Datei basieren.

AKTIONSEINGABE-STEUERELEMENTE

Kommen wir nun zu den Eingabekontrollen! Diese neue Funktion ermöglicht es Ihnen, zu erstellen:

• Auswahllisten mit einer manifest.json-Datei wie bisher und
• Listen, die auf Datenquellen basieren.

Dies garantiert Ihnen, dass Sie immer aktuelle Listen haben, auf die Sie direkt von Ihrer mobilen App aus zugreifen können!

Diese Action Input Controls sind einfach zu erstellen und sehr leicht zu benutzen. Um sie in Ihren mobilen Projekten zu verwenden, müssen Sie sie, genau wie Formatierer oder benutzerdefinierte Listen- und Detailformulare, in Ihre Datenbank in einem speziellen „inputControls“-Ordner aufnehmen (my base/Resources/mobile/inputControl).

Diese Aktions-Eingabesteuerungen sind dann im Abschnitt „Aktion“ in den Parametereigenschaften verfügbar und auswählbar, gefiltert nach dem Typ Ihres Aktionsparameters und der Art und Weise, wie Sie Ihre Listen mithilfe von Formaten anzeigen möchten.

Konzentrieren wir uns auf die Formate, da dies ein recht neues Konzept ist. Mit Hilfe von Formaten können Sie festlegen, wie Ihre Listen auf der Seite der mobilen App angezeigt werden sollen:

• Push: öffnet eine neue Ansicht, die von rechts kommt, um die Liste anzuzeigen
• Segmentiert: zeigt Ihre Liste in Form von Elementen in einer Leiste an, die Sie auswählen können
• Popover: öffnet eine neue Ansicht, die von unten kommt, um die Liste anzuzeigen
• Blatt: Öffnet ein Blatt von unten, das die Liste von unten anzeigt
• Picker: Im Gegensatz zu den anderen Formaten können Sie bei diesem Format scrollen, um den gewünschten Wert auszuwählen, anstatt einen Wert durch Anklicken auszuwählen.

Schauen wir uns nun einige Beispiele an!

STATISCHE AUSWAHLLISTEN

Hier ist ein Beispiel für eine manifest.json-Datei, die als statische Auswahlliste verwendet werden kann:

{
    "name": "choiceListSheet",
    "type": [
        "text"
     ],
    "format": "sheet",
    "choiceList": {
        "1":"Vincent",
        "2":"David",
        "3":"Anass",
        "4":"Eric",
        "5":"Quentin",
        "6":"Houssam"
     }
}

Sehr ähnlich wie bei einem Zolldatenformatierer, richtig? Wie Sie sehen können, wird hier eine einfache statische Liste für dieses Action-Input-Control mit einem „Sheet“-Anzeigeformat definiert.

DYNAMISCHE AUSWAHLLISTEN AUS DATENQUELLEN

Und hier ist ein Beispiel, das auf einer Kontakt-Datenklasse und einem LastName-Attribut basiert.

{
    "name": "datasourcePush"
    "type": [
        "text"
    ],
    "format":"push",
    "choiceList": {
        "dataSource": {
            "dataClass": "Contact",
            "field": "LastName",
            "entityFormat": "%FirstName% %LastName% - %Job%",
            "search": "LastName",
            "order": "descending" 
        }
    }
}

Die aktualisierte Kontaktliste wird als Liste im Aktionsformular Ihrer mobilen App zugänglich sein, basierend auf der Datenklasse Kontakt mit einem „Push“-Anzeigeformat.

Wir werden das später sehen, aber das Tolle ist, dass Sie in Ihrer manifest.json-Datei intelligente Optionen definieren können, wie z. B. die Anzeige einer Suchleiste oder wie Sie Ihre Listen sortieren möchten!

WIE ES IN DER APP DES BENUTZERS AUSSIEHT

In diesem Beispiel zeigen der Push, das Popover und der Picker Listen an, die auf einer Datenquelle basieren. Sie können eine Suche hinzufügen, die den „search“-Wert für das „push“-Anzeigeformat definiert, eine Sortieroption, die den „order“-Wert definiert, sowie das Anzeigeformat Ihrer Daten (durch Definition des „entityFormat“). Zum Beispiel für das Picker-Eingabefeld:

• die „absteigende“ Reihenfolge ermöglicht es Ihnen, Ihre Liste in absteigender Reihenfolge zu sortieren
• das EntityFormat „%Vorname% %Nachname% – %Job%“ ermöglicht die Anzeige von „Sophie Adams – UX Designer“, da die Felder Vorname, Nachname und Job verfügbar sind.

Und das Beste ist, dass diese Listen auch dann verfügbar sind, wenn Sie offline sind!

WIE ES IM PROJEKTEDITOR AUSSEHT

Als ersten Schritt müssen Sie Ihre Action-Input-Controls mit Ihrem bevorzugten Code-Editor erstellen, indem Sie den Beispielen aus diesem Blogbeitrag oder der Dokumentation folgen und sie dann in den Ordner „inputControls“ (my base/Resources/mobile/inputControl) einfügen.

Zurück zum Projekt-Editor, werden Ihre Eingabe-Steuerelemente verfügbar sein und nach dem Typ Ihres Parameters und dem zuvor definierten Format in Ihrer JSON-Datei gefiltert.

Wie Sie anhand dieses Beispiels sehen können, ist es ganz einfach, statische Auswahllisten und auf Datenquellen basierende Listen zu erstellen, um die beste Erfahrung für Ihre mobilen Benutzer zu garantieren!

Zögern Sie nicht, uns im 4D Forum Feedback zu geben, und schauen Sie sich die Dokumentation für weitere Details an!