Hi all,
In this post, i want to show you how to add news ticker in SharePoint with AngularJS/RESTApi.
Here the steps:
1. Create custom list named as "News" with two columns i.e. PageURL, NewsBody.
2. Add few items to the list.
3. Now upload required javascript/css files named as
a. modern-ticker.css
b. theme.css
c. jquery-1.11.0.min.js
d. angular.min.js
4. Here am adding new page to show the news ticker and you may can add this snippet in your master page.
Here the complete code snippet for new ticker,
Here the final Output:
Here the complete source code.
In this post, i want to show you how to add news ticker in SharePoint with AngularJS/RESTApi.
Here the steps:
1. Create custom list named as "News" with two columns i.e. PageURL, NewsBody.
2. Add few items to the list.
3. Now upload required javascript/css files named as
a. modern-ticker.css
b. theme.css
c. jquery-1.11.0.min.js
d. angular.min.js
4. Here am adding new page to show the news ticker and you may can add this snippet in your master page.
Here the complete code snippet for new ticker,
Here the final Output:
Here the complete source code.
Hello Uday, I have a question. Before I go I need to say that I have hardly any js experience and am just getting acquainted with SharePoint (2013). When trying your awesome code, I get stuck on the SP page with a scrolling / fading display of "{{Item.NewsBody}} as a scrolling item. Also the pause / play png's do not appear in the bar. Can you advice me what I am doing wrong? I did add two items in a News list, just to test, as in your example....
ReplyDeleteHi Schipper, angularJS is case sensitive. so double check ng-repeat section and all images should be in images folder or else you need to change the path in css files. Please check and let me know, if you are still facing any issue am ready to help you.
ReplyDeleteHi, thanks a bunch! The images are working now, great! On the newsitem itself it seems as if the reference to it cannot be found. I downloaded angular.min.js and placed it with all files you provided in a subdirectory of SiteAssets. Is that the correct location and way of doing this? I also created a "News" list group on the same level as SiteAssets. Kees
ReplyDeleteGood to hear its working :). Yes Kees thats the correct location. Its all your flexible and accordingly change the path.
DeleteIf you can provide me link for the code. Thanks!
Delete