--- sourceDocument: Yokohama Créer ou modifier des applications sourceDocumentLink: https://servicenow-prod.fluidtopics.net/r/fr-FR/yokohama/application-development Release : - yokohama ft:locale : - fr-FR ft:publication_title : - Yokohama Créer ou modifier des applications ft:clusterId : - cadev bundleId : - cadev workflow : - Creator --- Générateur de composants personnalisé ===================================== Générateur de composants personnalisé {#ariaid-title1} ====================================================== * Rversion finale: Yokohama * * Mis à jour 30 janv. 2025 * * ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 3 minutes de lecture 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 fourni 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](https://developer.servicenow.com/dev.do#!/reference/next-experience/components?&query=&order_by=nameAsc&limit=120&offset=0&categories%5B%5D=uib_component&categories%5B%5D=uib_macroponent-component&categories%5B%5D=uib_facades). Avantages de la création de composants personnalisés {#custom-components__section_vc3_rrj_xkb} ---------------------------------------------------------------------------------------------- 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. * Rendez vos employés plus efficaces 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. {#custom-components__ul_n3w_trj_xkb} 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 Cadre de travail de l'interface utilisateur Next Experience et le extension 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](https://developer.servicenow.com/dev.do#!/reference/next-experience/xanadu/ui-framework/api-reference/effect-http). 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é](https://www.servicenow.com/docs/access?context=scripted-graph-ql&version=yokohama&pubname=yokohama-api-reference&ft:locale=en-US). À savoir avant de commencer {#custom-components__section_xjb_y5h_3kb} --------------------------------------------------------------------- Avant de commencer à concevoir et à créer votre composant, assurez-vous d'avoir : * Quelques 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 du gestionnaire de packages de nœuds (npm). * La version la plus récente de Node.js installée sur votre ordinateur local. Pour plus d'informations, consultez [Node.js](https://nodejs.org). * Le ServiceNow CLI installé sur votre ordinateur. {#custom-components__ul_ozv_4d3_3kb} Cadre de travail de l'interface utilisateur Next Experience {#custom-components__section_gc4_2cw_pkb} ----------------------------------------------------------------------------------------------------- Il s'agit Cadre de travail de l'interface utilisateur Next Experience d'un framework JavaScript qui vous permet d'étendre vos applications et de créer des composants Web réutilisables dans toutes vos applications. L'utilisation de permet d'effectuer les Cadre de travail de l'interface utilisateur Next Experience opérations suivantes : * 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 travail. {#custom-components__ul_ujt_xk5_rkb} Pour plus d'informations, consultez le [ServiceNow® Site Developer](https://developer.servicenow.com/dev.do#!/reference/next-experience/xanadu/ui-framework/getting-started/introduction). extension de composant ui et le flux de développement {#custom-components__section_wdv_hsv_pkb} ----------------------------------------------------------------------------------------------- Il s'agit extension de composant ui d'une extension de la qui vous permet de développer des composants personnalisés à l'aide de la ServiceNow CLI commande Cadre de travail de l'interface utilisateur Next Experience. Avec , extension de composant uivous pouvez : * Créez l'ensemble des 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. {#custom-components__ul_dfn_wb4_rkb} Pour plus d'informations, consultez le [ServiceNow® Site Developer](https://developer.servicenow.com/dev.do#!/reference/next-experience/xanadu/cli/getting-started). Périmètre de l'application {#custom-components__section_qjj_w4t_tkb} -------------------------------------------------------------------- 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 sur l'instance. Vous pouvez fournir un périmètre d'application pour le composant à utiliser comme identificateur d'espace de noms. Utilisez les instructions 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](https://servicenow-prod.fluidtopics.net/usp5moSQamlaCenmSCm_7Q "La définition du périmètre de l’application protège les applications en identifiant et en limitant l’accès aux fichiers et données d’application."). Lors de la réservation d'un périmètre d'application, suivez les exigences suivantes : * Maximum : 18 caractères. * Étui : étui serpent. * Format : `x_customerprefix_componentname`, où : * `CustomerPrefix` est la valeur de la glide.appcreator.company.code propriété système de votre instance. * `ComponentName` est la valeur fournie dans le paramètre `Nom` du composant lors de la création du projet. {#custom-components__scope-params} {#custom-components__ul_c2x_jrt_tkb} Si vous ne fournissez pas de périmètre de l'application lors de la création de votre projet de composant, Now CLI en crée un pour vous. Vous pouvez également ajouter une valeur au paramètre `scopeName` dans le fichier now-ui.json . Guide de référence {#custom-components__section_zjs_lyz_xkb} ------------------------------------------------------------ Pour consulter le guide de référence de l'interface de ligne de commande Now, visitez le [site des développeurs](https://developer.servicenow.com/dev.do#!/reference/next-experience/xanadu/cli/getting-started). * **[Développer un composant pour Agent virtuel](https://servicenow-prod.fluidtopics.net/rxhiKHdTUSaZyvLeJXY5eg)** Créez un composant personnalisé Agent virtuel pour recueillir des informations d'entrée ou afficher des informations dans l'interface Agent virtuel client. * **[Ajouter un composant à Espace de travail d'agent](https://servicenow-prod.fluidtopics.net/Q3Fq3KoiyPpKlPyMU5LBTQ#workspace-component)** 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é.