Composants du générateur de pages

Familiarisez-vous avec le générateur de pages et ses composants pour créer des pages d’action. Les différents composants et sections du générateur de pages sont décrits dans les sections suivantes. Vous ajoutez et personnalisez des champs et des boutons supplémentaires en fonction de vos besoins.

La capture d’écran suivante montre le générateur de pages :

  • Les composants se trouvent dans le volet gauche.
  • Interface du générateur dans la section centrale.
  • Les détails de la page ainsi que les propriétés et les actions du composant se trouvent dans le volet droit.

Vue complète du générateur de pages

Modèles de page

Lors de la création d’une page, vous pouvez sélectionner une option parmi les mises en page de base suivantes en fonction des informations souhaitées. Chaque modèle est uniquement destiné à accélérer votre activité pour produire la page que vous souhaitez.

  • Détail : modèle de page qui fournit des informations statiques.
  • Formulaire : permet de créer une page qui fournit des informations statiques en plus de la possibilité d’entrer des données utilisateur sur votre page.
  • Tableau : permet de créer une page basée sur le chargement des tableaux de données à partir de votre intégration d’application cible.
  • Contenu statique : permet de configurer des composants de page qui fournissent des informations statiques, non interactives, telles que des titres, des messages d’erreur ou des rappels.

Composants du générateur de pages

Le générateur de pages vous permet de choisir des options parmi les différents composants de page pour personnaliser et configurer la sortie, les informations et l’affichage de votre micro-app. Utilisez des composants pour créer une micro-app de page en fonction de vos attentes et besoins. Par exemple, si vous souhaitez afficher une liste d’utilisateurs, vous utilisez le composant Tableau pour la créer. Les différentes pages de modèle disposent de différentes fonctionnalités de composant disponibles par défaut. Les listes suivantes couvrent toutes les options disponibles.

Composants d’entrée : cette option fournit les composants pour créer des sections interactives sur votre page, y compris les boutons, la saisie de texte, les boutons radio et ainsi de suite.

Vue détaillée des composants d'entrée

  • Bouton : permet d’ajouter un composant sur la page sur lequel l’utilisateur peut cliquer en définissant les actions et la logique. La taille et le style des boutons peuvent être réglés. Certaines actions permettent d’exécuter les opérations suivantes : Exécuter action de service, Aller à l’URL et Exécuter le déclencheur de notification. Par exemple, à l’aide d’actions, un bouton peut diriger les utilisateurs vers une autre page ou envoyer une entrée.
  • Saisie de texte : définissez la source du texte en spécifiant la table de données, la colonne et la valeur qu’un utilisateur peut charger sur la page. Le composant peut être marqué comme facultatif. La largeur du champ peut être modifiée. Les règles de validation peuvent être configurées en fonction d’une longueur minimale ou maximale ou d’un modèle de texte pour identifier les entrées utilisateur.
  • Zone de texte : définissez la source du texte en spécifiant la table de données, la colonne et la valeur qu’un utilisateur peut charger sur la page. Le composant peut être marqué comme facultatif. Les règles de validation peuvent être configurées en fonction d’une longueur minimale ou maximale ou d’un modèle de texte pour identifier les entrées utilisateur.
  • Saisie de chiffres : définissez la source des chiffres en spécifiant la table de données, la colonne et la valeur qu’un utilisateur peut charger sur la page. Vous pouvez définir le format tel que l’heure, la date, etc. Le composant peut être marqué comme facultatif et la largeur du champ peut être modifiée. Les règles de validation peuvent être configurées en fonction d’une longueur minimale ou maximale ou d’un modèle de texte pour identifier les entrées utilisateur.
  • Sélectionner : permet aux utilisateurs de choisir une option parmi une liste de valeurs définie (maximum de 100 valeurs). Ce champ est renseigné avec les données du système source. Vous pouvez également entrer manuellement la liste de valeurs. Le composant peut être marqué comme facultatif et la largeur du champ peut être modifiée. Vous pouvez définir le format tel que l’heure, la date, etc., ainsi que la largeur du champ.
  • Rechercher : permet aux utilisateurs de rechercher une grande quantité de valeurs et de sélectionner une valeur en recherchant un autre élément. L’emplacement dans lequel les données sont regroupées et la valeur de recherche doivent être spécifiés. Le composant peut être marqué comme facultatif.
  • Case à cocher : permet d’ajouter un composant sélectionnable sur la page en définissant la source (table de données et colonne) et la valeur par défaut (sélectionnée ou désactivée). Le composant peut être marqué comme facultatif.
  • Bouton radio : permet d’ajouter un ensemble d’options dans lequel une seule option peut être sélectionnée. Ce champ est renseigné avec les données du système source. Vous pouvez également entrer manuellement la liste de valeurs. Le composant peut être marqué comme facultatif.
  • Date/Heure : permet de définir la date et l’heure à afficher dans la micro-app, ainsi que l’heure par défaut (heure affichée avant la sélection) à charger sur la page. Le composant peut être marqué comme facultatif et la largeur du champ peut être modifiée.

