Hide list column headers of a list view webpart

Hide list column headers of all list view webparts on the page

1. Add a Content Editor WebPart (CEWP) to the page
2. Use the following CSS:

Hide column headers of a specific list view webpart

The method, described in the following blogpost will definitely work (find listview by title), but there is a downside with this method. What if the end user renames the list? Our solution will break.

I think it's safer to find a listview by URL. The URL is fixed and cannot be changed from the UI (only with SharePoint Designer).

1. Add a Content Editor WebPart (CEWP) to the page
2. Use the following JQuery script: !! Don't forget to change the URL to the URL of your list

SharePoint 2013 - Short Introduction to Animation Engine

Already noticed the "fade in" effect on the page while browsing in SharePoint 2013?
No? Open a standard Teamsite and focus the main content...

Before

After

 

So, how does this work?

Some site templates uses the Minimal Download Strategy (MDS) framework. This framework consists of several components working together to only download the changes between the different pages. The main component is the start.aspx application page (as I said, there are more components to make this work). This page is responsible for loading pages from the site using the MDS. I don't want to write an in-depth article about MDS here...our main focus is the animation effect, remember? :) The codebehind of this page is defined in the following class: Microsoft.SharePoint.ApplicationPages.MDSStartPage.

The startpage will, among other things, register the start.js script. This script contains a javascript object, called the AsyncDeltaManager. This object will handle the delta requests/responses. When the AsyncDeltaManager retrieves a delta, he will call (at the end) the BeginTransitionAnimation() javascript function. This function does the preparation for the animation effect, ONLY if the MDS animation is enabled. At the end, the animation effect will be started in the EndTransitionAnimation() function. This is where the magic happens. He will call the SPAnimationUtility.BasicAnimator.FadeIn(content, null, null); command!

As far as I know, the fade effect is only used for the following placeholders:

• PagetitleInTitleArea
• Main

Can we disable the animation effect?

Yes, we can! (HTML5) web storage is used to enable/disable the animation effect. Below you'll find a couple of commands you can use...

SPAnimation.Settings.EnableAnimation(); //enable animation
SPAnimation.Settings.DisableAnimation();//disable animation
SPAnimation.Settings.DisableSessionAnimation();//disable animation only for this session
ToggleAnimationStatus();//toggle animation
SPAnimation.Settings.IsAnimationEnabled(); //check whether animation is enabled

Cross post: Solutions Model VS Apps Model in SharePoint 2013

A nice comparison sheet between the different models: Multifaceted In-depth Comparison of SharePoint 2013 Apps vs Solutions Code Models

Display animated spinner while loading modal dialog

The following javascript function SP.UI.ModalDialog.showModalDialog(options); is a way to display a modal dialog with specified dialog options. When you assign a value to the URL property of the dialog options, an IFRAME tag is rendered pointing to the appropriate URL.

ShowDialog example

var options = {
    title: "My Dialog Title",
    width: 400,
    height: 600,
    url: "/_layouts/DialogPage.aspx" };

SP.UI.ModalDialog.showModalDialog(options);

To display an animated spinner, you can set a background-image for the iframe with some CSS.

CSS

iframe
{
    background-image: url("../images/animatedspinner.gif");        
    background-repeat: no-repeat;     
    background-position: 50% 50%; 
}

Result