Clientseitige Skriptanwendungsfälle

  • Freigeben Version: Zurich
  • Aktualisiert 31. Juli 2025
  • 9 Minuten Lesedauer
  • Anwendungsfälle für clientseitige Skripts umfassen das Anzeigen von Feldnachrichten, Ändern der Formularfarben, Hinzufügen von Feldern und Erstellen von UI-Weiterleitungsaktionen.

    Feld zum Servicekatalog-Checkout hinzufügen

    Dies ist ein Beispiel für das Hinzufügen von Unternehmen Feld zum Bezahlen unter dem Angefordert für Feld mit nicht-Einkaufswagen-Layout-Makros, d. h. glide.sc.use_cart_layoutsIst Falsch .

    Vorbereitungen

    Erforderliche Rolle: admin

    Warum und wann dieser Vorgang ausgeführt wird

    Abbildung : 1. Feld „Angefordert für“
    Dialogfeld „angefordert für“ mit „Systemadministrator“ im Feld.

    Dieses Feld übergibt einen angegebenen Wert an Unternehmen Feld der Servicekatalog-Anforderung.

    In diesem Beispiel werden die folgenden Annahmen getroffen:

    • Die Instanz, die den zweistufigen Checkout verwendet. Wenn der zweistufige Checkout nicht aktiviert ist, aktivieren Sie ihn, bevor Sie beginnen. Weitere Informationen finden Sie unter Service Catalog checkout models.
    • Dieses Beispiel füllt das Feld Unternehmen im Formular einer Servicekatalog-Anforderung. Wenn das Feld nicht im Formular angezeigt wird, konfigurieren Sie das Formular, bevor Sie beginnen. Anweisungen dazu finden Sie unter Personalize a form.

    Prozedur

    1. Gehen Sie zu System-UI > UI-Makros, und wählen Sie servicecatalog_cart_template aus.
    2. Ermitteln Sie, wo versteckte Variablen deklariert sind, und fügen Sie die folgende Zeile hinzu:
      <input type="HIDDEN" name="cart_id" id="cart_id" value="$[sc_cart.sys_id]" />
    3. Suchen Sie den folgenden Code, der den Code für Angefordert für generiert:
      <tr class="header">
      <td width = "30%">
        ${gs.getMessage('Requested for')}:
        </td>
        <td width="70%">
          <label for="requestor_location">${gs.getMessage('Deliver to')}:</label>
        </td>
      </tr>
      <tr><td>$[SP]</td> 
      </tr>
        <tr><td valign="top">
          <j2:if test="$[jvar_can_delta_rf == false]">
            $[sc_cart.requested_for.getDisplayValue()]
          </j2:if>
          <j2:if test="$[jvar_can_delta_rf != false]">
            <g2:catalog_requested_for />
          </j2:if>
        </td>
        <td>
          <textarea id="requestor_location" style="width:100%" rows="4"       name="requestor_location" wrap="soft" onChange="catDeliveryAddress('$[sc_cart.sys_id]', 'requestor_location');"> 
            $[sc_cart.delivery_address]
          </textarea>
        </td>
      </tr>
      <tr>
        <td>$[SP]</td>
      </tr>
    4. Fügen Sie anschließend den folgenden Code hinzu:
      <tr class="header">
        <td colspan="2">Company</td>
      </tr>
      <tr>
        <td>$[SP]</td>
      </tr>
      <tr>
        <td colspan="2">
          <g2:ui_reference name="core_company" table="core_company" onchange="setCartValue()"/>
        </td>
      </tr>
      <tr>
        <td>$[SP]</td>
      </tr>
      Hinweis:
      Die „ui_reference“ Makro definiert ein Referenzfeld. Es gibt mehrere Makros für verschiedene Feldtypen. Beispiele für diese Feldtypen finden Sie unter System-UI -> UI-Makros. Diese Makros beginnen mit 'ui_'. In diesem Beispiel heißt das erstellte Referenzfeld core_company. Weitere Informationen finden Sie unter UI-Makros.
    5. Navigieren Sie jetzt zu System-UI > UI-Seiten, und wählen Sie die UI-Seite servicecatalog_checkout_one aus.
    6. Fügen Sie das folgende Skript zu hinzu Client-Skript Feld.
      function setCartValue() { 
        var newField = gel('core_company'); 
        var myCart = gel('cart_id'); 
        var cart_item = new GlideRecord('sc_cart_item');
        cart_item.addQuery('cart', myCart.value);
        cart_item.query(); 
        if(cart_item.next()) {
          cart_item.hints = "<hints><entry key='sysparm_processing_hint' value='setfield:request.company=" + newField.value + "'/></hints>";
          cart_item.update(); 
        } 
      }

      In diesem Beispiel heißt das Referenzfeld core_company, und das Feld, das in der Anforderung ausgefüllt wird, ist company. Wenn verschiedene Felder verwendet werden:

      • Suchen Sie nach dieser Zeile: var company = gel('core_company'); Ersetzen Sie core_company durch den Namen des Felds im Checkout.
      • Ersetzen Sie in der Zeile, die mit 'cart_item.hints' beginnt, 'request.company' durch den Namen des Felds, das im Anforderungsticket ausgefüllt werden soll, wobei 'request' die Anforderung ist, die generiert wird, und 'company' der Name des Felds.

    Ergebnisse

    Wenn ein Artikel bestellt wird, wird das Feld Unternehmen im Katalogformular angezeigt:

    Feld zum Bezahlvorgang des Servicekatalogs hinzugefügt

    Funktionalität für automatisches Ausfüllen hinzufügen

    Die Funktionalität für automatisches Ausfüllen wird auch als Incident-Vorlage, automatische Zuweisung, Schnellanruf, Anrufskript oder automatische Auffüllung bezeichnet.

    Dient zum automatischen Ausfüllen von Kurzbeschreibung Feld basierend auf Unterkategorie Ausgewählt:
    1. Erstellen Sie eine Suchtabelle.
    2. Füllen Sie das Schlüsselfeld aus, Unterkategorie .
    3. Füllen Sie das automatisch ausgefüllte Feld aus. Kurzbeschreibung .
    function onChange(control, oldValue, newValue, isLoading) { 
      if (isLoading) { return; } 
      var newrec = gel('sys_row');
      //Check if new record
      if (newrec.value == -1) { 
        var lookup = new GlideRecord('u_short_desc_lookup'); 
        lookup.addQuery('u_subcategory', g_form.getValue('subcategory'));
        lookup.query();
        var temp; //temp var - reusable
        if (lookup.next()) {
          temp = lookup.u_short_description;
            if (null != temp) { //Set the form value from lookup if there is a lookup value
              g_form.setValue('short_description', temp); } 
            else {
              g_form.setValue('short_description', "" ); } } 
       else { 
         //If a lookup record does not exist based on lookup.addQuery 
         //Then set to UNDEFINED or NULL depending on type
          g_form.setValue('short_description', ""); } } 
    }

    Sie können viele Felder ausfüllen oder Anrufskriptfragen in abrufen Kommentare Feld, damit Callcenter-Mitarbeiter gute Informationen sammeln und sie an einen Techniker weitergeben können.

    Festlegen eines Felds auf Passwortzurücksetzung
    Die Suchtabelle enthält einen Datensatz mit den folgenden Einstellungen für Schlüssel und automatisches Ausfüllen:
    • Unterkategorie = Passwort
    • Kurzbeschreibung = Passwortzurücksetzung
    Clientskripteinstellungen:
    • Typ = OnChange
    • Tabellenname = Incident
    • Feldname = Unterkategorie

    Wenn der Anwender die Unterkategorie von auswählt Passwort Im Incident-Formular sucht ein Clientskript nach dem übereinstimmenden Datensatz und legt die Kurzbeschreibung auf gleich fest Passwortzurücksetzung .

    Formularfarbe bei Statusänderung ändern

    Ändert die Farbe eines Formularfelds bei einer Statusänderung. Das Skript kann leicht geändert werden, um alle Eigenschaften beliebiger Objekte auf der Seite anzupassen, auf die über das HTML-DOM zugegriffen werden kann.

    Warnung:
    Die hier beschriebene Anpassung wurde für die Verwendung in bestimmten Fällen entwickelt und wird von Now Support nicht unterstützt. Diese Methode wird wie sie ist zur Verfügung gestellt und sollte vor der Implementierung gründlich getestet werden. Veröffentlichen Sie alle Fragen und Kommentare zu dieser Anpassung in unserem Community-Forum.

    Name: Formularfarbe bei Statusänderung ändern

    Typ : Client-Skript

    Beschreibung: Ändert die Farbe eines Formularfelds bei einer Statusänderung. Das Skript kann leicht geändert werden, um alle Eigenschaften beliebiger Objekte auf der Seite anzupassen, auf die über das HTML-DOM zugegriffen werden kann.

    Skript:
    function onChange(control, oldValue, newValue, isLoading) { 
      var elementID = gel("incident.priority");
        switch(newValue) { 
          case "1": elementID.style.backgroundColor = "red"; break; 
          case "2": elementID.style.backgroundColor = "tomato"; break;
          case "3": elementID.style.backgroundColor = "orange"; break;
          case "4": elementID.style.backgroundColor = "yellow"; break;
          case "5": elementID.style.backgroundColor = "green"; break; 
          default: elementID.style.backgroundColor = "white"; break; } }

    UI-Weiterleitungsaktion erstellen

    Mit dieser Lösung können Sie einen Datensatz beim Service Desk erstellen, ohne zu wissen, ob es sich um einen Incident oder ein Anforderungselement handelt. Der Service Desk kann den Datensatz dann an die entsprechende Tabelle weiterleiten.

    Vorbereitungen

    Erforderliche Rolle: Administrator

    Prozedur

    1. Erstellen Sie eine neue Tabelle, die die Tabelle Aufgabe erweitert (z. B. „Neuer Anruf“).
    2. Erstellen Sie ein Modul, um einen neuen Datensatz für neue Anrufe zu erstellen.
    3. Erstellen Sie beliebige Felder in der Tabelle „Neuer Anruf“.

      Die einzigen benötigten Felder sind diejenigen, die erforderlich sind, um zu bestimmen, ob der neue Anruf an einen Incident oder ein Anforderungselement weitergeleitet werden soll. Stellen Sie sicher, dass das Formular alle Felder enthält, die Sie an den Incident oder das Anforderungselement übergeben möchten. In diesem Beispiel werden im Formular folgende Elemente erstellt:

      • Angefordert für (Referenz)
      • Standort (Referenz)
      • Anruftyp (Auswahl mit zwei Werten – Incident und Anforderung)
      • Anforderungselement (Verweis auf die Elementtabelle sc_cat_item)
    4. Fügen Sie einige UI-Richtlinien hinzu, um ein paar Felder als obligatorisch festzulegen, und blenden Sie das Feld Anforderungselement basierend auf der Auswahl für Anruftyp aus.
    5. Entfernen Sie nicht benötigte Schaltflächen und Funktionen aus dem Formular.
    6. Erstellen Sie eine neue UI Actionschaltfläche.
      Diese Schaltfläche leitet den Benutzer entweder zu einem Incident oder einer Anforderung um. Sie erstellt außerdem den Incident-Datensatz und kopiert Werte in das Incident- und das Anforderungselementformular.
      var reqItem = current.u_item;
      var requestedFor = current.u_requested_for;
      var location = current.location;
      
      if(current.u_incident_request == 'Incident'){
        //Create a new incident record and redirect to the new incident
        var rec = new GlideRecord('incident');
        rec.initialize();
        rec.caller_id = requestedFor;
        rec.location = location;
        rec.insert();
        action.setRedirectURL(rec);
      }
      
      if(current.u_incident_request == 'Request'){
        //Build the url and route the user to the request item
        var url = '';
        if(current.u_item.sys_class_name == 'sc_cat_item_guide'){
          url = 'com.glideapp.servicecatalog_cat_item_guide_view.do?sysparm_initial=true&sysparm_guide=' + 
            reqItem + '&sysparm_user=' + requestedFor + '&sysparm_location=' + location;
        }
        else{
          url = 'com.glideapp.servicecatalog_cat_item_view.do?sysparm_id=' + reqItem + '&sysparm_user=' +  
            requestedFor + '&sysparm_location=' + location;
        }
        action.setRedirectURL(url);
      }
    7. Die Schaltfläche Route im vorherigen Beispiel übergibt die Werte für Angefordert für und Standort in der URL an das Anforderungselementformular.
      Stellen Sie sicher, dass Ihr Element, Ihr Datensatzersteller oder Ihr Bestellleitfaden Variablen namens requested_for und location enthält, die diese Werte mithilfe des folgenden Client-Skripts zuordnen. Die Menge an Informationen, die Sie übergeben können, ist begrenzt, da die URL eine beschränkte Länge hat. Senden Sie mit dieser Methode keine Informationen aus langen Textfeldern.
      function onLoad() {
        var url = document.location.toString();
        var userKey = 'sysparm_user=';
        var locKey = 'sysparm_location=';
        var userPosition = url.indexOf(userKey);
        var locPosition = url.indexOf(locKey)
        if (userPosition != -1) {
          var user = url.substr(userPosition+userKey.length, 32);
          g_form.setValue('requested_for', user);
        }
        if (locPosition != -1) {
          var loc = url.substr(locPosition+locKey.length, 32);
          g_form.setValue('location', loc);
        }
      }

    Feldmeldungen anzeigen

    Anstatt die JavaScript-Methode alert() zu verwenden, können Sie einen Fehler im Formular selbst anzeigen, was übersichtlicher ist. Die Methoden showFieldMsg() und hideFieldMsg() können verwendet werden, um eine Meldung direkt unter dem Feld selbst anzuzeigen.

    showFieldMsg und hideFieldMsg sind Methoden, die mit dem g_form-Objekt verwendet werden können.

    Diese Methoden werden verwendet, um die Formularansicht von Datensätzen (Incident-, Problem- und Change-Formulare) zu ändern. Diese Methoden sind möglicherweise auch in anderen Client-Skripts verfügbar, müssen jedoch getestet werden, um festzustellen, ob sie wie erwartet funktionieren.

    Wenn für ein Formular beim Laden eine Feldmeldung ausgegeben wird, wird ein Bildlauf im Formular durchgeführt, um sicherzustellen, dass die Feldmeldung sichtbar ist. So wird sichergestellt, dass Benutzer eine Feldmeldung nicht übersehen, weil sie außerhalb des Bildschirms war.

    Die globale Eigenschaft glide.ui.scroll_to_message_field steuert den automatischen Bildlauf für Meldungen, wenn sich das Formularfeld außerhalb des Bildschirms befindet (im Formular wird ein Bildlauf zum Steuerelement oder Feld durchgeführt).

    Tabelle : 1. Methodendetail
    Methodendetail Parameter Beispiel
    showFieldMsg(imput, message, type, [scrollForm])
    • input – Name des Felds oder Steuerelements
    • message – Meldung, die angezeigt werden soll
    • type – „Information“, „Fehler“ oder „Warnung“; der Standardwert ist „Information“, wenn keine Angabe gemacht wird.
    • scrollForm – (optional) Legen Sie scrollForm auf „false“ fest, um den Bildlauf zur Feldmeldung außerhalb des Bildschirms zu verhindern.

    Fehlermeldung

    g_form.showFieldMsg('impact','Low impact not allowed with High priority','error');

    Geringe Auswirkung bei Nachricht mit hoher Priorität nicht zulässig.

    Informationsnachricht

    g_form.showFieldMsg('impact', 'Low impact response time can be one week','info');
    //or this defaults to info type
    //g_form.showFieldMsg('impact', 'Low impact response time can be one week');

    Die Antwortzeit mit geringer Auswirkung kann eine Woche betragen.

    hideFieldMsg(input)
    • input – Name des Felds oder Steuerelements
    • clearAll – (optional) boolean Parameter, der angibt, ob alle Meldungen gelöscht werden sollen. Bei „true“ werden alle Meldungen für das Feld gelöscht. Bei „falsch“ oder „leer“ wird nur die erste Nachricht entfernt
    Meldungen entfernen
    //this will clear the first message printed to the field
    g_form.hideFieldMsg('impact');

    Legacy-Unterstützung

    Die ShowErrorBox() Und AusblendenErrorBox() Methoden werden nicht empfohlen.

    Client- und Servercode in einer UI-Aktion verwenden

    Sie können ein Skript verwenden, um Eingaben zu validieren, wenn Sie auf der Client-Seite auf eine UI-Aktion klicken, bevor Sie den Datensatz auf der Serverseite aktualisieren. Der Anwender muss nicht zweimal auf die Schaltfläche klicken, um die erforderlichen Felder zu validieren und den Datensatz zu aktualisieren.

    Das Skript ruft die Client-Funktion zur clientseitigen Validierung auf, und die UI-Aktion schließt die Aufgabe ab, wenn sie bestanden wird. Die Code, der ohne Klick ausgeführt wird Die Anweisung stellt sicher, dass die serverseitige Funktion erst ausgeführt wird, wenn die Clientfunktion nicht mehr ausgeführt wird. Wenn erfolgreich, wird die serverseitige Funktion ausgeführt und aktualisiert den Datensatz.

    // Client-side onclick function
    function resolveIncident() {
      // Set the 'Incident state' and 'State' values to 'Resolved', and display mandatory fields
      g_form.setValue('incident_state', 6);
      g_form.setValue('state', 6);
      g_form.setValue('resolved_by', g_user.userID);
    
      // Call the UI action and skip the 'onclick' function
      gsftSubmit(null, g_form.getFormElement(), 'resolve_incident'); //MUST call the 'Action name' set in this UI Action
    }
    
    // Code that runs without 'onclick'
    // Ensure call to server-side function with no browser errors
    if (typeof window == 'undefined')
      serverResolve();
    
    // Server-side function
    function serverResolve() {
      current.incident_state = IncidentState.RESOLVED;
      current.state = IncidentState.RESOLVED;
      current.resolved_by = gs.getUserID();
      current.update();
    }

    GsftSubmit(Zeichenfolgensteuerung, Objektformular, Zeichenfolgenaktion_Name)

    Sendet ein Formular, als ob der Anwender auf eine UI-Aktion geklickt hätte, nachdem er auf Pflichtfelder überprüft und ausgeführt wurde OnSubmit() Client-Skripts. Ermöglicht das Aufrufen von clientseitigem Code und serverseitigem Code in einer einzigen UI-Aktion.

    Tabelle : 2. Parameter
    Name Typ Beschreibung
    Kontrolle Zeichenfolge Name einer Formularschaltfläche, auf die Sie einen Anwenderklick simulieren möchten. Verwenden Null Andernfalls.
    Formular Objekt Optional. Das Formularelement, das die übermittelte Eingabe enthält. Sie können diesen Wert abrufen, indem Sie aufrufen G_Form.getFormElement() Methode.
    Action_Name Zeichenfolge Aktionsname. Dieser Wert wird im Datensatz angegeben, der in der Tabelle „UI-Aktionen“ [sys_ui_action] aufgeführt ist.

    Beispiel: „Resolve_Incident“ Ist der Aktionsname von Lösen Schaltfläche in der Tabelle „Incident“ [Incident].