Fortschritt-Balken in Nintex-Formular realisieren
in Nintex, SharePoint

Fortschritt-Balken in Nintex-Formular realisieren

Wer schon mit Nintex Workflow und Nintex Forms gearbeitet hat, weißt, wie einfach es ist, ein ansprechendes Formular in Nintex erstellen zu können. Mit Unterstützung von CSS-Klassen und JavaScript sind fast keine Grenzen gesetzt.


In diesem Beitrag möchte ich kurz zeigen, wie man einen Fortschritt-Balken in einem Formular realisiert. Zugegeben, es macht nur dann einen Sinn, wenn es mehrere Bearbeitungsvorgänge für das zu bearbeitende Elementen gibt. Mit dem Fortschritt-Balken kann man den Benutzer visuell informieren, wie weit das Element bearbeitet wurde.

Für dieses Vorhaben benötigen wir zwei Workflow- bzw. Formular-Variablen, eine Mehrere Textzeilen-Variable „inProgressBarHTML„, und eine Zahl-Variable „inProgress„.

Die Variable „inProgress“ enthält den Wert, der bestimmt, wie breit der Fortschritt-Balken sein soll. Der Wert muss vorher errechnet werden, bevor die Variable gefüllt wird.

Die Variable „inProgressBarHTML“ wird mit dem HTML-Code als Standardtext versehen:

Fortschritt
<div id="barDivRight">
    <div id="barDivLeft" style="width: 100%;"></div>
</div>

Die beiden Elemente „barDivRight“ und „barDivLeft“ enthalten folgende CSS-Formatierung:

#barDivLeft{
    float: left;
    height: 5px;
    background: red;
}
#barDivRight{
    float: left;
    height: 5px;
    width: 100%; 
    background: #D9D9D9;
}

Die Klassen legen die Höhe, Breite und die Hintergrundfarbe fest.

Die CSS-Klassen werden in der Einstellung des Formulars unter „Benutzerdefiniertes CSS“ hinterlegt.

Formular anpassen

Als erstes fügen wir dem Formular ein mehrzeiliges Textfeld hinzu. Dieses Textfeld benennen wir als „inProgressBarHTML

Das Textfeld ist mit der Workflow- bzw. Formular-Variable „inProgressBarHTML“ verbunden.

Das mehrzeilige Textfeld „inProgressBarHTML“ erhält die CSS-Klasse „inProgressBarHTML„:

Zusätzlich muss noch die Client-ID für JavaScript festgelegt werden. In diesem Fall lautet die Client-ID ebenfalls „inProgressBarHTML„. Über diese Client-ID kann das Formularfeld in JavaScript angesprochen werden:

Als Nächstes muss ein einzeiliges Textfeld im Formular platziert werden, dem wir den Name „inProgressValue“ verpassen:

Dieses Formularfeld wird mit der Workflow-Variable „inProgress“ verbunden:

Dem Textfeld weisen wir die CSS-Klasse „inProgressValue“ zu:

Auch hier muss eine Client-ID für die Verarbeitung in JavaScript angegeben werden. Wir nennen es „inProgressValue„:

CSS-Klassen

.inProgressBarHTML{
    visibility: hidden;
}

.inProgressValue{
    visibility: hidden;
}

Die beiden Klassen sorgen dafür, dass beide Elementen „inProgressBarHTML“ und „inProgressValue“ unsichtbar im Formular gemacht werden.

Um den Fortschritt-Balken nun an einer bestimmten Stelle im Formular anzeigen zu können, muss an der Stelle ein Etikett hinzugefügt werden:

Das Etikett erhält die CSS-Klasse „inProgressBar„:


JavaScript

Jetzt, wo unser Formular alle benötigten Elemente enthält, können wir uns dem JavaScript widmen. Unser Fortschritt-Balken muss, anhand der Daten der beiden unsichtbaren Formularfelder, gerändert werden.

NWF$(document).ready(function(){
    try{
        NWF$('.inProgressBar').html(NWF$('#'+inProgressBarHTML).text());
        NWF$('#barDivLeft').css('width', NWF$('#'+inProgressValue).val()+'%');
    }catch(err){
    }
});

Was macht nun der JavaScript? Nachdem das Formular geladen wurde, wird unser Etikett „inProgressBar“ mit dem Inhalt des mehrzeiligen Textfeldes „inProgressBarHTML“ überschrieben. Danach wird die Breite des Divs „barDivLeft“ auf den Wert des Textfeldes „inProgressValue“ gesetzt.

Und so sieht das Ergebnis bei 60% des Fortschritts aus:

Kommentare

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.