Composants d’affichage : permet d’identifier les composants pour fournir des informations à vos utilisateurs de micro-apps, y compris des tableaux, du texte statique, des images, etc.

Vue détaillée des composants d'affichage

  • Tableau : permet d’ajouter un tableau en définissant la source, les filtres et les colonnes du tableau. Des actions de lien de page peuvent être ajoutées pour diriger l’utilisateur vers une autre page. L’alignement peut être modifié. Les requêtes personnalisées doivent être définies pour limiter l’exposition des données. Un tableau sans requête personnalisée expose tous les enregistrements qui correspondent à un filtre de tableau, quelle que soit la relation des données avec les abonnés. Vos données potentiellement sensibles peuvent être exposées à tous les utilisateurs de la micro-app, sauf si vous limitez l’exposition des données. Contrôlez l’accès aux données des pages à l’aide de la fonction Personnaliser. Sélectionnez le tableau dans le volet du générateur de composants. Sélectionnez Propriétés du tableau, puis PERSONNALISER. Sélectionnez +Ajouter une condition et ajoutez les contraintes si nécessaire.
  • Texte : permet de définir la source du texte provenant des tableaux et le format du texte à charger sur la page. Les options Source de données, Tableau et Colonne sont sélectionnées et utilisées pour remplir le texte. Un format de texte, tel que l’heure ou la date, peut être imposé ou conditionnel en fonction des paramètres. Vous pouvez ajouter des actions pour effectuer des opérations telles que : Aller à la page, Aller à l’URL, Envoyer e-mail ou Appel téléphonique.
  • Texte statique : permet de définir le texte statique qui apparaît sur la page. Des actions peuvent être ajoutées. L’alignement peut être modifié. Vous pouvez faire une distinction si le texte est un en-tête. Le style de police en gras et en italique est disponible. La taille de la police peut être définie sur Normale, Claire, Petite ou Petite et claire. Vous pouvez ajouter des actions pour effectuer des opérations telles que : Aller à la page, Aller à l’URL, Envoyer e-mail ou Appel téléphonique.
  • Image statique : permet de référencer et d’afficher une image statique à partir d’une source d’URL. La taille et l’alignement de l’image peuvent être spécifiés. Aucune action ne peut être ajoutée.
  • Image : permet de définir la source (table de données et colonne) et le format de l’image à afficher sur la page. Le texte peut être ajouté pour s’afficher si l’image ne peut pas se charger. Le format de l’image telle que l’alignement, la taille et la forme peut être configuré.
  • Séparateur de ligne : permet de séparer les informations non liées et les informations liées au groupe. Aucune propriété ne peut être modifiée.
  • Bouton Retour : permet aux utilisateurs de revenir à la page précédente. Une variable doit être spécifiée, c’est-à-dire table de données, colonne de données et format. Un intitulé peut être spécifié.
  • Créer rapport BI : permet d’afficher un rapport BI. La source et le format sont définis.
  • Visionneuse de reçus Concur : affiche une image de reçu. Définissez la source à l’aide de la table de données et de la colonne de données, ainsi que le format.
  • Tableau : permet d’afficher un rapport Tableau. Définissez la source à l’aide de la table de données et de la colonne.
  • Contenu HTML : permet d’afficher correctement du contenu HTML à partir de sources extraites (par exemple des flux RSS). Définissez la source à l’aide de la table de données et de la colonne. Les éléments de texte de base sont pris en charge. Les éléments autorisés incluent :

    • « p », « div », « h1 », « h2 », « h3 », « h4 », « h5 », « h6 », « ul », « ol », « li », « blockquote », « b », « i », « font », « s », « u », « o », « sup », « sub », « ins », « del », « strong », « strike », « tt », « code », « big », « small », « br », « span » et « em ».
    • Élément « a » uniquement avec les attributs « target » et « href ».
    • Élément « img » uniquement avec les attributs « height », « width », « src ».
    • En outre, l’attribut « style » est autorisé sur n’importe quel élément.

