none
Sharepoint RestAPI RRS feed

  • Question

  • Dear All,

            Corporate offers and Announcements should allow the CMS admin to upload in either of the below mentioned three ways

    1. - Upload a document, flyer, brochure etc. that has both the picture and text
    2. - Only upload text with no picture
    3. Upload text and a separate corresponding picture

     Right now below code will show only brochure and text. How to make like above format using below code.

                                                                                                                                                                               

    function CorporateOffers(){
    $.ajax({
            url: siteUrl  + "/_api/web/lists/getByTitle('Offers Library')/items?$top=3&$orderby=Modified desc",
            type: "GET",
            headers: {
                "accept": "application/json;odata=verbose",
                "content-type": "application/json;odata=verbose",
            },
            success: function(CorporateOffersdata){
           // var AllItemUrl=siteUrl+"/Lists/Announcements/AllItems.aspx";
           $.each(CorporateOffersdata.d.results,function(index,value){

       if(value.Link!=null && value.Link.Url!=null){
       var ListDisplayItem=siteUrl+"/Lists/CorporateOffers/DispForm.aspx?ID="+value.ID;
    var imgUrl="";
                   if(value.Image.Url!=null && value.Image.Url!=null){
                   imgUrl=value.Image.Url;
                }
                else{
    imgUrl=siteUrl+"/Style%20Library/Images/sample-image.jpg";
                }
    $("#dvCorporate").append('<div><a href="'+value.Link.Url+'"  target="_blank"><img src="'+value.Image.Url+'"/><span>'+value.Title+'</span></a></div>');
    }
            });




    OfferScroll();
       var allItemUrl=siteUrl  +"/Offers/Forms/AllItems.aspx";
    $("#dvCorporate").append('<a href="'+allItemUrl+'" class="view-btn" style="margin-" target="_blank">View All</a>');

            },
            error: function(error){
            console.log(error);
            }
    });


    }






    function GetAnnouncementData()
    {
    $.ajax({
            url: siteUrl  + "/_api/web/lists/getByTitle('Announcements')/items?$top=3&$orderby=Modified desc",
            type: "GET",
            headers: {
                "accept": "application/json;odata=verbose",
                "content-type": "application/json;odata=verbose",
            },
            success: function(announcementdata){
            var AllItemUrl=siteUrl+"/Lists/Announcements/AllItems.aspx";
           $.each(announcementdata.d.results,function(index,value){
            var desc=value.Description;
            var shortDesc="";   
            if(desc!="" && desc.length > 80){
    shortDesc= desc.substring(0,80);
    shortDesc=shortDesc+"...";
            }
            else
            {
    shortDesc=desc;
            }
    var ListDisplayItem=siteUrl+"/Lists/Announcements/DispForm.aspx?ID="+value.ID;
    $("#dvrow").append('<div class="col-md-4"><div class="announcement-cont"><a href="javascript:void(0)" ><img src="'+value.Image.Url+'"/><h4>'+value.Title+'</h4><p>'+shortDesc+'</p><div class="description">'+desc+'</div></a></div></div>');
            });
            $('.announcement-cont').click(function(){
                                    var heading = $(this).find('h4').text();
                                  var popdesc = $(this).find('.description').html();   
                                  var announcementimg =  $(this).find('img').attr('src');
                                   $('.pop-cont  h2').append(heading);
                                   $('.popimage').append('<img/>');
                                    $('.popimage img').attr('src', "" + announcementimg + "");

                                  $('.pop-desc').html(popdesc);
                                  $('.pop-bg').fadeIn();
                                  $('body').addClass('no-scroll');

                   })
                   $('.pop-close').click(function(){
                     $('.pop-bg').fadeOut(function(){
                                             $('.pop-cont  h2').empty();
                                             $('.news-pop, .popimage').empty();
                                  $('.pop-desc').empty();
                                   $('body').removeClass('no-scroll');
                                   });                          
                                  });
            $("#announcmentslink").append('<a href="'+AllItemUrl+'" class="view-btn" target="_blank">View All</a>');
            },
            error: function(error){
            console.log(error);
            }
    });
    }

    Regards,

    Asik


    Sunday, March 17, 2019 6:22 AM

