Create Site Column, Content type and List in SharePoint Hosted Apps or Add-in

This SharePoint hosted add-in or app tutorial, we will discuss how to create a site column, content type and a SharePoint Online list in SharePoint hosted add-in or apps using visual studio 2017 for SharePoint Online Office 365.


Here we will discuss in detail, how to create a SharePoint site column in the Visual Studio 2017 using SharePoint hosted App or add-in. Also, how to create a custom content type in SharePoint Online site in SharePoint hosted add-in and how to add site columns to SharePoint custom content type in SharePoint hosted add-in.


We will also learn how to create a SharePoint List in SharePoint hosted add-in using visual studio 2017 and how to create a view in the SharePoint list. Finally, we will see how we can add content type to that SharePoint list in SharePoint hosted add-in using Visual Studio 2017.



Create Site Columns in SharePoint Hosted Add-in

We will see here how to create a Site column in SharePoint using SharePoint hosted Add-in using Visual Studio 2017.


If you are creating SharePoint hosted add-in first time for SharePoint Online using Visual Studio 2017, remember to create a SharePoint developer site. If you do not have the developer site created, then create a new SharePoint developer site.


Open the Visual Studio 2017. Go to File->New->Project.


create a SharePoint hosted app in office 365


The New Project Page will come. Select the “Add-ins” from “Office/SharePoint” which is available in the left panel and “SharePoint Add-in” from the middle panel. In the Name field give the name for the Project. I have given the name as “AddContentTypeToSharePointProductList” the same name will display in the Solution name. Click on OK.



how to create a SharePoint hosted app in SharePoint online


The below screenshot will come when you are creating a new project, it is displaying where your Project will store in your local system.



SharePoint hosted app in SharePoint online step by step


New SharePoint Add-in dialogue box will come. In the Dialogue box “What SharePoint Add-in settings” field give the SharePoint developer site URL. Select the “SharePoint-hosted” from “How do you want to your SharePoint Add-in?”. Click on Next.



create a SharePoint hosted app in office 365


Select the “SharePoint Online” from “What is the earliest version of SharePoint that you want your add-in to target?”. It is by default “SharePoint online”. Here I want to show in SharePoint online so If it is not selected then select the “SharePoint Online”. Click on Finish.




how to create a SharePoint hosted app in SharePoint online


It will take time to Create the “AddContentTypeToSharePointProductList” Project.



how to create a SharePoint hosted app in SharePoint online


Now we can able to see our Project is developed in the right side panel we can able to see the “Solution Explorer” panel. I want to store all the Site column, Content type and list file in one folder So I have created a new folder.


It is a best practice to store all the file in one folder. To create a new folder Go to “AddContnetTypeToSharePointProductList”(Project name). And right click on that we able to see the “Add” option. Go for the “New Folder”.



SharePoint-hosted-add-in


I have renamed the folder as “SharePointProductFolder”, right click on that. One box will come to select the “Add” and click on “NewItem”.



how to create a SharePoint hosted app in SharePoint online


In the “Add New Item” page we can able to see List, Content Type, Site Column etc. To add the Site column, Select the “Site Column”. Give name for the Site Column and Click on “Add” button.



create a SharePoint hosted app in office 365


The Site column is created now. From the right panel, we can see our site column name. I have created the “ProductName” site column as a Single line of text. Like that, I have created a “VendorName” site column whose type is a single line of text.


I have created “ProductCatagory” column as like “ProductName” and “Vendorname” but I want the choice column type. We can set the data type of a column in the Elements.xml page. We need to add below code in the Elements.xml file.

<?xml version="1.0" encoding="utf-8"?>
<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
<Field
ID="{1459e766-aced-4f45-a1af-4f1d6bcafd47}"
Name="ProductCatagory"
DisplayName="Product Catagory"
Type="Choice"
Required="FALSE"
Group="Custom Site Columns">
<CHOICES>
<CHOICE>Mobile</CHOICE>
<CHOICE>Computer</CHOICE>
</CHOICES>
<MAPPINGS>
<MAPPING Value="1">Mobile</MAPPING>
<MAPPING Value="2">Computer</MAPPING>
</MAPPINGS>
</Field>
</Elements>

One more Site Column I have created named as “UnitPrice”. I want the data type of “UnitPrice” column as Currency. So to set the data type open the Elements.xml file and add the below code.

<?xml version="1.0" encoding="utf-8"?>
<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
<Field
ID="{0872513b-9268-4d7b-b3e9-c7147c5bb049}"
Name="UnitPrice"
DisplayName="Unit Price"
Type="Currency"
Decimals="6"
Min="0"
Required="FALSE"
Group="Custom Site Columns">
</Field>
</Elements>


Create Custom Content type in SharePoint Hosted Add-in or Apps


