using rest to create a no code web part!
DESCRIPTION
November 11, 2011. Using REST to Create a No Code Web Part!. An introduction to REST connections Patrick Curran, MCT. Patrick Curran. MCT, MCITP , MCTS , MCP SharePoint Architect for Planet Technologies. Working with SharePoint since 2003. Administrator / Developer - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: Using REST to Create a No Code Web Part!](https://reader035.vdocuments.net/reader035/viewer/2022081505/56816723550346895ddbac3e/html5/thumbnails/1.jpg)
Using REST to Create a No Code Web Part!
An introduction to REST connections
Patrick Curran, MCT• November 11, 2011
![Page 2: Using REST to Create a No Code Web Part!](https://reader035.vdocuments.net/reader035/viewer/2022081505/56816723550346895ddbac3e/html5/thumbnails/2.jpg)
Patrick Curran• MCT, MCITP, MCTS, MCP• SharePoint Architect for Planet Technologies.• Working with SharePoint since 2003.
– Administrator / Developer– Architect / Implementer– Troubleshooter / Brander
PCfromDC.blogspot.com @PCfromDC
![Page 3: Using REST to Create a No Code Web Part!](https://reader035.vdocuments.net/reader035/viewer/2022081505/56816723550346895ddbac3e/html5/thumbnails/3.jpg)
Today’s Game Plan• SharePoint familiarity discussion.• Introduction to REST Connections.• Create an Address List from a predefined content type.• Tweak and modify the list to meet out needs (Demo).• Use SharePoint Designer 2010 to add a Data View Web Part to
display our Address on a new Web Part page (Demo).• Use SharePoint Designer 2010 to create a REST connection to
display the current weather in Beverly Hills, CA (Demo).• Create a data connection to display the weather of the zip code
from our Address List (Demo).
![Page 4: Using REST to Create a No Code Web Part!](https://reader035.vdocuments.net/reader035/viewer/2022081505/56816723550346895ddbac3e/html5/thumbnails/4.jpg)
What is REST? • Really Expensive SharePoint Technology?• Stands for Representational State Transfer.• REST is not a protocol. • At its most basic element, REST is a way for a client to retrieve data
from a server over http. • SharePoint has a RESTful web service which will allow us to grab
data from lists and libraries.
![Page 5: Using REST to Create a No Code Web Part!](https://reader035.vdocuments.net/reader035/viewer/2022081505/56816723550346895ddbac3e/html5/thumbnails/5.jpg)
Objective• To display the weather at a location that is stored in a SharePoint
list.
![Page 6: Using REST to Create a No Code Web Part!](https://reader035.vdocuments.net/reader035/viewer/2022081505/56816723550346895ddbac3e/html5/thumbnails/6.jpg)
Let’s Get Started…• The first thing that we will need to accomplish is to create a list to
store our address.
Click on Lists
![Page 7: Using REST to Create a No Code Web Part!](https://reader035.vdocuments.net/reader035/viewer/2022081505/56816723550346895ddbac3e/html5/thumbnails/7.jpg)
Creating “The List”
Click on Create
![Page 8: Using REST to Create a No Code Web Part!](https://reader035.vdocuments.net/reader035/viewer/2022081505/56816723550346895ddbac3e/html5/thumbnails/8.jpg)
Creating “The List”
Click on Lists
1- Select Lists.2- Click on the list type.
3- Add a name (No spaces, We’ll fix this in a bit).
4- Click on Create when ready!
![Page 9: Using REST to Create a No Code Web Part!](https://reader035.vdocuments.net/reader035/viewer/2022081505/56816723550346895ddbac3e/html5/thumbnails/9.jpg)
Tweaking “The List”• Now that our list has been created, let’s tweak it for our
requirements.
Click List Settings
![Page 10: Using REST to Create a No Code Web Part!](https://reader035.vdocuments.net/reader035/viewer/2022081505/56816723550346895ddbac3e/html5/thumbnails/10.jpg)
Tweaking “The List”
2- Set the content type.1- Adjust the Title (add the spaces back).
Not part of this demo…
![Page 11: Using REST to Create a No Code Web Part!](https://reader035.vdocuments.net/reader035/viewer/2022081505/56816723550346895ddbac3e/html5/thumbnails/11.jpg)
Tweaking “The Title”
1- Adjust the Title (add the spaces back).
![Page 12: Using REST to Create a No Code Web Part!](https://reader035.vdocuments.net/reader035/viewer/2022081505/56816723550346895ddbac3e/html5/thumbnails/12.jpg)
Tweaking “The Title”
1- Adjust the Title (add the spaces back).
![Page 13: Using REST to Create a No Code Web Part!](https://reader035.vdocuments.net/reader035/viewer/2022081505/56816723550346895ddbac3e/html5/thumbnails/13.jpg)
Tweaking “The Title”
No “%20” in the URLUser friendly name.
![Page 14: Using REST to Create a No Code Web Part!](https://reader035.vdocuments.net/reader035/viewer/2022081505/56816723550346895ddbac3e/html5/thumbnails/14.jpg)
Add Content Type…
Default content type.We want to add an existing content type.
![Page 15: Using REST to Create a No Code Web Part!](https://reader035.vdocuments.net/reader035/viewer/2022081505/56816723550346895ddbac3e/html5/thumbnails/15.jpg)
Add Content Type…1- Select List Type from Drop Down.
2- Add Contact
![Page 16: Using REST to Create a No Code Web Part!](https://reader035.vdocuments.net/reader035/viewer/2022081505/56816723550346895ddbac3e/html5/thumbnails/16.jpg)
Add Content Type…1- Select List Type from Drop Down.
2- Add Contact
![Page 17: Using REST to Create a No Code Web Part!](https://reader035.vdocuments.net/reader035/viewer/2022081505/56816723550346895ddbac3e/html5/thumbnails/17.jpg)
Add Content Type…OTB Content Type Columns.
![Page 18: Using REST to Create a No Code Web Part!](https://reader035.vdocuments.net/reader035/viewer/2022081505/56816723550346895ddbac3e/html5/thumbnails/18.jpg)
Tweak The Content Type…
Our Available Content Types.Change the Default Content Type.
![Page 19: Using REST to Create a No Code Web Part!](https://reader035.vdocuments.net/reader035/viewer/2022081505/56816723550346895ddbac3e/html5/thumbnails/19.jpg)
Tweak The Content Type…
Settings Before
![Page 20: Using REST to Create a No Code Web Part!](https://reader035.vdocuments.net/reader035/viewer/2022081505/56816723550346895ddbac3e/html5/thumbnails/20.jpg)
Tweak The Content Type…
Settings After
![Page 21: Using REST to Create a No Code Web Part!](https://reader035.vdocuments.net/reader035/viewer/2022081505/56816723550346895ddbac3e/html5/thumbnails/21.jpg)
Tweak The Content Type…
Change Last Name to Location
![Page 22: Using REST to Create a No Code Web Part!](https://reader035.vdocuments.net/reader035/viewer/2022081505/56816723550346895ddbac3e/html5/thumbnails/22.jpg)
Tweak The Content Type…
Change Last Name to Location
![Page 23: Using REST to Create a No Code Web Part!](https://reader035.vdocuments.net/reader035/viewer/2022081505/56816723550346895ddbac3e/html5/thumbnails/23.jpg)
Tweak The Content Type…
Click OK to finish
![Page 24: Using REST to Create a No Code Web Part!](https://reader035.vdocuments.net/reader035/viewer/2022081505/56816723550346895ddbac3e/html5/thumbnails/24.jpg)
Tweak The Content Type…What Columns do we really need?
![Page 25: Using REST to Create a No Code Web Part!](https://reader035.vdocuments.net/reader035/viewer/2022081505/56816723550346895ddbac3e/html5/thumbnails/25.jpg)
Tweak The Content Type…
What Columns do we really need?Let’s hide the one’s we do not!
![Page 26: Using REST to Create a No Code Web Part!](https://reader035.vdocuments.net/reader035/viewer/2022081505/56816723550346895ddbac3e/html5/thumbnails/26.jpg)
Tweak The View…
Let’s edit the View
![Page 27: Using REST to Create a No Code Web Part!](https://reader035.vdocuments.net/reader035/viewer/2022081505/56816723550346895ddbac3e/html5/thumbnails/27.jpg)
Tweak The View…
Let’s edit the View
![Page 28: Using REST to Create a No Code Web Part!](https://reader035.vdocuments.net/reader035/viewer/2022081505/56816723550346895ddbac3e/html5/thumbnails/28.jpg)
Add An Address…
Finally, let’s go ahead and Add a new item!
Click Add new Item
![Page 29: Using REST to Create a No Code Web Part!](https://reader035.vdocuments.net/reader035/viewer/2022081505/56816723550346895ddbac3e/html5/thumbnails/29.jpg)
Add An Address…
![Page 30: Using REST to Create a No Code Web Part!](https://reader035.vdocuments.net/reader035/viewer/2022081505/56816723550346895ddbac3e/html5/thumbnails/30.jpg)
Add An Address…
![Page 31: Using REST to Create a No Code Web Part!](https://reader035.vdocuments.net/reader035/viewer/2022081505/56816723550346895ddbac3e/html5/thumbnails/31.jpg)
Add An Address…
![Page 32: Using REST to Create a No Code Web Part!](https://reader035.vdocuments.net/reader035/viewer/2022081505/56816723550346895ddbac3e/html5/thumbnails/32.jpg)
Let’s Create Our List!
Demo Time!
![Page 33: Using REST to Create a No Code Web Part!](https://reader035.vdocuments.net/reader035/viewer/2022081505/56816723550346895ddbac3e/html5/thumbnails/33.jpg)
It’s Time To Design!Let’s open up Designer and create a page to hold our information.
1- Open your site.2- Select Master Pages.3- Select the v4.master4- Right click and select New from Master Page.
![Page 34: Using REST to Create a No Code Web Part!](https://reader035.vdocuments.net/reader035/viewer/2022081505/56816723550346895ddbac3e/html5/thumbnails/34.jpg)
Create A Page…1- Save Page.
2- Ignore warning and click Yes
![Page 35: Using REST to Create a No Code Web Part!](https://reader035.vdocuments.net/reader035/viewer/2022081505/56816723550346895ddbac3e/html5/thumbnails/35.jpg)
Create A Page…1- Within the PlaceHolderMain, select the Common Content Tasks.2- Click Create Custom Content
![Page 36: Using REST to Create a No Code Web Part!](https://reader035.vdocuments.net/reader035/viewer/2022081505/56816723550346895ddbac3e/html5/thumbnails/36.jpg)
Create A Page…
1- Click inside of the PlaceHolderMain.2- Insert a 4x4 Table.
![Page 37: Using REST to Create a No Code Web Part!](https://reader035.vdocuments.net/reader035/viewer/2022081505/56816723550346895ddbac3e/html5/thumbnails/37.jpg)
Insert Data View Web Part…
1- Click inside the Upper Left table cell.2- Insert an Empty Data View.
![Page 38: Using REST to Create a No Code Web Part!](https://reader035.vdocuments.net/reader035/viewer/2022081505/56816723550346895ddbac3e/html5/thumbnails/38.jpg)
Insert Data View Web Part…
![Page 39: Using REST to Create a No Code Web Part!](https://reader035.vdocuments.net/reader035/viewer/2022081505/56816723550346895ddbac3e/html5/thumbnails/39.jpg)
Insert Data View Web Part…
1- Ctrl + Click in order.2- Insert as a Single Item View from the pull-down menu.
![Page 40: Using REST to Create a No Code Web Part!](https://reader035.vdocuments.net/reader035/viewer/2022081505/56816723550346895ddbac3e/html5/thumbnails/40.jpg)
Insert Data View Web Part…
Our list data is finally inserted!
![Page 41: Using REST to Create a No Code Web Part!](https://reader035.vdocuments.net/reader035/viewer/2022081505/56816723550346895ddbac3e/html5/thumbnails/41.jpg)
Tweak The Web Part…Remove Paging
Paging
![Page 42: Using REST to Create a No Code Web Part!](https://reader035.vdocuments.net/reader035/viewer/2022081505/56816723550346895ddbac3e/html5/thumbnails/42.jpg)
Tweak The Web Part…Remove the first column
![Page 43: Using REST to Create a No Code Web Part!](https://reader035.vdocuments.net/reader035/viewer/2022081505/56816723550346895ddbac3e/html5/thumbnails/43.jpg)
Tweak The Web Part…Format Address
![Page 44: Using REST to Create a No Code Web Part!](https://reader035.vdocuments.net/reader035/viewer/2022081505/56816723550346895ddbac3e/html5/thumbnails/44.jpg)
Let’s See Some Data!
Demo Time!
![Page 45: Using REST to Create a No Code Web Part!](https://reader035.vdocuments.net/reader035/viewer/2022081505/56816723550346895ddbac3e/html5/thumbnails/45.jpg)
Add The Weather…Click in the 3rd table row.
![Page 46: Using REST to Create a No Code Web Part!](https://reader035.vdocuments.net/reader035/viewer/2022081505/56816723550346895ddbac3e/html5/thumbnails/46.jpg)
Add The Weather…Add New REST Connection
1- Select Data Sources.2- Click REST Service Connection.
![Page 47: Using REST to Create a No Code Web Part!](https://reader035.vdocuments.net/reader035/viewer/2022081505/56816723550346895ddbac3e/html5/thumbnails/47.jpg)
Add The Weather…1- Name your connection. 2- Add URL. 3- Modify Parameters.
![Page 48: Using REST to Create a No Code Web Part!](https://reader035.vdocuments.net/reader035/viewer/2022081505/56816723550346895ddbac3e/html5/thumbnails/48.jpg)
Add The Weather…1- Modify Parameter.
Our updated Properties.
![Page 49: Using REST to Create a No Code Web Part!](https://reader035.vdocuments.net/reader035/viewer/2022081505/56816723550346895ddbac3e/html5/thumbnails/49.jpg)
Add The Weather…
Insert REST Feed Data View into 3rd table row.
![Page 50: Using REST to Create a No Code Web Part!](https://reader035.vdocuments.net/reader035/viewer/2022081505/56816723550346895ddbac3e/html5/thumbnails/50.jpg)
Tweak The Weather…With the Weather Web Part selected, click Add/Remove Columns.
![Page 51: Using REST to Create a No Code Web Part!](https://reader035.vdocuments.net/reader035/viewer/2022081505/56816723550346895ddbac3e/html5/thumbnails/51.jpg)
Tweak The Weather…
Lets remove the Displayed Columns.
![Page 52: Using REST to Create a No Code Web Part!](https://reader035.vdocuments.net/reader035/viewer/2022081505/56816723550346895ddbac3e/html5/thumbnails/52.jpg)
Tweak The Weather…Delete the description row (right click in cell).
![Page 53: Using REST to Create a No Code Web Part!](https://reader035.vdocuments.net/reader035/viewer/2022081505/56816723550346895ddbac3e/html5/thumbnails/53.jpg)
Tweak The Weather…Change the description Format type to Rich Text.
![Page 54: Using REST to Create a No Code Web Part!](https://reader035.vdocuments.net/reader035/viewer/2022081505/56816723550346895ddbac3e/html5/thumbnails/54.jpg)
Tweak The Weather…Ignore the Warning!
Our updated page!
![Page 55: Using REST to Create a No Code Web Part!](https://reader035.vdocuments.net/reader035/viewer/2022081505/56816723550346895ddbac3e/html5/thumbnails/55.jpg)
Let’s See The Weather!
Demo Time!
![Page 56: Using REST to Create a No Code Web Part!](https://reader035.vdocuments.net/reader035/viewer/2022081505/56816723550346895ddbac3e/html5/thumbnails/56.jpg)
Make The Connection…1- Select the address web part.2- Add Connection
![Page 57: Using REST to Create a No Code Web Part!](https://reader035.vdocuments.net/reader035/viewer/2022081505/56816723550346895ddbac3e/html5/thumbnails/57.jpg)
Make The Connection…1 2
3
![Page 58: Using REST to Create a No Code Web Part!](https://reader035.vdocuments.net/reader035/viewer/2022081505/56816723550346895ddbac3e/html5/thumbnails/58.jpg)
Make The Connection…
4 5
![Page 59: Using REST to Create a No Code Web Part!](https://reader035.vdocuments.net/reader035/viewer/2022081505/56816723550346895ddbac3e/html5/thumbnails/59.jpg)
Make The Connection…
6 7
![Page 60: Using REST to Create a No Code Web Part!](https://reader035.vdocuments.net/reader035/viewer/2022081505/56816723550346895ddbac3e/html5/thumbnails/60.jpg)
Tweak The Content…
Add a hyperlink to the company web site
1- Select the company name (Planet Technologies)2- Format Item as Hyperlink3- Ignore Confirmation!
![Page 61: Using REST to Create a No Code Web Part!](https://reader035.vdocuments.net/reader035/viewer/2022081505/56816723550346895ddbac3e/html5/thumbnails/61.jpg)
Tweak The Content…Edit Hyperlink Address1- Click the function button 2- Select Web Page
![Page 62: Using REST to Create a No Code Web Part!](https://reader035.vdocuments.net/reader035/viewer/2022081505/56816723550346895ddbac3e/html5/thumbnails/62.jpg)
Tweak The Content…
Update Address
![Page 63: Using REST to Create a No Code Web Part!](https://reader035.vdocuments.net/reader035/viewer/2022081505/56816723550346895ddbac3e/html5/thumbnails/63.jpg)
Tweak The Content…Open hyperlink in new page1- Press the Target Frame button. 2- Select New Window as Target Frame.
![Page 64: Using REST to Create a No Code Web Part!](https://reader035.vdocuments.net/reader035/viewer/2022081505/56816723550346895ddbac3e/html5/thumbnails/64.jpg)
Let’s See If It Works!
Demo Time!
![Page 65: Using REST to Create a No Code Web Part!](https://reader035.vdocuments.net/reader035/viewer/2022081505/56816723550346895ddbac3e/html5/thumbnails/65.jpg)
Troubleshooting…
![Page 66: Using REST to Create a No Code Web Part!](https://reader035.vdocuments.net/reader035/viewer/2022081505/56816723550346895ddbac3e/html5/thumbnails/66.jpg)
Additional REST Information• Important SharePoint REST Starting Point• http://[yoursharepointURL]/_vti_bin/listdata.svc/[LISTNAME] • Reference Information• Accessing SharePoint 2010 Lists using RESTful Service.- http://mstecharchitect.blogspot.com/2010/01/accessing-sharepoint-2010-lists-using.html • Referencing lists from external site collections – Cross-site collection lookup with REST and the DVWP!- http
://hamishking.wordpress.com/tag/cross-site-collection-lookup/ • SP2010: REST Data Sources within SharePoint Designer- http://
jsiegmund.wordpress.com/2010/04/25/sp2010-rest-data-sources-within-sharepoint-designer/v• Working with Data Sources and Web Services connections in SharePoint Designer 2010 (Has a list of all web services)- http
://spointblog.com/2010/02/07/working-with-data-sources-and-web-services-connections-in-sharepoint-designer-2010/• Overview of using REST in SharePoint 2010- http://www.synergyonline.com/Blog/Lists/Posts/Post.aspx?ID=35
• Lab (This is very cool)• Adding Dynamic Maps to Contact Forms with REST Web Services in InfoPath 2010.- http://msdn.microsoft.com/en-us/library/gg293117.aspx
• Background Information• Representational state transfer- http://en.wikipedia.org/wiki/Representational_State_Transfer• QuickStudy: Representational State Transfer (REST)- http://www.computerworld.com/s/article/297424/Representational_State_Transfer_REST_?
taxonomyId=16&pageNumber=1• REST Web Service- http://www.knowledgetree.org/REST_Web_Service