Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
TheHumble&Mighty
SharePointURLQueryString
?author=Patrick%20Doran
Or,
Dadalwayssaid
usetherightWebPart
FortherightJob
Fig1.
Whenyoupickthe
wrongtoolin
SharePoint
yourPresenter: PatrickDoran
● 15 Years as a Front-end Developer & UX Designer
● 6 Years in SharePoint, 2007, 2010 & 2013 &...
yourPresenter: PatrickDoran
Where I’m at:
● Twitter: @SwearPointJS
● LinkedIn: linkedin.com/in/patrickdoran
● And: patrick...
HowmuchDoyouSharePoint?
★ What a list/library is and what
metadata columns are
★ Web parts: Putting them on a page
★ Calcu...
WhyareYouhere?
Because not everything is a
React-WebPack-SharePoint-Framework-Hybrid-Azure-Framework.js
Full Trust Solutio...
WhyareYouhere?
Sometimes all you have is
talent/time for web parts.
This is OK.
Whereweendedup
Whereweendedup
★ All out of the
box web parts
★ Content approval
on list items
WhatIs.aspx?QueryString
★ Hangs on to the end of the URL, after the file name:
★ Usually ?key=value
Morethanonewayto filterwithqueryStrings
★ Question mark is always first one ?=
★ Ampersand are the rest (can be multiple) ...
WhatIs.aspx?QueryString&k=searchtoo
WhatcanaSharePointQueryStringdoforme?
★ Share a link to a filtered view
★ Bookmark search results
★ Filter 50 web parts on...
WhatcanaSharePointQueryStringdoforme?
★ Show your users just what they want by leveraging
SharePoint metadata and Search.
...
https://css-tricks.com/snippets/javascript/get-url-variables/
ButwhataboutJavaScript?
QueryStringURL Worship
★ Web parts can be
loyal to the Query
String
★ When the query string
changes its
teachings, so do i...
4queryString
Thingswe’llTalk
about
1. Built in
[Search, List/Library]
1. Built in
[Search, List/Library]
2. Query String [URL] Web Part
[For web parts on a page]
4queryString
Thingswe’llTalk
a...
1. Built in
[Search, List/Library]
3. Content Query Web Part
[For not-tables of content]
2. Query String [URL] Web Part
[F...
1. Built in
[Search, List/Library]
4. Mixed all together
[Some of each]
2. Query String [URL] Web Part
[For web parts on a...
Butmaybenot
ContentSearchWebParts
#sorry
FYI:
There’sQueryStringswith
DataViewWebPartsin
SharePointDesigner,too.
1. Hand-Typed
Built-In
Filtering
2kinds
1) Search
2) List/Library View
Builtin:
Search
Change the k= value
http://www.cityoflondon.gov.uk/searc
h/results.aspx?k=Parks
http://www.cityoflondon.go...
k= Search term
results.aspx?k=Parks
k= Multiple Terms
results.aspx?k=Parks%20Recreation
u= Restrict by domain
results.aspx...
Builtin:
List/Library
A regular old list:
https://connect.ncdot.gov/Lists/CDR
Example: Filtered by Division col
https://co...
What’sthis?FilterField1=Division&FilterValue1=06
2 things to do here:
★ Specify the field to filter on
★ Specify the value...
Filter 2 (or more) things
https://connect.ncdot.gov/Lists/CDR?FilterField1=Division&FilterValue1=06&F
ilterField2=County&F...
Demo 0
BuiltInSharePointQueryStringsInAction!
BuiltIn:Pros
★ Fast to set up.
★ Bookmarkable.
★ No web parts needed
★ Works w/anonymous permissions
★ List/Library: Up to...
BuiltIn:Cons
★ Must know internal field name of column (Though
this is good, too)
★ URL is weird to read
★ Only one sort f...
InternalFieldNames
★ First name the field has when you create a column.
★ SharePoint controls this. Tricky to change after...
2. QueryString
(URL)
WebPart
UsethisWebPart:QueryString(URL)Filter
Enableitifit’snotthere
If you don’t see the web parts, activate
Standard Site Collection Features
What’sitlooklike?
What’sitlooklike?
More control
★ Pick Your query
string key, like
?Year=
?Cheese=
Demo1
Makingtheconnection
01. Add Query String (URL)
Filter web part.
02. Click ‘Open the tool
pane’ to configure
Makingtheconnection
Configure
Filter Name = Just to help
you remember.
Query String Parameter
Name = What’s in the URL,
li...
Makingtheconnection
03. In List View Web Part,
edit, pick Connections
and then Get Filter
Values From and finally
Query St...
Makingtheconnection
Specify Column
What list column should
your Query String URL
filter on? In this
case, Year.
Pro Tip: Y...
Makingtheconnection
04. Confirm and Test.
Query String URL Filter
web part will list any
other web parts it’s
connected to...
Demo1Review
01. SharePoint List* with useful column (Year)
02. Added List View Web Part
03. Added Query String [URL] Filte...
Demo2:MultipleValues
Demo2:MultipleValues Review
01. List View Web Part
02. Added Query String Web Part, connected to Year Column
03. Added 2nd...
Demo3:Onefilter, ManyWebParts
The beginning of a Dashboard….
Demo3:Onefilter, ManyWebParts:Review
01. Added 5 List View Web Parts - (all from the same list,
but can be many)
02. Singl...
QueryString(URL)WebPart: Pros
★ Name your own query key. ?this=awesome
★ Use Multiple filters to filter multiple web
parts...
QueryString(URL)WebPart: Cons
★ One+ extra web part on a page per query
string.
★ Soooo much configuring
★ Can’t use Share...
3. ContentQuery
WebPart’sQuery
StringFilter
cQwP:WhyNotUseListViewWebParts?
★ List View Web Parts look like List View Web Parts.
★ Weigh a lot of KB
★ Depending on yo...
ContentQueryConfigure
In CQWP, under Additional
Filters, use this:
[PageQueryString:x]
(Where x is your query string
key, ...
Demo4:ContentQueryWebParts
Demo4:ContentQueryWebPartsReview
01. Added a Content Query Web Part to page and
configured it to reference our list
02. No...
ContentQueryWebPartQueryString: Pros
★ Name your own query key. ?this=awesome
★ Combine Multiple filters to multiple web p...
ContentQueryWebPartQueryString: Cons
★ Syntax is a little weird
★ CQWPs have only a few formatting options
w/out CSS+XSLT
...
4.Alltogethernow
AllTogetherNow
★ Add List View Web Parts
★ Add Query String (URL) Filter Web Parts
★ Add Content Query Web Parts
★ Use the...
Demo5:QueryString AllThethings
Demo5:QueryString AllThethingsReview
01. 1 List and 1 library, same Metadata columns
(Year and Team Name)
02. Add 2 CQWPs ...
Spruceitupabit
Spruceitupabit+navigation
SameList
+GroupByWebPart
+[calculatedColumn]
=AutomaticNavigation
Figureoutthingsfirst
1. What’s your Query String URL setup?
(Map out columns for ?key=value, or ?key=value&key2=valueX)
2....
Makeyourcalculatedcolumn
★ Concatenate!
★ Data type must be number to
render as HTML link
★ Can use most columns, but
not ...
Makeyourcalculatedcolumn
Example Syntax:
=CONCATENATE("<a
href='pageName.aspx?TeamName=",[Team
Name],"&Year=",Year,"'>",[T...
Makeyourcalculatedcolumn
★ Save your new calculated column
★ Add the column to the view
★ Self-updating clickable link!
Sitback,letContributorsdotheirthing
Sitback,letContributorsdotheirthing
Sitback,letContributorsdotheirthing
recap
Query String-based
techinques we covered
1. Built in
[Search, List/Library]
4. Mixed all together
[Some of each]
2. Query ...
BONUS:
JavascriptQuery
StringURL!
Web parts for some stuff,
JavaScript to add some
styling/context
youknowJSandyoulikeChromeDevTools?
What are my Query Strings?
console.log(window.location.search)
AssumesyouJSandyoulikeChromeDevTools
What are the values of my Query Strings?
function getQueryVariable(variable) {
var qu...
https://patrickdoran.sharepoint.com/query-strings/Pages/Query-String-Demo-Java
script.aspx
https://patrickdoran.sharepoint...
// Function at gets the value of a query string key-value pair.
// expects the key to be passed to it.
var getQueryVariabl...
Upcoming SlideShare
Loading in …5
×

The Humble & Mighty SharePoint URL Query String

3,167 views

Published on

In this breakout session, SharePoint power users will learn how to use SharePoint’s query-string, content query, and search-powered web parts all together with the secret sauce – HTML calculated columns – to build SharePoint easy to navigate knowledge portals and handsome wikis for your contributors.

Give the contributors on your team a great CMS experience with images, videos, and documents, all without the burden of and mess of traditional SharePoint wikis.

Published in: Technology
  • Read this heartfelt letter below from Sonasi Samita, a disease-ridden man stricken with kidney failure, diabetes, gout, heart problems, and blindness. He tells his tear-jerking story on how the Demolisher system has totally changed his life! Sonasi says he's convinced that the Demolisher system is God's answer to his prayers!  http://t.cn/A6zP24pL
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • How we discovered the real reason nice guys don't get laid, and a simple "fix" that allows you to gain the upper hand with a girl... without changing your personality or pretending to be someone you're not. learn more... ♣♣♣ http://ishbv.com/unlockher/pdf
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • How long does it take for VigRX Plus to start working? ♣♣♣ https://bit.ly/30G1ZO1
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • ♣♣ 10 Easy Ways to Improve Your Performance in Bed... ■■■ https://tinyurl.com/rockhardxx
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • ➤➤ How Long Does She Want You to Last? Here's the link to the FREE report ◆◆◆ https://tinyurl.com/rockhardxx
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

The Humble & Mighty SharePoint URL Query String

  1. 1. TheHumble&Mighty SharePointURLQueryString ?author=Patrick%20Doran
  2. 2. Or, Dadalwayssaid usetherightWebPart FortherightJob
  3. 3. Fig1. Whenyoupickthe wrongtoolin SharePoint
  4. 4. yourPresenter: PatrickDoran ● 15 Years as a Front-end Developer & UX Designer ● 6 Years in SharePoint, 2007, 2010 & 2013 & Online ● At work, builds public facing SharePoint sites
  5. 5. yourPresenter: PatrickDoran Where I’m at: ● Twitter: @SwearPointJS ● LinkedIn: linkedin.com/in/patrickdoran ● And: patrickdoran.com This presentation: And: github.com/patd
  6. 6. HowmuchDoyouSharePoint? ★ What a list/library is and what metadata columns are ★ Web parts: Putting them on a page ★ Calculated column? ★ A little HTML?
  7. 7. WhyareYouhere? Because not everything is a React-WebPack-SharePoint-Framework-Hybrid-Azure-Framework.js Full Trust Solution Continuous-Integration AWS Powered solution for THE CLOUD™
  8. 8. WhyareYouhere? Sometimes all you have is talent/time for web parts. This is OK.
  9. 9. Whereweendedup
  10. 10. Whereweendedup ★ All out of the box web parts ★ Content approval on list items
  11. 11. WhatIs.aspx?QueryString ★ Hangs on to the end of the URL, after the file name: ★ Usually ?key=value
  12. 12. Morethanonewayto filterwithqueryStrings ★ Question mark is always first one ?= ★ Ampersand are the rest (can be multiple) &= page.aspx?game=thrones&winter=coming&knowsnothing=jonsnow
  13. 13. WhatIs.aspx?QueryString&k=searchtoo
  14. 14. WhatcanaSharePointQueryStringdoforme? ★ Share a link to a filtered view ★ Bookmark search results ★ Filter 50 web parts on a single page!
  15. 15. WhatcanaSharePointQueryStringdoforme? ★ Show your users just what they want by leveraging SharePoint metadata and Search. ★ Create a knowledge base with a single list and 1 page (we’ll do this today) ★ Maybe Make a dashboard with just web parts (if we have time)
  16. 16. https://css-tricks.com/snippets/javascript/get-url-variables/ ButwhataboutJavaScript?
  17. 17. QueryStringURL Worship ★ Web parts can be loyal to the Query String ★ When the query string changes its teachings, so do its followers Fig 1. Web Parts be like
  18. 18. 4queryString Thingswe’llTalk about 1. Built in [Search, List/Library]
  19. 19. 1. Built in [Search, List/Library] 2. Query String [URL] Web Part [For web parts on a page] 4queryString Thingswe’llTalk about
  20. 20. 1. Built in [Search, List/Library] 3. Content Query Web Part [For not-tables of content] 2. Query String [URL] Web Part [For web parts on a page] 4queryString Thingswe’llTalk about
  21. 21. 1. Built in [Search, List/Library] 4. Mixed all together [Some of each] 2. Query String [URL] Web Part [For web parts on a page] 3. Content Query Web Part [For not-tables of content] 4queryString Thingswe’llTalk about
  22. 22. Butmaybenot ContentSearchWebParts #sorry
  23. 23. FYI: There’sQueryStringswith DataViewWebPartsin SharePointDesigner,too.
  24. 24. 1. Hand-Typed Built-In Filtering
  25. 25. 2kinds 1) Search 2) List/Library View
  26. 26. Builtin: Search Change the k= value http://www.cityoflondon.gov.uk/searc h/results.aspx?k=Parks http://www.cityoflondon.gov.uk/searc h/results.aspx?k=Recreation
  27. 27. k= Search term results.aspx?k=Parks k= Multiple Terms results.aspx?k=Parks%20Recreation u= Restrict by domain results.aspx?k=Parks&u=https://cityoflondon.gov.uk BuiltInSharePointSearchQueryStringsInAction!
  28. 28. Builtin: List/Library A regular old list: https://connect.ncdot.gov/Lists/CDR Example: Filtered by Division col https://connect.ncdot.gov/Lists/CDR? FilterField1=Division&FilterValue1=0 6
  29. 29. What’sthis?FilterField1=Division&FilterValue1=06 2 things to do here: ★ Specify the field to filter on ★ Specify the value to filter on ?FilterField1=Division &FilterValue1=06
  30. 30. Filter 2 (or more) things https://connect.ncdot.gov/Lists/CDR?FilterField1=Division&FilterValue1=06&F ilterField2=County&FilterValue2=Columbus Filter all (list view) web parts on a page! https://patrickdoran.sharepoint.com/query-strings/Pages/Query-Strings-One-F ilter-Many-Web-Parts.aspx?FilterField1=Name1&FilterValue1=Boston%20Red%20So x Sort on a field! https://patrickdoran.sharepoint.com/query-strings/Lists/Baseball/Baseball.a spx?SortField=yearID&SortDir=Asc
  31. 31. Demo 0 BuiltInSharePointQueryStringsInAction!
  32. 32. BuiltIn:Pros ★ Fast to set up. ★ Bookmarkable. ★ No web parts needed ★ Works w/anonymous permissions ★ List/Library: Up to 10!
  33. 33. BuiltIn:Cons ★ Must know internal field name of column (Though this is good, too) ★ URL is weird to read ★ Only one sort field ★ Not permanent, unless you bookmark it or add it as a link
  34. 34. InternalFieldNames ★ First name the field has when you create a column. ★ SharePoint controls this. Tricky to change after it’s made. ★ Hover over the column name in list settings to find it
  35. 35. 2. QueryString (URL) WebPart
  36. 36. UsethisWebPart:QueryString(URL)Filter
  37. 37. Enableitifit’snotthere If you don’t see the web parts, activate Standard Site Collection Features
  38. 38. What’sitlooklike?
  39. 39. What’sitlooklike?
  40. 40. More control ★ Pick Your query string key, like ?Year= ?Cheese=
  41. 41. Demo1
  42. 42. Makingtheconnection 01. Add Query String (URL) Filter web part. 02. Click ‘Open the tool pane’ to configure
  43. 43. Makingtheconnection Configure Filter Name = Just to help you remember. Query String Parameter Name = What’s in the URL, like: page.aspx?year=2013
  44. 44. Makingtheconnection 03. In List View Web Part, edit, pick Connections and then Get Filter Values From and finally Query String (URL) Filter You’re telling this web part to obey the Query string web part
  45. 45. Makingtheconnection Specify Column What list column should your Query String URL filter on? In this case, Year. Pro Tip: Your browser’s popup blocker will block this popup window.
  46. 46. Makingtheconnection 04. Confirm and Test. Query String URL Filter web part will list any other web parts it’s connected to. Now try your ?year= query string!
  47. 47. Demo1Review 01. SharePoint List* with useful column (Year) 02. Added List View Web Part 03. Added Query String [URL] Filter Web Part 04. Connected them! 05. Changed URL = updated list view on this page * Libraries work too!
  48. 48. Demo2:MultipleValues
  49. 49. Demo2:MultipleValues Review 01. List View Web Part 02. Added Query String Web Part, connected to Year Column 03. Added 2nd Query String Web Part, connected to Team Name Column 04. Changed URL query string values for both Year and Team Name = updated list view on this page
  50. 50. Demo3:Onefilter, ManyWebParts The beginning of a Dashboard….
  51. 51. Demo3:Onefilter, ManyWebParts:Review 01. Added 5 List View Web Parts - (all from the same list, but can be many) 02. Single Query String (URL) Filter Web Part Connected to all the web parts on the page 03. Changed URL Query string = all web parts respond
  52. 52. QueryString(URL)WebPart: Pros ★ Name your own query key. ?this=awesome ★ Use Multiple filters to filter multiple web parts. ★ Sorting configured in views ★ Can be mixed w/Content Query Web Parts
  53. 53. QueryString(URL)WebPart: Cons ★ One+ extra web part on a page per query string. ★ Soooo much configuring ★ Can’t use SharePoint ID column to filter ★ List view Web Parts look like list view web parts
  54. 54. 3. ContentQuery WebPart’sQuery StringFilter
  55. 55. cQwP:WhyNotUseListViewWebParts? ★ List View Web Parts look like List View Web Parts. ★ Weigh a lot of KB ★ Depending on your site’s styling, Content Query Web Part might look better. * Content Search web parts work this way too, but harder to configure.
  56. 56. ContentQueryConfigure In CQWP, under Additional Filters, use this: [PageQueryString:x] (Where x is your query string key, like Year)
  57. 57. Demo4:ContentQueryWebParts
  58. 58. Demo4:ContentQueryWebPartsReview 01. Added a Content Query Web Part to page and configured it to reference our list 02. No extra web parts. Query string functionality configured in CQWP itself. 03. URL query string works the same as our other examples.
  59. 59. ContentQueryWebPartQueryString: Pros ★ Name your own query key. ?this=awesome ★ Combine Multiple filters to multiple web parts. ★ Can be mixed with List View query-string filtered web parts, and share query strings ★ No extra web parts needed!
  60. 60. ContentQueryWebPartQueryString: Cons ★ Syntax is a little weird ★ CQWPs have only a few formatting options w/out CSS+XSLT ★ Can’t re-sort without editing web part
  61. 61. 4.Alltogethernow
  62. 62. AllTogetherNow ★ Add List View Web Parts ★ Add Query String (URL) Filter Web Parts ★ Add Content Query Web Parts ★ Use the same ?key=value URL filtering!
  63. 63. Demo5:QueryString AllThethings
  64. 64. Demo5:QueryString AllThethingsReview 01. 1 List and 1 library, same Metadata columns (Year and Team Name) 02. Add 2 CQWPs and 2 LVWPs 03. Add Query String Web Part each for Year and Team Name. 04. Configure!
  65. 65. Spruceitupabit
  66. 66. Spruceitupabit+navigation
  67. 67. SameList +GroupByWebPart +[calculatedColumn] =AutomaticNavigation
  68. 68. Figureoutthingsfirst 1. What’s your Query String URL setup? (Map out columns for ?key=value, or ?key=value&key2=valueX) 2. What Column is the link name text in? (Does the link say ‘Arizona Diamondbacks’ or ‘1999’ ?)
  69. 69. Makeyourcalculatedcolumn ★ Concatenate! ★ Data type must be number to render as HTML link ★ Can use most columns, but not ID ★ Be patient when clicking [Ok]
  70. 70. Makeyourcalculatedcolumn Example Syntax: =CONCATENATE("<a href='pageName.aspx?TeamName=",[Team Name],"&Year=",Year,"'>",[Team Name],"</a>")
  71. 71. Makeyourcalculatedcolumn ★ Save your new calculated column ★ Add the column to the view ★ Self-updating clickable link!
  72. 72. Sitback,letContributorsdotheirthing
  73. 73. Sitback,letContributorsdotheirthing
  74. 74. Sitback,letContributorsdotheirthing
  75. 75. recap
  76. 76. Query String-based techinques we covered 1. Built in [Search, List/Library] 4. Mixed all together [Some of each] 2. Query String [URL] Web Part [For web parts on a page] 3. Content Query Web Part [For not-tables of content]
  77. 77. BONUS: JavascriptQuery StringURL! Web parts for some stuff, JavaScript to add some styling/context
  78. 78. youknowJSandyoulikeChromeDevTools? What are my Query Strings? console.log(window.location.search)
  79. 79. AssumesyouJSandyoulikeChromeDevTools What are the values of my Query Strings? function getQueryVariable(variable) { var query = window.location.search.substring(1); var vars = query.split("&amp;"); for (var i=0;i&lt;vars.length;i++) { var pair = vars[i].split("="); if (pair[0] == variable) { return pair[1]; } } alert('Query Variable ' + variable + ' not found'); }
  80. 80. https://patrickdoran.sharepoint.com/query-strings/Pages/Query-String-Demo-Java script.aspx https://patrickdoran.sharepoint.com/query-strings/Pages/Query-String-Demo-Java script.aspx?FilterField1=Name1&FilterValue1=Boston%20Red%20Sox
  81. 81. // Function at gets the value of a query string key-value pair. // expects the key to be passed to it. var getQueryVariable = function(variable) { var query = window.location.search.substring(1); var vars = query.split("&"); for (var i=0;i<vars.length;i++) { var pair = vars[i].split("="); if(pair[0] == variable){return pair[1];} } return(false);

×