---
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


---

Développer un composant pour Agent virtuel
==========================================

Développer un composant pour Agent virtuel {#ariaid-title1}
===========================================================

* Rversion finale: Yokohama
* 
* Mis à jour 30 janv. 2025
* 
* ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 3 minutes de lecture

Créez un composant personnalisé Agent virtuel pour recueillir des informations d'entrée ou afficher des informations dans l'interface Agent virtuel client.

Types de Agent virtuel composants {#va-components__section_xk5_rfd_lmb}
-----------------------------------------------------------------------

Pour développer un composant pour Agent virtuel, ajoutez des propriétés et des actions spécifiques afin d'interagir avec l'interface Agent virtuel client. Les propriétés requises dépendent du type de composant que vous créez.  

Composant de réponse

:   Un composant de réponse fournit uniquement des informations à l'utilisateur, et ne collecte pas d'entrée ni ne gère l'interaction de l'utilisateur. Par exemple, un contrôle de carte qui ne nécessite pas d'entrée de l'utilisateur et qui n'apparaît qu'une seule fois dans la conversation.

    Ajoutez une propriété à votre composant de réponse pour gérer les données envoyées par le Agent virtuel serveur.  
    {#va-components__table_dql_lqd_lmb__entry__2}

    |      Propriété      |                                                                      Description                                                                       |
    |---------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------|
    | données de contrôle | Données initiales que le Agent virtuel serveur envoie à votre composant au fur et à mesure de l'exécution de la rubrique. Type de données : objet JSON |
    [Tableau 1. Propriétés des composants de sortie]

    {#va-components__table_dql_lqd_lmb}

Composant d'entrée

:   Un composant d'entrée affiche des informations et/ou recueille des entrées utilisateur. Il inclut la même propriété que le composant de sortie pour gérer les données envoyées par le serveur, mais a plus d'états possibles et nécessite une interaction de l'utilisateur.

    {#va-components__table_k3t_nqd_lmb__entry__2}

    |      Propriété      |                                                                                                                                                                            Description                                                                                                                                                                            |
    |---------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
    | données de contrôle | Données initiales que le Agent virtuel serveur envoie à votre composant au fur et à mesure de l'exécution de la rubrique. Type de données : objet JSON                                                                                                                                                                                                            |
    | valeur de réponse   | Données envoyées au composant à partir de la réponse de l'utilisateur, soit directement depuis le client, soit depuis le serveur en cas d'actualisation. À utiliser uniquement dans les composants qui nécessitent une entrée de l'utilisateur. Type de données : objet JSON                                                                                      |
    | forceCloseControl   | Marqueur indiquant si le composant peut accepter une entrée. Si la valeur est \<\< vrai \>\>, le contrôle se ferme et l'utilisateur ne peut pas interagir avec lui. Surveillez les changements sur le client pour mettre à jour cette valeur. À utiliser uniquement dans les composants qui nécessitent une entrée de l'utilisateur. Type de données : booléennes |
    [Tableau 2. Propriétés des composants d'entrée]

    {#va-components__table_k3t_nqd_lmb}

    Utilisez cette action pour émettre des données à partir de l'interaction de l'utilisateur.  
    {#va-components__table_pdz_frd_lmb__entry__2}

    |        Action         |                                                                              Description                                                                               |
    |-----------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
    | VA_CONTROL#VALUE_SENT | Données de réponse du client à envoyer au serveur. À utiliser uniquement dans les composants qui nécessitent une entrée de l'utilisateur. Type de données : objet JSON |
    [Tableau 3. Actions des composants d'entrée]

    {#va-components__table_pdz_frd_lmb}

États des composants d'entrée {#va-components__section_ggf_zhd_lmb}
-------------------------------------------------------------------

Parce qu'ils acceptent des données, les composants d'entrée doivent gérer plusieurs états. Le flux d'état est généralement le suivant :

1. Agent virtuel Affiche le composant personnalisé dans l'état En attente d'entrée.
2. L'utilisateur interagit avec le composant pour fournir une entrée.
3. Le composant ferme et envoie la propriété `responseValue` au serveur.
4. Le serveur exécute la logique côté serveur et renvoie le composant avec l'entrée de l'utilisateur au client.

{#va-components__ol_ew1_2vk_lmb}  

En attente d'entrée

:   État initial d'un composant en attente d'interaction de l'utilisateur. La propriété `controlData` est définie, mais la propriété `forceControlClosed` est false. Cet exemple montre un composant de curseur à l'état En attente d'entrée.

    Dans cet exemple, si l'utilisateur n'a pas fourni de `responseValue` et que le contrôle n'est pas fermé, le curseur et le bouton d'entrée s'affichent.  

        const {controlClosed, sliderVal, sliderMin, sliderMax} = state;
        return (<div class={{"slider-chat": true}}>
            {responseValue ? null :  <Fragment>
            <div class={{"slider-label": true}}>{label}</div>
            {controlClosed ? null : <Fragment>
                <div class={{"slider-container": true}}>
                            <input on-change={onSliderChange} type="range" min={sliderMin} max={sliderMax} value={sliderVal} class={{"slider": true}} />
                    <div class={{"slider-value": true}}>
                            {unitIcon && 
                             <div class={{"unit-icon": true}}><img src={unitIcon} /></div>
                             } 
                             {sliderVal} {unitName}
                        </div>
                <div class={{"button-container":true}}>
                    <now-button variant="primary" label={buttonText || 'Confirm'} />
                 </div></div></Fragment>}

Gestion de l'entrée

:   Dans l'exemple précédent, le curseur utilise un composant `now-button` , sur lequel l'utilisateur clique pour confirmer l'entrée et l'envoyer au serveur. Lorsque l'utilisateur clique sur le bouton, l'action `VA_CONTROL#VALUE_SENT` se déclenche avec la charge utile `responseValue` .

        'NOW_BUTTON#CLICKED': (data) => {
            const {updateState, dispatch, state: {sliderVal}} = data;
            updateState({controlClosed: true});
            dispatch('VA_CONTROL#VALUE_SENT', {
                value: {
                    sliderVal
                }
            }); 
        }

Fermé

:   Un composant fermé ne peut plus accepter d'entrée utilisateur. Les composants sont généralement fermés car :

    * L'utilisateur a répondu au composant. Le composant se ferme et la conversation se poursuit.
    * L'utilisateur a mis fin à la messagerie instantanée. Le serveur n'attend pas de réponse.
    {#va-components__ul_pts_spf_mmb}

    Par exemple, le composant slider n'affiche l'invite d'origine que lorsqu'elle est à l'état Fermé.

    ![Composant fermé qui n’attend plus l’entrée de l’utilisateur.]()

Envoi de la réponse

:   Une fois que l'utilisateur a répondu, le contrôle est restitué du côté de l'utilisateur de la conversation avec la valeur de la propriété `responseValue` .

    Par exemple, le curseur utilise cet extrait pour afficher la réponse.  

        {responseValue && <div className="response-container slider-value">
           {unitIcon && 
           <div className="unit-icon"><img src={unitIcon} /></div>
           } 
           {returnVal} {unitName}
        </div>}

Ajout du composant à Concepteur d'agent virtuel {#va-components__section_vmx_c3d_lmb}
-------------------------------------------------------------------------------------

Après avoir développé le composant et l'avoir déployé dans votre instance, ajoutez-le à Concepteur d'agent virtuel l'aide d'un contrôle et d'une définition personnalisés. Pour plus d'informations, consultez [Contrôles personnalisés de l'Agent virtuel](https://www.servicenow.com/docs/access?context=custom-controls&version=yokohama&pubname=yokohama-conversational-interfaces&ft:locale=en-US).
* **[Ajouter des propriétés pour communiquer avec Agent virtuel](https://servicenow-prod.fluidtopics.net/nHbYEsRufPgkkXruapsi5Q)**   
  Pour développer un composant pour Agent virtuel, ajoutez des propriétés et des actions spécifiques afin d'interagir avec l'interface Agent virtuel client. Les propriétés requises dépendent du type de composant que vous créez.
* **[Tester un composant pour Agent virtuel](https://servicenow-prod.fluidtopics.net/jLnrDAWGoX5tA_Ri2iPP3A)**   
  Testez votre Agent virtuel composant personnalisé avant de le déployer sur votre instance.