App Builder グリッドカラムテンプレートの使い始め方

最新の App BuilderTM Ultimate 23.1 リリースでは、異なるフィールドに分かれた名と姓、およびストリート、市区町村、郵便番号などの住所の詳細を、すべてセルディスプレイの値に組み合わせることで、表示されるカラムを減らすことができます。このApp Builder チュートリアルでは、カラムテンプレートについて説明し、同様のことを処理する方法と、基本的なグリッドからテンプレート付きのグリッド（ディスプレイテンプレート）にはどのようにするかを説明します。

App Builder を試す App Builder を試す App Builder を試す

デモを依頼する

始めましょう。

基本的なグリッドとテンプレート付きのグリッドの違い

「グリッド」とは、通常、コンテンツまたは UI 要素を 2 次元のグリッドのようなパターンで構成するレイアウト構造を指します。アプリのレイアウトを行と列に分割し、アプリの目的に応じて異なるデータを含みます。このチュートリアルでは、デフォルトテンプレートが付属する基本的なグリッドから始めています。また、フィルタリング、ソート、ピン留めなどの機能も実装しており、これらはグリッドの上で有効にして使用するのが非常に簡単です。

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

• ディスプレイ用の 1 つのカラムテンプレート。
• そして、特定のセルを編集するときにどのように見えるかを処理するもう 1 つのテンプレート。

カラムテンプレートとは何ですか？

グリッドカラムテンプレートは、特定のカラム内にカスタマイズされたレイアウトとコンテンツを作成するために使用されます。Web アプリケーションであれ Web ベースの UI を備えたモバイルアプリであれ、アプリを構築する際に グリッドカラムテンプレートを使用すると、以下のような利点が得られます。

• 異なるスクリーンサイズでカラムの レスポンシブ性と動作を定義 することができます。
• より 一貫性のある、メンテナンスしやすいグリッド構造 を一貫性のあるビジュアルエクスペリエンスで確立します。
• レイアウト内の スペースをより効率的に使用 し、スクリーンの解像度に合わせてカラム幅を調整できます。
• 複雑な UI 要素のアレンジと異なるアイテムの配置 に関して、アプリのビジュアルアピアランスに対する柔軟性と正確な制御を提供します。
• グリッド領域の明確な名前 を設定することで、コードの可読性とメンテナンス性を向上させます。
• モジュラーレイアウトを 作成 することで再利用性を向上させます。
• コンテンツが豊富な UI やダッシュボードに非常に便利な マルチカラムレイアウト をサポートします。

App Builder の新しいカラムテンプレート機能で何ができますか？

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

App Builder グリッドカラムテンプレートの使い始め方

グリッドに画像を取得する

最速の方法は、App Builder のエディタに戻ることです。グリッドのすべての子要素はカラムであり、アバター URL を選択して、グリッドカラムプロパティを表示します。別のオプションは、「ディスプレイフォーマット」から「image」を選択することで、自動的にイメージに置き換わり、アバター（名と姓付き）を使用してさらにカスタマイズできます。

この場合、アバター、名、および姓を表示しましょう。そのために必要なのは「ディスプレイ」だけなので、App Builder で有効にする必要があります。左上角にはドロップコンテンツのヒントがあります。ツールボックスからアバターコンポーネントをドラッグアンドドロップして、その場所に追加することができます。

その後、セルディスプレイテンプレートの編集を続け、2 つのテキスト要素を追加して、特定のサイズを設定します。最初のテキスト要素を「first name」にバインドし、2 番目のテキスト要素を「last name」にバインドし、アバターについては、アイコンから選択して、イメージを選択できます。これにより、バインディングオプションが公開されます。バインディングオプションでは、このデータソースに必要なアバター URL をプラグインします。

レイアウトを制御する

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

その後、デフォルトの Flex コンテナが表示されます。ここで、配置、ギャッププロパティ、マージンなどを指定できます。

バインディングと Chip コンポーネント

次にすぐに実行することは、Chip コンポーネントを電話番号の内側に配置することです。デザイナーを選択し、住所の電話をクリックして名前を付け、カラム内のセルディスプレイテンプレートを変更します。空白になります。その後、Chip コンポーネントをドロップし、アイテムを選択して電話機能を追加します。チップの実際のコンテンツ（デフォルトバインディングで表示されます）は、さらに「phone number」に指定できます。

タイトル領域を変更してセレクトボックスを表示する

プロセスはほぼ同じです。タイトルを選択し、セルの上に表示されるディスプレイと編集の間を切り替えます。編集時に、クリーンなセレクトボックスをそこにドロップします。その後、オプションを選択できます。最終的に、グリッドに ディスプレイテンプレートと編集テンプレートを備え、素晴らしく、クリーンなセレクトボックスを備えています。

これで完了です。プレビューをクリックして、作成したものを確認します。

まとめ

このクイックアップApp Builder チュートリアルでは、ディスプレイテンプレートを使用してカスタムレイアウトを構築する方法と、編集テンプレートを変更して別のコンポーネントを作成する方法について説明しました。これにより、すべてのグリッドのカスタマイズされたレイアウトを作成でき、同じパフォーマンスでグリッドを体験できるようになりました。今ではテンプレートの利点も得られます。

すべてのステップを説明するウェビナーも視聴できます。

ウェブ開発