Composant de mise en page : fournit le composant de grille permettant de définir la mise en page de votre page.

Vue détaillée des composants de mise en page

  • Grille flexible : vous donne plus de contrôle sur le positionnement des composants sur vos pages, ce qui permet une organisation plus facile des composants. Cette option est utile lorsque vous concevez des pages destinées aux appareils dotés d’écrans plus grands. Définissez l’intitulé et le nombre total de cellules que vous souhaitez dans votre grille.

Détails de la page

Les détails de la page permettent de configurer la page que vous créez, de définir des filtres pour les informations et de fournir diverses fonctionnalités de débogage à caractère informatif :

  • Nom de la page : définissez le nom de la page.
  • Filtre de données : permet de définir des contraintes sur les données d’action.
  • Afficher SQL : permet d’afficher SQL à des fins de débogage.
  • Logique : utilisez cette option pour ajouter et afficher la logique du composant. Vous trouverez des détails sur le paramètre AJOUTER LOGIQUE dans la section suivante.

Logique

Cliquez sur le bouton AJOUTER LOGIQUE sous l’onglet Détails de la page pour ouvrir la configuration logique. Cela vous permet de configurer la logique de votre composant de page particulier. Créez des conditions à l’aide d’arguments logiques standard pour obtenir différents résultats en fonction du comportement souhaité de votre composant. Vous pouvez ajouter plusieurs actions empilées sur n’importe quel bouton pour créer plusieurs effets d’action en un seul clic. Lorsque chaque action de service s’exécute correctement, le système avance dans la chaîne d’actions jusqu’à ce que toutes les actions soient terminées. Les actions disponibles sont les suivantes :

  • Évaluer la condition : permet de définir et de modifier la condition via un argument logique.
  • Définir la valeur du composant : permet de définir la valeur du composant associé au bouton pour valider une action.
  • Afficher le composant : permet de configurer les conditions pour afficher le composant.
  • Masquer le composant : permet de configurer les conditions pour masquer le composant.
  • Activer le composant : permet de configurer les conditions pour activer le composant.
  • Désactiver le composant : permet de configurer les conditions pour désactiver le composant.
  • Définir le composant sur Obligatoire : permet de configurer les conditions pour que le composant soit obligatoire.
  • Définir le composant sur Facultatif : permet de configurer les conditions pour exclure le composant.

Propriétés du composant