Answers

  • Hi, 

    Sample script, you need update the value.Picture to your field name, I haven’t set CSS to elements so you need update it for better display.

    <div id="dvCorporate"></div>
        <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
        <script type="text/javascript">
    
            $(function () {
                if (!Array.prototype.includes) {
                    Object.defineProperty(Array.prototype, "includes", {
                        enumerable: false,
                        value: function (obj) {
                            var newArr = this.filter(function (el) {
                                return el == obj;
                            });
                            return newArr.length > 0;
                        }
                    });
                }
    
                var siteUrl = _spPageContextInfo.webAbsoluteUrl;
                $.ajax({
                    url: siteUrl + "/_api/web/lists/getByTitle('Offers Library')/items?$top=3&$orderby=Modified desc",
                    type: "GET",
                    headers: {
                        "accept": "application/json;odata=verbose",
                        "content-type": "application/json;odata=verbose",
                    },
                    success: function (CorporateOffersdata) {                    
                        $.each(CorporateOffersdata.d.results, function (index, value) {
                            if (value.Picture != null && value.Picture.Url != null) {
                                var extension = value.Picture.Url.split('.').pop();
                                var iamges = ["jpg", "jpeg", "png", "gif"];
                                if (iamges.includes(extension)) {
                                    $("#dvCorporate").append('<div><a href="' + value.Picture.Url + '"  target="_blank"><img width="200px" height="200px" src="' + value.Picture.Url + '"/><div>' + value.Title + '</div></a></div>');
                                } else {
                                    $("#dvCorporate").append('<div><a href="' + value.Picture.Url + '"  target="_blank"><div>' + value.Title + '</div></a></div>');
                                }                                                       
                            }
                        });                 
                        var allItemUrl = siteUrl + "/Lists/Offers%20Library/AllItems.aspx";
                        $("#dvCorporate").append('<div><a href="' + allItemUrl + '" class="view-btn" style="margin-" target="_blank">View All</a></div>');
                    },
                    error: function (error) {
                        console.log(error);
                    }
                })
            })
        </script>



    Best Regards,

    Lee


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.

    SharePoint Server 2019 has been released, you can click here to download it.
    Click here to learn new features. Visit the dedicated forum to share, explore and talk to experts about SharePoint Server 2019.

    • Marked as answer by MOHAMED ADAM Wednesday, March 27, 2019 9:50 AM
    Tuesday, March 26, 2019 9:31 AM
  • Hi, 

    I haven’t append description to output, you can add it as you want.

    Dennis had shared the script to read Description in your another thread.

    https://social.technet.microsoft.com/Forums/en-US/dd545854-03f4-46e6-be08-689e26e1f588/sharepoint-restapi?forum=sharepointdevelopment

    Best Regards,

    Lee


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.

    SharePoint Server 2019 has been released, you can click here to download it.
    Click here to learn new features. Visit the dedicated forum to share, explore and talk to experts about SharePoint Server 2019.

    • Marked as answer by MOHAMED ADAM Wednesday, March 27, 2019 9:50 AM
    Wednesday, March 27, 2019 9:11 AM

