5

Is there an easy way to create a thumbnail view for document libraries in SP 2013? hopefully a no-code method. enter image description here

3 Answers 3

3

As Waqas Sarwar MCSE mentions, this is very easy to do programmatically. You need someone with the following skills: HTML, CSS, XML/JSON, Javascript.

Create a script webpart on the SharePoint page and give your developer the following piece of code:

_spBodyOnLoadFunctionNames.push("myCustomFunctionName");

function myCustomFunctionName() {
    jQuery.ajax({
        url: "http://<site url>/_api/web/lists",
        type: "POST",
        data:  JSON.stringify({ '__metadata': { 'type': 'SP.List' }, 'AllowContentTypes': true,
 'BaseTemplate': 100, 'ContentTypesEnabled': true, 'Description': 'My list description', 'Title': 'Test' }
),
        headers: { 
            "accept": "application/json;odata=verbose",
            "content-type": "application/json;odata=verbose",
            "content-length": <length of post body>,
            "X-RequestDigest": $("#__REQUESTDIGEST").val()
        },
        success: doSuccess,
        error: doError
});
}

Should be doable for any reasonable developer. More resources here: How to: Complete basic operations using SharePoint 2013 REST endpoints

2

Unfortunately, SharePoint doesn't provide this sort of functionality out of the box. Luckily, SharePoint is flexible enough to allow for custom solutions that can solve this issue.

You have to write your own piece of code to get this done.

3
  • Can't the hovercard which the search uses be of some use? p.S. Just a random thought..:)
    – Amit
    Aug 13, 2014 at 13:45
  • if they have Office web apps then may be i am not sure.
    – Waqas Sarwar MVP
    Aug 13, 2014 at 13:58
  • With office web apps you can generate the preview windows by injecting an iframe pinpointing the wac server. Aug 13, 2014 at 23:51
2

To achieve this goal you can use JSLink in SharePOint 2013 or SharePOint Online.

You need to do that: Set JS Link property in List View Web Part

We can use JSLink property included in SharePoint 2013 List View Web Parts

– Create a new Standard view

– Edit main page of the view

– Edit XSLTListViewWebPart properties

– Set JS Link property as “~sitecolletion/_catalogs/masterpage/OurSolution/CSRFile.js”

– Save

This is the JavaSCript code:

    (function () {
    ExecuteOrDelayUntilScriptLoaded(_registerSliderViewTemplate, 'clienttemplates.js');
})();

function _registerSliderViewTemplate() {
    // Initialize the variable that store the objects. 
    var overrideCtx = {};
    overrideCtx.Templates = {};
    overrideCtx.Templates.Header = HeaderOverrideFun;
    overrideCtx.Templates.Item = ItemRenderCustom;

    overrideCtx.BaseViewID = 1;
    overrideCtx.ListTemplateType = 101;

    // Register the template overrides. 
    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);
}

function HeaderOverrideFun(ctx) {
    var finalHeaderHtml = '';
    finalHeaderHtml += '<style type="text/css">';
    finalHeaderHtml += '    .ms-listviewtable thead tr { table-layout:fixed; display:table-row-group; float:left; } ';
    finalHeaderHtml += '    .tbTitle { margin-bottom: 5px; margin-top: 10px; } ';
    finalHeaderHtml += '    .tbTrItem { table-layout:fixed; display:table-row-group; float:left; width: 315px; height: 300px !important; } ';
    finalHeaderHtml += '    .tbTdItem { width: 300px; } ';
    finalHeaderHtml += '</style>';
    finalHeaderHtml += RenderHeaderTemplate(ctx);

    return finalHeaderHtml;
}

function ItemRenderCustom(renderCtx) {
        var listItem = renderCtx.CurrentItem;
        var listSchema = renderCtx.ListSchema;
        var idx = renderCtx.CurrentItemIdx;
        var cssClass = idx % 2 == 1 ? "ms-alternating " : "";

        if (FHasRowHoverBehavior(renderCtx)) {
            cssClass += " ms-itmHoverEnabled ";
        }
        var ret = [];

        ret.push('<tr class="tbTrItem ');
        ret.push('" iid="');
        var iid = GenerateIID(renderCtx);
        //var idString = ctx.ctxId + ',' + listItem.ID + ',' + listItem.FSObjType;

        ret.push(iid);
        ret.push('" id="');
        ret.push(iid);
        ret.push('">');

        var fields = listSchema ? listSchema.Field : null;


        var owaUrl = listItem.ServerRedirectedEmbedUrl;
        var newOwaUrl = "";
        var newOwaFullPageUrl = "";
        if (owaUrl != null) 
        {
            newOwaUrl = owaUrl.replace('WopiFrame', 'WopiFrame2');
            newOwaFullPageUrl = newOwaUrl.replace('interactivepreview', 'view');
        }

        var titleText = listItem.Title;
        if (titleText == '') {
            titleText = listItem.FileLeafRef;
        }

        //EditListItems permissions
        //if (HasRights(0x0, 0x800))
        var showedit = true;
        if (ctx.CurrentItem.PermMask == '0xb008431061') {
            showedit = false;
        }

        ret.push('<td colspan="');
        ret.push(fields.length + 2);
        ret.push('" class="tbTdItem" >');
        ret.push('<div class="tbTitle"><a href="');
        ret.push(newOwaFullPageUrl);
        ret.push('" target="_blank" >');
        ret.push(titleText);
        ret.push('</a></div>');
        ret.push('<iframe src="');
        ret.push(newOwaUrl);
        ret.push('" width="300" height="250"></iframe>');
        ret.push('</td>');

        ret.push('</tr>');
        return ret.join('');
    };

The code is just inside the file on this article: http://josharepoint.com/2014/11/13/create-thumbnails-view-using-client-side-rendering-and-owa-in-sharepoint-2013/

REgards!

2
  • Can you please elaborate your answer with some explanation on the code. Also if you show the code then it will be very beneficial to site visitors rather than redirecting to external blog links which has a chance to get break. :)
    – Asad Refai
    Jun 19, 2015 at 13:24
  • Hi Asad, Code added Jun 25, 2015 at 12:31

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.