概要

UiPath Apps を使用して、モバイルフレンドリーなアプリを構築できます。携帯電話、タブレット、コンピューターなど、画面サイズが異なるデバイスでも問題なく同じアプリを使用できます。
To demonstrate this, follow the steps from the Tutorial section.
You can also find a sample app file with more examples at the end of this page.

チュートリアル

この例を使用して、3 つのフィールドと送信ボタンを含むアプリを構築します。このアプリの動作は、画面サイズによって異なります。

1. 新しいアプリを作成します。
2. [コンテナー] コントロールをアプリに追加します。
   2.1 コンテナーの [レイアウト] を [横方向] に変更します。
   2.2 コンテナーの [折り返しを許可] プロパティをオンにします。
   2.3 コンテナーの [幅] サイズを 100 % に設定します。

3. コンテナーに [テキストボックス] コントロールを追加します。
   3.1 [ラベル] プロパティに Name を追加します。
   3.2 [スタイル] タブで、[ラベル配置] を [上] に変更します。
4. 1 つ目の [テキストボックス] コントロールの後に、2 つ目の [テキストボックス] コントロールを追加します。
   4.1 [ラベル] プロパティに Age を追加します。
   4.2 [スタイル] タブで、[ラベル配置] を [上] に変更します。
5. 2 つ目の [テキストボックス] コントロールの後に、3 つ目の [テキストボックス] コントロールを追加します。
   4.1 [ラベル] プロパティに Address を追加します。
   4.2 [スタイル] タブで、[ラベル配置] を [上] に変更します。
6. 1 つ目のコンテナーの下に同じ [スタイル] プロパティを持つ 2 つ目のコンテナーを追加します。
7. 2 つ目のコンテナーに [ボタン] コントロールを追加します。

結果とテスト

アプリをプレビューおよびテストできるようになりました。

Google Chrome ブラウザーを使用してアプリをテストするには、以下の手順に従います。

1. ページの任意の場所を右クリックします。
2. メニューから [検証] を選択します。
3. 右側にあるメニューから、[デバイスのツールバーを切り替え] をクリックします。
4. ページ上部のドロップダウン リストから目的のサイズを選択して、アプリをテストします。

📘

ヒント:

In the case of the Container layout control, the containers inside are automatically mobile-friendly. If the controls inside the containers need to be reactive as well, use the Allow wrapping property.

For more examples, you can download the sample app file below.