SharePoint Controls mit JavaScript customizen
Folgendes Szenario: In einer Aufgabenliste gibt es eine Spalte Status mit insgesamt 8 Auswahlmöglichkeiten (RadioButtons). Den Status sollen die User selbst setzen können, allerdings soll immer nur der vorige und der nachfolgende Status zur Auswahl stehen (Die nicht zur Auswahl stehen sollen deaktiviert werden). Dazu gibt es verschiedene Lösungsmöglichkeiten:
- Ein eigener Fieldtype. Der müsste in VisualStudio implementiert werden und wird dann als Feature deployed.
- Stichwort Workflow: Ggf. könnte man darüber nachdenken, den Ablauf komplett zu ändern. Ist es möglich, das Setzen des Status in einen Workflow auszulagern? Man könnte in einer angepassten EditForm dem User dann die Buttons “Weiter” und “Zurück” anbieten und der WF würde dann den entsprechenden Status eintragen.
- JavaScript: Wenn das ganze NICHT sicherheitsrelevant ist, sondern NUR dem Komfort dient, dann kann man clientseitig mit JavaScript eingreifen.
Dem Titel des Blogeintrags folgend schauen wir uns also die letztere Variante an
Nehmen wir also eine einfache Liste und fügen dieser eine Spalte “Status” vom Typ “Auswahl (Menü)” hinzu. Die weiteren Einstellungen findet Ihr im Screenshot.
Das EditFormular sieht dann standardmäßig wie folgt aus:
Hier soll nun die Auswahl auf den nächsten Eintrag (”Status 2″) eingeschränkt werden. Also rein in den SharePoint Designer und die EditForm.aspx der Liste öffnen. ACHTUNG: Niemals die originale EditForm.aspx verändern!!! Wie man sich eine neue EditForm erzeugt und vorbereitet findet Ihr z.B. hier: http://kalsing.blogspot.com/2006/11/create-custom-list-form-for-sharepoint.html
Im Menü des neuen DataForm WebParts bitte “Show with sample data” bzw. “Mit Beispieldaten anzeigen” wählen:
Im HTML Code der Seite müsst Ihr nun der Tabellenzeile, in der die Status angezeigt werden, eine eindeutige ID geben:
Und dann geht’s endlich ans JavaScript:
Da unser Script “OnLoad” ausgeführt werden soll und wir im SharePoint hier kein Body Tag haben müssen wir das Script mit “_spBodyOnLoadFunctionNames.push(”fixStatus”);” anmelden. Der Rest sollte eigentlich selbsterklärend sein. Einfach die RadioButtons raussuchen und dann wie gewünscht disablen bzw. enablen. Ginge vermutlich noch eleganter als ich es hier getan habe (freue mich auf Kommentare;-)).
<script type=”text/javascript”>
_spBodyOnLoadFunctionNames.push(”fixStatus”);
function fixStatus() {
var zeile = document.getElementById(”eindeutigeID”);
var radioButtons = new Array(8);
var counter = 0;
var checkedID = 0;
for (var i = 0; i < zeile.all.length; i++) {
var element = zeile.all[i];
if (element.type == “radio”) {
radioButtons[counter] = element;
if(element.checked == true)
checkedID = counter;
element.disabled = true;
counter++;
}
}
for (var i = 0; i < 8; i++) {
if(i >= checkedID – 1 && i <= checkedID + 1)
radioButtons[i].disabled = false;
}
}
</script>
So sollte es nun aussehen (die Controls für Status 2, Status 3 und Status 4 sind aktiviert, der Rest deaktiviert):
Happy SharePointing!
[...] SharePoint Controls mit JavaScript customizen [...]
Also ich erkenne in den ScreenShots keinen Unterschied zwischen dem Standardformular und, jenem mit der SharePoint-Solutions. Vielleicht habe ich auch nur die Aufgabenstellung missverstandne, aber falls nicht kann man ja noch den richtigen ScreenShot für das JavaScript-Formular online stellen!
lg, Kristof
Ah! Die sollen nicht ausgeblendet werden, sondern nur disabled! Sorry, diese kleine Graunuance Unterschied hab ich nicht sofort gesehen.
Hallo Kristof,
sorry, das ist wohl ein wenig missverständlich formuliert. Ich schrieb, dass die Controls nicht “zur Auswahl stehen” sollen. Im Beispiel habe ich die Controls deaktiviert. Man hätte sie aber natürlich auch ausblenden können, dann wäre es deutlicher gewesen. Ich habe die “Aufgabenstellung” ergänzt. Danke für Deinen Hinweis.
Thomas