To create a custom content type in SharePoint hosted add-in using Visual studio 2017, follow the below process.


Go to the Folder which we already have created and Right click on it. Then click on Add->New Item.



SharePoint hosted app in SharePoint online step by step


Select the “Content Type”. Give a Proper name for the Content Type and click on “Add”.



create SharePoint hosted app in office 365


Now “Choose Content Type settings” page will come. Select the Parent for the content type, the content type inherited from which parent type. It is by default “Item” is selected. We can change the Type. Click on “Finish”.



how to create a SharePoint hosted app in SharePoint online


Add Site Column to Content type in SharePoint hosted apps


After Content Type created automatically Add Site column to content type page will come. We can add the Site column by clicking on “Click here to add a Column”. Here I have added Product Name(Single Line of Text), VendorName(Single Line of Text), Product Catagory(Choice column) and Unit Price(Currency Column).



create a SharePoint hosted app in office 365


Create a SharePoint List using SharePoint Hosted Add-in Or App


Now we will see how to add a list using SharePoint hosted add-in or apps using visual studio 2017.


Right Click on “SharePointProductFolder”->Add->New Item.


Select the “List” and give a proper name for SharePoint List. I have given the name “Products”.




SharePoint hosted app in SharePoint online step by step


List Settings page will come. In the “What name do you want to display for your list?” we can able to see the list name which I have given as a List Name.


In the “Do you want to create a customizable list template or a list instance based on existing list type?” option two filed are there

  • “Create a customizable list template and a list instance of it”: By default, it is selected the Custom List. If You want to create Announcements, Calendar, Contacts or any other type of template for List, then choose from the dropdown and select it. Click on Finish.



how to create a SharePoint hosted app in SharePoint online

  • Another field is “Create a list instance based on an existing list template”.If We do not want to create a new one we want to use existing List template then go for the second option. In the drop-down, we can able to see all the list template available in the developer site. But I have chosen the first option.



SharePoint hosted app samples


Create Views SharePoint Hosted Add-in or Apps

After creating the new list successfully the below screenshot page will come. We can create “Views“, add “Content Types” to ist and we can directly add the site column to the list from “Type a new or existing column name” option.




how to create a SharePoint hosted app in SharePoint online


To add the field in the “All items” view, add the fields to “Selected columns”. Here I have added “Title”,

“Created By” and “Modified By” field to “All Items” views.




SharePoint hosted app samples


SharePoint Hosted Add-in Setup List Properties

In the “List” we can able to see all the list details list Title, List URL, Description and we can see one more option. “Display list at Quick Launch“: If we do not want to see the App in the Quick lunch we can uncheck the text box.

SharePoint hosted app deployment


To Add content type to the SharePoint list, click on “Content Types”. We can able to see one box where all the content type will available. We can the Content type here. I have added the Item content type (by default), folder and “ProductDetsils”(we select from the dropdown). Click On Ok.

create a SharePoint hosted app in office 365


Now we need to give Permission for the Site. So click on “AppMainfest.xml” which is present in the left panel. We can able to see the “Permission” option in the ribbon. I have given the full control permission for Site collection, Web and List.

sharepoint 2013 app development step by step


Deploy SharePoint hosted Add-in or App using Visual studio


To deploy the SharePoint hosted App to the developer site, go to the Project name. My project name is “AddContnetTypeToSharePointProductList”, right click on it. Then Click on “Deploy”.


sharepoint hosted app in sharepoint online


After Click on Deploy wait for some time. It will take time. After some time we will get a page like below it is asking for permission. I will ask “Do you trust the AddContentTypeTpSharePointProductList?”. Click on “Trust It”.

sharepoint hosted app tutorial


We are giving the Permission the app will available on the SiteContent page of developer site. On the page, it is displaying Hello and display name of logged in user.


what is sharepoint hosted app


To see the list item type your developer https://Site URL/AddContentTypeToSharePointProductList(AppName)/Lists/Products(Listname)



SharePoint 2013 app development step by step




Conclusion

In the above SharePoint hosted app or add-in example, we learned some important things about SharePoint hosted app. We knew

  1. How to create a site column in SharePoint hosted app or add-in using Visual Studio 2017

  2. How to create a custom content type in SharePoint hosted app or add-in in SharePoint Online Office 365.

  3. How to add the site column to content type in SharePoint hosted app using visual studio 2017 in SharePoint Online Office 365.

  4. How to create a new list in the SharePoint hosted app in the SharePoint hosted app

  5. How to enable the field from the view in SharePoint hosted app

  6. How to add a content type to SharePoint list in SharePoint hosted app

  7. How to deploy the SharePoint hosted app using visual studio 2017 to SharePoint Online developer site.



Source: SP Guide


The Tech Platform

www.thetechplatform.com

0 comments