Understand Sharepoint Part 4 - Site Columns, Content Types, MVC integration with SharePoint

SharePoint Master Pages

Hey friends, very warm welcome to our Sharepoint learn #stepbystep series. I'm Gurunatha Dogi a developer with overall 8 + years of experience in learning, working and teaching microsoft and linux technologies.

Who we are : This website is managed and run by #Questpond, an e-learning firm into education sector since 2004 and we are specialist and focused only on Microsoft technologies.

We provide training (online / offline) along with self learning materials with over 600+ videos, source codes and e-books.

To know more about videos + tutorial materials feel free to contact us on below mentioned details or visit our Questpond website.

Now coming to this session, This is part 4 our Hour 4 session and in this session we will we will learn to create site columns, content types and MVC integration with Sharepoint.

Before we get started with the article, If you have landed directly on this request you to read our previous articles because this is Part 4 session for sharepoint step by step.

In our previous article we saw How to customize Sharepoint Master Pages here we will see to integrate Site Columns & Content Types and MVC integration with SharePoint .

What are Site Columns in Sharepoint?

SharePoint Site Columns let you define standard columns. They are like re-usable columns, once defined then we can re-use it any number of times in a main-site or sub-site.

So by using Site Columns we save our lots of time. Instead of creating private columns we can create site columns. They are really useful and this makes it very easy for us to reuse configuration.

What is a content type in Sharepoint?

In simple words content types are set of reusable columns that are grouped together for specific task. For example you can create set of grouped columns for Accounts, Invoice, Students and able to re-use and insert in a sub-sites or main-sites. The beauty of content-type is that if any time we need set of columns in multiple libraries then only once we need to create it and able to re-use it in multiple places. One more advantage is that we can have multiple content types in the same list or library.

So site columns and content types are re-usable components across list and document libraries.

For example below we have created a document library called "Sales Department" and in that we have a added column called "Document Title" so now if we want to re-use this column with other library then it would be diffcult why because when we add columns using "+" icon then we are adding a private column which are non-resuable columns.

So instead of creating non-reusable columns we can create Site columns and content types which are defined in a central place or global place that can be re-used again and again for every library. So it completely optional how you want to define a columns.

Now let's understand how to create Site Columns step by step.

Create Site columns Step by Step

In order to create site columns go to -> Site settings -> Site columns as shown in below images.

Now click on Site column link (under web designer galleries) to navigate to site column page as shown in below image.

Click on Create Hyper link to create new site column once you clicked on that on next step it will ask you column category that column belongs to. So for now select "Custom Column" and give name column name as Employee Number as shown in below image.

So as you see we have successfully created site column centrally. In the next step we will apply this centrally created site column to document library i.e. sales department document library.

So go to -> document library -> click on library settings as shown in below image.

Now select our created column "EmployeeNumber" and click on Add button to add column. Finally click on OK button to apply the changes as shown in below image.

After applying you should see the changes i.e employee number field added to the document library.

Hope you have understood about site column in sharepoint, now let's talk and understand about content-types.

Create Content Types Step by Step

As we know that content-types are set of reusable columns or grouped columns whereas site columns are also resuable but it is only good for single field items. If you have group of fields like Customer (CustomerName, CustomerNumber and CustomerDescription) then it would be tedious job to create site-columns for all fields rather than we simply create content-types and apply on the same. This makes our work more faster. So when you have group of fields then it is best practice to create content-types.

In-order to create content-types go to -> Site settings and find site content-types link as shown in below image.

Now click on Create link as shown in image.

Give the appropriate name to the content type and ensure to select parent content types as document set because if you want to apply this to document library then choose document set or want to apply this to list then select List.

Once after creating content-types now its time to add site column to the content type so add columns and save it.

Enable Content-Types

Now that we have our content-type ready and now we need to enable our created content-types on document library. Now to enable document-library click on library settings -. click on advance settings -> Click “Yes” to allow management of content types..

Apply Content-Typees to Document Library

After allowed management of content-types now again go to document library and select add from existing content type as shown in below image.

Select the employee content-type and you would see that all the fields of the content type are selected as shown in below image.

Now just click on OK button to apply created content-types to the document library.

So hey friends hope you understood Content-Types and Site Columns if you have any doubts feel free to touch base with us.

