演習 – 自転車修理店のキャンバスアプリを構築する

10 分

この演習では、学習した内容を活用して、「演習 - Figma を使用して自転車修理店のアプリを設計する」ユニットで構築したデザインをベースにキャンバスアプリを作成するプロセスを完了します。

シナリオ

あなたは、Figma デザインをベースにしたキャンバスアプリを同僚のために作成したいと考えています。このアプリを使用すると、同僚は専用のタブレット PC を使用して VIP セールに潜在的な参加者を登録したり、参加者の希望を収集したりできます。

参加者の情報を Microsoft Excel スプレットシートで取り込んで、マーケティングチームがイベントの前後に顧客に連絡できるようにします。

準備手順

「Figma デザインをベースにキャンバスアプリを作成する」ユニットの手順に従って、構築した自転車修理店のデザインを使用します。手順 11 で、アプリに 自転車 VIP イベント という名前を付けることができます。

Bicycle VIP registration.xlsx Excel スプレッドシートファイルをダウンロードします。このファイルは、アプリのデータソースとなります。アクセス権のある Microsoft OneDrive for Business の保存先にこれを保存します。

演習

次の手順に従って、Bicycle VIP registration スプレッドシートに登録事項を保存するキャンバスアプリを作成します。

データソースに接続し、Power Apps キャンバススタジオの左ウィンドウのデータ セクションでデータの追加を選択します。
データソースとして Excel Online (Business) を選択します。
接続を選択します。
準備手順セクションで保存した Bicycle VIP registration スプレットシートの保存先に移動し、スプレットシートを選択します。
テーブルとして Registrations を選択し、接続を選択します。
Registrations の識別子として Excel テーブルにある一意の列を使用する オプションを選択し、_PowerAppsId_ を選択した後、接続を選択します。
msft_Form コントロールをデータソースに接続するには、DataSource プロパティを Registrations に更新します。
以降の手順でコントロールを識別できるように、データカードと入力コンポーネントの名前を変更します。

結果は次の図のようになります。
データカードを Excel テーブルの列に接続するには、各データカードコントロールの DataField プロパティに列名 (引用符を含む) を指定します。
- PreferencesDC - "Preference"
- PhoneDC - "Phone"
- CustomerEmailDC - "Email"
- CustomerNameDC - "Name"
Excel テーブルにアプリの値を挿入するには、各データカードコントロールの Update プロパティに入力コントロールのテキストプロパティを指定します。
- PreferencesDC - PreferencesInput.SelectedText.Value
- PhoneDC - PhoneInput.Text
- CustomerEmailDC - CustomerEmailInput.Text
- CustomerNameDC - CustomerNameInput.Text
値を Excel スプレッドシートに保存し、キャンバスアプリフォームをデータ入力モードにリセットするには、送信ボタンの OnSelect プロパティを SubmitForm(msft_Form); NewForm(msft_Form); に設定します。