Articles about European Sharepoint Hosting Service
SharePoint Hosting – How To Create Item In Folder Of SharePoint List
In this blog, we will learn how we can create items in a folder of the SharePoint list.
Follow the below steps to create an item in the folder.
Steps
Step 1
First, we will create JSON for the data parameter of POST call as below,
1 2 3 4 5 |
<span class="token class-name"><span class="token keyword keyword-var">var</span></span> itemProperties <span class="token operator">=</span> <span class="token punctuation">{</span> 'Title'<span class="token punctuation">:</span> 'Test item inside folder'<span class="token punctuation">,</span> <span class="token comment">//server relative path</span> 'Path'<span class="token punctuation">:</span> '<span class="token operator">/</span>sites<span class="token operator">/</span><span class="token punctuation">{</span>site collection name<span class="token punctuation">}</span><span class="token operator">/</span>Lists<span class="token operator">/</span>Projects<span class="token operator">/</span>Internal' <span class="token punctuation">}</span><span class="token punctuation">;</span> |
- Here path will be the server relative path of the list folder in which we want to create an item.
- In the above JSON, the list name is Projects and there is one folder created with the name Internal.
Step 2
We will also define 2 other variables for site URL and list name.
1 2 |
<span class="token class-name"><span class="token keyword keyword-var">var</span></span> webUrl <span class="token operator">=</span> <span class="token keyword keyword-this">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>context<span class="token punctuation">.</span>pageContext<span class="token punctuation">.</span>web<span class="token punctuation">.</span>absoluteUrl<span class="token punctuation">;</span> <span class="token class-name"><span class="token keyword keyword-var">var</span></span> listName <span class="token operator">=</span> <span class="token string">"Projects"</span><span class="token punctuation">;</span> |
Here I have created a property for context and assign value to context property as below,
1 2 3 4 |
<span class="token keyword keyword-const">const</span> element<span class="token punctuation">:</span> React<span class="token punctuation">.</span>ReactElement <span class="token operator"><</span> IManageListItemsProps <span class="token operator">></span> <span class="token operator">=</span> React<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span>ManageListItems<span class="token punctuation">,</span> <span class="token punctuation">{</span> description<span class="token punctuation">:</span> <span class="token keyword keyword-this">this</span><span class="token punctuation">.</span>properties<span class="token punctuation">.</span>description<span class="token punctuation">,</span> <span class="token named-parameter punctuation">context</span><span class="token punctuation">:</span> <span class="token keyword keyword-this">this</span><span class="token punctuation">.</span>context <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
Step 3
Now we will create a URL for API as below,
1 |
<span class="token class-name"><span class="token keyword keyword-var">var</span></span> apiUrl <span class="token operator">=</span> webUrl <span class="token operator">+</span> <span class="token string">"/_vti_bin/listdata.svc/"</span> <span class="token operator">+</span> listName<span class="token punctuation">;</span> |
Step 4
Now we will create a separate method to create an item, so we can also reuse it,
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<span class="token keyword keyword-public">public</span> <span class="token function">insertdata</span><span class="token punctuation">(</span><span class="token named-parameter punctuation">apiUrl</span><span class="token punctuation">:</span> <span class="token keyword keyword-string">string</span><span class="token punctuation">,</span> requestdata<span class="token punctuation">,</span> requestDigest<span class="token punctuation">)</span><span class="token punctuation">:</span> Promise <span class="token operator"><</span> number <span class="token operator">></span> <span class="token punctuation">{</span> <span class="token class-name"><span class="token keyword keyword-var">var</span></span> url <span class="token operator">=</span> apiUrl<span class="token punctuation">;</span> <span class="token keyword keyword-return">return</span> <span class="token keyword keyword-new">new</span> <span class="token constructor-invocation class-name">Promise <span class="token punctuation"><</span> number <span class="token punctuation">></span></span> <span class="token punctuation">(</span><span class="token punctuation">(</span>resolve<span class="token punctuation">,</span> reject<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword keyword-try">try</span> <span class="token punctuation">{</span> <span class="token function">fetch</span><span class="token punctuation">(</span>url<span class="token punctuation">,</span> <span class="token punctuation">{</span> method<span class="token punctuation">:</span> <span class="token string">"POST"</span><span class="token punctuation">,</span> <span class="token named-parameter punctuation">credentials</span><span class="token punctuation">:</span> 'same<span class="token operator">-</span>origin'<span class="token punctuation">,</span> <span class="token named-parameter punctuation">headers</span><span class="token punctuation">:</span> <span class="token punctuation">{</span> Accept<span class="token punctuation">:</span> 'application<span class="token operator">/</span>json'<span class="token punctuation">,</span> <span class="token string">"Content-Type"</span><span class="token punctuation">:</span> <span class="token string">"application/json;odata=verbose"</span><span class="token punctuation">,</span> <span class="token string">"X-RequestDigest"</span><span class="token punctuation">:</span> requestDigest <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token named-parameter punctuation">body</span><span class="token punctuation">:</span> requestdata <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span>response<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">"Item Created"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token keyword keyword-catch">catch</span><span class="token punctuation">(</span><span class="token punctuation">(</span>error<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token function">reject</span><span class="token punctuation">(</span>error<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword keyword-catch">catch</span> <span class="token punctuation">(</span><span class="token class-name">e</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>e<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token function">reject</span><span class="token punctuation">(</span>e<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> |
Step 5
As we are doing the POST call to create an item, we need a request digest. So, we will get a request digest from context as below.
We will import libraries to get the request digest as below,
1 |
import <span class="token punctuation">{</span> IDigestCache<span class="token punctuation">,</span> DigestCache <span class="token punctuation">}</span> <span class="token keyword keyword-from">from</span> '@microsoft<span class="token operator">/</span>sp<span class="token operator">-</span>http'<span class="token punctuation">;</span> |
Then we can get the request digest and use it in our POST call to create an item,
1 2 3 4 |
<span class="token keyword keyword-const">const</span> digestCache<span class="token punctuation">:</span> IDigestCache <span class="token operator">=</span> <span class="token keyword keyword-this">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>context<span class="token punctuation">.</span>serviceScope<span class="token punctuation">.</span><span class="token function">consume</span><span class="token punctuation">(</span>DigestCache<span class="token punctuation">.</span>serviceKey<span class="token punctuation">)</span><span class="token punctuation">;</span> digestCache<span class="token punctuation">.</span><span class="token function">fetchDigest</span><span class="token punctuation">(</span><span class="token keyword keyword-this">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>context<span class="token punctuation">.</span>pageContext<span class="token punctuation">.</span>web<span class="token punctuation">.</span>serverRelativeUrl<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token keyword keyword-async">async</span> <span class="token punctuation">(</span><span class="token named-parameter punctuation">digest</span><span class="token punctuation">:</span> <span class="token keyword keyword-string">string</span><span class="token punctuation">)</span><span class="token punctuation">:</span> Promise <span class="token operator"><</span> <span class="token keyword keyword-void">void</span> <span class="token operator">></span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword keyword-await">await</span> <span class="token keyword keyword-this">this</span><span class="token punctuation">.</span><span class="token function">insertdata</span><span class="token punctuation">(</span>apiUrl<span class="token punctuation">,</span> JSON<span class="token punctuation">.</span><span class="token function">stringify</span><span class="token punctuation">(</span>itemProperties<span class="token punctuation">)</span><span class="token punctuation">,</span> digest<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
In the above code, we can see, after getting the value of the request digest we have to call our method to create the item. So we will call this method as below,
1 |
<span class="token keyword keyword-await">await</span> <span class="token keyword keyword-this">this</span><span class="token punctuation">.</span><span class="token function">insertdata</span><span class="token punctuation">(</span>apiUrl<span class="token punctuation">,</span> JSON<span class="token punctuation">.</span><span class="token function">stringify</span><span class="token punctuation">(</span>itemProperties<span class="token punctuation">)</span><span class="token punctuation">,</span> digest<span class="token punctuation">)</span><span class="token punctuation">;</span> |
Conclusion
This is how we can create items in a folder of the SharePoint list. Hope this blog will be helpful!
Print article | This entry was posted by Peter on August 26, 2021 at 1:57 am, and is filed under European SharePoint 2013 Hosting. Follow any responses to this post through RSS 2.0. Both comments and pings are currently closed. |