Ajouter des fenêtres

Les fenêtres sont des volets qui peuvent s’ouvrir lors du chargement de l’application ou d’une page, ou lorsque l’utilisateur clique sur un widget. Elles permettent d’ajouter des écrans d’accueil, des messages de confirmation, des didacticiels et des alertes dans vos expériences Web.

Pour ajouter des fenêtres à une expérience Web, accédez au volet Page, cliquez sur l’onglet Window (Fenêtre), cliquez sur le bouton Add window (Ajouter une fenêtre) et sélectionnez un modèle. À la différence des pages, les fenêtres présentent uniquement un contenu de corps. Les widgets ajoutés à une fenêtre sont répertoriés dans la section Outline (Contour) de l’onglet Window (Fenêtre) et dans le menu de navigation rapide, en bas de la fenêtre du générateur.

Les fenêtres sont regroupées en deux catégories : fixes et ancrées. Vous pouvez pointer sur une fenêtre du volet et cliquer sur Set as splash (Définir comme fenêtre d’accueil) si la fenêtre n’est pas connectée pour s’ouvrir avec une page. Pour renommer, dupliquer ou supprimer une fenêtre, cliquez sur le bouton More (Plus) et sélectionnez Rename (Renommer), Duplicate (Dupliquer) ou Delete (Supprimer). Lorsque vous ajoutez une nouvelle fenêtre, son étiquette suit une règle de numérotation continue. Par exemple, dupliquer la Fenêtre 1 génère la Fenêtre 2 ou la Fenêtre 3 si la Fenêtre 2 existe déjà. Pour les fenêtres fixes (autres que les fenêtres de présentation), le nom de la fenêtre est également utilisé dans l’URL de l’expérience. Si vous changez le nom d’une fenêtre après la publication, les URL précédemment utilisées fonctionnent toujours.

Utilisez les options suivantes pour gérer les fenêtres d’une application :

• Vous pouvez définir les fenêtres de présentation qui s’ouvrent avec l’expérience Web dans le volet Window (Fenêtre). Pointez sur une fenêtre sous Fixed windows (Fenêtres fixes) (à l’exception de celles connectées pour s’ouvrir avec une page) et cliquez sur le bouton Set as splash (Définir comme présentation). Une expérience Web peut comporter une fenêtre de présentation.
• Pour configurer une fenêtre à ouvrir avec une page, accédez aux paramètres Page et sélectionnez une fenêtre fixe dans le menu Open with window (Ouvrir avec fenêtre). Les fenêtres définies comme fenêtres de présentation ne figurent pas parmi les options. L’icône Opens with page (S’ouvre avec une page) s’affiche en regard d’une fenêtre configurée pour s’ouvrir avec une page, dans le volet Window (Fenêtre). Pointez sur l’icône pour obtenir une info-bulle indiquant le nom de la page connectée. Les fenêtres de page apparaissent une seule fois dans l’expérience Web à moins que l’utilisateur actualise le navigateur.
• Configurez l’option Set link (Définir un lien) pour ouvrir une fenêtre à l’aide d’un paramètre de widget. Dans la fenêtre Set link (Définir un lien) d’un widget, sélectionnez Window (Fenêtre) pour Link (Lien), puis sélectionnez une fenêtre ancrée ou fixe (autre qu’une fenêtre de présentation). Les fenêtres déclenchées par des widgets apparaissent chaque fois qu’un utilisateur clique sur le widget.

Paramètres

Les fenêtres incluent les paramètres de configuration suivants :

• Mode
  • Fixed (Fixe) - Affichage à une position fixe.
  • Anchored (Ancrée) - Affichage en regard du widget associé.

  Remarque :

  Vous pouvez changer le mode d’une fenêtre dans ses paramètres. Toutefois, en raison des différents mécanismes d’activation des fenêtres fixes définies comme fenêtres de présentation ou connectées pour s’ouvrir avec une page, vous ne pouvez pas les faire passer en mode ancré (et inversement).

