3

Please help me to get a good reference for Itemstyle in SharePoint

I have a simple slider with image and text, it is designed with HTML, css and js.

I would like to show this image and text from SharePoint list dynamically without using c# code!

Is it possible to use item style! If yes please let me know How?

Thanks All

1

We can use Bootstrap Image carousel and SharePoint REST API with jQuery Ajax to achieve it, the following example for your reference.

1.Create picture library and upload some images, add text to the Title and Comments fields.

2.Modify the "listName" in the code below to the new picture library name, and add the code into a content editor web part or script editor web part.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(function() {
    var listName="ImagesLib";
    GetImagesFromLibrary(listName);
});
function GetImagesFromLibrary(listName){
    var requestUri = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbytitle('"+listName+"')/items?$select=FileRef,Title,Description&$top=5&$orderby=Created desc";
    $.ajax({
        url: requestUri,
        method: "GET",
        async:false,
        headers: { "Accept": "application/json; odata=verbose" },
        success: function (data) {
            $.each(data.d.results,function(i,item){
                var cInnerHtml="";
                if(i==0){
                    $("#myCarousel .carousel-indicators").append('<li data-target="#myCarousel" data-slide-to="0" class="active"></li>');
                    cInnerHtml+='<div class="item active">';                                                            
                }else{                  
                    $("#myCarousel .carousel-indicators").append('<li data-target="#myCarousel" data-slide-to="'+i+'"></li>');
                    cInnerHtml+='<div class="item">';               
                }
                cInnerHtml+='<img src="'+item.FileRef+'" alt="'+item.Title+'" style="width:100%;">';
                cInnerHtml+='<div class="carousel-caption"><h3>'+item.Title+'</h3><p>'+item.Description+'</p></div></div>';
                $("#myCarousel .carousel-inner").append(cInnerHtml);                
            });
        },
        error: function (data) {
        }
    });
}
</script>
<div class="container">
    <div id="myCarousel" class="carousel slide" data-ride="carousel">
        <!-- Indicators -->
        <ol class="carousel-indicators">
        </ol>
        <!-- Wrapper for slides -->
        <div class="carousel-inner">        
        </div>

        <!-- Left and right controls -->
        <a class="left carousel-control" href="#myCarousel" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#myCarousel" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>
</div>

enter image description here

3

One of the great options for displaying the slider contents from a list is using

  • The Content Search Web Part or the Search Results Web Part.
  • Custom Display Template.

    enter image description here

Sharegate introduces good articles and ready Display Template to

Just follow up the mentioned instruction and modify the display template based on your requirements.

2

Yes you can do it by Client side rendering. Edit the list view webpart , go to advance option , give your js code link in "js link" with tilt : for example : "~site/SiteAssets/.js"

CSR gets the JS object with raw data as input, and renders huge HTML string based on it.

you can do styling as per your requirement. Entry point of CSR API is the following function:

SPClientTemplates.TemplateManager.RegisterTemplateOverrides(options)

to add a footer : SPClientTemplates.TemplateManager.RegisterTemplateOverrides({ Templates: { Footer: "Hello world from <#= ctx.ListTitle #>!" } });

Please go to the below thread for further references : JSLink Client-side rendering

Your Answer

By clicking "Post Your Answer", you agree to our terms of service, privacy policy and cookie policy

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