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

1. By Echo Schmidt

2. Extending SharePoint
• Adding Code to HIVE
• Install Webparts from ThirdParty
• Create your own Webparts
• Adding Code Library
• DataView Webpart

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. What Can It Be…
• Custom Calendar Query
• Rotating Image
• Custom Web Report
• Graphs
• News Widget
…..Anything that uses a List or Library

5. Code Samples
 CodePlex
 CodeProject
 Stackoverflow
 Dreamincode
 Gethub
 CodeCanyon
 http://codecanyon.net/item/translucent-responsive-
banner-rotator-slider/801607

6. Step 1.
 Download your Sample Code &
Verify it works outside of SharePoint
 Upload Code to a Code Library in SharePoint

7. Code Library

8. Step 2.
 Create a webpage in SharePoint for adding the
Dataview Webpart to.

9. Step 3.
 Create a SharePoint Library or List to contain
information.
 Site Actions > View All Site Content > Create > Picture
Library
 Note: The webpage should be in the same SharePoint
site as the List or Library

10. Scenario Details
 Banners
 Title
 Image
 Name
 Description
 URL

11. Step 4.
 Add CSS, jquery or other code reference to Masterpage
or Page Template

13. Step 5.
• Open your webpage in SharePoint Designer and
Detach it from the PageLayout

14. Step 6.
 Select the location on the webpage you want to insert
the DataView Webpart (DVWP)

15. Step 6.
 Choose DataView > Insert DataView from Navigation

16. Step 6.
 You’ll now notice that your Webpart Zone Contains a
DVWP that is not configured

17. Step 7.
 Click on link provide to add a Data Source for the
DVWP

18. Step 7.
 Expand the SharePoint
Libraries from the
Data Source Library Pane,
and select Banners Dropdown

19. Step 7.
 Select “Show Data”
from the Banners Dropdown

20. Step 7.
 You should now be on the
Data Source Details pane.
 Select the data you want to
use to create your banner.

21. Step 7.
Now you can choose
 Insert Selected Fields as… >
Multiple Item View

23. Step 8.
 Change DVWP Layout

24. Step 8.
 Choose a Layout
without a table.

25. Step 9.
 Now you have
code you can
customize

26. Banner Code Customization

28. Save List/Library as Template
 Open List
 Go to List Settings
 Choose Library/List
Settings
 Choose Save Library/List
as Template

29. 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%7D
A381305-8D20-44E6-8037-E8F7D689B6B5

30. Edit your Webpart
 Choose to Edit/Modify your
Webpart then select
“Parameters Editor…”

31. Update Parameter for Webpart
 Update the ListID
and Save