none
Sharepoint Online - Pièces jointes dans une liste RRS feed

  • Question

  • Bonjour,

    J'ai une question à propos des listes SharePoint. J'ai créé une liste dans un site et j'ai affiché la colonne "pièces jointes".

    Lors de l'ajout d'un élément, j'inclus une pièce jointe et le logo d'un trombone apparaît afin d'indiqué la présence de cette dernière.

    Trombone

    Jusqu'ici tout va bien mais je n'ai pas la possibilité de cliquer sur le trombone afin d'ouvrir la pièce jointe directement sans ouvrir l'élément de la liste en question.

    Auriez-vous une astuce pour régler ce soucis svp ?

    Pour info, j'ai essayé dans un site de publication et de communication et j'aurai aimé qu'une solution fonctionne pour les deux technologies.

    Cordialement,

    Kevin V.

    mercredi 19 juin 2019 13:27

Réponses

  • Bonjour,

    Il y a la possibilité d'afficher le nom de la pièce-jointe, cliquable. 

    1) Téléchargez l'API de Jquery  et uploadez le dans la bibliothèque de style.

    2) Créez un fichier showAttachments.js et uploadez dans la bibliothèque de style.

    (function () {
    
        // Create object that have the context information about the field that we want to change it output render  
    
        var attachmentsFiledContext = {};
    
        attachmentsFiledContext.Templates = {};
    
        attachmentsFiledContext.Templates.Fields = {
             
            "Attachments": { "View": AttachmentsFiledTemplate }
        };
    
        SPClientTemplates.TemplateManager.RegisterTemplateOverrides(attachmentsFiledContext);
    
    })();
    
    
    // This function provides the rendering logic for list view 
    function AttachmentsFiledTemplate(ctx) {
        var itemId = ctx.CurrentItem.ID;
        var listName = ctx.ListTitle;       
        return getAttachments(listName, itemId);
    }
    
    //get attachments field properties
    function getAttachments(listName,itemId) {
      
        var url = _spPageContextInfo.webAbsoluteUrl;
        var requestUri = url + "/_api/web/lists/getbytitle('" + listName + "')/items(" + itemId + ")/AttachmentFiles";
        var str = "";
        // execute AJAX request
        $.ajax({
            url: requestUri,
            type: "GET",
            headers: { "ACCEPT": "application/json;odata=verbose" },
            async: false,
            success: function (data) {
                for (var i = 0; i < data.d.results.length; i++) {
                    str += "<a href='" + data.d.results[i].ServerRelativeUrl + "'>" + data.d.results[i].FileName + "</a>";
                    if (i != data.d.results.length - 1) {
                        str += "<br/>";
                    }                
                }          
            },
            error: function (err) {
                //alert(err);
            }
        });
        return str;
    }

    3) Modifier la page contenant votre webpart pour modifier votre webpart. 

    4) Dans la rubrique divers et lien JS ajoutez : 
    ~site/Style Library/showAttachments.js|~site/Style Library/<Nom de votre fichier API Jquery>.js

    Cordialement, 


    • Modifié Nguyen Kevin lundi 24 juin 2019 15:00
    • Marqué comme réponse Kevin V- jeudi 27 juin 2019 13:45
    lundi 24 juin 2019 14:59
  • Bonjour, 

    1) Il suffit de télécharger ce fichier Cliquez ici. Ouvrez le lien et faites CTRL + S pour sauvegarder le fichier.

    Le nom du fichier que vous allez sauvegarder doit être dans le genre de "jquery-3.4.1.js"

    2) Créez un fichier txt et renommez le en showAttachments.js (pour changer l'extension). Copiez seulement le code dans votre fichier. 

    Ensuite, il faudra uploader les deux fichiers dans la bibliothèque de style de votre collection de site ou site. 

    4) Il faut donner les liens URL de vos deux fichiers dans la case Lien JS.
    ~site/Style Library/showAttachments.js|~site/Style Library/<Nom de votre fichier API Jquery>.js

    En gras, le nom de votre fichier Jquery que vous avez sauvegardé précédemment. 

    En complet, vous devriez avoir quelque chose de ce genre :

    ~site/Style Library/showAttachments.js|~site/Style Library/jquery-3.4.1.js

    Résultat : 

    • Marqué comme réponse Kevin V- jeudi 27 juin 2019 13:45
    jeudi 27 juin 2019 12:39

