rotating banner in sharepoint with a dataview webpart
DESCRIPTION
Adding customized functionality to SharePoint by using the Dataview Webpart such as a Rotating BannerTRANSCRIPT
![Page 1: Rotating Banner in SharePoint with a DataView Webpart](https://reader033.vdocuments.mx/reader033/viewer/2022060108/554ce02cb4c905d1488b5236/html5/thumbnails/1.jpg)
By Echo Schmidt
![Page 2: Rotating Banner in SharePoint with a DataView Webpart](https://reader033.vdocuments.mx/reader033/viewer/2022060108/554ce02cb4c905d1488b5236/html5/thumbnails/2.jpg)
Extending SharePoint • Adding Code to HIVE • Install Webparts from ThirdParty • Create your own Webparts • Adding Code Library • DataView Webpart
![Page 3: Rotating Banner in SharePoint with a DataView Webpart](https://reader033.vdocuments.mx/reader033/viewer/2022060108/554ce02cb4c905d1488b5236/html5/thumbnails/3.jpg)
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
![Page 4: Rotating Banner in SharePoint with a DataView Webpart](https://reader033.vdocuments.mx/reader033/viewer/2022060108/554ce02cb4c905d1488b5236/html5/thumbnails/4.jpg)
What Can It Be… • Custom Calendar Query • Rotating Image • Custom Web Report • Graphs • News Widget …..Anything that uses a List or Library
![Page 5: Rotating Banner in SharePoint with a DataView Webpart](https://reader033.vdocuments.mx/reader033/viewer/2022060108/554ce02cb4c905d1488b5236/html5/thumbnails/5.jpg)
Code Samples CodePlex CodeProject Stackoverflow Dreamincode Gethub CodeCanyon
http://codecanyon.net/item/translucent-responsive-banner-rotator-slider/801607
![Page 6: Rotating Banner in SharePoint with a DataView Webpart](https://reader033.vdocuments.mx/reader033/viewer/2022060108/554ce02cb4c905d1488b5236/html5/thumbnails/6.jpg)
Step 1. Download your Sample Code &
Verify it works outside of SharePoint Upload Code to a Code Library in SharePoint
![Page 7: Rotating Banner in SharePoint with a DataView Webpart](https://reader033.vdocuments.mx/reader033/viewer/2022060108/554ce02cb4c905d1488b5236/html5/thumbnails/7.jpg)
Code Library
![Page 8: Rotating Banner in SharePoint with a DataView Webpart](https://reader033.vdocuments.mx/reader033/viewer/2022060108/554ce02cb4c905d1488b5236/html5/thumbnails/8.jpg)
Step 2. Create a webpage in SharePoint for adding the
Dataview Webpart to.
![Page 9: Rotating Banner in SharePoint with a DataView Webpart](https://reader033.vdocuments.mx/reader033/viewer/2022060108/554ce02cb4c905d1488b5236/html5/thumbnails/9.jpg)
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
![Page 10: Rotating Banner in SharePoint with a DataView Webpart](https://reader033.vdocuments.mx/reader033/viewer/2022060108/554ce02cb4c905d1488b5236/html5/thumbnails/10.jpg)
Scenario Details Banners
Title Image Name Description URL
![Page 11: Rotating Banner in SharePoint with a DataView Webpart](https://reader033.vdocuments.mx/reader033/viewer/2022060108/554ce02cb4c905d1488b5236/html5/thumbnails/11.jpg)
Step 4. Add CSS, jquery or other code reference to Masterpage
or Page Template
![Page 12: Rotating Banner in SharePoint with a DataView Webpart](https://reader033.vdocuments.mx/reader033/viewer/2022060108/554ce02cb4c905d1488b5236/html5/thumbnails/12.jpg)
![Page 13: Rotating Banner in SharePoint with a DataView Webpart](https://reader033.vdocuments.mx/reader033/viewer/2022060108/554ce02cb4c905d1488b5236/html5/thumbnails/13.jpg)
Step 5. • Open your webpage in SharePoint Designer and
Detach it from the PageLayout
![Page 14: Rotating Banner in SharePoint with a DataView Webpart](https://reader033.vdocuments.mx/reader033/viewer/2022060108/554ce02cb4c905d1488b5236/html5/thumbnails/14.jpg)
Step 6. Select the location on the webpage you want to insert
the DataView Webpart (DVWP)
![Page 15: Rotating Banner in SharePoint with a DataView Webpart](https://reader033.vdocuments.mx/reader033/viewer/2022060108/554ce02cb4c905d1488b5236/html5/thumbnails/15.jpg)
Step 6. Choose DataView > Insert DataView from Navigation
![Page 16: Rotating Banner in SharePoint with a DataView Webpart](https://reader033.vdocuments.mx/reader033/viewer/2022060108/554ce02cb4c905d1488b5236/html5/thumbnails/16.jpg)
Step 6. You’ll now notice that your Webpart Zone Contains a
DVWP that is not configured
![Page 17: Rotating Banner in SharePoint with a DataView Webpart](https://reader033.vdocuments.mx/reader033/viewer/2022060108/554ce02cb4c905d1488b5236/html5/thumbnails/17.jpg)
Step 7. Click on link provide to add a Data Source for the
DVWP
![Page 18: Rotating Banner in SharePoint with a DataView Webpart](https://reader033.vdocuments.mx/reader033/viewer/2022060108/554ce02cb4c905d1488b5236/html5/thumbnails/18.jpg)
Step 7. Expand the SharePoint
Libraries from the Data Source Library Pane, and select Banners Dropdown
![Page 19: Rotating Banner in SharePoint with a DataView Webpart](https://reader033.vdocuments.mx/reader033/viewer/2022060108/554ce02cb4c905d1488b5236/html5/thumbnails/19.jpg)
Step 7. Select “Show Data”
from the Banners Dropdown
![Page 20: Rotating Banner in SharePoint with a DataView Webpart](https://reader033.vdocuments.mx/reader033/viewer/2022060108/554ce02cb4c905d1488b5236/html5/thumbnails/20.jpg)
Step 7. You should now be on the
Data Source Details pane. Select the data you want to
use to create your banner.
![Page 21: Rotating Banner in SharePoint with a DataView Webpart](https://reader033.vdocuments.mx/reader033/viewer/2022060108/554ce02cb4c905d1488b5236/html5/thumbnails/21.jpg)
Step 7. Now you can choose Insert Selected Fields as… >
Multiple Item View
![Page 22: Rotating Banner in SharePoint with a DataView Webpart](https://reader033.vdocuments.mx/reader033/viewer/2022060108/554ce02cb4c905d1488b5236/html5/thumbnails/22.jpg)
![Page 23: Rotating Banner in SharePoint with a DataView Webpart](https://reader033.vdocuments.mx/reader033/viewer/2022060108/554ce02cb4c905d1488b5236/html5/thumbnails/23.jpg)
Step 8. Change DVWP Layout
![Page 24: Rotating Banner in SharePoint with a DataView Webpart](https://reader033.vdocuments.mx/reader033/viewer/2022060108/554ce02cb4c905d1488b5236/html5/thumbnails/24.jpg)
Step 8. Choose a Layout
without a table.
![Page 25: Rotating Banner in SharePoint with a DataView Webpart](https://reader033.vdocuments.mx/reader033/viewer/2022060108/554ce02cb4c905d1488b5236/html5/thumbnails/25.jpg)
Step 9. Now you have
code you can customize
![Page 26: Rotating Banner in SharePoint with a DataView Webpart](https://reader033.vdocuments.mx/reader033/viewer/2022060108/554ce02cb4c905d1488b5236/html5/thumbnails/26.jpg)
Banner Code Customization
![Page 27: Rotating Banner in SharePoint with a DataView Webpart](https://reader033.vdocuments.mx/reader033/viewer/2022060108/554ce02cb4c905d1488b5236/html5/thumbnails/27.jpg)
![Page 28: Rotating Banner in SharePoint with a DataView Webpart](https://reader033.vdocuments.mx/reader033/viewer/2022060108/554ce02cb4c905d1488b5236/html5/thumbnails/28.jpg)
Save List/Library as Template Open List Go to List Settings Choose Library/List
Settings Choose Save Library/List
as Template
![Page 29: Rotating Banner in SharePoint with a DataView Webpart](https://reader033.vdocuments.mx/reader033/viewer/2022060108/554ce02cb4c905d1488b5236/html5/thumbnails/29.jpg)
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
![Page 30: Rotating Banner in SharePoint with a DataView Webpart](https://reader033.vdocuments.mx/reader033/viewer/2022060108/554ce02cb4c905d1488b5236/html5/thumbnails/30.jpg)
Edit your Webpart Choose to Edit/Modify your
Webpart then select “Parameters Editor…”
![Page 31: Rotating Banner in SharePoint with a DataView Webpart](https://reader033.vdocuments.mx/reader033/viewer/2022060108/554ce02cb4c905d1488b5236/html5/thumbnails/31.jpg)
Update Parameter for Webpart Update the ListID
and Save