By Echo Schmidt

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

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

What Can It Be… • Custom Calendar Query • Rotating Image • Custom Web Report • Graphs • News Widget …..Anything that uses a List or Library

Code Samples CodePlex CodeProject Stackoverflow Dreamincode Gethub CodeCanyon

http://codecanyon.net/item/translucent-responsive-banner-rotator-slider/801607

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 the

Dataview Webpart to.

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

Scenario Details Banners

Title Image Name Description URL

Step 4. Add CSS, jquery or other code reference to Masterpage

or Page Template

Step 5. • Open your webpage in SharePoint Designer and

Detach it from the PageLayout

Step 6. Select the location on the webpage you want to insert

the DataView Webpart (DVWP)

Step 6. Choose DataView > Insert DataView from Navigation

Step 6. You’ll now notice that your Webpart Zone Contains a

DVWP that is not configured

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

DVWP

Step 7. Expand the SharePoint

Libraries from the Data Source Library Pane, and select Banners Dropdown

Step 7. Select “Show Data”

from the Banners Dropdown

Step 7. You should now be on the

Data Source Details pane. Select the data you want to

use 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 Layout

without a table.

Step 9. Now you have

code you can customize

Banner Code Customization

Save List/Library as Template Open List Go to List Settings Choose Library/List

Settings Choose Save Library/List

as Template

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

Edit your Webpart Choose to Edit/Modify your

Webpart then select “Parameters Editor…”

Update Parameter for Webpart Update the ListID

and Save