• Position et taille
  • Position : dans le cas des fenêtres fixes, vous pouvez utiliser la grille pour fixer la fenêtre sur l’un des 9 points d’ancrage de la page. (Les fenêtres ancrées apparaissent en regard du widget associé, et leur position est définie automatiquement.)
  • Size (Taille) : vous pouvez spécifier les valeurs de largeur et de hauteur en pixels (px) pour une fenêtre ancrée, et en pixels ou en pourcentage de la zone d’affichage (%) pour une fenêtre fixe. Vous pouvez également faire glisser les bords de la fenêtre pour la redimensionner. Dans le cas d’une fenêtre fixe, le mode Custom (Personnalisé) vous permet de définir des valeurs spécifiques et d’ajouter des décalages. Le mode Stretch (Étirer) vous permet, quant à lui, d’indiquer les valeurs des marges de la fenêtre.
    • Offset X (Décalage X) : définissez le décalage horizontal de la fenêtre. Une valeur négative déplace la fenêtre vers la gauche et une valeur positive la déplace vers la droite.
    • Offset Y (Décalage Y) : définissez la distance verticale de la fenêtre. Une valeur négative déplace la fenêtre vers le haut et une valeur positive la déplace vers le bas.
    • Margins (Marges) : définissez l’espace séparant un bord de la fenêtre et le bord correspondant de la zone d’affichage. Si vous définissez la largeur de la fenêtre sur Stretch (Étirer), vous pouvez spécifier les valeurs des marges Left (Gauche) et Right (Droite). Si vous définissez la hauteur de la fenêtre sur Stretch (Étirer), vous pouvez spécifier les valeurs des marges Top (Haut) et Bottom (Bas).

  Remarque :

  Si la fenêtre utilise une mise en page personnalisée pour les appareils avec des écrans de taille petite ou moyenne, vous pouvez personnaliser la position, la taille et la mise en page de la fenêtre. Les icônes dans les paramètres de position et de taille indiquent la taille d’écran (grande, moyenne ou petite) à laquelle la configuration s’applique.

• Block page (Bloquer la page) - Empêche l’utilisateur de cliquer ou d’interagir avec d’autres parties de l’application pendant que la fenêtre est active. Ce paramètre est uniquement disponible pour les fenêtres fixes.
  • Mask color (Couleur du masque) - Sélectionnez la couleur du masque qui remplit l’espace autour de la fenêtre.
• Options de fermeture
  • Click outside to close Window (Cliquer à l’extérieur pour fermer la fenêtre) - Permet aux utilisateurs de cliquer n’importe où en dehors d’une fenêtre pour la fermer.

    Remarque :

    Si vous désactivez l’option Block page (Bloquer la page) pour une fenêtre fixe, ce paramètre n’est pas disponible.

  • Interaction (mode fixe uniquement) : ajoutez une interaction au bas de la fenêtre.
    • Style : sélectionnez une mise en page pour la case à cocher et le bouton.
    • Type : sélectionnez un type d’interaction pour la fenêtre.
      • Confirmation : l’utilisateur doit cocher cette case pour fermer la fenêtre. Cette contrainte s’applique à toutes les méthodes de fermeture. Ce type d’interaction affiche une fois la fenêtre par défaut, sauf si vous activez l’option Always show this window (Toujours afficher cette fenêtre).
      • Option « Don’t show this again » (« Ne plus afficher ce message ») : l’utilisateur coche cette case dans la fenêtre pour ne plus qu’elle s’ouvre. Il peut fermer la fenêtre, qu’il coche cette case ou non.

        Conseil :

        Pour afficher à nouveau la fenêtre après avoir coché la case, sauvegardez à nouveau l’expérience et prévisualisez-la, ou publiez à nouveau l’expérience et affichez l’élément publié.

    • Checkbox text (Texte de la case à cocher) : saisissez le texte à afficher en regard de la case à cocher et changez la taille de la police de caractères (en pixels ou en rem).
    • Button text (Texte de bouton) : saisissez le texte à afficher sur le bouton (le cas échéant) et changez la taille de la police de caractères (en pixels ou en rem).
  • Vous pouvez également ajouter un widget de bouton dans la fenêtre pour la fermer. Pour relier le bouton à une page pour sa fermeture, utilisez l’option Set link (Définir un lien) disponible dans les paramètres de bouton. Si vous devez définir plusieurs pages à ouvrir avec une fenêtre, ou si des boutons situés sur des pages différentes renvoient à une même fenêtre, la définition d’un lien vers une page spécifique n’est pas pratique dans ces conditions. Vous pouvez alors définir le lien vers la page actuelle pour retourner à la page qui active la fenêtre.

    Remarque :

    Bien que vous puissiez définir les boutons sur une fenêtre pour la relier à une autre fenêtre de l’application, cette configuration n’est pas recommandée.