All replies

  • Hi,

    Your sample script just query SharePoint data and no uploading logic, so you may explain more details for your requirement.

    Official demo to upload file to SharePoint for your reference.

    https://docs.microsoft.com/en-us/sharepoint/dev/sp-add-ins/upload-a-file-by-using-the-rest-api-and-jquery#code-example-2-upload-a-file-in-the-same-domain-by-using-the-rest-api-and-jquery

    Best Regards,

    Lee


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.

    SharePoint Server 2019 has been released, you can click here to download it.
    Click here to learn new features. Visit the dedicated forum to share, explore and talk to experts about SharePoint Server 2019.

    Monday, March 18, 2019 8:41 AM
  • Hi Lee,

     Thank you for your reply. Actually the scenario is user can able to upload pic and text using share point list. All the data are coming from share point list.Now user can give pic URL in the list and text in the description.Using the share point data we are fetching from list.Now in the scenario user want also to show .How to achieve using above code?

    Only upload text with no picture

    Upload text and a separate corresponding picture

    Upload a document, flyer, brochure etc.

    Regards,

    Mohamed.

    Tuesday, March 26, 2019 7:00 AM
  • Hi, 

    I want to clarify your requirement first.

    The SharePoint list is a library or custom list? It would be better to share a screenshot so we could understand more clearly(hide business information).

    And you want to get data from a SharePoint library?

    The ‘text’ means single line of text?

    What data you want to get for picture/document(url? Name?) .

    Best Regards,

    Lee


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.

    SharePoint Server 2019 has been released, you can click here to download it.
    Click here to learn new features. Visit the dedicated forum to share, explore and talk to experts about SharePoint Server 2019.

    Tuesday, March 26, 2019 7:32 AM
  • Hi Lee,

       SharePoint list is a custom list consists of Title,URL and Description (Multiple line of text).For the picture we need to show pic.This is sample screen which we have already.If you need exact pic i will share it to you by tomorrow. Now it has to accept only pic only text also and also user can able to upload document .(Either it may be URL or it show with document icon too).

    

    Regards,

    Mohamed.

    Tuesday, March 26, 2019 7:48 AM
  • Hi, 

    Sample script, you need update the value.Picture to your field name, I haven’t set CSS to elements so you need update it for better display.

    <div id="dvCorporate"></div>
        <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
        <script type="text/javascript">
    
            $(function () {
                if (!Array.prototype.includes) {
                    Object.defineProperty(Array.prototype, "includes", {
                        enumerable: false,
                        value: function (obj) {
                            var newArr = this.filter(function (el) {
                                return el == obj;
                            });
                            return newArr.length > 0;
                        }
                    });
                }
    
                var siteUrl = _spPageContextInfo.webAbsoluteUrl;
                $.ajax({
                    url: siteUrl + "/_api/web/lists/getByTitle('Offers Library')/items?$top=3&$orderby=Modified desc",
                    type: "GET",
                    headers: {
                        "accept": "application/json;odata=verbose",
                        "content-type": "application/json;odata=verbose",
                    },
                    success: function (CorporateOffersdata) {                    
                        $.each(CorporateOffersdata.d.results, function (index, value) {
                            if (value.Picture != null && value.Picture.Url != null) {
                                var extension = value.Picture.Url.split('.').pop();
                                var iamges = ["jpg", "jpeg", "png", "gif"];
                                if (iamges.includes(extension)) {
                                    $("#dvCorporate").append('<div><a href="' + value.Picture.Url + '"  target="_blank"><img width="200px" height="200px" src="' + value.Picture.Url + '"/><div>' + value.Title + '</div></a></div>');
                                } else {
                                    $("#dvCorporate").append('<div><a href="' + value.Picture.Url + '"  target="_blank"><div>' + value.Title + '</div></a></div>');
                                }                                                       
                            }
                        });                 
                        var allItemUrl = siteUrl + "/Lists/Offers%20Library/AllItems.aspx";
                        $("#dvCorporate").append('<div><a href="' + allItemUrl + '" class="view-btn" style="margin-" target="_blank">View All</a></div>');
                    },
                    error: function (error) {
                        console.log(error);
                    }
                })
            })
        </script>



    Best Regards,

    Lee


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.

    SharePoint Server 2019 has been released, you can click here to download it.
    Click here to learn new features. Visit the dedicated forum to share, explore and talk to experts about SharePoint Server 2019.

    • Marked as answer by MOHAMED ADAM Wednesday, March 27, 2019 9:50 AM
    Tuesday, March 26, 2019 9:31 AM
  • Hi Lee,

        Thank you so much . This will work for Only Picture/Only Description?

    Regards,

    Mohamed

    Tuesday, March 26, 2019 10:08 AM
  • Hi, 

    I haven’t append description to output, you can add it as you want.

    Dennis had shared the script to read Description in your another thread.

    https://social.technet.microsoft.com/Forums/en-US/dd545854-03f4-46e6-be08-689e26e1f588/sharepoint-restapi?forum=sharepointdevelopment

    Best Regards,

    Lee


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.

    SharePoint Server 2019 has been released, you can click here to download it.
    Click here to learn new features. Visit the dedicated forum to share, explore and talk to experts about SharePoint Server 2019.

    • Marked as answer by MOHAMED ADAM Wednesday, March 27, 2019 9:50 AM
    Wednesday, March 27, 2019 9:11 AM
  • Hi Lee,

             Thank you so much for your reply. I will mark as "Answer".

    Regards,

    Mohamed.

    Wednesday, March 27, 2019 9:50 AM