SharePointCommunity
Die deutschsprachige Community für SharePoint, Microsoft 365, Teams, Yammer und mit Azure

Startschwierigkeiten mit JSLink

bewertet von 0 Usern
Nicht beantwortet Dieser Beitrag hat 0 Geprüfte Antworten | 6 Antworten | 3 Followers

Ohne Rang
17 Beiträge
Pyro erstellt in 7 Sep 2016 15:41

Hallo,

ich versuche grade mich mit JSLink vertraut zu machen. Für den Anfang habe ich versucht den Code von folgender Seite bei mir einzubinden.

https://code.msdn.microsoft.com/office/Client-side-rendering-code-93e7077d

- Ich habe den Code in eine neue .js Datei kopiert
- die Datei in einer Dokumentbibliothek hinterlegt
- eine Liste mit der Spalte Body angelegt
-  Die Liste als App-Webpart auf einer Seite eingebunden
- In den Einstellungen des App-Webparts unter JSLink den Link zum Code eingefügt

Nun sollte eigentlich der Inhalt von Body begrenzt werde, dass hat aber nicht funktioniert. Ich habe die JSLink datei dann nocheinmal unter "Seite/_catalogs/masterpage/JSLink.js" hinterlegt, aber das hat auch nicht funktioniert. Habe ich da noch etwas übersehen?

 

Mein eigentliches Ziel ist allerdings nicht eine Liste auf meiner Seite einzubinden. Ich habe Buttons auf meiner Seite eingefügt, die einen Sharpoint-Dialog zum Bearbeiten eines Listenelements öffnen. In diesem Dialog sollen einige Felder anders angezeigt werden, z.B. soll "% Abgeschlossen" als Balken dargestellte werden so wie hier:

https://code.msdn.microsoft.com/office/Client-side-rendering-code-f1068b4b

Würde das mit JSLink auch gehen? Die JSLink.js Datei müsste dann ja irgentwie anders eingebunden werden.

 

Gruß André

Alle Antworten

Top-10-Beitragsschreiber
18.937 Beiträge

Ich nehme mal an, daß die Datei einfach nicht korrekt eingebunden und deshalb gar nicht geladen wurde. Hast Du das mal geprüft?

Am sinnvollsten gehören diese Dateien in die Masterpage Gallery. Verlinkt werden sie dann so:
~site/_catalogs/masterpage/jslink.js

Viele Grüße
Andi
af @ evocom de
Blog
Ohne Rang
17 Beiträge

Ok aber zum Testen würde es auch gehen wenn die datei in einer anderen dokumentbibliothek liegt? 

Ok dann probiere ich das morgen nochmal.

 

Gruß Andre

Top-10-Beitragsschreiber
18.937 Beiträge

Im Grunde ist es ziemlich egal, wo die Datei liegt. Hauptsache der Pfad stimmt und die Datei ist für den aufrufenden User erreichbar.

Viele Grüße
Andi
af @ evocom de
Blog
Top-50-Beitragsschreiber
234 Beiträge

Ich habe in meinem Blog einige Dinge zum Thema JS-Link.

Auch den eventuell hilfreichen Blogpost https://afrait.com/blog/upload-js-files-and-link-it-to-lists-in-9-steps-de-en/

Ich hoffe dieser bringt dir noch etwas Licht ins dunkle.

Grüße

 

Patrick

Zu meinem SharePoint Blog: afraIT

Ohne Rang
17 Beiträge

Hallo,

leider bin ich erst heute wieder dazu gekommen, mich weiter mit JSLink zu beschäftigen. Es funktioniert allerdings immer noch nicht.

Ich habe mir eine andere Sharpoint-Seite angesehen, auf welcher über "~sitecollection/_catalogs/masterpage/Display Templates/Scripts/Prozentbalken.js" ein script eingebunden wird, welches die Prozentanzeige von einer Task-Liste als Balken darstellt. Ich habe den code unverändert übernommen und in einer Dokumentbibliothek mit dem Name JSLink hinterlegt, eine neue Task-Liste erstellt und den code über "/sites/meineSeite/JSLink/Prozentbalken.js" eingebunden.

