Take the 2-minute tour ×
SharePoint Stack Exchange is a question and answer site for SharePoint enthusiasts. It's 100% free, no registration required.

Can I change the default look of announcements to view them using prev and next buttons. Can this be achieved out of box, or do I need to create a custom webpart. Also how can I set the expiration date for the Announcements. I used discussion board webpart from SharePoint 2010.

share|improve this question
1  
When you write that you "used discussion board webpart from SharePoint 2010," does that mean instead of the announcements web part? –  LCountee Dec 21 '11 at 13:57
    
I think that is the first mistake I have done :) –  Jithu Dec 22 '11 at 4:29
add comment

1 Answer

up vote 1 down vote accepted

Not sure if you would get something readily available but I have implemented such requirement and can help you go in right direction.

At high level:

  1. Use a custom announcement list (with custom Announcement) or use existing announcement list to store the announcements in a list.

  2. Configure a Content Query Web Part to display the announcements. Here you can configure how many announcements to be displayed, filter out expired announcements, implement custom styles to display your announcement, target announcements to specific audience etc. (leverage CQWP as much as you can)

  3. Once you are done, you will have announcements displayed as:

    <div id=".." style="..">
     <!-- Announcement 1 content driven by your CQWP item style -->
    <div>
    <div id=".." style="..">
     <!-- Announcement 1 content driven by your CQWP item style -->
    <div>
    <div id=".." style="..">
     <!-- Announcement 1 content driven by your CQWP item style -->
    <div>
    
  4. Wrap the entire CQWP inside a container like:

<div id="announcementContainer">
<!-- Announcement items rendered using CQWP -->
</div>
  1. Now use a Jquery Cycle Plugin to rotate the announcement. Using this plug-in is extremly easy (could be as little as one line as shown below). You can also have "Prev", "Next" instead of automatic timer based rotation. Plugin and examples are available here: http://jquery.malsup.com/cycle/download.html
<script>
    $(function () {
        $('#announcementContainer').cycle();
    });
</script>

Note that plugin simply hides all children (one div element for one announcement) and rotates them one by one.

Finally, you can wrap the whole functionality inside a Web Part using WebPart development skills (not covered here).

share|improve this answer
    
Ashish Thank you very much for this detail explanation, Let me try with this and will let you know my progress !! –  Jithu Dec 22 '11 at 4:30
    
Upto Step 2 I got, however from where I need to make changes to Step 3 as said in Step 4 –  Jithu Dec 22 '11 at 5:16
    
You need to put cqwp inside a div so that the div has as many children as your announcements. And you use id of that div to cycle children under it using jquery. As u see I used id of that div in jquery function –  Ashish Patel Dec 22 '11 at 13:42
    
I got that Ashish, the problem is how or where I will write that code - " <div id="announcementContainer"> <!-- Announcement items rendered using CQWP --> </div> " from share point site!! –  Jithu Dec 23 '11 at 7:05
    
Actually, there are many ways to do it. For example, if you have a Page Layout, you can put it directly on the page layout. You could also provision a ASP.NET page using MODULE element and have the custom control/webpart put on that. What's your situation? –  Ashish Patel Dec 26 '11 at 5:20
show 6 more comments

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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