Personenfelder vorbelegen mit jQuery

Vor einigen Tagen hatte ich hier einen Beitrag geschrieben, der zeigt, wie man Personenfelder mit JavaScript vorbelegen kann. Dort wurden die standardmäßig vorhandenen Möglichkeiten verwendet. In diesem Beitrag wird gezeigt, wie man das Ganze mit Hilfe von jQuery und damit deutlich einfacher erledigen kann. Außerdem hat das den Vorteil, daß man die gewünschten Personenfelder über ihren internen Namen ansprechen kann (anstatt über ihren Index wie im anderen Beitrag).

Ich verwende hier jQuery 1.6.1, ganz einfach weil es ohnehin bereits auf dem Server vorhanden war. Jede neuere (und wahrscheinlich auch ältere) Version sollte aber ebenfalls funktionieren. Ich habe die jQuery-Bibliothek hier aus dem Dateisystem, d.h. aus einem Unterordner von 14\TEMPLATE\LAYOUTS eingebunden, aber man kann sie auch innerhalb einer Website z.B. in die Formatbibliothek hochladen und von dort verlinken.

Die grundsätzliche Vorgehensweise ist hier dieselbe, wie beim vorigen Beitrag: man ermittelt den aktuellen Benutzer per Client Object Model und schreibt nach einem executeQueryAsync dessen Namen in das gewünschte Feld. Ich gehe hier also nur darauf ein, wie man mit jQuery auf ein Personenfeld zugreift.

Vor dem eigentlichen Script muß zunächst jQuery eingebunden werden:

<script type="text/javascript" src="/_layouts/Demo/jquery-1.6.1.min.js"></script>

Nachdem der gewünschte Benutzer erfolgreich geladen wurde, definieren wir zunächst einen regulären Ausdruck, der zur Identifizierung des gewünschten Personenfeldes verwendet wird:

var searchRegEx = RegExp("Fieldname=\"PeopleField\"", "gi");

Dann benutzen wir jQuery um damit alle Tabellenzellen der rechten Seite eines Formulars durchzugehen. Wir verwenden dazu die dort verwendete CSS-Klasse:

$("td.ms-formbody").each(function () {
  // $(this) entspricht hier einer Tabellenzelle
  // eines Listenformulars
});

Innerhalb der Tabellenzelle suchen wir jetzt nach dem vorher definierten regulären Ausdruck:

if (searchRegEx.test($(this).html())) {
  // wir haben die richtige Zelle gefunden
}

Jetzt können wir relativ einfach auf die Bestandteile des Personenfeldes zugreifen, also auf das <div> für die Standardeingabe und das <textarea> für ältere Browser, und sie mit dem Namen des Benutzers belegen:

$("div[Title=’Personenauswahl‘]", this).html(currentUser.get_title());
$("textarea[Title=’Personenauswahl‘]", this).val(currentUser.get_title());

Wichtig: die Elemente warden über ihr title-Attribut identifiziert, das bei Personenfeldern immer dieselben Werte enthält. Allerdings unterscheiden sich die Werte je nach Sprache. Bei einer englischen Website steht dort "People Picker" statt "Personenauswahl".

Damit steht der Name schon mal im Personenfeld. Wenn man den Namen auch gleich validieren möchte, so daß er im Feld wie gewohnt unterstrichen dargestellt wird, kann man einfach noch einen Klick auf den entsprechenden Button simulieren:

$("img[Title=’Namen überprüfen‘]", this).trigger("click");

Wichtig: auch hier wird wieder je nach Sprache unterschieden. Englisch steht dort "Check names" statt "Namen überprüfen".

Auch hier nochmal der gesamte JavaScript-Code zum bequemen Kopieren&Einfügen:

<script type="text/javascript" src="/_layouts/Demo/jquery-1.6.1.min.js"></script>
<script type="text/javascript">
ExecuteOrDelayUntilScriptLoaded(setPicker, "sp.js");
function setPicker() {
  var ctx = SP.ClientContext.get_current(),
      web = ctx.get_web(),
      currentUser = web.get_currentUser(),
      fieldName = "PeopleField",
      searchRegEx = RegExp("Fieldname=\"" + fieldName + "\"", "gi");

  ctx.load(currentUser);
  ctx.executeQueryAsync(function () {
      $("td.ms-formbody").each(function () {
        if (searchRegEx.test($(this).html())) {
          $("div[Title=’Personenauswahl‘]", this).html(currentUser.get_title());
          $("textarea[Title=’Personenauswahl‘]", this).val(currentUser.get_title());
          $("img[Title=’Namen überprüfen‘]", this).trigger("click");
          return;
        }
      });
    }, function (sender, args) {
      alert("Fehler: " + args.get_message());
    }
  );
}
</script>

Ein Gedanke zu “Personenfelder vorbelegen mit jQuery

  1. Hallo Herr Fandrich, ich wollte die Personenfelder an Hand des Labels setzen, das ist für die Benutzer leicher nachzuvollziehen.

    setPerson = function ( label, name) {
    if ($(„H3:contains(‚“ + label + „‚)“).parent().parent().find(„div[Title=’Personenauswahl‘]“).text() == „“) {
    $(„H3:contains(‚“ + label + „‚)“).parent().parent().find(„div[Title=’Personenauswahl‘]“).text(name);
    $(„H3:contains(‚“ + label + „‚)“).parent().parent().find(„textarea[Title=’Personenauswahl‘]“).text(name);
    }
    }

    dann in document.ready:

    setPerson(„Labelname“, „Jon, Jonson“);
    klappt super! Auch Personenfelder mit identischen Labels werden vorbelegt.
    Vielen Dank für den Interessanten Artikel.

    Gefällt mir

Kommentar verfassen

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s