Create Tab in Office 365 SharePoint Lists

This short article shows you how to create tab look in SharePoint Custom List.

When I went to I saw the tab I want but how am I going to put this in my Office 365 SharePoint.

1. Create a SharePoint Custom List

2. Open SharePoint Designer 2013 and point to the SharePoint site.

3. Choose Lists and Libraries.


4. Choose a List, in my example is Tabblist.


5. Click New in Forms.

6. Name the form, for example, NewFormCust.aspx. Check the Set as default form for the selected type.


7. Click on the new form, NewFormCust.aspx, to edit.

8. Click on the Advanced Mode.


9. Under the line

<asp:Content ContentPlaceHolderId=”PlaceHolderMain” runat=”server”>

add the JavaScript   

The JavaScript as below.

function openCity(evt, cityName) {
// Declare all variables
i, tabcontent, tablinks;

// Get all elements with class=”tabcontent” and hide them
    tabcontent = document.getElementsByClassName(“tabcontent”
for (i = 0
; i < tabcontent.length; i++) {
tabcontent[i].style.display =

// Get all elements with class=”tablinks” and remove the class “active”
    tablinks = document.getElementsByClassName(“tablinks”
for (i = 0
; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(
” active”, “”

// Show the current tab, and add an “active” class to the link that opened the tab
    document.getElementById(cityName).style.display = “block”
evt.currentTarget.className +=
” active”

10. Under the line

<SharePoint:CssRegistration Name=”forms.css” runat=”server”/>

Add the css

<SharePoint:CssRegistration Name= runat=”server”/>

The css code as below.

.tabcontent {
: fadeEffect 1s;
: fadeEffect 1s; /* Fading effect takes 1 second */

@-webkit-keyframes fadeEffect {
{opacity: 0;}
{opacity: 1;}

@keyframes fadeEffect {
{opacity: 0;}
{opacity: 1;}

11. Look for



            <td width=”190px” valign=”top” class=”ms-formlabel”>

            <H3 class=”ms-standardheader”>

            <nobr>Title<span class=”ms-formvalidation”> *</span></nobr>



add the follow code before that.



    <ul class=”tab”>

        <li><a href=”#” class=”tablinks” onclick=”openCity(event, ‘London’)”>London</a></li>

        <li><a href=”#” class=”tablinks” onclick=”openCity(event, ‘Paris’)”>Paris</a></li>

        <li><a href=”#” class=”tablinks” onclick=”openCity(event, ‘Tokyo’)”>Tokyo</a></li>



    <div id=”London” class=”tabcontent”>


        <p>London is the capital city of England.</p>



    <div id=”Paris” class=”tabcontent”>


        <p>Paris is the capital of France.</p>



    <div id=”Tokyo” class=”tabcontent”>


        <p>Tokyo is the capital of Japan.</p>



When you create a new item now then you should see.




About chanmingman

Since March 2011 Microsoft Live Spaces migrated to Wordpress ( till now, I have is over 1 million viewers. This blog is about more than 50% telling you how to resolve error messages, especial for Microsoft products. The blog also has a lot of guidance teaching you how to get stated certain Microsoft technologies. The blog also uses as a help to keep my memory. The blog is never meant to give people consulting services or silver bullet solutions. It is a contribution to the community. Thanks for your support over the years. Ming Man is Microsoft MVP since year 2006. He is a software development manager for a multinational company. With 25 years of experience in the IT field, he has developed system using Clipper, COBOL, VB5, VB6, VB.NET, Java and C #. He has been using Visual Studio (.NET) since the Beta back in year 2000. He and the team have developed many projects using .NET platform such as SCM, and HR based applications. He is familiar with the N-Tier design of business application and is also an expert with database experience in MS SQL, Oracle and AS 400.
This entry was posted in .Net, Cloud, Community, Office 365, sharepoint and tagged , , , , , , , . Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s