MVC integration with SharePoint step by step

Till now we have been learning sharepoint fundamentals like site collection, list, document library, conten-types etc now its time to get into SharePoint customization using MVC and C#.

Step 1 : Get Visual studio and office templates

In-order to host MVC application inside sharepoint we need to create SharePoint App to know more about Sharepoint App check this link

In Sharepoint 2016 App is called as Add-in a small piece of functionality which we want to run inside the SharePoint site. so let's create Add-in / App.

In order to create Add-in we need to download isual studio community edition from www.visualstudio.com. So visit site and download it as shown in below image.

In VS 2015 community edition we not get necessary templates to create SharePoint addin or app to get those templates you need to install office dev tools for VS 2015 http://aka.ms/officedevtoolsforvs2015.

Note : For VS 2015 enterprise edition / VS 2013 Ultimate edition users there is no need to download office devtools templates because they are part of it.

Step 2 :- Create simple hello world App / Addin

Here in this step we will create a simple MVC page which says "Hello to SharePoint" and host it inside SharePoint. So let's do it.

To create go to New Project -> Select Office Sharepoint -> then click on “App for SharePoint 2013” template as shown in the below figure.

Please note : In 2016 App is changed to "Add-in".

Give a proper name and click on OK button to create project, once you click on OK button a new modal with popup enter the SharePoint site where we want to host this app and in a same UI you will also find three options Provider hosted, Auto and Sharepoint hosted.

Provider hosted : Means App is hosted in different server and Sharepoint is running on some different server

Sharepoint hosted : Means App and Sharepoint both are running on a same server.

Step 3 :- Type of ASP.NET Project

After choosing sharepoint provider hosted model you will land on a screen where you need to select type of web application project i.e. either ASP.NET web forms application or ASP.NET MVC web application for this example we will select ASP.NET MVC web application and click on NEXT button as shown in below image.

Step 4 : Configure Authentication Settings

Here in this step we need to specify authentication settings. Here visual studio has to authorize himself to host the app. Here you need to understand about user group and permission i.e Office 365 so if you know already its fine but if not then kindly check this article link.

It gives two options i.e. Use of certificate or Windows azure access control here we will select Windows azure access control as shown in below image.

Once you click on Finish button it will prompt window for user-name and password. Enter office 365 username and password. Once all done you should able to see MVC project as shown in below image.

Project is well structured - MVC structure with Models, Controllers, Views, ActionResult.

Step 5:- Code MVC Project

As you saw our default MVC project is created successfully here we will first delete index.cshtml file because we want to do it from scratch so delete file and re-create it so for that right click on index action and add view file index.cshtml as shown in below image.

Here in this view we will put a message "Hello to SharePoint from MVC".

What is "SharePointContextFilter" attribute ?

"SharePointContextFilter" is ready made action filter from sharepoint.Why we are talking about this attribute is because if you see in index action code "SharePointContextFilter" attribute decorated on the index action so right click on it and goto definition to see what is it exactly ?.

If you see it is nothing but MVC action filter i.e. It is pre-processing and post-processing logic which you want to execute before and after the action is executed.

This filters helps to get access with sharepoint context and also helps to redirect to the provider hosted server and brings lot of information of sharepoint and especially it brings the context of sharepoint.

Step 6 : Publishing the App / Addin

Before publishing app let's remove all code from Index action and keep only return code which invokes the "Index" view.

To publish App let's build project and click on deploy to publish this project to sharepoint server. When we deploy this project it identifies the app by a unique GUID number.You can see in the output window we have the client GUIID below image.

Step 7:- Run the App and Give Trust

Finally let's run the project by clicking control + F5 when we hit run it automatically checks for malicious code so you should get a UI as shown below, press trust it and let the app/addin execute.

After clicking on Trust button and it will display MVC view page as shown in below image.

In your site where this is app is published you should be able to see the App / Addin link in your recent link section.

If you edit the recent link you can see that it invokes the MVC application by using the unique identifier.

If the provider server is down from some reason then the application would not run and you get an error saying site not found. Hope you understood and like the session if you have any queries regarding this session feel free to contact on below mentioned details.

+91 9967590707
questpond@questpond.com / questpond@yahoo.com