Aller au contenu principal

Éditeur et widgets des Portails

L'Éditeur de Portails combine un répertoire de fichiers navigable avec un composeur visuel. Les deux modes opèrent sur le même brouillon : les modifications visuelles mettent à jour les sources et les parties gérées directement dans le code sont préservées.

Mode Code​

Le mode Code affiche :

  • Explorateur, pour rechercher, créer, renommer et organiser les fichiers ;
  • Télécharger une image, pour ajouter au répertoire des assets PNG, JPEG, GIF ou WebP ;
  • des onglets pour les fichiers ouverts ;
  • un éditeur avec coloration syntaxique pour JSON, HTML, CSS et JavaScript ;
  • l'état de sauvegarde et le numéro de révision actuel ;
  • un panneau Problèmes avec les erreurs et les indications corrigeables.

L'Explorateur et Problèmes peuvent être réduits avec le bouton de leur en-tête. Dans l'Explorateur, le chevron placé à côté de chaque répertoire permet aussi de développer ou réduire uniquement cette branche. L'état des répertoires est conservé pendant la session d'édition, tandis qu'une recherche développe temporairement les branches nécessaires pour afficher les résultats.

Les modifications sont sauvegardées de manière asynchrone. Si le brouillon a été mis à jour par une autre session, l'éditeur interrompt la sauvegarde et signale le conflit : recharger la version actuelle avant de reprendre le travail.

Utiliser Point de contrôle pour fixer une révision immuable et reconnaissable du brouillon. Un point de contrôle ne publie pas le Portail.

En ouvrant un fichier qui ne représente pas une page — par exemple portal.json, une Data Resource, un CSS ou un fichier de composant — l'éditeur passe automatiquement en Code. Le composeur Visuel reste associé uniquement aux pages et ne montre jamais la toile d'un fichier ouvert précédemment. Le mode choisi pour chaque page est mémorisé pendant la session d'édition : si une page était ouverte en mode Visuel, elle revient automatiquement en mode Visuel après la consultation d'un fichier de configuration.

Pour créer une page, sélectionner Nouveau fichier et utiliser un chemin JSON sous pages/, par exemple pages/dashboard.json ou pages/orders/detail.json. Le nom du fichier est libre : l'éditeur génère automatiquement un UUID, un titre, une mise en page en grille et une liste de widgets. Pour le rendre navigable, ajouter dans portal.json une route pointant vers le chemin complet de la page.

Mode Visuel​

Le mode Visuel met à disposition des palettes, une toile et l'Inspecteur. Il est possible d'ajouter un widget, de le sélectionner et de configurer :

  • titre et propriétés ;
  • position, largeur et hauteur dans la grille ;
  • styles pour l'instance unique ;
  • CSS scoped ;
  • rendu Desktop, Tablette et Mobile.

Les propriétés guidées sont appliquées et sauvegardées lorsque le contrôle change ; un toaster confirme le résultat. Enregistrer les modifications avancées sert plutôt aux blocs JSON et CSS, où il est normal d'avoir un contenu temporairement non valide pendant la frappe. L'état dans l'en-tête distingue les modifications en cours, la sauvegarde et la source sauvegardée.

Les champs de l'Inspecteur dépendent du widget : les routes, les images, les Vues Utilisateur, les widgets uniques d'une Vue, le Workflow, les paramètres et les Data Resources sont choisis dans des menus filtrés sur le Projet. Les couleurs peuvent être choisies avec le sélecteur ou saisies comme valeur CSS ou jeton de conception.

Les préréglages Viewport déclarent la taille simulée. La barre de zoom offre −, +, le retour à 100 % et Adapter. Adapter utilise à la fois la largeur et la hauteur disponibles, réduit uniformément la toile et conserve les proportions de la Prévisualisation. Un clic sur le pourcentage rétablit 100 % ; un double-clic permet de saisir une valeur de 5 % à 200 %. Avec un zoom personnalisé, les barres de défilement donnent accès aux zones hors de l'espace de travail. Le zoom modifie uniquement l'affichage dans l'éditeur, jamais la géométrie enregistrée ni le rendu d'exécution. Chaque widget affiche aussi son badge largeur × hauteur en cellules de grille.

Pour modifier la géométrie d'un widget :

  • faire glisser la poignée en haut à gauche pour le déplacer ;
  • faire glisser la poignée dans le coin inférieur droit pour le redimensionner ;
  • utiliser Alt + flèche pour le déplacer d'une cellule ;
  • utiliser Maj + Alt + flèche pour modifier sa largeur ou sa hauteur d'une cellule.

