Générateur de composants personnalisé

Développez des composants personnalisés à l’aide des Cadre de travail de l'interface utilisateur Next Experience fichiers et .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, visitez le 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 à concevoir et à construire 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 vos applications. L’utilisation de la Cadre de travail de l'interface utilisateur Next Experience vous permet de :

• 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 le ServiceNow® Site Developer.

extension de composant ui et flux de développement

Il extension de composant ui s’agit d’une extension de la ServiceNow CLI qui 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 requis pour développer un composant ou 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 est déployé dans une application incluse dans le périmètre sur l’instance. Vous pouvez fournir un périmètre d’application pour que le composant l’utilise comme identificateur d’espace de noms. Utilisez les directives relatives à l’identificateur d’espace de noms pour le développement d’application sur l’instance. Pour plus d’informations, consultez Périmètre de l’application.

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

• Maximum : 18 caractères.

• Cas : cas de 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 name du composant lors de la création du projet.

Si vous ne fournissez pas de périmètre d’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 packages de nœuds (npm) et le extension de composant uifichier . Ces outils vous permettent de développer et de générer des composants localement, puis de les déployer sur votre instance.
• Configurez votre projet
  Créez le composant, le projet et l’ensemble de fichiers requis pour développer un composant. Vous pouvez vous connecter à votre instance et créer un périmètre d’application pour votre composant, ou réserver un périmètre pour vérification ultérieure.
• 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 entreprise.
• Déployer un composant dans 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 pouvez avoir défini un périmètre d’application déjà utilisé ou non valide lors de la création d’un composant en mode hors ligne.