You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
title: Add custom columns to a SharePoint-hosted SharePoint Add-in
3
3
description: Create custom column types, run the add-in, and test the columns.
4
-
ms.date: 12/04/2017
4
+
ms.date: 01/06/2021
5
5
ms.prod: sharepoint
6
6
localization_priority: Priority
7
7
---
8
8
9
9
# Add custom columns to a SharePoint-hosted SharePoint Add-in
10
10
11
-
This is the third in a series of articles about the basics of developing SharePoint-hosted SharePoint Add-ins. You should first be familiar with [SharePoint Add-ins](sharepoint-add-ins.md) and the previous articles in this series, which you can find at [Get started creating SharePoint-hosted SharePoint Add-ins](get-started-creating-sharepoint-hosted-sharepoint-add-ins.md#Nextsteps).
12
-
11
+
This is the third in a series of articles about the basics of developing SharePoint-hosted SharePoint Add-ins. You should first be familiar with [SharePoint Add-ins](sharepoint-add-ins.md) and the previous articles in this series, which you can find at [Get started creating SharePoint-hosted SharePoint Add-ins](get-started-creating-sharepoint-hosted-sharepoint-add-ins.md#Nextsteps).
12
+
13
13
> [!NOTE]
14
14
> If you have been working through this series about SharePoint-hosted add-ins, you have a Visual Studio solution that you can use to continue with this topic. You can also download the repository at [SharePoint_SP-hosted_Add-Ins_Tutorials](https://github.com/OfficeDev/SharePoint_SP-hosted_Add-Ins_Tutorials) and open the BeforeColumns.sln file.
15
15
16
16
In this article, we get back to coding by adding some site columns to the Employee Orientation SharePoint Add-in.
17
-
17
+
18
18
## Create custom column types
19
19
20
-
1. In **Solution Explorer**, right-click the project and select **Add** > **New Folder**. Name the folder **Site Columns**.
21
-
22
-
2. Right-click the new folder, and select **Add** > **New Item**. The **Add New Item** dialog opens to the **Office/SharePoint** node.
23
-
24
-
3. Select **Site Column**, give it the name **Division**, and then select **Add**.
25
-
26
-
4. In the elements.xml file for the new site column, edit the **Field** element so that it has the attributes and values shown in the following example, except that *you should **not** change the GUID* for the **ID** attribute from the value that Visual Studio generated for it, *so be careful if you are using copy-and-paste*.
27
-
28
-
```
29
-
<Field ID="{generated GUID}"
30
-
Name="Division"
31
-
Title="Division"
32
-
DisplayName="Division"
33
-
Description="The division of the company where the employee works."
34
-
Group="Employee Orientation"
35
-
Type="Text"
36
-
Required ="FALSE">
20
+
1. In **Solution Explorer**, right-click the project and select **Add** > **New Folder**. Name the folder **Site Columns**.
21
+
1. Right-click the new folder, and select **Add** > **New Item**. The **Add New Item** dialog opens to the **Office/SharePoint** node.
22
+
1. Select **Site Column**, give it the name **Division**, and then select **Add**.
23
+
1. In the elements.xml file for the new site column, edit the **Field** element so that it has the attributes and values shown in the following example, except that *you should **not** change the GUID* for the **ID** attribute from the value that Visual Studio generated for it, *so be careful if you are using copy-and-paste*.
24
+
25
+
```xml
26
+
<FieldID="{generated GUID}"
27
+
Name="Division"
28
+
Title="Division"
29
+
DisplayName="Division"
30
+
Description="The division of the company where the employee works."
31
+
Group="Employee Orientation"
32
+
Type="Text"
33
+
Required ="FALSE">
37
34
</Field>
38
35
```
39
-
40
-
<br/>
41
36
42
-
5. Add another **Site Column** named **OrientationStage** to the same folder .
43
-
44
-
6. In the elements.xml file for the new site column, edit the **Field** element so that it has the attributes and values shown in the following example, except that you should not change the GUID for the **ID** attribute from the value that Visual Studio generated for it.
45
-
46
-
```
47
-
<Field ID="{generated GUID}"
48
-
Name="OrientationStage"
49
-
Title="OrientationStage"
50
-
DisplayName="Orientation Stage"
51
-
Group="Employee Orientation"
52
-
Description="The current orientation stage of the employee."
53
-
Type="Choice"
54
-
Required ="TRUE">
37
+
1. Add another **Site Column** named **OrientationStage** to the same folder .
38
+
1. In the elements.xml file for the new site column, edit the **Field** element so that it has the attributes and values shown in the following example, except that you should not change the GUID for the **ID** attribute from the value that Visual Studio generated for it.
39
+
40
+
```xml
41
+
<FieldID="{generated GUID}"
42
+
Name="OrientationStage"
43
+
Title="OrientationStage"
44
+
DisplayName="Orientation Stage"
45
+
Group="Employee Orientation"
46
+
Description="The current orientation stage of the employee."
47
+
Type="Choice"
48
+
Required ="TRUE">
55
49
</Field>
56
50
```
57
-
58
-
<br/>
59
51
60
-
7. Because this is a Choice field, you must specify the possible choices and the order in which they should appear in the drop-down list when a user is making a choice. Because it is a required field, you must specify a default value. Add the following child markup to the **Field** element, and then save all the files.
61
-
62
-
```
63
-
<CHOICES>
64
-
<CHOICE>Not Started</CHOICE>
65
-
<CHOICE>Tour of building</CHOICE>
66
-
<CHOICE>HR paperwork</CHOICE>
67
-
<CHOICE>Corporate network access</CHOICE>
68
-
<CHOICE>Completed</CHOICE>
52
+
1. Because this is a Choice field, you must specify the possible choices and the order in which they should appear in the drop-down list when a user is making a choice. Because it is a required field, you must specify a default value. Add the following child markup to the **Field** element, and then save all the files.
53
+
54
+
```xml
55
+
<CHOICES>
56
+
<CHOICE>Not Started</CHOICE>
57
+
<CHOICE>Tour of building</CHOICE>
58
+
<CHOICE>HR paperwork</CHOICE>
59
+
<CHOICE>Corporate network access</CHOICE>
60
+
<CHOICE>Completed</CHOICE>
69
61
</CHOICES>
70
62
<MAPPINGS>
71
63
<MAPPINGValue="1">Not Started</MAPPING>
@@ -77,55 +69,43 @@ In this article, we get back to coding by adding some site columns to the Employ
77
69
<Default>Not Started</Default>
78
70
```
79
71
80
-
</br>
81
-
82
72
## Run the add-in and test the columns
83
73
84
-
1. Use the F5 key to deploy and run your add-in. Visual Studio makes a temporary installation of the add-in on your test SharePoint site and immediately runs the add-in.
85
-
86
-
2. When the add-in's default page opens, select the **New Employees in Seattle** link to open the custom list instance.
87
-
88
-
3. Open the list's **Settings** page and add the two columns to it with these steps:
89
-
74
+
1. Use the F5 key to deploy and run your add-in. Visual Studio makes a temporary installation of the add-in on your test SharePoint site and immediately runs the add-in.
75
+
1. When the add-in's default page opens, select the **New Employees in Seattle** link to open the custom list instance.
76
+
1. Open the list's **Settings** page and add the two columns to it with these steps:
77
+
90
78
1. Select the callout button, **· · ·** just above the list, and then select **Create View**.
91
-
2. The **View Type** page opens, with the breadcrumb structure **Settings > View Type** near the top. Select the **Settings** breadcrumb.
92
-
79
+
1. The **View Type** page opens, with the breadcrumb structure **Settings > View Type** near the top. Select the **Settings** breadcrumb.
80
+
93
81
*Figure 1. Steps to open the list settings page*
94
82
95
83
96
-
97
-
3. On the **Settings** page, open the **Add from existing site columns** link on the left about halfway down the page.
98
-
84
+
85
+
1. On the **Settings** page, open the **Add from existing site columns** link on the left about halfway down the page.
86
+
99
87
*Figure 2. List settings page*
100
88
101
89
102
90
103
-
4. On the **Add Columns from Site Columns** page, select **Employee Orientation** on the **Select site columns from** drop-down list.
104
-
91
+
1. On the **Add Columns from Site Columns** page, select **Employee Orientation** on the **Select site columns from** drop-down list.
92
+
105
93
*Figure 3. Add Columns from Site Columns page*
106
94
107
95
108
96
109
-
5. Add the **Division** and **OrientationStage** columns to the **Columns to add** box.
97
+
1. Add the **Division** and **OrientationStage** columns to the **Columns to add** box.
98
+
1. Select **OK** to return to the **Settings** page, and then select the **New Employees in Seattle** breadcrumb near the top of the page.
99
+
100
+
1. The new columns are now on the list. Add a new item to the list. On the edit form, the **Orientation Stage** field will already have the default value **Not Started**. (The existing items will be blank in this field because they were created before the field was on the list.)
110
101
111
-
6. Select **OK** to return to the **Settings** page, and then select the **New Employees in Seattle** breadcrumb near the top of the page.
112
-
113
-
4. The new columns are now on the list. Add a new item to the list. On the edit form, the **Orientation Stage** field will already have the default value **Not Started**. (The existing items will be blank in this field because they were created before the field was on the list.)
114
-
115
102
*Figure 4. The list with new columns*
116
103
117
104
118
-
119
-
5. To end the debugging session, close the browser window or stop debugging in Visual Studio. Each time that you select F5, Visual Studio will retract the previous version of the add-in and install the latest one.
120
-
121
-
6. You will work with this add-in and Visual Studio solution in other articles, and it's a good practice to retract the add-in one last time when you are done working with it for a while. Right-click the project in **Solution Explorer**, and then select **Retract**.
122
-
123
105
124
-
## Next steps
125
-
<a name="Nextsteps"> </a>
126
-
127
-
You don't really want your users to have to manually add the custom columns to the list, so in the next article in this series, you'll create a custom content type that includes the custom columns and is automatically associated with the New Employees list template: [Add a custom content type to a SharePoint-hosted SharePoint Add-in](add-a-custom-content-type-to-a-sharepoint-hosted-sharepoint-add-in.md).
128
-
106
+
1. To end the debugging session, close the browser window or stop debugging in Visual Studio. Each time that you select F5, Visual Studio will retract the previous version of the add-in and install the latest one.
107
+
1. You will work with this add-in and Visual Studio solution in other articles, and it's a good practice to retract the add-in one last time when you are done working with it for a while. Right-click the project in **Solution Explorer**, and then select **Retract**.
129
108
130
-
109
+
## Next steps
131
110
111
+
You don't really want your users to have to manually add the custom columns to the list, so in the next article in this series, you'll create a custom content type that includes the custom columns and is automatically associated with the New Employees list template: [Add a custom content type to a SharePoint-hosted SharePoint Add-in](add-a-custom-content-type-to-a-sharepoint-hosted-sharepoint-add-in.md).
0 commit comments