If you’re used to SharePoint, and the display form on lists, you may be thinking you can use that on your SharePoint Online Public Sites as well. Sadly, by default your anonymous users cannot access the display form of a list item. Instead, SharePoint Online prompts the user to login.
Annoying? Yes.
It is due to the ViewFormPagesLockdown feature, which is available in SharePoint on-prem, and appears to be on by default on SharePoint Online. I think the reasoning is that the display form can have more data on it than you’d care to share to your visitors, and frankly, the page is rather dull. So thinking through how to get around this, my initial thoughts were:
- Disable this silly feature, but alas, you can’t.
- Use the search web parts with a custom display template, but alas, these aren’t available on the public site #FAIL
- Write some custom JavaScript to grab the data, meh, too much work.
- Fudge a few columns, and the view, and get it to work. BING BING BING
We can use the views of a list, since users can access that fine, and manipulate it to look like a form page.
Below I walk through how we did it on the Boston Office 365 User Group site, www.bostono365usergroup.com,
Take the default view of the list:
Then let’s change the view style, we used Newsletter, which gives us the nice start to where we want to be:
Not terrible right? But let’s make it a wee bit more prettier. I edited the page, added a code snippet web part (embed code) and threw in the following collection of CSS:
<style unselectable="on">
.ms-listviewtable tr td.ms-vb2:first-child {
display:inline-block;
}
.ms-listviewtable td:first-child+td, .ms-listviewtable td:first-child+td+td {
display:inline-block;
width:45%;
font-size:14px;
}
.ms-vh2 {
display:none;
}
table.ms-listviewtable tr td.ms-vb2:first-child {
font-size:1.6em;
width:400px;
}
.registerButton {
padding:4px 5px;
border-top-left-radius:10px;
border-top-right-radius:10px;
border-bottom-right-radius:10px;
border-bottom-left-radius:10px;
border:1px solid #5b5b5b;
width:180px;
text-align:center;
color:#ffffff;
font-weight:bold;
display:inline-block;
text-shadow:none;
background-color:#001a81;
}
@media screen and (max-width: 400px) {
.ms-listviewtable td:first-child+td, .ms-listviewtable td:first-child+td+td {
display:inline-block;
width:100%;
}
.ms-vb-tall {
width:280px;
display:inline-block;
}
}
</style>
Much better right? Almost looks like a normal content page now ;)
How do we get users to this page view now? If I had multiple items in the list it would just scroll long. Since this is a list view, we can filter the list view by the ID of the item.
We added a calculated column to use as a link on the home page. So, let’s add the column and the calculation:
=CONCATENATE("<div><a href='/events?FilterField1=Title&FilterValue1=",Title,"'>",Title,"</a></div>")
Make sure to set the Calculated Field to output as Number. Why didn’t I use ID you might ask, well, the ID field doesn’t work as you’d like. The ID isn’t calculated until after the item is added and the calculated column doesn’t get updated accordingly. Very annoying. Fortunately, in our case the title will suffice.
So the above calculation will output a link, sending the user to the events list view, filtered based on the current item. You can see it in action on the home page:
Wait a second, what’s that nifty Register button?
That’s another calculated column, reading from the registration URL field, and then spits out some extra HTML for us to format it as needed (in conjunction with the above CSS):
=IF(RegistrationURL="","coming soon",IF(RegistrationURL<>"",CONCATENATE("<div><a id='regLink' class='registerButton' href=",RegistrationURL," target=_blank>Register</a></div>")))
It’s not impossible to have nice looking forms on the public site in your Office 365 tenant, but does take a little extra work.
Til next time, happy SharePointing!
RSS - Posts
Leave a Reply