Générateur de composants personnalisés

Développez des composants personnalisés à l’aide de la Cadre de travail de l'interface utilisateur Next Experience commande et de la commande .extension de composant ui

Les composants sont des blocs de construction réutilisables que vous utilisez pour créer une interface utilisateur personnalisée. Il Next Experience Design System est livré avec un ensemble de composants personnalisables que vous pouvez faire glisser dans votre interface utilisateur personnalisée. Développez vos propres composants si vous ne trouvez pas ce dont vous avez besoin dans la Next Experience Design System bibliothèque.

Pour voir la Next Experience Design System bibliothèque, rendez-vous sur le site ServiceNow® Site Developer.

Avantages de la création de composants personnalisés

Le développement de composants personnalisés vous permet de :

• Personnalisez une interface utilisateur en fonction des besoins de votre agent, de votre client et de votre entreprise.
• Améliorez l’efficacité de vos employés et réduisez les changements de contexte grâce à un accès rapide aux données et informations importantes.
• Adaptez-vous à l’environnement omnicanal unique de votre entreprise à l’aide d’API pour consolider vos données.

Par exemple, vous pouvez créer un composant qui affiche les tickets associés à un SLA ou qui suit les messageries instantanées actives dans une file d’attente particulière. Vous pouvez utiliser le et le Cadre de travail de l'interface utilisateur Next Experienceextension de composant ui pour développer le composant dont vous avez besoin et accéder aux données de votre plateforme à l’aide de l’API Http Effect. Vous pouvez également interroger les données de la plateforme à l’aide de GraphQL en créant un schéma personnalisé. Pour plus d’informations, consultez GraphQL scripté.

À savoir avant de commencer

Avant de commencer la conception et la construction de votre composant, assurez-vous d’avoir :

• Connaissances générales des concepts, du développement et de la conception des composants Web.
• Connaissances JavaScript pour définir le comportement du composant.
• Connaissance de Node Package Manager (npm).
• La version la plus récente de Node.js installée sur votre ordinateur local. Pour plus d’informations, consultez Node.js.
• Ils sont ServiceNow CLI installés sur votre ordinateur.

Cadre de travail de l'interface utilisateur Next Experience

Il Cadre de travail de l'interface utilisateur Next Experience s’agit d’un framework JavaScript qui vous permet d’étendre vos applications et de créer des composants Web réutilisables dans l’ensemble de vos applications. L’utilisation de vous permet de Cadre de travail de l'interface utilisateur Next Experience :

• Créez un composant unique à utiliser à plusieurs endroits dans vos applications.
• Encapsulez le périmètre du composant pour éviter les conflits avec d’autres codes.
• Ajoutez des propriétés, des emplacements et des actions à votre composant, ce qui permet aux utilisateurs de personnaliser le composant chaque fois qu’ils l’utilisent dans un Espace de travailfichier .

Pour plus d’informations, consultez la section ServiceNow® Site Developer.

extension de composant ui et flux de développement

Il extension de composant ui s’agit d’une extension de l’qui ServiceNow CLI vous permet de développer des composants personnalisés à l’aide de l’extension Cadre de travail de l'interface utilisateur Next Experience. Avec le extension de composant ui, vous pouvez :

• Créez l’ensemble de fichiers nécessaires au développement d’un composant ou d’un échafaudage de projet.
• Démarrez un serveur de développement local pour tester votre composant.
• Créez un projet de composant et déployez-le sur une ServiceNow instance.

Périmètre de l'application

Lorsque vous déployez un Cadre de travail de l'interface utilisateur Next Experience composant, il se déploie dans une application incluse dans le périmètre de l’instance. Vous pouvez fournir un périmètre de l’application que le composant doit utiliser comme identificateur d’espace de noms. Utilisez les directives relatives à l’identificateur d’espace de noms pour le développement d’applications sur l’instance. Pour plus d’informations, consultez Périmètre de l’application.

Lors de la réservation d’un périmètre de l’application, respectez les exigences suivantes :

• Maximum : 18 caractères.

• Cas : étui serpent.

• Format : x_customerprefix_componentname, où :
  • customerPrefix est la valeur de la glide.appcreator.company.code propriété système sur votre instance.
  • componentName est la valeur fournie dans le paramètre nom du composant lors de la création du projet.

Si vous ne fournissez pas de périmètre de l’application lors de la création de votre projet de composant, l’interface de ligne de commande Now en crée un pour vous.

Vous pouvez également ajouter une valeur au paramètre scopeName dans le fichier now-ui.json . Pour plus d'informations, consultez Modifier le périmètre de l’application d’un composant.

Guide de référence

Pour consulter le guide de référence Now CLI, visitez le site développeur.

• Configurer votre environnement
  Préparez votre environnement local en installant l’environnement d’exécution JavaScript Node.js, le gestionnaire de package Node (npm) et le extension de composant uifichier . Ces outils vous permettent de développer et de créer des composants localement et de les déployer sur votre instance.
• Configurer votre projet
  Créez le projet de composant et l’ensemble de fichiers nécessaires au développement d’un composant. Vous pouvez vous connecter à votre instance et créer un périmètre de l’application pour votre composant, ou réserver un périmètre à vérifier ultérieurement.
• Utiliser un serveur proxy avec extension de composant ui
  Utilisez un serveur proxy avec l’interface de ligne de commande Now pour définir une source de données distincte pour votre composant. Lors de l’utilisation d’un serveur proxy, l’instance transfère les demandes Now CLI au serveur proxy.
• Développer un composant
  Ajoutez le code de votre composant et testez-le à l’aide d’un serveur de développement local.
• Développer un composant pour Agent virtuel
  Créez un composant personnalisé Agent virtuel pour recueillir des informations d’entrée ou d’affichage dans l’interface Agent virtuel client.
• Ajouter un composant à Espace de travail d'agent
  Utilisez des composants personnalisés pour créer une interface personnalisée Espace de travail afin de répondre aux besoins spécifiques des agents de votre société.
• Déployer un composant sur une instance
  Déployez votre composant pour l’afficher dans votre instance en tant que module d’extension d’application.
• Modifier le périmètre de l’application d’un composant
  Modifiez le périmètre de l’application d’un composant si vous rencontrez des problèmes de périmètre lors du déploiement de votre composant sur une instance. Par exemple, vous avez peut-être défini un périmètre de l’application déjà utilisé ou non valide lors de la création d’un composant en mode hors ligne.