4

I've very recently picked up SharePoint and have a limited knowledge of programming so you'll need to bear with me here.

I'm currently building on a development site collection in SharePoint Online (Office 365).

I've built a news ticker using HTML/jQuery which works using static values set in HTML. What I'm trying to do is link the ticker to a SharePoint List and have it scroll through the first five news titles.

Right now I have the following code in Default.aspx.

<%-- The markup and script in the following Content element will be placed in the <body> of the page --%>
<asp:Content ContentPlaceHolderID="PlaceHolderMain" runat="server">

    <div class="title"><p>On:trac News</p></div>
    <div class="cont"><ul id="ticker">
    <li>News item one.</li>
    <li>News item two.</li>
    </ul></div>        

</asp:Content>

This is then powered by the following jQuery.

<script type="text/javascript">
    $(document).ready(function () {
        function tick() {
            $('#ticker li:first').slideUp(function () { $(this).appendTo($('#ticker')).slideDown(); });
        }
        setInterval(function () { tick() }, 5000);
    });
</script>

What is the best method of pulling information from SharePoint and then referencing the values in the default.aspx page? I have read around and found a couple of guides for pulling lists from SP but I'm struggling to find a way to write this to the ticker.

Improve this question
3
  • We need o know the SharePoint version before we can really give you concrete advice. Is it 2007, 2010, or 2013?
    – Robert Kaucher
    Commented Sep 23, 2013 at 16:26
  • Sorry, forgot to mention that. It's SharePoint Online (Office 365 deployment).
    – Ben Short
    Commented Sep 23, 2013 at 22:27
  • I think the best solution for that is called jslink. msdn.microsoft.com/en-us/magazine/dn745867.aspx
    – Sascha
    Commented Apr 4, 2015 at 20:10

4 Answers 4

Reset to default
1

Have you tried SPServices yet? Check out the link it should work with SharePoint Online, too as far as i could read from the codeplex site.

The link given beforehand contains an example on how to retrieve list items with JavaScript/JQuery as you are already using it in your question.

You can retrieve all the information required directly into your script and either but the list Items in an array and dynamically create the list elements from the front end. There should be enough information on the latter. Just search for 'Dynamically creating li items'.

Improve this answer
1
  • 1
    In fact, the example on the page Ben linked to shows how to the SP list items to <li> items. However, it's using SPServices version 0.6.2. I recommend using at least 2013.01 to use the deferred promises capability that wasn't available in earlier versions. Then you can ensure that the <li> items have been written to the page before you call your tick function.
    – Erin L
    Commented Sep 30, 2015 at 18:02
1

I usually use REST for this sort of thing. This example is looking for a list called 'FooterLinks' and populating them into a div with the jquery each method. 

$.ajax({
    url: "/_api/web/lists/GetByTitle('FooterLinks')/items",
    type: "GET",
    headers: {
        "accept": "application/json;odata=verbose",
    },
    success: function (data) {
        $.each(data.d.results, function (index, item) {
            $('#FooterLinks').append("<dl id='item" + item.columnID + "'><dt>" + item.Title + "</dt></dl>");
        });
    },
    error: function (error) {
        //alert(JSON.stringify(error));
    }
});
Improve this answer
1
  • this is great answer and worked for me but if we want to use getbyid instead of get bytitle what is our api url? ta.
    – saber tabatabaee yazdi
    Commented Mar 31, 2021 at 23:06
0

You need to know how to use the Sharepoint client object model. Firstly, you have to get the SP Context -> SP List -> SP ListItems.

Here is the complete basic operations using JavaScript Object Model code in SP. I think that will be really helpful for you: http://msdn.microsoft.com/en-us/library/office/jj163201.aspx

Improve this answer
0

I've built SharePoint 2013 Client side Apps to do this kinda of thing but if you're new to all this I would suggest using OTB stuff as much as possible, you can get a lot done using list, display templates and some JQuery.

I would have a look a the following github project which contains ready made display templates and search display templates which you can plugin to content query web parts.

GitHub - SPCSR/DisplayTemplates - This repository contains all of the available Display Template samples provided by the SharePoint community members.

From these display templates (and JQuery) i have created news banner carousels, news tickers and accordion panels etc.

Improve this answer

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.