Build a mobile-friendly app

Vue d'ensemble (Overview)

Vous pouvez utiliser UiPath^® Apps pour créer des applications compatibles avec les appareils mobiles. La même application peut être utilisée sur des appareils avec des tailles d'écran différentes, tels que des téléphone portables, des tablettes ou des ordinateurs, sans aucun problème.

Pour le démontrer, suivez les étapes de la section Tutoriel.

Vous pouvez également trouver un exemple de fichier d’application avec d’autres exemples à la fin de cette page.

Note: The Custom List control does not currently support mobile or small screens.

Tutoriel

Utilisez cet exemple pour créer une application qui contient trois champs et un bouton d'envoi. Cette application se comporte différemment selon la taille de l'écran.

1. Créer une nouvelle application

2. Ajoutez une commande Bouton (Button) à votre application.

   1. Définissez la mise en page du conteneur sur Horizontal (Horizontal).

   2. Vérifiez la propriété Autoriser l' encapsulage (Allow wrapping ) du conteneur.

   3. Configurez la taille Largeur (Width) du conteneur sur 100 %.
      
      

      

      
      

3. Ajoutez un contrôle Textbox dans le conteneur.

   1. Ajoutez Name dans la propriété Libellé (Label).

   2. Remplacez Label Placement par Haut ( Top ) dans l'onglet Style (Style).

4. Ajoutez un deuxième contrôle Textbox après le premier.

   1. Ajoutez Age dans la propriété Libellé (Label).

   2. Remplacez Label Placement par Haut ( Top ) dans l'onglet Style (Style).

5. Ajoutez un troisième contrôle Textbox après le second.

   1. Ajoutez Address dans la propriété Libellé (Label).

   2. Remplacez Label Placement par Haut ( Top ) dans l'onglet Style (Style).

6. Ajoutez un deuxième conteneur sous le premier avec les mêmes propriétés de style .

7. Ajoutez un contrôle Button dans le deuxième conteneur.

   
   

   

   
   

Résultat et test

Vous pouvez maintenant prévisualiser et tester votre application.

Pour tester votre application à l'aide du navigateur Google Chrome , procédez comme suit :

1. Cliquez avec le bouton droit n'importe où sur la page.
2. Sélectionnez Inspecter (Inspect) dans le menu.
3. Dans le menu de droite, cliquez sur Activer/Désactiver la barre d'outils de l'appareil.

4. Choisissez les dimensions souhaitées dans la liste déroulante en haut de la page pour tester votre application.

   
   

   

   
   
   Remarque : dans le cas de la commande Mise en page du conteneur (Conteneur), les conteneurs à l'intérieur sont automatiquement adaptés aux appareils mobiles. Si les contrôles à l'intérieur des conteneurs doivent également être réactifs, utilisez la propriété Autoriser l'emballage (Allow wrapping).

Pour plus d’exemples, vous pouvez télécharger l’exemple de fichier d’application ci-dessous.

Téléchargez l'exemple