Toutes les réponses

  • Bonjour,

    Il y a la possibilité d'afficher le nom de la pièce-jointe, cliquable. 

    1) Téléchargez l'API de Jquery  et uploadez le dans la bibliothèque de style.

    2) Créez un fichier showAttachments.js et uploadez dans la bibliothèque de style.

    (function () {
    
        // Create object that have the context information about the field that we want to change it output render  
    
        var attachmentsFiledContext = {};
    
        attachmentsFiledContext.Templates = {};
    
        attachmentsFiledContext.Templates.Fields = {
             
            "Attachments": { "View": AttachmentsFiledTemplate }
        };
    
        SPClientTemplates.TemplateManager.RegisterTemplateOverrides(attachmentsFiledContext);
    
    })();
    
    
    // This function provides the rendering logic for list view 
    function AttachmentsFiledTemplate(ctx) {
        var itemId = ctx.CurrentItem.ID;
        var listName = ctx.ListTitle;       
        return getAttachments(listName, itemId);
    }
    
    //get attachments field properties
    function getAttachments(listName,itemId) {
      
        var url = _spPageContextInfo.webAbsoluteUrl;
        var requestUri = url + "/_api/web/lists/getbytitle('" + listName + "')/items(" + itemId + ")/AttachmentFiles";
        var str = "";
        // execute AJAX request
        $.ajax({
            url: requestUri,
            type: "GET",
            headers: { "ACCEPT": "application/json;odata=verbose" },
            async: false,
            success: function (data) {
                for (var i = 0; i < data.d.results.length; i++) {
                    str += "<a href='" + data.d.results[i].ServerRelativeUrl + "'>" + data.d.results[i].FileName + "</a>";
                    if (i != data.d.results.length - 1) {
                        str += "<br/>";
                    }                
                }          
            },
            error: function (err) {
                //alert(err);
            }
        });
        return str;
    }

    3) Modifier la page contenant votre webpart pour modifier votre webpart. 

    4) Dans la rubrique divers et lien JS ajoutez : 
    ~site/Style Library/showAttachments.js|~site/Style Library/<Nom de votre fichier API Jquery>.js

    Cordialement, 


    • Modifié Nguyen Kevin lundi 24 juin 2019 15:00
    • Marqué comme réponse Kevin V- jeudi 27 juin 2019 13:45
    lundi 24 juin 2019 14:59
  • Bonjour,

    merci de votre réponse. Malheureusement, je n'ai quasi aucune connaissance en Jquery, serait-il possible de développer le point 1 et 2 svp ?

    Si c’est pas trop abusé, pourriez-vous également me fournir un screenshot du résultat obtenu ?

    Cordialement,

    Kevin

    jeudi 27 juin 2019 11:46
  • Bonjour, 

    1) Il suffit de télécharger ce fichier Cliquez ici. Ouvrez le lien et faites CTRL + S pour sauvegarder le fichier.

    Le nom du fichier que vous allez sauvegarder doit être dans le genre de "jquery-3.4.1.js"

    2) Créez un fichier txt et renommez le en showAttachments.js (pour changer l'extension). Copiez seulement le code dans votre fichier. 

    Ensuite, il faudra uploader les deux fichiers dans la bibliothèque de style de votre collection de site ou site. 

    4) Il faut donner les liens URL de vos deux fichiers dans la case Lien JS.
    ~site/Style Library/showAttachments.js|~site/Style Library/<Nom de votre fichier API Jquery>.js

    En gras, le nom de votre fichier Jquery que vous avez sauvegardé précédemment. 

    En complet, vous devriez avoir quelque chose de ce genre :

    ~site/Style Library/showAttachments.js|~site/Style Library/jquery-3.4.1.js

    Résultat : 

    • Marqué comme réponse Kevin V- jeudi 27 juin 2019 13:45
    jeudi 27 juin 2019 12:39
  • Super ! Cela fonctionne super bien sur un site de publication. 

    Par contre, est-ce possible d'utiliser cette procédure pour un site de communication ?

    Cordialement,

    Kevin

    jeudi 27 juin 2019 13:45
  • Re, 

    Normalement, cela fonctionne pour toutes les listes.

    Si ça ne fonctionne pas, prévenez le moi, comme ça je le saurai pour la prochaine fois :) !

    Cordialement, 

    jeudi 27 juin 2019 13:49
  • Re,

    J'ai testé sur un site de communication, le truc c'est qu'il n'y a pas d'option sur le web part permettant d'intégrer un lien Javascript.

    Après quelque recherche, pour l'instant, ce type de site ne gère pas le JS. A l'avenir, il gérera le SPFx.

    Merci beaucoup de votre aide.

    Bonne journée,

    Kevin

    jeudi 27 juin 2019 14:12