Pour supprimer un widget, le sélectionner et utiliser Supprimer le widget dans l'Inspecteur. Alternativement, appuyer sur Suppr ou Backspace lorsque le curseur n'est pas dans un champ. L'éditeur demande toujours confirmation.

Lorsqu'une région contient des propriétés non gérées par le composeur, l'éditeur la identifie comme gérée par le code et la conserve lors des mises à jour visuelles.

Pour configurer la page plutôt qu'un widget, cliquer sur une zone libre de l'arrière-plan de la toile. L'Inspecteur Style de la page permet de définir la couleur, l'arrière-plan, l'espacement interne et la hauteur minimale ; Style JSON et CSS scoped de la page restent disponibles pour les ajustements avancés.

Configurer l'apparence et le CSS​

Le Style guidé expose la couleur, l'arrière-plan, la taille du texte, l'alignement, l'espacement et le rayon de bordure. Les valeurs acceptent une syntaxe CSS normale, par exemple #0f172a, 1rem ou 8px.

La Configuration avancée permet d'utiliser des propriétés CSS en kebab-case, des états et des points de rupture :

{
  "color": "#0f172a",
  "background-color": "#ffffff",
  "padding": "1rem",
  "states": {
    "hover": {"background-color": "#e0f2fe"}
  },
  "breakpoints": {
    "md": {"font-size": "18px"}
  }
}

Le champ CSS scoped permet d'intervenir sur n'importe quel détail sans influencer les autres widgets. & représente le conteneur de l'instance ; .portal-text sélectionne le contenu du widget Texte :

&:hover { transform: translateY(-2px); }
.portal-text { font-weight: 600; letter-spacing: .02em; }

Sélectionner Sauvegarder les modifications avancées pour enregistrer le JSON et le CSS dans la page. L'Aperçu montre le rendu compilé définitif.

Catalogues du Projet​

Les boutons Widget personnalisé et Images ouvrent un catalogue unifié. Chaque élément indique toujours son origine : Portail actuel, autre Portail du même Projet, Vue Utilisateur publiée ou catalogue partagé des Vues. Les objets externes au Projet ou non accessibles à l'utilisateur ne sont pas affichés.

La palette comprend également les widgets des Vues Utilisateurs publiées du Projet. Il est possible d'intégrer à la fois des widgets standards — y compris des graphiques, des KPI, des tableaux et des cartes — et des widgets du catalogue personnalisé. La sélection enregistre la Vue, la version publiée et la clé du widget ; une version reste donc stable même si la Vue est modifiée ultérieurement.

Lorsqu'un image ou un composant provenant d'un autre objet est utilisé, l'éditeur en crée une copie dans le référentiel du Portail. Cette matérialisation rend les points de contrôle, les builds et les versions reproductibles ; la carte du catalogue conserve l'indication de l'origine pour éviter toute ambiguïté.

Widgets disponibles​

Le catalogue géré comprend :

  • Texte, Hero, Card, Image et Séparateur ;
  • Lien, Menu, Onglets de navigation et Fil d'Ariane ;
  • Section, Panneau rétractable, Barre latérale et Tiroir ;
  • Formulaire lecture seule, Formulaire de données, Tableau de données, Graphique en barres et Export de données ;
  • Vue Utilisateur complète et widget unique de Vue Utilisateur ;
  • Action de flux de travail ;
  • Rapport Power BI et Tableau de bord Qlik ;
  • Widget personnalisé sandbox.

Chaque widget prend en charge des propriétés de style, des états visuels et des points de rupture. Le CSS scoped permet de personnaliser même les états de survol, de focus, actif et désactivé sans modifier les autres composants de la page.

Le bouton Guide du widget ouvre la référence intégrée du widget sélectionné : il liste les propriétés, les types, les valeurs par défaut, les capacités et des exemples de style. La référence complète est également disponible dans Reference dei widget.

Charger et utiliser une image​

  1. Si le fichier est local, utiliser Télécharger une image dans l'Explorateur et choisir un PNG, JPEG, GIF ou WebP.
  2. Pour réutiliser un asset, ouvrir Images et filtrer le catalogue par nom ou origine.
  3. Sélectionner Utiliser l'image ou Copier et utiliser : l'éditeur propose un chemin sous assets/ et valorise le widget sélectionné.
  4. Toujours remplir alt, puis choisir l'adaptation (contain, cover, fill, none, scale-down) et la position.
  5. Vérifier le résultat dans l'Aperçu.

