SharePoint Branding & Customization Behind the Scenes: MS Secretary of State Website

sos

Launched August 2014, the Mississippi Secretary of State website was designed and developed by Mississippi Interactive. Team members include: Michelle Pakron – Strategy, Design, Web production, SharePoint integration and Customizations, Mobile optimization, and testing; Jesse Kyzar – Advanced Javascript programming and .NET application development.

The SOS website was built in SharePoint 2010 and uses the Bootstrap 2.0 responsive framework. The masterpage was a modified version of the responsive V5 SharePoint Masterpage created by Kyle Shaeffer. I added in code from Randy Drisgill’s starter masterpage and also altered the ribbon code and the accompanying css and javascript files.

The site uses one custom masterpage and multiple custom page layouts. The home page in particular is a custom page layout without any editable areas. Each piece of the home page is either a data view web part pulling content from a list, or is pulling from an external source via the SPServices Javascript library. This was done to make it as easy as possible for the SOS staff to maintain the site as it is much simpler to edit a list item then to code directly into a page.

Home Page Breakdown

sos-2

1: The Featured Services area is an images library pulled into the page via a custom Data View web part.

2: The Slider is dynamically pulling content from another images library and is displayed via SPServices

3: The How Do I area is a Data View web part fed by a custom list

 

sos-3

4: The Featured area is fed from an images library via a Data View web part

sos-4

5: The Press Releases feed box is fed from an external .NET admin application via SPServices; each individual Press Release is fed into a SharePoint page via SPServices as well.

6: The What’s New feed box is a listing of Pages pulled via SPServices from the root Pages library that uses a specific Page Layout called “News”.

7: The Twitter feed box pulls content directly from the MS SOS’s Twitter Feed via Javascript.

Use of Third Party Web Part

sos-5

We purchased the SharePoint Form Web Part in order to create forms based off of lists that work with anonymous access. The Share Your Solutions form was created by first creating a custom list to store the form data. A copy of that list was then created called Archive. I then created a custom workflow that kicks off once the web part adds data to the list that automatically emails the Business Services director the form contents as well as moves the list item from the main list into the archive, which is then secured to authenticated users only. The SharePoint Form web part automatically creates the form fields once attached to a SharePoint list.

If you need simple forms on your public-facing SharePoint site and don’t want to bother a developer, I highly recommend this web part. Just make sure that it is installed and activated on each server before doing a content deploy or backup/restore to a server or it will break your form, even if you activate it after the fact.

View the Site

www.sos.ms.gov

Advertisements

Make a Data View Web Part Work on Sub Sites

One of the things about SP 2010 that has driven me crazy is the inability to get DVWPs from one level of a site to work correctly in another level. Maybe you have a list on a subsite and want to surface that content on the homepage, or the list is at the root and you want to use the DVWP on a sub site. I even went as far as having my company pay for Laura Roger’s time a year or so ago to have a web meeting with her to see if there was a solution. What I was told was that there were a few things you can try but there was no guarantee any of it would work, depending on your specific farm setup, etc. I found some instructions on the web with hacks but they never went deep enough and I could never get them to work.

Last night, as I was thinking about another dvwp issue-how to create a dvwp that displays an item randomly-I found a site that had a solution for that issue as well as one for the other issue. The problem was that the instructions still were not clear enough, there were steps that maybe were assumed but that I didn’t know about or understand. So I had to poke it a while but I finally got both issues-the random item dvwp and the make dvwp work anywhere in the site- to work.

I take no credit for these solutions, I only translated them into a more visual language for folks like myself.

>> Instructions for making a data view web part work on subsites

>> Instructions for creating a data view web part that displays a random item

>> Source for these solutions

SharePoint 2010 Woes

I am deep into the build out of a new state portal in SharePoint 2010 and bugs are starting to show up. I have noticed that if I have a list at the root of my site collection and I make a data view, export as web part, import to web gallery (normal process, did this in 2007 all the time..) and then insert this web part into a subsite page I get an error “List does not exist”. Off to Google I go for the fix. Apparently I am not the only one having this problem. Some poorly documented references to changing guids is mentioned but without step by step instructions intended for non-developers, I am at a l loss. I reached out to the top SharePoint people at my parent company and got no where. Any one have a solution? I promise if I find one I will document it and post here.

My next frustration is with text filters. I followed a tutorial by Laura Rogers for connecting a text filter and creating a query string so that you don’t have to use a precise term to search your list. This works great. What doesn’t work great is that once you attach the text filter to your data view, by default it shows no items. I want to show all items and then allow users to filter if they want to. Again, off to Google, and still no answer.

My newest frustration is the default mobile view SharePoint 2010 provides-complete crap. So off to Google to find the code to add to the web.config file to turn this default behavior off (and much thanks to my director of development for dropping everything and getting this fixed for me;) So now my site looks adorable and tiny on the iPhone, but no where near optimized for mobile. Anyone have any tips or success in making SharePoint 2010 play nice on mobile devices?

That’s enough ranting. January 17 we will be launching the state site I have been working on and unlike all the work I used to do at my last job, it won’t be hidden behind a firewall, so everyone will get to see it 😉