the humble & mighty sharepoint url query string
TRANSCRIPT
![Page 1: The Humble & Mighty SharePoint URL Query String](https://reader031.vdocuments.site/reader031/viewer/2022020410/58864b011a28ab32768b61b5/html5/thumbnails/1.jpg)
The Humble & Mighty SharePoint URL Query String
?author=Patrick%20Doran
![Page 2: The Humble & Mighty SharePoint URL Query String](https://reader031.vdocuments.site/reader031/viewer/2022020410/58864b011a28ab32768b61b5/html5/thumbnails/2.jpg)
Or,
Dad always said use the right Web Part
For the right Job
![Page 3: The Humble & Mighty SharePoint URL Query String](https://reader031.vdocuments.site/reader031/viewer/2022020410/58864b011a28ab32768b61b5/html5/thumbnails/3.jpg)
Fig 1.When you pick the wrong tool in SharePoint
![Page 4: The Humble & Mighty SharePoint URL Query String](https://reader031.vdocuments.site/reader031/viewer/2022020410/58864b011a28ab32768b61b5/html5/thumbnails/4.jpg)
your Presenter: Patrick Doran● 15 Years as a Front-end Developer & UX Designer
● 6 Years in SharePoint, 2007, 2010 & 2013 & Online
● At work, builds public facing SharePoint sites
![Page 5: The Humble & Mighty SharePoint URL Query String](https://reader031.vdocuments.site/reader031/viewer/2022020410/58864b011a28ab32768b61b5/html5/thumbnails/5.jpg)
your Presenter: Patrick DoranWhere I’m at:
● Twitter: @SwearPointJS● LinkedIn: linkedin.com/in/patrickdoran● And: patrickdoran.com
This presentation:
And: github.com/patd
![Page 6: The Humble & Mighty SharePoint URL Query String](https://reader031.vdocuments.site/reader031/viewer/2022020410/58864b011a28ab32768b61b5/html5/thumbnails/6.jpg)
How much Do you SharePoint?★ What a list/library is and what
metadata columns are
★ Web parts: Putting them on a page
★ Calculated column?
★ A little HTML?
![Page 7: The Humble & Mighty SharePoint URL Query String](https://reader031.vdocuments.site/reader031/viewer/2022020410/58864b011a28ab32768b61b5/html5/thumbnails/7.jpg)
Why are You here?Because not everything is a
React-WebPack-SharePoint-Framework-Hybrid-Azure-Framework.js
Full Trust Solution Continuous-Integration AWS Poweredsolution for THE CLOUD™
![Page 8: The Humble & Mighty SharePoint URL Query String](https://reader031.vdocuments.site/reader031/viewer/2022020410/58864b011a28ab32768b61b5/html5/thumbnails/8.jpg)
Why are You here?
Sometimes all you have is talent/time for web parts.
This is OK.
![Page 9: The Humble & Mighty SharePoint URL Query String](https://reader031.vdocuments.site/reader031/viewer/2022020410/58864b011a28ab32768b61b5/html5/thumbnails/9.jpg)
Where we ended up
![Page 10: The Humble & Mighty SharePoint URL Query String](https://reader031.vdocuments.site/reader031/viewer/2022020410/58864b011a28ab32768b61b5/html5/thumbnails/10.jpg)
Where we ended up★ All out of the
box web parts
★ Content approval on list items
![Page 11: The Humble & Mighty SharePoint URL Query String](https://reader031.vdocuments.site/reader031/viewer/2022020410/58864b011a28ab32768b61b5/html5/thumbnails/11.jpg)
WhatIs.aspx?Query String★ Hangs on to the end of the URL, after the file name:
★ Usually ?key=value
![Page 12: The Humble & Mighty SharePoint URL Query String](https://reader031.vdocuments.site/reader031/viewer/2022020410/58864b011a28ab32768b61b5/html5/thumbnails/12.jpg)
More than one way to filter with query Strings★ Question mark is always first one ?=
★ Ampersand are the rest (can be multiple) &=
page.aspx?game=thrones&winter=coming&knowsnothing=jonsnow
![Page 13: The Humble & Mighty SharePoint URL Query String](https://reader031.vdocuments.site/reader031/viewer/2022020410/58864b011a28ab32768b61b5/html5/thumbnails/13.jpg)
WhatIs.aspx?Query String&k=searchtoo
![Page 14: The Humble & Mighty SharePoint URL Query String](https://reader031.vdocuments.site/reader031/viewer/2022020410/58864b011a28ab32768b61b5/html5/thumbnails/14.jpg)
What can a SharePoint Query String do for me?★ Share a link to a filtered view
★ Bookmark search results
★ Filter 50 web parts on a single page!
![Page 15: The Humble & Mighty SharePoint URL Query String](https://reader031.vdocuments.site/reader031/viewer/2022020410/58864b011a28ab32768b61b5/html5/thumbnails/15.jpg)
What can a SharePoint Query String do for me?★ 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)
![Page 16: The Humble & Mighty SharePoint URL Query String](https://reader031.vdocuments.site/reader031/viewer/2022020410/58864b011a28ab32768b61b5/html5/thumbnails/16.jpg)
https://css-tricks.com/snippets/javascript/get-url-variables/
But what about JavaScript?
![Page 17: The Humble & Mighty SharePoint URL Query String](https://reader031.vdocuments.site/reader031/viewer/2022020410/58864b011a28ab32768b61b5/html5/thumbnails/17.jpg)
Query String URL 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
![Page 18: The Humble & Mighty SharePoint URL Query String](https://reader031.vdocuments.site/reader031/viewer/2022020410/58864b011a28ab32768b61b5/html5/thumbnails/18.jpg)
4 query String Things we’ll Talk
about
1. Built in [Search, List/Library]
![Page 19: The Humble & Mighty SharePoint URL Query String](https://reader031.vdocuments.site/reader031/viewer/2022020410/58864b011a28ab32768b61b5/html5/thumbnails/19.jpg)
1. Built in [Search, List/Library]
2. Query String [URL] Web Part [For web parts on a page] 4 query String
Things we’ll Talk about
![Page 20: The Humble & Mighty SharePoint URL Query String](https://reader031.vdocuments.site/reader031/viewer/2022020410/58864b011a28ab32768b61b5/html5/thumbnails/20.jpg)
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] 4 query String
Things we’ll Talk about
![Page 21: The Humble & Mighty SharePoint URL Query String](https://reader031.vdocuments.site/reader031/viewer/2022020410/58864b011a28ab32768b61b5/html5/thumbnails/21.jpg)
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]
4 query String Things we’ll Talk
about
![Page 22: The Humble & Mighty SharePoint URL Query String](https://reader031.vdocuments.site/reader031/viewer/2022020410/58864b011a28ab32768b61b5/html5/thumbnails/22.jpg)
But maybe not Content Search Web Parts
#sorry
![Page 23: The Humble & Mighty SharePoint URL Query String](https://reader031.vdocuments.site/reader031/viewer/2022020410/58864b011a28ab32768b61b5/html5/thumbnails/23.jpg)
FYI:There’s Query Strings with Data View Web Parts in SharePoint Designer, too.
![Page 24: The Humble & Mighty SharePoint URL Query String](https://reader031.vdocuments.site/reader031/viewer/2022020410/58864b011a28ab32768b61b5/html5/thumbnails/24.jpg)
1. Hand-TypedBuilt-In Filtering
![Page 25: The Humble & Mighty SharePoint URL Query String](https://reader031.vdocuments.site/reader031/viewer/2022020410/58864b011a28ab32768b61b5/html5/thumbnails/25.jpg)
2 kinds1) Search
2) List/Library View
![Page 26: The Humble & Mighty SharePoint URL Query String](https://reader031.vdocuments.site/reader031/viewer/2022020410/58864b011a28ab32768b61b5/html5/thumbnails/26.jpg)
Built in: Search
Change the k= value
http://www.cityoflondon.gov.uk/search/results.aspx?k=Parks
http://www.cityoflondon.gov.uk/search/results.aspx?k=Recreation
![Page 27: The Humble & Mighty SharePoint URL Query String](https://reader031.vdocuments.site/reader031/viewer/2022020410/58864b011a28ab32768b61b5/html5/thumbnails/27.jpg)
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
Built In SharePoint Search Query Strings In Action!
![Page 28: The Humble & Mighty SharePoint URL Query String](https://reader031.vdocuments.site/reader031/viewer/2022020410/58864b011a28ab32768b61b5/html5/thumbnails/28.jpg)
Built in: 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=06
![Page 29: The Humble & Mighty SharePoint URL Query String](https://reader031.vdocuments.site/reader031/viewer/2022020410/58864b011a28ab32768b61b5/html5/thumbnails/29.jpg)
What’s this ?FilterField1=Division&FilterValue1=062 things to do here:
★ Specify the field to filter on
★ Specify the value to filter on
?FilterField1=Division
&FilterValue1=06
![Page 30: The Humble & Mighty SharePoint URL Query String](https://reader031.vdocuments.site/reader031/viewer/2022020410/58864b011a28ab32768b61b5/html5/thumbnails/30.jpg)
Filter 2 (or more) things
https://connect.ncdot.gov/Lists/CDR?FilterField1=Division&FilterValue1=06&FilterField2=County&FilterValue2=Columbus
Filter all (list view) web parts on a page!
https://patrickdoran.sharepoint.com/query-strings/Pages/Query-Strings-One-Filter-Many-Web-Parts.aspx?FilterField1=Name1&FilterValue1=Boston%20Red%20Sox
Sort on a field!
https://patrickdoran.sharepoint.com/query-strings/Lists/Baseball/Baseball.aspx?SortField=yearID&SortDir=Asc
![Page 31: The Humble & Mighty SharePoint URL Query String](https://reader031.vdocuments.site/reader031/viewer/2022020410/58864b011a28ab32768b61b5/html5/thumbnails/31.jpg)
Demo 0
Built In SharePoint Query Strings In Action!
![Page 32: The Humble & Mighty SharePoint URL Query String](https://reader031.vdocuments.site/reader031/viewer/2022020410/58864b011a28ab32768b61b5/html5/thumbnails/32.jpg)
Built In: Pros★ Fast to set up.
★ Bookmarkable.
★ No web parts needed
★ Works w/anonymous permissions
★ List/Library: Up to 10!
![Page 33: The Humble & Mighty SharePoint URL Query String](https://reader031.vdocuments.site/reader031/viewer/2022020410/58864b011a28ab32768b61b5/html5/thumbnails/33.jpg)
Built In: 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
![Page 34: The Humble & Mighty SharePoint URL Query String](https://reader031.vdocuments.site/reader031/viewer/2022020410/58864b011a28ab32768b61b5/html5/thumbnails/34.jpg)
Internal Field Names
★ 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
![Page 35: The Humble & Mighty SharePoint URL Query String](https://reader031.vdocuments.site/reader031/viewer/2022020410/58864b011a28ab32768b61b5/html5/thumbnails/35.jpg)
2. Query String (URL)
Web Part
![Page 36: The Humble & Mighty SharePoint URL Query String](https://reader031.vdocuments.site/reader031/viewer/2022020410/58864b011a28ab32768b61b5/html5/thumbnails/36.jpg)
Use this Web Part: Query String (URL) Filter
![Page 37: The Humble & Mighty SharePoint URL Query String](https://reader031.vdocuments.site/reader031/viewer/2022020410/58864b011a28ab32768b61b5/html5/thumbnails/37.jpg)
Enable it if it’s not there
If you don’t see the web parts, activate Standard Site Collection Features
![Page 38: The Humble & Mighty SharePoint URL Query String](https://reader031.vdocuments.site/reader031/viewer/2022020410/58864b011a28ab32768b61b5/html5/thumbnails/38.jpg)
What’s it look like?
![Page 39: The Humble & Mighty SharePoint URL Query String](https://reader031.vdocuments.site/reader031/viewer/2022020410/58864b011a28ab32768b61b5/html5/thumbnails/39.jpg)
What’s it look like?
![Page 40: The Humble & Mighty SharePoint URL Query String](https://reader031.vdocuments.site/reader031/viewer/2022020410/58864b011a28ab32768b61b5/html5/thumbnails/40.jpg)
More control★ Pick Your query
string key, like
?Year=?Cheese=
![Page 41: The Humble & Mighty SharePoint URL Query String](https://reader031.vdocuments.site/reader031/viewer/2022020410/58864b011a28ab32768b61b5/html5/thumbnails/41.jpg)
Demo 1
![Page 42: The Humble & Mighty SharePoint URL Query String](https://reader031.vdocuments.site/reader031/viewer/2022020410/58864b011a28ab32768b61b5/html5/thumbnails/42.jpg)
Making the connection01. Add Query String (URL)
Filter web part.
02. Click ‘Open the tool pane’ to configure
![Page 43: The Humble & Mighty SharePoint URL Query String](https://reader031.vdocuments.site/reader031/viewer/2022020410/58864b011a28ab32768b61b5/html5/thumbnails/43.jpg)
Making the connection ConfigureFilter Name = Just to help you remember.
Query String Parameter Name = What’s in the URL, like: page.aspx?year=2013
![Page 44: The Humble & Mighty SharePoint URL Query String](https://reader031.vdocuments.site/reader031/viewer/2022020410/58864b011a28ab32768b61b5/html5/thumbnails/44.jpg)
Making the connection03. 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
![Page 45: The Humble & Mighty SharePoint URL Query String](https://reader031.vdocuments.site/reader031/viewer/2022020410/58864b011a28ab32768b61b5/html5/thumbnails/45.jpg)
Making the connection Specify ColumnWhat 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.
![Page 46: The Humble & Mighty SharePoint URL Query String](https://reader031.vdocuments.site/reader031/viewer/2022020410/58864b011a28ab32768b61b5/html5/thumbnails/46.jpg)
Making the connection04. 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!
![Page 47: The Humble & Mighty SharePoint URL Query String](https://reader031.vdocuments.site/reader031/viewer/2022020410/58864b011a28ab32768b61b5/html5/thumbnails/47.jpg)
Demo 1 Review01. 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!
![Page 48: The Humble & Mighty SharePoint URL Query String](https://reader031.vdocuments.site/reader031/viewer/2022020410/58864b011a28ab32768b61b5/html5/thumbnails/48.jpg)
Demo 2: Multiple Values
![Page 49: The Humble & Mighty SharePoint URL Query String](https://reader031.vdocuments.site/reader031/viewer/2022020410/58864b011a28ab32768b61b5/html5/thumbnails/49.jpg)
Demo 2: Multiple Values Review01. 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
![Page 50: The Humble & Mighty SharePoint URL Query String](https://reader031.vdocuments.site/reader031/viewer/2022020410/58864b011a28ab32768b61b5/html5/thumbnails/50.jpg)
Demo3 : One filter, Many WebPartsThe beginning of a Dashboard….
![Page 51: The Humble & Mighty SharePoint URL Query String](https://reader031.vdocuments.site/reader031/viewer/2022020410/58864b011a28ab32768b61b5/html5/thumbnails/51.jpg)
Demo3 : One filter, Many WebParts: 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
![Page 52: The Humble & Mighty SharePoint URL Query String](https://reader031.vdocuments.site/reader031/viewer/2022020410/58864b011a28ab32768b61b5/html5/thumbnails/52.jpg)
Query String (URL) Web Part: 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
![Page 53: The Humble & Mighty SharePoint URL Query String](https://reader031.vdocuments.site/reader031/viewer/2022020410/58864b011a28ab32768b61b5/html5/thumbnails/53.jpg)
Query String (URL) Web Part: 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
![Page 54: The Humble & Mighty SharePoint URL Query String](https://reader031.vdocuments.site/reader031/viewer/2022020410/58864b011a28ab32768b61b5/html5/thumbnails/54.jpg)
3. Content Query Web Part’s Query
String Filter
![Page 55: The Humble & Mighty SharePoint URL Query String](https://reader031.vdocuments.site/reader031/viewer/2022020410/58864b011a28ab32768b61b5/html5/thumbnails/55.jpg)
cQwP: Why Not Use List View Web Parts?★ 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.
![Page 56: The Humble & Mighty SharePoint URL Query String](https://reader031.vdocuments.site/reader031/viewer/2022020410/58864b011a28ab32768b61b5/html5/thumbnails/56.jpg)
Content Query ConfigureIn CQWP, under Additional Filters, use this:
[PageQueryString:x]
(Where x is your query string key, like Year)
![Page 57: The Humble & Mighty SharePoint URL Query String](https://reader031.vdocuments.site/reader031/viewer/2022020410/58864b011a28ab32768b61b5/html5/thumbnails/57.jpg)
Demo 4: Content Query Web Parts
![Page 58: The Humble & Mighty SharePoint URL Query String](https://reader031.vdocuments.site/reader031/viewer/2022020410/58864b011a28ab32768b61b5/html5/thumbnails/58.jpg)
Demo 4: Content Query Web Parts Review
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.
![Page 59: The Humble & Mighty SharePoint URL Query String](https://reader031.vdocuments.site/reader031/viewer/2022020410/58864b011a28ab32768b61b5/html5/thumbnails/59.jpg)
Content Query Web Part Query String: 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!
![Page 60: The Humble & Mighty SharePoint URL Query String](https://reader031.vdocuments.site/reader031/viewer/2022020410/58864b011a28ab32768b61b5/html5/thumbnails/60.jpg)
Content Query Web Part Query String: 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
![Page 61: The Humble & Mighty SharePoint URL Query String](https://reader031.vdocuments.site/reader031/viewer/2022020410/58864b011a28ab32768b61b5/html5/thumbnails/61.jpg)
4. All together now
![Page 62: The Humble & Mighty SharePoint URL Query String](https://reader031.vdocuments.site/reader031/viewer/2022020410/58864b011a28ab32768b61b5/html5/thumbnails/62.jpg)
All Together Now★ Add List View Web Parts
★ Add Query String (URL) Filter Web Parts
★ Add Content Query Web Parts
★ Use the same ?key=value URL filtering!
![Page 63: The Humble & Mighty SharePoint URL Query String](https://reader031.vdocuments.site/reader031/viewer/2022020410/58864b011a28ab32768b61b5/html5/thumbnails/63.jpg)
Demo 5: Query String All The things
![Page 64: The Humble & Mighty SharePoint URL Query String](https://reader031.vdocuments.site/reader031/viewer/2022020410/58864b011a28ab32768b61b5/html5/thumbnails/64.jpg)
Demo 5: Query String All The things Review
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!
![Page 65: The Humble & Mighty SharePoint URL Query String](https://reader031.vdocuments.site/reader031/viewer/2022020410/58864b011a28ab32768b61b5/html5/thumbnails/65.jpg)
Spruce it up a bit
![Page 66: The Humble & Mighty SharePoint URL Query String](https://reader031.vdocuments.site/reader031/viewer/2022020410/58864b011a28ab32768b61b5/html5/thumbnails/66.jpg)
Spruce it up a bit + navigation
![Page 67: The Humble & Mighty SharePoint URL Query String](https://reader031.vdocuments.site/reader031/viewer/2022020410/58864b011a28ab32768b61b5/html5/thumbnails/67.jpg)
Same List + Group By Web Part + [calculated Column] = Automatic Navigation
![Page 68: The Humble & Mighty SharePoint URL Query String](https://reader031.vdocuments.site/reader031/viewer/2022020410/58864b011a28ab32768b61b5/html5/thumbnails/68.jpg)
Figure out things first1. 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’ ?)
![Page 69: The Humble & Mighty SharePoint URL Query String](https://reader031.vdocuments.site/reader031/viewer/2022020410/58864b011a28ab32768b61b5/html5/thumbnails/69.jpg)
Make your calculated column★ Concatenate!
★ Data type must be number to render as HTML link
★ Can use most columns, but not ID
★ Be patient when clicking [Ok]
![Page 70: The Humble & Mighty SharePoint URL Query String](https://reader031.vdocuments.site/reader031/viewer/2022020410/58864b011a28ab32768b61b5/html5/thumbnails/70.jpg)
Make your calculated columnExample Syntax:
=CONCATENATE("<a href='pageName.aspx?TeamName=",[Team Name],"&Year=",Year,"'>",[Team Name],"</a>")
![Page 71: The Humble & Mighty SharePoint URL Query String](https://reader031.vdocuments.site/reader031/viewer/2022020410/58864b011a28ab32768b61b5/html5/thumbnails/71.jpg)
Make your calculated column
★ Save your new calculated column
★ Add the column to the view
★ Self-updating clickable link!
![Page 72: The Humble & Mighty SharePoint URL Query String](https://reader031.vdocuments.site/reader031/viewer/2022020410/58864b011a28ab32768b61b5/html5/thumbnails/72.jpg)
Sit back, let Contributors do their thing
![Page 73: The Humble & Mighty SharePoint URL Query String](https://reader031.vdocuments.site/reader031/viewer/2022020410/58864b011a28ab32768b61b5/html5/thumbnails/73.jpg)
Sit back, let Contributors do their thing
![Page 74: The Humble & Mighty SharePoint URL Query String](https://reader031.vdocuments.site/reader031/viewer/2022020410/58864b011a28ab32768b61b5/html5/thumbnails/74.jpg)
Sit back, let Contributors do their thing
![Page 75: The Humble & Mighty SharePoint URL Query String](https://reader031.vdocuments.site/reader031/viewer/2022020410/58864b011a28ab32768b61b5/html5/thumbnails/75.jpg)
recap
![Page 76: The Humble & Mighty SharePoint URL Query String](https://reader031.vdocuments.site/reader031/viewer/2022020410/58864b011a28ab32768b61b5/html5/thumbnails/76.jpg)
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]
![Page 77: The Humble & Mighty SharePoint URL Query String](https://reader031.vdocuments.site/reader031/viewer/2022020410/58864b011a28ab32768b61b5/html5/thumbnails/77.jpg)
BONUS:Javascript Query
String URL!Web parts for some stuff, JavaScript to add some
styling/context
![Page 78: The Humble & Mighty SharePoint URL Query String](https://reader031.vdocuments.site/reader031/viewer/2022020410/58864b011a28ab32768b61b5/html5/thumbnails/78.jpg)
you know JS and you like Chrome Dev Tools?
What are my Query Strings?
console.log(window.location.search)
![Page 79: The Humble & Mighty SharePoint URL Query String](https://reader031.vdocuments.site/reader031/viewer/2022020410/58864b011a28ab32768b61b5/html5/thumbnails/79.jpg)
Assumes you JS and you like Chrome Dev ToolsWhat are the values of my Query Strings?
function getQueryVariable(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];
}
}
alert('Query Variable ' + variable + ' not found');
}
![Page 80: The Humble & Mighty SharePoint URL Query String](https://reader031.vdocuments.site/reader031/viewer/2022020410/58864b011a28ab32768b61b5/html5/thumbnails/80.jpg)
https://patrickdoran.sharepoint.com/query-strings/Pages/Query-String-Demo-Javascript.aspx
https://patrickdoran.sharepoint.com/query-strings/Pages/Query-String-Demo-Javascript.aspx?FilterField1=Name1&FilterValue1=Boston%20Red%20Sox
![Page 81: The Humble & Mighty SharePoint URL Query String](https://reader031.vdocuments.site/reader031/viewer/2022020410/58864b011a28ab32768b61b5/html5/thumbnails/81.jpg)
// 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);
}
// ID of element where our text will go
var ourTextGoesHere = "DeltaPlaceHolderPageTitleInTitleArea";
// Our text string from the query string
var ourTextString = getQueryVariable('FilterValue1');
// Removing the %20 that show in the URL
var ourTextstringWithSpaces = unescape(ourTextString);
// Test for the existance of query string!
if(document.location.search.length) {
// Print if the query string exists
console.log("There's a query string here. It's " + window.location.search.substring(1));
// We change the h1 span tag with our query string value!
document.getElementById(ourTextGoesHere).innerHTML = ourTextstringWithSpaces;
} else {
// no query string exists
console.log("No query string. Our work here is done.")
};