Chaque composant du générateur de pages dispose de son propre menu de propriétés spécifique contenant différentes options à choisir en fonction du composant, y compris :

  • Intitulé : permet de personnaliser l’intitulé du bouton, du texte, de l’image, etc.
  • Taille : permet de définir la taille du bouton, du texte, etc.
  • Style : permet de basculer entre les différentes couleurs et formats pour le texte, le bouton, etc.
  • Afficher dans le pied de page du panneau : activez/désactivez cette option pour afficher l’élément dans le panneau de la page.
  • Source de données : sélectionnez la source de données pour l’élément affiché.
  • Table de données : sélectionnez la table de données de l’élément affiché.
  • Colonne de données : sélectionnez la colonne de données de l’élément affiché.
  • Mise en forme conditionnelle : permet de configurer la mise en forme conditionnelle pour l’élément de page.
  • Insérer des variables : permet d’ajouter une variable à l’élément de page pour afficher automatiquement les données d’intégration d’application.
  • Afficher les boutons bascule : permet de changer la façon dont l’élément s’affiche sur le générateur de pages.

Actions

Le menu Actions est présent pour le composant Bouton pour permettre aux destinataires de la micro-app (utilisateurs de Workspace) de répondre avec une entrée actionnable. Définissez l’action exécutée par le bouton à partir des actions de service que vous avez configurées dans l’intégration. Les actions disponibles sont les suivantes :

  • Exécuter action de service
  • Envoyer e-mail
  • Ajouter un événement G Suite
  • Retour
  • Aller à la page
  • Aller à l’URL
  • Exécuter le déclencheur de notification

Vous pouvez utiliser les valeurs de composant en tant que paramètres dans les actions Envoyer e-mail et Aller à l’URL. Cette fonctionnalité permet d’effectuer les opérations suivantes :

  • (Envoyer e-mail) Les utilisateurs de Workspace peuvent saisir des destinataires d’e-mail dans un champ Workspace pour une action donnée.
  • (Aller à l’URL) L’entrée de l’utilisateur à partir d’un formulaire Workspace peut être utilisée dans le cadre d’un modèle d’URL ouvert dans Workspace.

Suivez les étapes ci-dessous en fonction de votre cas d’utilisation.

Ajouter une action Envoyer e-mail

  1. Après avoir ajouté un composant Bouton au générateur et configuré les propriétés du bouton selon les besoins, sélectionnez l’onglet Actions.
  2. Désactivez la case à cocher Bouton d’action de la page. Dans le champ Ajouter une action, sélectionnez Envoyer e-mail.
  3. Sous À, sélectionnez Insérer variable.

    Étapes d'action de la page

  4. Dans l’écran Insérer variable, dans le menu Type, sélectionnez Valeur du composant.
  5. Sous Composant, sélectionnez le composant d’entrée requis qu’un utilisateur saisit dans son formulaire Workspace. Le champ À contient l’ID du composant.
  6. Ajoutez un objet et un corps pour le message selon les besoins. Dans Workspace, les utilisateurs peuvent entrer une adresse e-mail dans le champ activé par ce composant. Lorsqu’ils confirment l’adresse e-mail, leur e-mail s’ouvre avec un message pré-rempli qui peut être modifié si nécessaire et envoyé.

Ajouter une action Aller à l’URL

  1. Après avoir ajouté un composant Bouton au générateur et configuré les propriétés du bouton selon les besoins, sélectionnez l’onglet Actions.
  2. Laissez la case à cocher Bouton d’action de la page activée. Dans le champ Ajouter une action, sélectionnez Aller à l’URL.
  3. Dans le champ Modèle d’URL, entrez l’URL du site cible que vous souhaitez ouvrir.
  4. Sous le champ Modèle d’URL, sélectionnez Insérer variable
  5. Dans l’écran Insérer variable, dans le menu Type, sélectionnez Valeur du composant.
  6. Sous Composant, sélectionnez le composant requis. Le champ Modèle d’URL est rempli avec l’ID de composant ajouté à l’URL que vous avez saisie. Dans Workspace, les utilisateurs peuvent entrer une valeur dans le champ activé par ce composant. Lorsqu’ils envoient la requête, la valeur du composant sélectionné est utilisée comme variable dans l’URL qui est ouverte dans leur navigateur.

Remarque :

Sélectionnez l’icône d’information en regard d’un champ de modèle pour afficher des annotations détaillées sur les composants utilisés.

Composants du générateur de pages