---
sourceDocument: Yokohama Erstellen oder ändern Sie Anwendungen
sourceDocumentLink: https://servicenow-prod.fluidtopics.net/r/de-DE/yokohama/application-development

 Release :

    - yokohama

ft:locale :

    - de-DE

ft:publication_title :

    - Yokohama Erstellen oder ändern Sie Anwendungen

ft:clusterId :

    - cadev

bundleId :

    - cadev

workflow :

    - Creator


---

Entwickeln Sie eine Komponente für Virtual Agent
================================================

Entwickeln Sie eine Komponente für Virtual Agent {#ariaid-title1}
=================================================================

* Freigeben Version: Yokohama
* 
* Aktualisiert 30. Januar 2025
* 
* ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 3 Minuten Lesedauer

Erstellen Sie eine anwenderdefinierte Komponente Virtual Agent, um Eingaben zu sammeln oder Informationen auf der Clientoberfläche Virtual Agent anzuzeigen.

Typen von Virtual Agent -Komponenten {#va-components__section_xk5_rfd_lmb}
--------------------------------------------------------------------------

Um eine -Komponente für Virtual Agentzu entwickeln, fügen Sie bestimmte Eigenschaften und Aktionen für die Interaktion mit der Clientschnittstelle Virtual Agent hinzu. Die erforderlichen Eigenschaften hängen vom Typ der Komponente ab, die Sie erstellen.  

Antwortkomponente

:   Eine Antwortkomponente stellt dem Benutzer nur Informationen bereit und sammelt keine Eingaben oder verarbeitet die Benutzerinteraktion. Zum Beispiel ein Kartensteuerelement, das keine Benutzereingabe erfordert und nur einmal in der Konversation vorhanden ist.

    Fügen Sie Ihrer Antwortkomponente eine Eigenschaft hinzu, um die vom Server Virtual Agent gesendeten Daten zu verarbeiten.  
    {#va-components__table_dql_lqd_lmb__entry__2}

    |   Eigenschaft   |                                                            Beschreibung                                                             |
    |-----------------|-------------------------------------------------------------------------------------------------------------------------------------|
    | Steuerungsdaten | Anfängliche Daten, die der Server Virtual Agent an Ihre Komponente sendet, während das Thema ausgeführt wird. Datentyp: JSON-Objekt |
    [Tabelle : 1. Eigenschaften der Ausgabekomponente]

    {#va-components__table_dql_lqd_lmb}

Eingabekomponente

:   Eine Eingabekomponente zeigt Informationen an und/oder sammelt Benutzereingaben. Sie enthält dieselbe Eigenschaft wie die Ausgabekomponente zur Verarbeitung der vom Server gesendeten Daten, verfügt jedoch über mehr mögliche Status und erfordert eine Benutzerinteraktion.

    {#va-components__table_k3t_nqd_lmb__entry__2}

    |    Eigenschaft    |                                                                                                                                                             Beschreibung                                                                                                                                                              |
    |-------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
    | Steuerungsdaten   | Anfängliche Daten, die der Server Virtual Agent an Ihre Komponente sendet, während das Thema ausgeführt wird. Datentyp: JSON-Objekt                                                                                                                                                                                                   |
    | responseValue     | Daten, die von der Antwort des Anwenders an die Komponente gesendet werden, entweder direkt vom Client oder im Falle einer Aktualisierung vom Server. Verwenden Sie nur in Komponenten, die Benutzereingaben erfordern. Datentyp: JSON-Objekt                                                                                         |
    | forceCloseControl | Kennzeichnung, die angibt, ob die Komponente Eingaben akzeptieren kann. Bei „wahr" wird das Steuerelement geschlossen, und der Benutzer kann nicht mit ihm interagieren. Überwachen Sie Changes auf dem Client, um diesen Wert zu aktualisieren. Verwenden Sie nur in Komponenten, die Benutzereingaben erfordern. Datentyp: Boolesch |
    [Tabelle : 2. Eigenschaften der Eingabekomponente]

    {#va-components__table_k3t_nqd_lmb}

    Diese Aktion verwenden, um Daten aus der Anwenderinteraktion auszugeben.  
    {#va-components__table_pdz_frd_lmb__entry__2}

    |        Aktion         |                                                                        Beschreibung                                                                        |
    |-----------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------|
    | VA_CONTROL#VALUE_SENT | Antwortdaten vom Client, die an den Server gesendet werden sollen. Verwenden Sie nur in Komponenten, die Benutzereingaben erfordern. Datentyp: JSON-Objekt |
    [Tabelle : 3. Aktionen der Eingabekomponente]

    {#va-components__table_pdz_frd_lmb}

Status der Eingabekomponenten {#va-components__section_ggf_zhd_lmb}
-------------------------------------------------------------------

Da sie Daten akzeptieren, müssen Eingabekomponenten mehrere Status verarbeiten. Der Status-Flow sieht im Allgemeinen wie folgt aus:

1. Virtual Agent zeigt die anwenderdefinierte Komponente im Status „Warten auf Eingabe" an.
2. Der Benutzer interagiert mit der Komponente, um Eingaben zu machen.
3. Die Komponente wird geschlossen und sendet die Eigenschaft `responseValue` an den Server.
4. Der -Server führt die serverseitige Logik aus und sendet die Komponente mit der Eingabe des Benutzers an den Client zurück.

{#va-components__ol_ew1_2vk_lmb}  

Warten auf Eingabe

:   Der Anfangsstatus einer Komponente, die auf eine Benutzerinteraktion wartet. Die Eigenschaft `„controlData"` ist festgelegt, die Eigenschaft `„forceControlClosed"` ist jedoch „falsch". Dieses Beispiel zeigt eine Schiebereglerkomponente im Status „Warten auf Eingabe".

    Wenn in diesem Beispiel der Benutzer keinen `Antwortwert` angegeben hat und das Steuerelement nicht geschlossen ist, werden der Schieberegler und die Eingabeschaltfläche angezeigt.  

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

Verarbeitungseingabe

:   Im vorherigen Beispiel verwendet der Schieberegler eine `now-button` -Komponente, auf die der Benutzer klickt, um die Eingabe zu bestätigen und an den Server zu senden. Wenn der Benutzer auf die Schaltfläche klickt, wird die Aktion `VA_CONTROL#VALUE_SENT` mit der Nutzlast `responseValue` ausgelöst.

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

Geschlossen

:   Eine geschlossene Komponente kann keine Benutzereingabe mehr akzeptieren. Komponenten sind aus folgenden Gründen generell geschlossen:

    * Der Anwender hat auf die Komponente geantwortet. Die Komponente wird geschlossen, und die Konversation wird fortgesetzt.
    * Der Anwender hat den Chat beendet. Der Server wartet nicht auf eine Antwort.
    {#va-components__ul_pts_spf_mmb}

    Beispielsweise rendert die Schiebereglerkomponente die ursprüngliche Eingabeaufforderung nur im Status „Geschlossen".

    ![Geschlossene Komponente, die nicht mehr auf Benutzereingaben wartet.]()

Antwort wird gesendet

:   Nachdem der Benutzer geantwortet hat, wird das Steuerelement auf der Seite des Benutzers in der Konversation mit dem Wert der Eigenschaft `responseValue` erneut gerendert.

    Beispielsweise verwendet die Schiebereglersteuerung dieses Snippet, um die Antwort zu rendern.  

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

Die Komponente wird zu hinzugefügt Virtual Agent-Designer {#va-components__section_vmx_c3d_lmb}
-----------------------------------------------------------------------------------------------

Nachdem Sie die Komponente entwickelt und in Ihrer Instanz bereitgestellt haben, fügen Sie sie mithilfe eines anwenderdefinierten Steuerelements und einer Definition zu Virtual Agent-Designer hinzu. Weitere Informationen finden Sie unter [Anwenderdefinierte Steuerungen für Virtual Agent](https://www.servicenow.com/docs/access?context=custom-controls&version=yokohama&pubname=yokohama-conversational-interfaces&ft:locale=en-US).
* **[Fügen Sie Eigenschaften für die Kommunikation mit hinzu Virtual Agent](https://servicenow-prod.fluidtopics.net/D2PEZaRlM2SYh8sWwKHJvg)**   
  Um eine -Komponente für Virtual Agentzu entwickeln, fügen Sie bestimmte Eigenschaften und Aktionen für die Interaktion mit der Clientschnittstelle Virtual Agent hinzu. Die erforderlichen Eigenschaften hängen vom Typ der Komponente ab, die Sie erstellen.
* **[Testen Sie eine Komponente für Virtual Agent](https://servicenow-prod.fluidtopics.net/sevH4i3j9pFYi197F39qmg)**   
  Testen Sie Ihre anwenderdefinierte Komponente Virtual Agent, bevor Sie sie in Ihrer -Instanz bereitstellen.