Announcements Show/Hide Feature

Technologies: SharePoint 2007-Online; SharePoint Designer; JavaScript; XSL

We will use the basic Announcements list and include the Show/Hide feature for the list. The Title will always display while the Body text will display on request by the user.

1. Using SharePoint Designer, add a basic web part zone and data view web part to a .NET ASPX page

2. Include XSL statements within the body of a page

Show

</div>
</div>

3. Include javascript on the page (to test) within the <head></head> section

function ShowText(element1,element2)
{
var field1 = document.getElementById(element1);
var field2 = document.getElementById(element2);
   if (element1) {
     if (field1.style.display == "block") {
           field1.style.display = "none"; 
           field2.innerHTML = "Show";
     } 
     else { 
           field1.style.display = "block"; 
           field2.innerHTML = "Hide";
     } 
   }
}

4. Save the web part to a file and import onto a new page of your choice within your site.

5. Insert a Content Editor Web Part onto the new page and include the SPD javascript as embedded code. See screenshot.

AandREmbedCode

6. The end result is the following user experience; the user presses the Show/Hide to manage the experience.

AandR

Advertisements
This entry was posted in Uncategorized. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s