La hauteur définie pour le widget dans la grille détermine également l'espace occupé par l'image. Par défaut, l'image est contenue sans déformation ; le CSS scoped peut modifier object-fit via le sélecteur .portal-image.

Data Manager et requêtes visuelles​

Données ouvre le Data Manager du Portail. Il n'est pas nécessaire de connaître à l'avance la structure du dossier data/ :

  1. Créer une ressource de données et attribuer une clé et un nom ;
  2. Choisir Environnement de connexion ou Modèle sémantique ;
  3. Pour l'Environnement, charger le catalogue, puis choisir le schéma, la table, les dimensions, les mesures, les agrégations et les alias ;
  4. Pour un Modèle sémantique, choisir la version publiée du Projet, puis les champs et mesures gérés ;
  5. Définir les lignes maximales, le délai d'attente et les paramètres uniquement si nécessaire ;
  6. Sauvegarder : le fichier data/<chiave>.resource.json est créé et associé au widget sélectionné.

Le mode SQL personnalisé avancé est réservé aux requêtes en lecture seule qui ne sont pas exprimables par le configurateur. Il nécessite également la déclaration des colonnes de sortie. Les jointures, filtres ou tris complexes peuvent être affinés en ouvrant le JSON généré en mode Code.

Le navigateur ne reçoit pas les identifiants et n'interroge pas directement la source. Les requêtes, paramètres, limites et autorisations sont revérifiés à l'exécution.

Données et intégrations Sybot​

Les ressources de données peuvent utiliser des sources et des Modèles sémantiques autorisés. Les requêtes sont en lecture seule et respectent à nouveau les autorisations de l'utilisateur au moment de l'exécution.

Dans le widget Vue utilisateur, choisir dans le menu déroulant une vue publiée du Projet du Portail. La sélection enregistre automatiquement à la fois la vue et la version publiée épinglée.

Dans le widget Action de flux de travail, choisir un flux de travail exécutable du Projet. Pour chaque paramètre, indiquer s'il faut utiliser la valeur par défaut, demander la valeur à l'utilisateur ou enregistrer une valeur fixe. Les paramètres sensibles ne peuvent être demandés qu'à l'exécution ; les flux de travail avec des paramètres de fichier, non pris en charge, ne peuvent pas être sélectionnés. La Prévisualisation n'exécute que la vérification de la configuration.

Écrire un widget personnalisé​

En ajoutant Widget personnalisé sandbox, l'éditeur crée un dossier explicite :

components/<chiave>/
├── component.json
├── template.html
├── styles.css
└── index.js

Ouvrir le code du composant passe en Code et ouvre les quatre fichiers. template.html contient le balisage, styles.css le style isolé, index.js exporte mount(sdk) et component.json déclare les fichiers et les capacités. Le code peut modifier le DOM de son iframe, réagir aux événements et utiliser PortalWidgetSDK pour les données, la navigation interne et les flux de travail autorisés. Il ne peut pas accéder au document parent, à la session, aux autres widgets, aux cookies ou au réseau direct.

Power BI et Qlik​

Rapport Power BI prend en charge Secure URL avec la session Microsoft du lecteur et App owns data avec un profil et une liaison gouvernés par le Projet. Tableau de bord Qlik prend en charge Secure URL et OAuth impersonation avec qlik-embed. Dans les deux cas, les secrets restent dans la configuration administrative et le widget ne conserve qu'une URL ou une liaison logique. Lancez le Diagnostic avant la Prévisualisation et testez les droits, licences et règles du fournisseur sur le domaine publié.

Voir Intégrations gouvernées pour la procédure complète.

Valider et prévisualiser l'ébauche​

  1. Sauvegarder le fichier ou appliquer les propriétés depuis le compositeur.
  2. Sélectionner Valider.
  3. Corriger les éléments listés dans le panneau Problèmes.
  4. Sélectionner Construire pour vérifier la construction de l'ébauche.
  5. Sélectionner Prévisualiser et tester la mise en page, les données et les interactions.

La Prévisualisation est séparée de la version publiée. Les erreurs affichent un message utilisable et, lorsqu'il est disponible, un identifiant à communiquer au support.

Pour les accès et le cycle de publication, consulter Pubblicazione e accessi.