クラッシュコース101
10 モジュール
5 週

ファイルピッカー

クリックでコピー

WebアプリケーションにおけるFilepickerコンポーネント


新しいモジュールでは、引き続きビジネスプロセスの可能性を追求します。単純な数学の演算よりも複雑な状況を把握していきます。比較、分岐、サイクルの操作について学びます。また、ファイルの扱い方、内容の解析の仕方も考えていきます。

そのために、自分たちのソーシャルネットワークを開発することが課題だと想像してください。もちろん、一度に全部ではなく、ユーザープロファイルの設計で十分です。

全体設計

まず、全体のデザインから始めましょう。ページをデザインし、必要な要素を追加していく必要があります。同じような問題は、6番目のモジュールの作業ですでに解決しているので、すべてのステップを再度説明することはありません。今回は、実践の場で知識を定着させる機会としましょう。

ユーザーが自分のプロフィールにアバターを追加し、ログインを指定し、経歴を記入することができると想像してください。しかし、ひとつだけ条件があります。それらは直接入力することはできません(すべての入力フィールドには Disabled = trueパラメータがあります)、それらはファイルから読み込まれなければなりません。

ファイルピッカー

ファイルから読み込む必要があります。 Filepickerブロックは、AppMaster でファイルを操作するために使用できます。ほとんどの状況で素晴らしいもので、さまざまな設定を指定し、外観を選択することができます。しかし、それを使うこと自体が、あなたが実装しようと思っているデザインに適しているとは限りません。そこで、この例では、別の方法を使用して、Filepicker 、さらに明示的なボタンなしでファイルをアップロードする機能を作成することにします。

この機能を実現するために、メインコンテナで Container onClickトリガーを使用します。コンテナやその要素をクリックすると、このビジネスプロセスが開始されます。そして、ファイルを選択することから始めなければなりません。これを行うには Select Filesブロックを使用します。このブロックの特殊性は、その実行にユーザーの参加を必要とすることです。ユーザがファイルを選択した後にのみ、処理は進行します。パラメータ Max files = 99を設定することで、複数のファイルを選択することができます。

ユーザーが2つのファイルを同時に送信することを計画しています。ひとつは、アバターとして設定する画像。もうひとつは、残りのデータを含むExcel (xlsx) ファイルです。

Was this article helpful?
まだ答えをお探しですか?