• Animation - Ajoutez une animation pour la fenêtre et son widget.
• Background (Arrière-plan) : choisissez une couleur de remplissage ou une image pour l’arrière-plan de la fenêtre. Utilisez le bouton Quick style (Style rapide) pour sélectionner une option parmi les conceptions prédéfinies coordonnées au thème de l’application.
• Border (Bordure) : sélectionnez la couleur, le style et la largeur de la bordure de fenêtre Vous pouvez changer la taille du rayon pour modeler les coins de la fenêtre. Utilisez le bouton Quick style (Style rapide) pour sélectionner une option parmi les conceptions prédéfinies coordonnées au thème de l’application.
• Box shadow (Ombre de contour) - Ajoutez un effet ombré autour de la fenêtre. Utilisez le bouton Quick style (Style rapide) pour sélectionner une option parmi les conceptions prédéfinies ou utilisez les paramètres suivants :
  • Offset X (Décalage X) : définissez la distance horizontale de l’ombre. Une valeur négative place l’ombre à gauche de la fenêtre et une valeur positive la place à droite.
  • Offset Y (Décalage Y) : définissez la distance verticale de l’ombre. Une valeur négative place l’ombre au-dessus de la fenêtre et une valeur positive la place en dessous.
  • Blur radius (Rayon de flou) : appliquez un effet de flou à l’ombre.
  • Spread radius (Rayon de répartition) : ajustez la taille de l’ombre.
  • Color (Couleur) : sélectionnez une couleur.

Modèles

Experience Builder inclut les modèles de fenêtre suivants :

• Les modèles de type Fixed blocker (Modale fixe) sont adaptés si vous souhaitez bloquer l’interaction avec le reste de l’application tant que l’utilisateur ne ferme pas la fenêtre.
  • Blank window (Fenêtre vide) est un modèle vide.
  • Confirm (Confirmation) est un modèle avec confirmation à la fermeture, prévu pour le contenu à vérifier ou à accepter avant de poursuivre.
  • Alert (Alerte) est un modèle qui permet aux utilisateurs d’accepter ou de rejeter un message.
  • Simple et Vogue sont deux modèles différents conçus pour afficher ou présenter des informations.
  • Novel (Originalité) est un modèle qui présente une mise en page avec un bouton de fermeture en dehors du contenu principal.
  • Sidebar (Barre latérale) est un modèle positionné par défaut sur la droite, étudié pour afficher les textes assez longs par défilement vertical.
  • Carousel (Vidéorama) est un modèle de fenêtre plus grande pour afficher plusieurs images et du contenu dans une vue cyclique.
  • Particulars (Particularités) est un modèle de fenêtre plus grande qui fournit davantage d’informations en utilisant un diagramme, une table, une liste, des images et des boutons, ainsi que des options de partage sur les réseaux sociaux.
• Les modèles de type Fixed passthrough (Non modale fixe) sont adaptés si vous souhaitez que les utilisateurs interagissent avec une fenêtre parallèlement avec d’autres parties de l’application.
  • Footnote (Note de bas de page) s’affiche en bas de la mise en page de l’application avec une animation flottante entrante.
  • Item info (Infos sur l’élément) s’affiche à droite de la mise en page de l’application avec une animation par entrée brusque.
• Les modèles de type Anchored (Ancrée) sont adaptés si vous souhaitez associer une fenêtre à un widget.
  • L’option Tooltip (Info-bulle) est adaptée si vous voulez fournir plus d’informations sur le widget associé, qui peut être de type Button (Bouton) ou Image.
  • Steps (Étapes) est un modèle conçu pour afficher ou introduire des informations sur plusieurs vues.

Paramètres URL

Voici une liste de paramètres d’URL qui vous permettent de contrôler le comportement des fenêtres.

Ouvrir une fenêtre

Pour renvoyer vers une fenêtre active spécifique, utilisez dlg suivi d’un ID ou d’une étiquette de fenêtre.

https://experience.arcgis.com/experience/<AppId>/?dlg=Window-1

Contrôler l’activation des fenêtres

Pour imbriquer dans une application Experience Builder des fenêtres de présentation ou des fenêtres de page sans que cette application n’accède automatiquement à ces fenêtres, utilisez le paramètre disable_window_focus pour contrôler ce comportement. Ajoutez l’URL ci-après à la page Web hôte pour empêcher le comportement d’accès. Par défaut, disable_window_focus est défini sur False (Faux).

https://experience.arcgis.com/experience/<AppId>/?disable_window_focus=true

Pour contrôler l’activation des fenêtres pour une fenêtre spécifique, utilisez dlg, suivi d’un ID ou d’une étiquette de fenêtre et du paramètre disable_window_focus, comme dans l’exemple suivant :

https://experience.arcgis.com/experience/<AppId>/?dlg=Window-1&disable_window_focus=true