Funktion $t().BuildTabs(options) für die Darstellung von Tabs innerhalb von Formularen

Beschreibung

SharePoint Formulare in der Ansicht, Bearbeitung oder Anlege-Makse um Tabs erweitern, um Felder und Eingabemöglichkeiten zu strukturieren. Diese Reiter-Struktur erhöht die Akzeptanz Ihrer SharePoint Anwendung bei den Endanwendern. Dabei müssen keine Veränderungen an den Standard-Formularen vorgenommen werden, somit bleibt alles im SharePoint Standard.

Voraussetzungen / Prerequisites

Sie benötigen eine JavaScript-Spalte in Ihrer Liste oder ContentType (Lesen Sie hier wie Sie ein neues JavaScript Feld erstellen). Die Sortierung der Spalten muss vorab konfiguriert werden (So konfigurieren Sie die Spaltensortierung). Alle Felder die in einem Tab dargestellt werden sollen, müssen hintereinander folgen.

Parameter

Options Objekt, mit folgenden Eigenschaften:

configuration als Tab Configuration (Array)

selectFunction: 

Einen Funktionsaufruf der beim Klick auf ein Tab ausgeführt wird, bevor das Tab geöffnet wird. 

showNextButton:

Am unteren Rand des Tabs wird ein "Weiter" Button angezeigt um in das nächste Formular zu gelangen. Dabei wird ebenfalls die selectFunction aufgerufen.

selectedTab:

Hier kann wahlweise der anfangs ausgewählte Reiter mitgegeben werden. 

rememberSelectedTab: 

Wird der Wert dieses Parameters mit "true" gesetzt, wird beim laden der Seite immer der zuletzt ausgewählte Reiter geöffnet

attachmentsAllowed: 

Wird der Wert dieses Parameters mit "true" gesetzt, wird wenn beim Speichern ein Pflichtfeld nicht befüllt wurde ein weiterer Hinweis hierzu angezeigt. 

Syntax / Source Code

$t().BuildTabs({
    configuration: [{
        'Title': 'Applicant Details',
        'First_InternalName': 'Applicant',
        'Visible': 'False',
        'Last_InternalName': 'Subject_x0020_of_x0020_specialis'
    }, {
        'Title': 'Details',
        'HideIn': ['EditForm', 'NewForm'],
        'Disable': 'True',
        'First_InternalName': 'Submit_x0020_timestamp',
        'Last_InternalName': 'Application_x0020_status'
    }, {
        'Title': 'Submit',
        'HideIn': ['DispForm'],
        'First_InternalName': 'Submit',
        'Last_InternalName': 'Submit'
    }],
    selectFunction: function (event, ui) {
        if (!$t().IsDispForm()) {
            return validateTab(ui);
        }
    },
    showNextButton: true, 
    selectedTab: 2,
    rememberSelectedTab: true,
    attachmentsAllowed: true
});

In Listen unserer Templates mit bereits vorhandenen Reitern (überschreiben der BuildTabs Methode aus dem Template):

function customBuildTabs() {
$t().BuildTabs({
    configuration: [{
        'Title': 'Applicant Details',
        'First_InternalName': 'Applicant',
        'Visible': 'False',
        'Last_InternalName': 'Subject_x0020_of_x0020_specialis'
    }, {
        'Title': 'Details',
        'HideIn': ['EditForm', 'NewForm'],
        'Disable': 'True',
        'First_InternalName': 'Submit_x0020_timestamp',
        'Last_InternalName': 'Application_x0020_status'
    }, {
        'Title': 'Submit',
        'HideIn': ['DispForm'],
        'First_InternalName': 'Submit',
        'Last_InternalName': 'Submit'
    }],
    selectFunction: function (event, ui) {
        if (!$t().IsDispForm()) {
            return validateTab(ui);
        }
    },
    showNextButton: true, 
    selectedTab: 2,
    rememberSelectedTab: true,
    attachmentsAllowed: true
});
}

Beispiele / Examples

$t(document).ready(function () {
    $t().BuildTabs({
        configuration: [{
            'Title': 'Benutzer Information',
            'First_InternalName': 'Person',
            'Last_InternalName': 'Status'
        }, {
            'Title': 'Stammdaten',
            'HideIn': ['NewForm'],
            'First_InternalName': 'Email',
            'Last_InternalName': 'WebPage'
        }, {
            'Title': 'Einstellungen',
            'First_InternalName': 'Feiertagskalender',
            'Last_InternalName': 'Feiertagskalender'
        }],
        showNextButton: false,
        selectedTab: 2,
        rememberSelectedTab: true,
        attachmentsAllowed: true
    });
});