iOS用4D。カスタム入力コントロール

これまで、カスタムフォーマッターでは、true/falseを画像に置き換えたり、1,2をテキストラベルに置き換えたりと、フィールドの内容にテキストや画像を合わせることができました。4D v19 R3では、あらかじめ定義されたテキストで選択リストを作成するなど、アクションフォームから利用できるアクション入力コントロールの作成が可能です。さらに、このリストは、雇用者のリストなどのデータソースを使用して、動的に入力することができます。それでは、詳細をご覧ください。

カスタムフォーマッタリマインダー

カスタムフォーマッタを使用すると、単純な JSON ファイルを使用して列挙を処理し、データベースの値に応じて対応する値を表示することができます。

以下は、manifest.json ファイルの例です。

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

このシンプルな JSON ファイルを使用すると、iOS アプリで表示するために整数を文字列に変換することができます。しかし、画像、整数、絵文字などを表示するために、このような種類のフォーマッタを作成し使用することもできます。

それらを特定の“formatters” フォルダにドロップすると、たとえばテキストフィールドに割り当てて、そのような結果を得ることができます。

画面下部のステータスフィールドの値「To Do」「 In Progress」「Done」は、データベースの整数値に従って正しく表示されます。

これは、モバイルアプリでフォーマットされた値を表示する簡単な方法です。さらに、それらの選択肢リストが自動的にアクションフォームで使用され、リスト内の値の1つを選択してパラメーターとして使用できるようになるという特典もあります。ただし、JSONファイルをベースにしているため、リストが静的であることが制限の1つです。

アクション入力コントロール

さて、入力コントロールについて説明しましょうこの新機能により、作成できるようになります。

• 従来どおり、manifest.json ファイルを使用した選択リストと
• データソースに基づくリスト。

これにより、モバイルアプリから常に最新のリストに直接アクセスできるようになります。

これらのアクション入力コントロールは、簡単に作成でき、非常に使いやすいものです。モバイルプロジェクトでこれらを使用するには、フォーマッタやカスタムリスト、カスタム詳細フォームと同じように、データベースにある特別な “inputControls” フォルダ (base/Resources/mobile/inputControl) にそれらを含める必要があります。

これらのアクション入力コントロールは、アクションセクションのパラメータプロパティで、アクションパラメータの種類と、フォーマットを使ってリストを表示する方法でフィルタリングして、利用・選択できるようになります。

新しいコンセプトなので、フォーマットに焦点を当てましょう。基本的に、モバイルアプリ側でのリストの表示方法を定義することができます。

• プッシュ：リストを表示するために右から来る新しいビューを開きます。
• Segmented：リストをバー形式で表示し、選択できるようにします。
• Popover: 下から新しいビューを開き、リストを表示します。
• シート：リストを下から表示するシートを開く
• ピッカー：他の形式とは異なり、この形式では、クリックして値を選択する代わりに、目的の値をスクロールして選択することができます

では、いくつかの例を見てみましょう!

静的選択リスト

ここでは、静的な選択リストとして使用できる manifest.json ファイルの例を示します。

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

カスタム データ フォーマッタに非常によく似ていますね？見ての通り、ここでは「シート」表示形式のアクション入力コントロールに対して、単純な静的リストが定義されています。

データソースからの動的な選択リスト

そして、これはContact データクラスと LastName 属性に基づいた例です。

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

更新された連絡先リストは、モバイルアプリのアクションフォームのリストとしてアクセスすることができます。

後ほど説明しますが、検索バーの表示やリストのソート方法など、manifest.json ファイルでスマートなオプションを定義できることが素晴らしい点です!

ユーザーのアプリでの表示方法

この例では、プッシュ、ポップオーバー、ピッカーは、データソースに基づくリストを表示しています。push “の表示形式には、”search “の値で検索を、”order “の値でソートを、”entityFormat “の値でデータの表示形式を指定することが可能です。例えば、ピッカー入力コントロールの場合。

• descending” オーダーでは、リストを降順にソートすることができます。
• FirstName% %LastName% – %Job%” entityFormatでは、FirstName, LastName, Job フィールドが利用可能なので、”Sophie Adams – UX Designer” を表示することができます。

そして何より、これらのリストはオフラインの状態でも利用可能です。

プロジェクトエディタでの表示

最初のステップとして、このブログ記事やドキュメントの例に従って、お気に入りのコード・エディタからアクション入力コントロールを作成する必要があります。そして、それらを “inputControls” フォルダ（私のベース/リソース/モバイル/inputControl）に追加する必要があります。

プロジェクト・エディタに戻ると、入力コントロールが利用可能になり、パラメータのタイプと、JSONファイルで事前に定義したフォーマットでフィルタリングされます。

この例からわかるように、静的な選択リストやデータソースに基づくリストを簡単に作成し、モバイルユーザーに最高のエクスペリエンスを保証することができます。

4Dフォーラムでご意見をお聞かせください。詳細はドキュメントをご覧ください。