Unter Gestaltungsvorlagen, kann ich leider kein neues Dokument erstellen, da das Steuerelemten deaktiviert ist. Aber ansonsten hab ich mich an die Anleitung im Blogpost gehalten. Muss ich die JSLink Datei anders angeben? Ich hab es auch mit "~sitecollection/JSLink/Prozentbalken.js" versucht, aber auch das hat nicht funktioniert.

 

// List view, display, add and edit – Percent Complete Sample
// Muawiyah Shannak , @MuShannak

(function () {
    // Create object that have the context information about the field that we want to change it's output render
    var percentCompleteFiledContext = {};
    percentCompleteFiledContext.Templates = {};
    percentCompleteFiledContext.Templates.Fields = {
        // Apply the new rendering for PercentComplete field on List View, Display, New and Edit forms
        "PercentComplete": {
            "View": percentCompleteViewFiledTemplate,
            "DisplayForm": percentCompleteViewFiledTemplate,
            "NewForm": percentCompleteEditFiledTemplate,
            "EditForm": percentCompleteEditFiledTemplate
        }
    };
    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(percentCompleteFiledContext);
})();

// This function provides the rendering logic for View and Display form
function percentCompleteViewFiledTemplate(ctx) {
    var percentComplete = ctx.CurrentItem[ctx.CurrentFieldSchema.Name];
    return "<div style='background-color: #e5e5e5; width: 100px;  display:inline-block;'> \
            <div style='width: " + percentComplete.replace(/\s+/g, '') + "; background-color: #0094ff;'> \
            &nbsp;</div></div>&nbsp;" + percentComplete;
}

// This function provides the rendering logic for New and Edit forms
function percentCompleteEditFiledTemplate(ctx) {
    var formCtx = SPClientTemplates.Utility.GetFormContextForCurrentField(ctx);
    // Register a callback just before submit.
    formCtx.registerGetValueCallback(formCtx.fieldName, function () {
        return document.getElementById('inpPercentComplete').value;
    });
    return "<input type='range' id='inpPercentComplete' name='inpPercentComplete' min='0' max='100' \
            oninput='outPercentComplete.value=inpPercentComplete.value' value='" + formCtx.fieldValue + "' /> \
            <output name='outPercentComplete' for='inpPercentComplete' >" + formCtx.fieldValue + "</output>%";
}

Ohne Rang
1 Beiträge

Hallo Pyro,

kämpfe / kämpfte mit den selben Problemen. Meine (kurzzeitige) Erfahrung:

  • Variante 1:
    Entgegen aller Dokumentationen funktionieren die Beispiel-Scripte nur, im JSLink-Bereich (Webpart --> Eigenschaften (Webpart bearbeiten) --> Verschiedene --> JS-Link), wenn ich diese in Gestaltungsvorlagen einbinde
    Genau so, wie Patrik es im verlinkten Post beschrieben hat.
    Das Verlinken einer Script-Datei in einer anderen Quelle (beliebige Dokumentenbibliothek) über das Feld JS-Link klappt bei mir auch nicht.
  • Variante 2:
    Wenn ich die Seite bearbeite und einen Script-Editor-Webpart unter den Ansicht-Webpart eínbinde und dort den Text! der Scriptdatei 'reinkopiere, dann funktioniert dies auch (bitte alles noch in <script type="text/javascript"> und </script> klammern, ggf. darauf achten, dass das Script erst nach dem Laden der Seite ausführbar ist)
  • Variante 3:
    Stammt noch aus den Zeiten von Vor-SharePoint 2013. Man bearbeitet wieder die Seite und fügt ein  HTML-Formularwebpart ein und in den Quelltext schreibt man, den Verweis auf die eigentliche Script-Datei (die in einer Dokumentenbibliothek liegen kann). In der Art:
    "...
    <script type="text/javascript" src="/ScriptLib/name.js"></script>
    ..." 

Ich habe auch das Problem oder den Wunsch spezifische Java-Scripts, die einmalig sind (d.h. nur auf eine Liste/Ansicht) zur Anwendung kommen, nicht unbedingt in den Gestaltungsvorlagen (Masterpage) ablegen zu wollen.

Soweit meine kurzen Erfahrungen mit JavaScripten in SharePoint und SharePointOnline.

Sven

Seite 1 von 1 (7 Elemente) | RSS