Your SlideShare is downloading. ×
0
By Echo Schmidt
Extending SharePoint• Adding Code to HIVE• Install Webparts from ThirdParty• Create your own Webparts• Adding Code Library...
Extending the DataView Webpart PowerUser’s Can Do It It’s Backed-up In the Database It’s Easy to Reproduce It’s Easy t...
What Can It Be…• Custom Calendar Query• Rotating Image• Custom Web Report• Graphs• News Widget…..Anything that uses a List...
Code Samples CodePlex CodeProject Stackoverflow Dreamincode Gethub CodeCanyon http://codecanyon.net/item/translucen...
Step 1. Download your Sample Code &Verify it works outside of SharePoint Upload Code to a Code Library in SharePoint
Code Library
Step 2. Create a webpage in SharePoint for adding theDataview Webpart to.
Step 3. Create a SharePoint Library or List to containinformation. Site Actions > View All Site Content > Create > Pictu...
Scenario Details Banners Title Image Name Description URL
Step 4. Add CSS, jquery or other code reference to Masterpageor Page Template
Step 5.• Open your webpage in SharePoint Designer andDetach it from the PageLayout
Step 6. Select the location on the webpage you want to insertthe DataView Webpart (DVWP)
Step 6. Choose DataView > Insert DataView from Navigation
Step 6. You’ll now notice that your Webpart Zone Contains aDVWP that is not configured
Step 7. Click on link provide to add a Data Source for theDVWP
Step 7. Expand the SharePointLibraries from theData Source Library Pane,and select Banners Dropdown
Step 7. Select “Show Data”from the Banners Dropdown
Step 7. You should now be on theData Source Details pane. Select the data you want touse to create your banner.
Step 7.Now you can choose Insert Selected Fields as… >Multiple Item View
Step 8. Change DVWP Layout
Step 8. Choose a Layoutwithout a table.
Step 9. Now you havecode you cancustomize
Banner Code Customization
Save List/Library as Template Open List Go to List Settings Choose Library/ListSettings Choose Save Library/Listas Tem...
Finding the List {ListId}• Open List• Go to List Settings• In list URL look for ?List=%7B• Copy Everything after the % 7B•...
Edit your Webpart Choose to Edit/Modify yourWebpart then select“Parameters Editor…”
Update Parameter for Webpart Update the ListIDand Save
Rotating Banner in SharePoint with a DataView Webpart
Rotating Banner in SharePoint with a DataView Webpart
Rotating Banner in SharePoint with a DataView Webpart
Upcoming SlideShare
Loading in...5
×

Rotating Banner in SharePoint with a DataView Webpart

7,100

Published on

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

Published in: Technology, Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
7,100
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
35
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "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 http://codecanyon.net/item/translucent-responsive-banner-rotator-slider/801607
  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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×