Learn how to do some URL tricks to navigate the user in SharePoint
Did you know that you can change the way the user is interacting with the SharePoint list by adding specific strings to the URL?
There is a well written article that you can read from Microsoft here but I will give you some examples as well
Examples
Let’s say you would like to user to be able to add a new item to a list, but it should be done without the user having to navigate to the list item and clicking +New.
I usually add a “New item” button on the front page, using the Quick links webpart
When you go to your list your URL will look like this
https://tenant.sharepoint.com/sites/JSONformatting/Lists/JSON%20formatting/AllItems.aspx
Notice before reading further
When you are working with the links, and it is not working as expected, try opening a new browser tab, since some caching might interfere!
NewForm
You can change AllItems.aspx to NewForm.aspx instead
https://tenant.sharepoint.com/sites/JSONformatting/Lists/JSON%20formatting/NewForm.aspx
This will take the user directly to a “NewForm”. Notice also that the form is now taking all of the available space, instead of being a sidepanel.
Full page
If you have the left side navigation, we can actually also remove that, to take the user to a “full page” view
https://tenant.sharepoint.com/sites/JSONformatting/Lists/JSON%20formatting/NewForm.aspx?env=Embedded
Navigate
When the user is clicking save, they will be navigated back to the list, but we can also control what is happening after the using is clicking Save (or Cancel)
https://tenant.sharepoint.com/sites/JSONformatting/Lists/JSON%20formatting/NewForm.aspx?Source=https://tenant/sites/JSONformatting/&env=Embedded
Note that we added a ?Source and changed ?env=Embedded to &env=Embedded and moved it to the end of the URL to work probably.
In my case here the user is being send back to the frontpage.
Microsoft Lists
We can also take the user directly to the “Microsoft List” environment if we like to
https://tenant.sharepoint.com/sites/JSONformatting/Lists/JSON%20formatting/NewForm.aspx?env=WebViewList
Edit in full screen button
With this knowledge we can create a button that takes the user to a full page edit experience.
I like to make this button for lists with many options
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
"elmType": "div",
"style": {
"align-items": "center",
"margin-top": "2px",
"margin-bottom": "2px"
},
"children": [
{
"elmType": "a",
"attributes": {
"href": "=@currentWeb + '/Lists/YOURPAGENAME/EditForm.aspx?ID=' + [$ID] + '&Source=' + @currentWeb + '/Lists/YOURPAGENAME&env=Embedded'",
"_comment": "DispForm EditForm NewForm",
"target": "_blank",
"class": "ms-bgColor-themePrimary ms-fontWeight-bold ms-bgColor-themeDarker--hover",
"data-interception": "off"
},
"style": {
"height": "30px",
"text-decoration": "none",
"display": "flex",
"align-items": "center",
"text-align": "center",
"justify-content": "center",
"margin": "5px",
"color": "#fff",
"border-radius": "3px"
},
"children": [
{
"elmType": "span",
"attributes": {
"iconName": "Edit",
"class": "ms-fontSize-16 ms-fontWeight-regular",
"title": "Details"
},
"style": {
"color": "#fff",
"flex": "none",
"margin-right": "8px",
"margin-left": "10px"
}
},
{
"elmType": "span",
"style": {
"margin-right": "10px"
},
"txtContent": "Edit in full screen"
}
]
}
]
}
In this code we are using @currentWeb to get the current tenant name, but we still have to insert the page name. Then we are using the EditForm to send to user to an EditForm page, and we are embedding the form in a full width.
You can also use DispForm if you only want to show the form without the user being able to edit it.
We can also use the URL to create filters on lists, which has many use cases, but we will save that for another post