Köllisch Gesellschaft für Prozessmanagement mbH

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 (suchen Sie hierfür nach "Neues JavaScript Feld erstellen"). Die Sortierung der Spalten muss vorab konfiguriert werden ( suchen Sie hierfür nach "Spaltensortierung konfigurieren"). 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
    });
});