In this blog post we will have a look at how to add animations to items displayed in a SharePoint list using view formatting. To add animations, we will be using animate css library. The end result will be as shown below where we see a bar graph that represents votes for some fruits.
View formatting
As explained in this article by Microsoft, view formatting provides a great and an easy way to customize how items can be displayed in a list view. If you haven’t had a chance to look into it, do have a read of the getting started section in that article, watch this video by Chris Kent and have a look at these brilliant samples from the members of the community. These links should surely put you in a comfortable position with view formatting.
Animate CSS
This is a cool library developed by Daniel Eden which provides animations for controls simply using CSS. With this library (CSS) loaded on the page, all we have to do is add a couple of extra class values to the elements that need animation and we are done. The class values needed are “animated animation-name” in which “animation-name” is a value from this list.
Creating a SharePoint list and formatting the view
To achieve the end result let’s start by creating a simple list named “Votes”. Once the list is created, add the following columns to that list.
Add some data to the list similar to the table below.
Make sure that only one item has “IsHighest” set to “Yes” and only the last item has “IsLastItem” set to “Yes”.
After that go format this view and paste the bar graph view format JSON specified here in the PnP view formatting samples and save the view format.
In the JSON on line number 99 we can see that the class name ends with “animated bounceInLeft”. This should add the bounce animation. However, since we haven’t added the animate CSS library yet, we will see a non animated bar graph as shown below.
That is it from the view formatting side. All that is left now is adding the animate CSS library to the page so that bounce animation can be triggered.
Combining view formatting and animate css
With view formatting we can add CSS styles to elements that are rendered. So one way of combining animate CSS with view formatting would be taking all the needed styles from animate CSS library and adding it to the elements. However, this would be a tedious process and some of the style attributes that are used by animate CSS library may not be supported by view formatting.
Hence what we will do is, place the animate CSS library on to the page which has the view formatting. We will make use of an SPFx application customizer to place (render) the animate CSS library.
Application customizer to render CSS
We will be creating an application customizer that will reference a CSS file present in the “Style library” folder of the SharePoint site. So, please download “animate.min.css” and place it in the style library.
After that, follow the simple and brilliant instructions mentioned by Hugo Bernier in this post to create an application customizer. In that post Hugo creates a custom css file, there is no need for us to do that as we already have the css. Instead, we simply change the URL in step 2 to “/Style library/animate.min.css”.
Add the application customizer
Follow the complete instructions in Hugo’s blog to deploy the application customizer. Once the application customizer is deployed, add it to the required site. This should load animate.min.css on all the pages of the site. We can verify this by viewing the browser’s network panel.
If you think that this file should load only on one page, then the code can be updated to check the URL before injecting the CSS.
Reload and done
So we now have the view format in place already and the CSS is present on the page. If we reload the view that has the bar graph view format created earlier, we should see the bounceInLeft animation in action for all the bars in the graph.
Extra information: Column graph
The above steps can be applied to the column graph sample as well and we can use “animated bounceInUp” to add a nice animation to the graph.
Hope this article is helpful. Do have a play with different animations on the view formatting samples and share your thoughts in the comments.
