Rotating Banner in SharePoint with a DataView Webpart


Published on

Adding customized functionality to SharePoint by using the Dataview Webpart such as a Rotating Banner

Published in: Technology, Education
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Rotating Banner in SharePoint with a DataView Webpart

  1. 1. By Echo Schmidt
  2. 2. Extending SharePoint• Adding Code to HIVE• Install Webparts from ThirdParty• Create your own Webparts• Adding Code Library• DataView Webpart
  3. 3. Extending the DataView Webpart PowerUser’s Can Do It It’s Backed-up In the Database It’s Easy to Reproduce It’s Easy to Customize It’s Backed-up & can be recovered
  4. 4. What Can It Be…• Custom Calendar Query• Rotating Image• Custom Web Report• Graphs• News Widget…..Anything that uses a List or Library
  5. 5. Code Samples CodePlex CodeProject Stackoverflow Dreamincode Gethub CodeCanyon
  6. 6. Step 1. Download your Sample Code &Verify it works outside of SharePoint Upload Code to a Code Library in SharePoint
  7. 7. Code Library
  8. 8. Step 2. Create a webpage in SharePoint for adding theDataview Webpart to.
  9. 9. Step 3. Create a SharePoint Library or List to containinformation. Site Actions > View All Site Content > Create > PictureLibrary Note: The webpage should be in the same SharePointsite as the List or Library
  10. 10. Scenario Details Banners Title Image Name Description URL
  11. 11. Step 4. Add CSS, jquery or other code reference to Masterpageor Page Template
  12. 12. Step 5.• Open your webpage in SharePoint Designer andDetach it from the PageLayout
  13. 13. Step 6. Select the location on the webpage you want to insertthe DataView Webpart (DVWP)
  14. 14. Step 6. Choose DataView > Insert DataView from Navigation
  15. 15. Step 6. You’ll now notice that your Webpart Zone Contains aDVWP that is not configured
  16. 16. Step 7. Click on link provide to add a Data Source for theDVWP
  17. 17. Step 7. Expand the SharePointLibraries from theData Source Library Pane,and select Banners Dropdown
  18. 18. Step 7. Select “Show Data”from the Banners Dropdown
  19. 19. Step 7. You should now be on theData Source Details pane. Select the data you want touse to create your banner.
  20. 20. Step 7.Now you can choose Insert Selected Fields as… >Multiple Item View
  21. 21. Step 8. Change DVWP Layout
  22. 22. Step 8. Choose a Layoutwithout a table.
  23. 23. Step 9. Now you havecode you cancustomize
  24. 24. Banner Code Customization
  25. 25. Save List/Library as Template Open List Go to List Settings Choose Library/ListSettings Choose Save Library/Listas Template
  26. 26. Finding the List {ListId}• Open List• Go to List Settings• In list URL look for ?List=%7B• Copy Everything after the % 7B• Eliminate %7B & %7D• Replace %2D with -%7BA381305C%2D8D20%2D44E6%2D8037%2DE8F7D689B6B5%7DA381305-8D20-44E6-8037-E8F7D689B6B5
  27. 27. Edit your Webpart Choose to Edit/Modify yourWebpart then select“Parameters Editor…”
  28. 28. Update Parameter for Webpart Update the ListIDand Save