Mobility & Collaboration

Internal Janssen R&D SharePoint 2007 Portal

Description

Although my experience with SharePoint was extensive, I was working in a rather restrictive environment: Permissions to the environment were locked down to prevent any custom web part deployment and the availability of development tools were essentially non-existent. Yes, you could install SharePoint Designer, but you could not connect it to anything. To top this off, development environments were only available by special request, and restricted to a 30-day life-cycle, after which they were recycled into wherever VMWare instances go when they die. It was in this environment where the design team from Davis & Company delivered a design for a high-profile informational site built under the main division portal.

Two different pages with four different Content Query Web Parts driven from the same SharePoint list.

Two different pages with four different Content Query Web Parts driven from the same SharePoint list.

This new portal was to feature a news carousel, item highlights, and detailed information about any collaboration and mobile solutions offered by the enterprise. This information needed to be easily edited, and contain additional information that would drive some of the exposed content, but should not really be available to the end user. This information would also have a one to many relationship (for example, an application can be both mobile and used for collaborative meetings), so the normal construction of SharePoint lists for each subject and a cosponsoring CQWP would not be sufficient.

With this in mind, I constructed a master list that could contain all possible devices and applications, along with the relevant meta-data, styled the list items so they fit into the general theme of the site (as opposed to the standard SharePoint style), then used JavaScript to ensure that only the identified site administrators would be able to directly view this information from the related list-item. Then custom CAML queries were developed for each page so that only the corresponding items were displayed. This approach also ensured that items could be identified as "important" and displayed on the front page.

Carousel news web part from the front page of the portal.

Carousel news web part from the front page of the portal.

The next challenge was the news carousel. There was no available web part in the library that would fill the requirement, and users of the platform had been asking for a solution for some time. After some research, James Norman and I found that AnythingSlider was the most full-featured and flexible of the pre-built "free" solutions, so we set to work. James ensured that the images were properly prepared, and I built the CQWP and Item Style that would divide the information into list-items, as opposed to the normal table entries or DIVs, and we were off to the races. Some tweaking of AnythingSlider's configuration was necessary, as well as adding the references to jQuery and AnythingSlider into the Master Pages. Once this was complete, we had the most advanced (information wise) and flexible SharePoint site in the company. Not only that, but I now had another tool in the tool-belt that could be used when a news carousel was required.

Below you can find the carousel in operation with the default styles applied within the SharePoint site. If you would like to download a sample of the carousel, along with the SharePoint layout files, please click here. This package also includes the CEWP that can be used to hide items in the List Detail view. I have tested the layout and carousel in SharePoint 2013, but I have not tested the CEWP. Please note, this package only contains the basic AnythingSlider that was used on the site, so I recommend downloading the full package. Of note: there are major conflicts with AnythingSlider and the Bootstrap framework. So if you are using one, don't use the other (the sample below is a major cheat).

Carousel sample not available. To view, please increase browser size.