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
Copy file name to clipboardExpand all lines: docs/sp-add-ins/create-add-in-parts-to-install-with-your-sharepoint-add-in.md
+1-1Lines changed: 1 addition & 1 deletion
Original file line number
Diff line number
Diff line change
@@ -36,7 +36,7 @@ To follow the steps in this example, you need the following:
36
36
37
37
- Visual Studio
38
38
- Microsoft Office Developer Tools for Visual Studio
39
-
- A SharePoint development environment. If you need help setting up a development environment, see [Get started creating provider-hosted SharePoint Add-ins](get-started-creating-provider-hosted-sharepoint-add-ins.md).
39
+
- A SharePoint development environment. If you need help setting up a development environment, see [Two types of SharePoint Add-ins: SharePoint-hosted and provider-hosted](sharepoint-add-ins.md#two-types-of-sharepoint-add-ins-sharepoint-hosted-and-provider-hosted).
title: Customize a list view in SharePoint Add-ins using client-side rendering
3
-
ms.date: 09/25/2017
3
+
description: Customize a list view in a SharePoint-hosted add-in by using the client-side rendering technology in SharePoint.
4
+
ms.date: 12/20/2017
4
5
ms.prod: sharepoint
5
6
---
6
7
7
8
8
9
# Customize a list view in SharePoint Add-ins using client-side rendering
9
-
Learn how to customize a list view in a SharePoint-hosted add-in by using the client-side rendering technology in SharePoint.
10
10
11
-
11
+
In SharePoint, client-side rendering provides a way for you to produce your own output for a set of controls that are hosted on a SharePoint page. It enables you to use well-known technologies, such as HTML and JavaScript, to define the rendering logic of SharePoint list views. With client-side rendering, you can specify your own JavaScript resources and host them in the data storage options that are available to your add-ins, such as in a document library. A SharePoint-hosted add-in includes only SharePoint components. A SharePoint-hosted add-in has its resources in an isolated subsite of the host web, called the add-in web.
12
12
13
-
In SharePoint, client-side rendering provides a way for you to produce your own output for a set of controls that are hosted in a SharePoint page. It enables you to use well-known technologies, such as HTML and JavaScript, to define the rendering logic of SharePoint list views. With client-side rendering, you can specify your own JavaScript resources and host them in the data storage options that are available to your add-ins, such as in a document library. A SharePoint-hosted add-in includes only SharePoint components. A SharePoint-hosted add-in has its resources in an isolated subsite of the host web, called the add-in web.
14
-
13
+
<aname="SP15CSRlistview_Prereq"> </a>
15
14
16
15
## Prerequisites for using the examples in this article
17
-
<aname="SP15CSRlistview_Prereq"> </a>
18
16
19
-
To follow the steps in this example, you will need the following:
20
-
17
+
To follow the steps in this example, you need the following:
21
18
22
-
19
+
-[Visual Studio 2015 and the latest Microsoft Office Developer Tools ](https://www.visualstudio.com/vs/office-tools/)
23
20
24
-
-[Visual Studio 2015 and the latest Microsoft Office Developer Tools ](https://www.visualstudio.com/features/office-tools-vs)
25
-
26
-
27
21
- A SharePoint development environment (add-in isolation required for on-premises scenarios)
28
-
29
-
30
-
For guidance on how to set up a development environment that fits your needs, see [Start building Office and SharePoint Add-ins](http://msdn.microsoft.com/library/187f8c8c-1b15-471c-80b5-69a40e67deea.aspx).
31
-
32
22
33
-
23
+
For guidance about how to set up a development environment that fits your needs, see [Two types of SharePoint Add-ins: SharePoint-hosted and provider-hosted](sharepoint-add-ins.md#two-types-of-sharepoint-add-ins-sharepoint-hosted-and-provider-hosted).
34
24
35
25
### Core concepts to help you understand list view customization with client-side rendering
36
26
@@ -42,201 +32,168 @@ The following table lists useful articles that can help you understand the conce
42
32
|[UX design for SharePoint Add-ins](ux-design-for-sharepoint-add-ins.md)|Learn about the UX options that you have when you are building SharePoint Add-ins.|
43
33
|[Host webs, add-in webs, and SharePoint components in SharePoint](host-webs-add-in-webs-and-sharepoint-components-in-sharepoint.md)|Learn about the difference between host webs and add-in webs. Find out which SharePoint components can be included in a SharePoint Add-in, which components are deployed to the host web, which components are deployed to the add-in web, and how the add-in web is deployed in an isolated ___domain.|
44
34
45
-
## Code example: Customize a list view by using client-side rendering
46
35
<aname="SP15CSRlistview_Codeexample"> </a>
47
36
48
-
To customize a list view that is deployed to the add-in web by using client-side rendering, follow these steps:
49
-
37
+
## Code example: Customize a list view by using client-side rendering
50
38
51
-
39
+
The following steps show you how to customize a list view that is deployed to the add-in web by using client-side rendering.
52
40
53
41
1. Create the SharePoint Add-in project.
54
-
55
-
42
+
56
43
2. Create a new list definition with a custom view.
57
-
58
-
59
-
3. Provide the custom rendering logic in a JavaScript file.
60
-
61
-
62
-
Figure 1 shows a client-side rendered view of an announcements list.
63
-
64
44
65
-
45
+
3. Provide the custom rendering logic in a JavaScript file.
66
46
67
-
**Figure 1. Custom view of an announcements list**
47
+
The following figure shows a client-side rendered view of an announcements list.
68
48
69
-
49
+
**Custom view of an announcements list**
70
50
71
-
72
51
73
-
74
52
75
53
### To create the SharePoint Add-in project
76
54
55
+
1. Open Visual Studio 2015 as administrator. (To do this, right-click the **Visual Studio** icon on the **Start** menu, and select **Run as administrator**.)
77
56
78
-
1. Open Visual Studio 2015 as administrator. (To do this, right-click the **Visual Studio** icon on the **Start** menu, and choose **Run as administrator**.)
79
-
80
-
81
-
2. Create a new project using the **SharePoint Add-in** template.
57
+
2. Create a new project using the **SharePoint Add-in** template.
82
58
83
-
Figure 2 shows the ___location of the **SharePoint Add-in** template in Visual Studio 2015, under **Templates**, **Visual C#**, **Office/SharePoint**, **Office Add-ins**.
59
+
The following figure shows the ___location of the **SharePoint Add-in** template in Visual Studio 2015, under **Templates** >**Visual C#** >**Office/SharePoint** >**Office Add-ins**.
84
60
61
+
**Add-in for SharePoint Visual Studio template**
85
62
86
-
**Figure 2. Add-in for SharePoint Visual Studio template**
63
+
87
64
88
-
89
-
90
-
91
-
92
-
93
-
94
-
95
-
96
65
3. Provide the URL of the SharePoint website that you want to use for debugging.
97
66
98
-
99
-
4. Select **SharePoint-hosted** as the hosting option for your add-in.
100
-
101
-
67
+
4. Select **SharePoint-hosted** as the hosting option for your add-in.
102
68
103
69
### To create a new list definition
104
70
71
+
1. Right-click the SharePoint Add-in project, and add a new **List** item. Create a customizable list based on Announcements.
105
72
106
-
1. Right-click the SharePoint Add-in project, and add a new **List** item. Create a customizable list based on Announcements.
107
-
108
-
109
-
2. Copy the following markup and paste it in the **Views** element in the Schema.xml file of your list feature. The markup performs the following tasks:
73
+
2. Copy the following markup and paste it in the **Views** element in the Schema.xml file of your list feature. The markup performs the following tasks:
110
74
111
-
- Declares a new view named Overridable with a BaseViewID=2.
112
-
113
-
114
-
- Provides a value for the **JSLink** element that points to a JavaScript file that is provisioned with the add-in.
75
+
- Declares a new view named Overridable with a BaseViewID=2.
76
+
77
+
- Provides a value for the **JSLink** element that points to a JavaScript file that is provisioned with the add-in.
115
78
116
79
> [!NOTE]
117
80
> The JSLink property is not supported on Survey or Events lists. A SharePoint calendar is an Events list.
// The preRenderHandler attends the OnPreRender event
197
-
function preRenderHandler(ctx) {
146
+
// This function builds the output for the item template.
147
+
// It uses the context object to access announcement data.
148
+
function customItem(ctx) {
198
149
199
-
// Override the default title with user input.
200
-
ctx.ListTitle = prompt("Type a title", ctx.ListTitle);
201
-
}
150
+
// Build a listitem entry for every announcement in the list.
151
+
var ret = "<li>" + ctx.CurrentItem.Title + "</li>";
152
+
return ret;
153
+
}
202
154
203
-
// The postRenderHandler attends the OnPostRender event
204
-
function postRenderHandler(ctx) {
155
+
// The preRenderHandler attends the OnPreRender event
156
+
function preRenderHandler(ctx) {
205
157
206
-
// You can manipulate the DOM in the postRender event
207
-
var ulObj;
208
-
var i, j;
158
+
// Override the default title with user input.
159
+
ctx.ListTitle = prompt("Type a title", ctx.ListTitle);
160
+
}
209
161
210
-
ulObj = document.getElementById("unorderedlist");
211
-
212
-
// Reverse order the list.
213
-
for (i = 1; i < ulObj.children.length; i++) {
214
-
var x = ulObj.children[i];
215
-
for (j = 1; j < ulObj.children.length; j++) {
216
-
var y = ulObj.children[j];
217
-
if(x.innerText<y.innerText){
218
-
ulObj.insertBefore(y, x);
162
+
// The postRenderHandler attends the OnPostRender event
163
+
function postRenderHandler(ctx) {
164
+
165
+
// You can manipulate the DOM in the postRender event
166
+
var ulObj;
167
+
var i, j;
168
+
169
+
ulObj = document.getElementById("unorderedlist");
170
+
171
+
// Reverse order the list.
172
+
for (i = 1; i < ulObj.children.length; i++) {
173
+
var x = ulObj.children[i];
174
+
for (j = 1; j < ulObj.children.length; j++) {
175
+
var y = ulObj.children[j];
176
+
if(x.innerText<y.innerText){
177
+
ulObj.insertBefore(y, x);
178
+
}
219
179
}
220
180
}
221
181
}
222
-
}
223
-
```
182
+
```
224
183
184
+
<br/>
225
185
226
186
### To build and run the solution
227
187
228
-
229
-
1. Press the F5 key.
188
+
1. Select the F5 key.
230
189
231
190
> [!NOTE]
232
-
> When you press F5, Visual Studio builds the solution, deploys the add-in, and opens the permissions page for the add-in.
191
+
> When you select F5, Visual Studio builds the solution, deploys the add-in, and opens the permissions page for the add-in.
233
192
234
-
2. Choose the **Trust It** button.
235
-
193
+
2. Select the **Trust It** button.
236
194
237
-
3. Go to your custom List by entering the _/Lists/<your_list_instance>_ address relative to your add-in directory in the add-in web ___domain (not the host web ___domain). Add one or two announcements. On the ribbon, choose the **Overridable** view.
195
+
3. Go to your custom List by entering the _/Lists/<your_list_instance>_ address relative to your add-in directory in the add-in web ___domain (not the host web ___domain). Add one or two announcements. On the ribbon, select the **Overridable** view.
0 commit comments