アプリビルダーのグリッド列テンプレートを使い始める

姓と名、住所の詳細 (番地、市区町村、郵便番号など) に異なるフィールドを持つデータ ソースがあるとします。最新のApp Builder ^TM  Ultimate 23.1 リリースでは、これらすべてを 1 つのセル表示値に結合し、表示される列を減らすことができます。また、列テンプレートに関するこのApp Builderハウツーチュートリアルでは、同様のものを処理し、基本的なグリッドからテンプレート付きのグリッド(表示テンプレート)に移行する方法を示します。

始めましょう。

基本グリッドとテンプレート付きグリッドの概要

"グリッド" とは、通常、コンテンツまたは UI 要素を 2 次元のグリッド状のパターンで整理するレイアウト構造を指します。アプリのレイアウトは、アプリの目的に応じて、異なるデータを含む行と列に分割されます。このチュートリアルでは、いくつかの既定のテンプレートが付属する基本的なグリッドから始めます。また、フィルタリング、並べ替え、ピン留めなどの機能も実装されており、グリッド上で非常に簡単に有効化して使用できます。

より高度でカスタマイズされたグリッドに変えるために、以下も使用します。

• 表示用の 1 列のテンプレート。
• そしてもう一つは、特定のセルを編集しているときにどのように見えるかを処理するものです。

列テンプレートとは

グリッド列テンプレートは、特定の列内にカスタマイズされたレイアウトとコンテンツを作成するために使用されます。アプリを構築する場合、それが Web アプリケーションであろうと、Web ベースの UI を備えたモバイル アプリであろうと、グリッド列テンプレートを使用すると、いくつかの利点があります。

• ​応答性を実現し、さまざまな画面サイズでの列の動作を定義します。
• 一貫性があり、メンテナンスが容易なグリッド構造を確立し、一貫性のある視覚体験を実現します。
• レイアウト内のスペースをより効率的に使用し、任意の画面解像度に合わせて列幅を調整できます。
• ​複雑な UI 要素の配置やさまざまな項目の配置に関して、アプリの外観を柔軟かつ正確に制御できます。
• ​グリッド領域にわかりやすい名前を設定することで、コードの可読性と保守性を向上させます。
• ​モジュール式レイアウトの作成を可能にすることで、再利用性を促進します。
• ​複数列のレイアウトをサポートしているため、コンテンツの多い UI やダッシュボードに非常に役立ちます。

App Builderの新しい列テンプレート機能で他に何ができますか?

• URL データフィールドをカスタム画像コンポーネントに関連付けることができるようになりました。
• 評価コンポーネントを表示し、特定の数値に関する視覚的な手がかりを提供します。
• 特定の列に電話番号が含まれていることをより視覚的に示す方法を提供します。

アプリビルダーのグリッド列テンプレートを使い始める

グリッドへの画像の取り込み

最も手っ取り早い方法は、App Builder (Edit Time Experience In The Grid) でエディターに戻り、各グリッドのすべての子要素が列であり、グリッド列プロパティを表示するアバター URL を選択することです。別のオプションは、「表示形式」から「画像」を選択することで、姓と名のアバターを持つようにさらにカスタマイズできる画像に自動的に置き換えられます。

この場合、アバター、名、姓を表示しましょう。必要なのは「表示」だけなので、App Builder内で有効にする必要があります。左上隅にドロップコンテンツのヒントがあります。ツールボックスから Avatar コンポーネントをドラッグ&ドロップして、所定の位置に追加できます。

次に、セル表示テンプレートの編集を続行し、2つのテキスト要素を追加して、特定のサイズを設定します。次に、最初のテキスト要素を「名」に、2番目のテキスト要素を「姓」にバインドし、アバターの場合は、アイコンから選択して画像を選択すると、バインドオプションが表示されます。バインド オプションでは、この特定のデータ ソースには、プラグインするだけの必要なアバター URL があります。

レイアウトの制御

既定では、テンプレートはレイアウトの方向を提供しません。したがって、レイアウトを制御するには、内部に独自のレイアウトを追加してから、コンポーネントのドロップを開始するか、事後に行う必要があります。

次に、デフォルトのFlexコンテナを取得し、配置、ギャッププロパティ、余白などを指定できます。

バインディングとチップコンポーネント

もう一つ手っ取り早く行うのは、電話番号の中にチップコンポーネントを入れることです。先に進み、デザイナーを選択し、アドレス電話をクリックして名前を付け、列内のセル表示テンプレートを変更します。空白になります。次に、チップコンポーネントをドロップし、アイテムを選択して電話機能を追加します。チップの実際の内容(デフォルトのバインディングで表示されます)は、さらに「電話番号」に指定できます。

セレクトボックスを表示するようにタイトル領域を変更する

プロセスはほとんど同じです。タイトルを選択し、セルの上部に表示される表示と編集を切り替えます。編集するときは、そこにクリーンなセレクトボックスをドロップします。その後、オプションを選択できます。最後に、グリッドに表示テンプレートと編集テンプレートがあり、きれいでクリーンなセレクトボックスが完成します。

これで準備は完了です。「プレビュー」をクリックして、作成した内容を確認します。

まとめ…

この簡単なハウツー App Builderチュートリアルでは、表示テンプレートを使用してカスタムレイアウトを構築する方法と、テンプレートを編集して別のコンポーネントを作成する方法を示しました。これにより、すべてのグリッド用にカスタマイズされたレイアウトを作成し、同じパフォーマンスでグリッドを体験できますが、テンプレートの利点も活用できます。

また、すべての手順を示すウェビナーもご覧いただけます。