{"id":196,"date":"2022-11-10T11:07:01","date_gmt":"2022-11-10T08:07:01","guid":{"rendered":"https:\/\/kb.astrocroc.com\/?p=196"},"modified":"2022-11-10T11:07:01","modified_gmt":"2022-11-10T08:07:01","slug":"%d0%bf%d0%be%d0%bb%d0%b5%d0%b7%d0%bd%d1%8b%d0%b5-%d0%bf%d1%80%d0%b8%d0%bc%d0%b5%d1%80%d1%8b-jsom-sharepoint-js-rest-api","status":"publish","type":"post","link":"https:\/\/kb.astrocroc.com\/?p=196","title":{"rendered":"\u041f\u043e\u043b\u0435\u0437\u043d\u044b\u0435 \u043f\u0440\u0438\u043c\u0435\u0440\u044b JSOM SharePoint, js REST API"},"content":{"rendered":"\n<p>Want to know how to work with&nbsp;<strong>jsom SharePoint<\/strong>? Check out various&nbsp;<strong>sharepoint javascript examples<\/strong>. Let us see the best 11&nbsp;<strong>SharePoint Online jsom examples<\/strong>.<\/p>\n\n\n\n<p>Here we will discuss how to use the&nbsp;<strong>javascript client object model in SharePoint 2013<\/strong>. In some other posts, we will see some jsom SharePoint 2013 examples. This is also known as&nbsp;<strong>ECMAScript Client Object Model<\/strong>&nbsp;(jsom) or JavaScript Client Object Model (JSOM) in SharePoint 2013. JSOM is used for accessing and manipulating SharePoint objects by using JavaScript (JavaScript) in an asynchronous manner.<\/p>\n\n\n\n<p>If you are working with a&nbsp;<a href=\"https:\/\/www.enjoysharepoint.com\/sharepoint-hosted-app-development-tutorial\/\" target=\"_blank\" rel=\"noreferrer noopener\">SharePoint hosted add-in<\/a>, then we have to use Jsom in SharePoint hosted Add-in. We can use jsom code inside a&nbsp;<a rel=\"noreferrer noopener\" href=\"https:\/\/www.enjoysharepoint.com\/script-editor-web-part-sharepoint\/\" target=\"_blank\">script editor web part<\/a>,&nbsp;<a rel=\"noreferrer noopener\" href=\"https:\/\/www.enjoysharepoint.com\/include-jquery-in-sharepoint\/\" target=\"_blank\">content editor web part<\/a>, inside an HTML page or we can use in SharePoint Add-in.<\/p>\n\n\n\n<p>As in most of the cases, you will not get access to deploy your server-side code, this will help you much in those scenarios. From SharePoint 2010 towards the next versions, there is a lot of improvements towards the client-side object model. Lots of classes available to work with the client-side object model.<\/p>\n\n\n\n<p>We can access and manipulate SharePoint objects like Site, Web, List, ContentTypes, User Permission using ECMAScript client object model which works in asynchronous mode.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">JavaScript Client Object Model (JSOM) in SharePoint<\/h2>\n\n\n\n<p>To work with JSOM we need to refer to certain javascript files and if your&nbsp;<a rel=\"noreferrer noopener\" href=\"https:\/\/www.enjoysharepoint.com\/add-a-web-part-to-page-in-sharepoint\/\" target=\"_blank\">web part page<\/a>&nbsp;or the page is using the default master pages then we do not need to give any reference because in most cases the reference is already presented inside the master pages. And we should also make sure that there should be one and the only reference that exists for a particular file.<\/p>\n\n\n\n<p>We can write the JSOM code inside a script editor or also inside a content editor web part inside a SharePoint Site. But Cross-site scripting is also not allowed in JSOM like you cannot call SharePoint objects from one site to another site.<\/p>\n\n\n\n<p>Below are the browsers supported like:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>IE 7.0 onwards<\/li>\n\n\n\n<li>Firefox 3.5 onwards<\/li>\n\n\n\n<li>Safari 4.0 onwards.<\/li>\n\n\n\n<li>Google Chrome<\/li>\n<\/ul>\n\n\n\n<p>When client made an Http request to the server, the server tries to load the page and the master page. If the page using the default master pages then the page already has references to the required JSOM scripts.<\/p>\n\n\n\n<p>If it is a custom master page, then we have to load the JSOM references before the pages and controls can use the JSOM.<\/p>\n\n\n\n<p>The SharePoint downloads the files from the C:\\Program Files\\Common Files\\microsoft shared\\Web Server Extensions\\15\\TEMPLATE\\LAYOUTS directory to the client browser.<\/p>\n\n\n\n<p>The js files which we required are:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>SP.js<\/li>\n\n\n\n<li>SP.Core.js<\/li>\n\n\n\n<li>SP.Runtime.js<\/li>\n<\/ul>\n\n\n\n<p>Unlike SharePoint 2007, SharePoint 2010 or 2013 versions SharePoint only download the required files instead of downloading the whole file. SharePoint provides Script On Demand (SOD) framework which ensures that only the required files are downloaded to the client and provides options to load them in the background after the page has completed loading.<\/p>\n\n\n\n<p>SOD is a class defined in the init.js file and contains methods for loading scripts, registering script dependencies, executing methods within a loaded page, and event notification.<\/p>\n\n\n\n<p>You can enable on-demand loading is to set the OnDemand=\u201dtrue\u201d attribute in the SharePoint:ScriptLink server tag.<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-javascript\" data-line=\"\">&lt;script type=&quot;text\/javascript&quot;&gt;\nSP.SOD.RegisterSod(&quot;SP.js&quot;, &quot;\\_layouts\\SP.js&quot;);\n&lt;\/script&gt;<\/code><\/pre>\n\n\n\n<p>If you want to give reference in a page which is using any custom master page, then you can write like below:<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"\" data-line=\"\">&lt;SharePoint:ScriptLink ID=&quot;ScriptLink21&quot; Name=&quot;sp.js&quot; runat=&quot;server&quot; OnDemand=&quot;false&quot; LoadAfterUI=&quot;true&quot; Localizable=&quot;false&quot; \/&gt;<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">SharePoint Online jsom examples<\/h2>\n\n\n\n<p>Now, let us check out a few jsom examples in SharePoint Online.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Example-1: Create List using JSOM SharePoint Online<\/h3>\n\n\n\n<p>Now to work with the SharePoint objects from JSOM, first we need an instance of the client context. You can get an instance of&nbsp;<strong>SP.ClientContext<\/strong>&nbsp;by using the&nbsp;<strong>get_current() method<\/strong>. Like<\/p>\n\n\n\n<p>var clientContext = SP.ClientContext.get_current();<\/p>\n\n\n\n<p>Below is the code to&nbsp;<strong>create a List in the site in SharePoint 2013<\/strong>&nbsp;or SharePoint online:<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-javascript\" data-line=\"\">&lt;input type=&#039;button&#039; id=&#039;id1\u2032 value=&#039;Create List&#039; onclick=&quot;CreateList();&quot;\/&gt;\n\n&lt;script type=&quot;text\/javascript&quot;&gt;\nfunction CreateList()\n{\nvar clientContext;\nvar listCreationInfo;\nvar web;\nvar list;\n\nclientContext = SP.ClientContext.get_current();\nweb = clientContext.get_web();\nlistCreationInfo = new SP.ListCreationInformation();\nlistCreationInfo.set_title(&quot;MyTestList&quot;);\nlistCreationInfo.set_templateType(SP.ListTemplateType.genericList);\nlist = web.get_lists().add(listCreationInfo);\n\nclientContext.load(list);\n\nclientContext.executeQueryAsync(\nfunction () { alert(&quot;Site Created Successfully!!!&quot;) },\nfunction () { alert(&quot;Request failed&quot;) }\n);\n}\n&lt;\/script&gt;<\/code><\/pre>\n\n\n\n<p>Go to the site content and you will be able to see the list created.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Example-2: Add list item to SharePoint Online List using JSOM<\/h3>\n\n\n\n<p>Here we will try to create one list item from JSOM SharePoint 2013 or SharePoint online.<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-javascript\" data-line=\"\">&lt;input type=&#039;button&#039; id=&#039;id1\u2032 value=&#039;Create List Item&#039; onclick=&quot;CreateListItem();&quot;\/&gt;\n\n&lt;script type=&quot;text\/javascript&quot;&gt;\nvar siteUrl = &#039;http:\/\/win-pfcp2dgt8di\/sites\/EnjoySharePoint\/&#039;;\nfunction CreateListItem() {\nvar clientContext = new SP.ClientContext(siteUrl);\nvar oList = clientContext.get_web().get_lists().getByTitle(&#039;MyTestList&#039;);\nvar itemCreateInfo = new SP.ListItemCreationInformation();\nthis.oListItem = oList.addItem(itemCreateInfo);\noListItem.set_item(&#039;Title&#039;, &#039;My test item&#039;);\noListItem.update();\nclientContext.load(oListItem);\nclientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed));\n}\n\nfunction onQuerySucceeded() {\nalert(&#039;Item created: &#039; + oListItem.get_id());\n}\n\nfunction onQueryFailed(sender, args) {\nalert(&#039;Request failed. &#039; + args.get_message() + &#039;\\n&#039; + args.get_stackTrace());\n}\n&lt;\/script&gt;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Example-3: Get Users from SharePoint Group using JavaScript Client Object Model (JSOM)<\/h3>\n\n\n\n<p>Here we will see how to retrieve users from SharePoint group using the JavaScript client object model. Put the below code in a&nbsp;<a href=\"https:\/\/www.spguides.com\/script-editor-web-part-sharepoint-2016\/\" target=\"_blank\" rel=\"noreferrer noopener\">Script editor web part<\/a>&nbsp;inside a web part page in SharePoint. It will download all the users from a particular group.<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-javascript\" data-line=\"\">&lt;input type=&quot;button&quot; id=&quot;btnUpdate&quot; value=&quot;Export Site Users&quot; onclick=&quot;GenerateReport();&quot; \/&gt;\n\n&lt;script type=&quot;text\/javascript&quot;&gt;\nvar siteUrl = &#039;http:\/\/win-pfcp2dgt8di\/sites\/EnjoySharePoint\/&#039;;\nvar groups=[&#039;20&#039;];\nvar gp_users=[];\nvar gp_name;\n\nfunction GenerateReport()\n{\nretrieveAllUsersInGroup(&#039;20&#039;);\n}\n\nfunction retrieveAllUsersInGroup(grp) {\n\nvar clientContext = new SP.ClientContext(siteUrl);\nvar collGroup = clientContext.get_web().get_siteGroups();\nvar oGroup = collGroup.getById(grp);\nthis.collUser = oGroup.get_users();\nclientContext.load(collUser);\n\nclientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed));\n}\n\nfunction onQuerySucceeded() {\nvar userInfo = &quot;;\nvar userEnumerator = collUser.getEnumerator();\nwhile (userEnumerator.moveNext()) {\nvar oUser = userEnumerator.get_current();\n\nuserInfo += &#039;\\nUser: &#039; + oUser.get_title() +\n&#039;\\nID: &#039; + oUser.get_id() +\n&#039;\\nEmail: &#039; + oUser.get_email() +\n&#039;\\nLogin Name: &#039; + oUser.get_loginName();\ngp_users.push(oUser.get_title());\n}\ngenerateexcel();\n}\n\nfunction onQueryFailed(sender, args) {\nalert(&#039;Request failed. &#039; + args.get_message() + &#039;\\n&#039; + args.get_stackTrace());\n}\n\n}\n\nfunction generateexcel() {\n\nfor(z=0;z &lt; gp_users.length;z++)\n{\nvar table = document.getElementById(&#039;usrTable&#039;);\nvar row = table.insertRow(1);\nvar cell1 = row.insertCell(0);\n\ncell1.innerHTML =gp_users[z]\n\n}\nvar x = document.getElementById(&#039;usrTable&#039;).rows;\nvar xls = new ActiveXObject(\u201cExcel.Application&quot;);\nxls.visible = true\nxls.Workbooks.Add\nfor (i = 0; i &lt; x.length; i++) {\nvar y = x[i].cells;\nfor (j = 0; j &lt; y.length; j++) {\nxls.cells(i + 1, j + 1).value = y[j].innerText;\n}\n}\nwindow.location.href=&quot;http:\/\/win-pfcp2dgt8di\/sites\/EnjoySharePoint\/&quot;;\n}\n&lt;\/script&gt;\n&lt;table id=&quot;usrTable&quot; border=&quot;1\u2033 style=&quot;display:none;&quot;&gt;\n&lt;tbody&gt;\n&lt;tr width=&#039;250px&#039;&gt;\n&lt;th&gt;Name&lt;\/th&gt;\n&lt;\/tr&gt;\n&lt;\/tbody&gt;\n&lt;\/table&gt;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Example-4: Get current logged in user name in SharePoint online using JSOM<\/h3>\n\n\n\n<p>Now, we will see how to get the current logged in username in SharePoint online using JavaScript object model (jsom).<\/p>\n\n\n\n<p>To retrieve the username, insert the below code inside a script editor web part.Here I am displaying the username on a button click.<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-javascript\" data-line=\"\">&lt;script type=&quot;text\/javascript&quot;&gt;\nfunction GetCurrentUserName()\n{\nalert(_spPageContextInfo.userLoginName);\n}\n&lt;\/script&gt;\n\n&lt;input type=&#039;button&#039; value=&#039;Submit&#039; onclick=&quot;GetCurrentUserName();&quot;\/&gt;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Example-5: Fetch List view using JavaScript object model (jsom) in SharePoint Online\/2013\/2016<\/h3>\n\n\n\n<p>Now, we will see how to fetch list view data using the JavaScript object model (jsom) in SharePoint 2013\/2016 or SharePoint Online.<\/p>\n\n\n\n<p>Below is the full jsom code to fetch list view using jsom in SharePoint. You can add the code in a&nbsp;<a href=\"https:\/\/www.enjoysharepoint.com\/script-editor-web-part-sharepoint\/\" target=\"_blank\" rel=\"noreferrer noopener\">script editor web part<\/a>&nbsp;in a SharePoint web part page.<\/p>\n\n\n\n<p>Here I have a list as Testing123 which has a view as All Items.<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-javascript\" data-line=\"\">&lt;script src=&quot;http:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.4.2\/jquery.min.js&quot;&gt;&lt;\/script&gt;\n\n&lt;script language=&quot;javascript&quot; type=&quot;text\/javascript&quot;&gt;\n\nExecuteOrDelayUntilScriptLoaded(getMyList,&#039;sp.js&#039;);\nfunction getMyList() {\nvar ctx = SP.ClientContext.get_current();\nvar web = ctx.get_web();\nvar list = web.get_lists().getByTitle(&quot;Testing123&quot;);\nvar views = list.get_views();\nvar view = views.getByTitle(&quot;All Items&quot;);\nview.update();\nctx.load(view);\nmyview = view.renderAsHtml();\nctx.executeQueryAsync(OnSuccess, OnFailure);\n}\n\nfunction OnSuccess() {\nmyview = myview.get_value().toString();\n$(&quot;#testingdata&quot;).append(myview);\n}\nfunction OnFailure() {\n}\n&lt;\/script&gt;\n\n&lt;div id=&#039;testingdata&#039;&gt;&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<p>This is how we can fetch list view using the JavaScript object model (jsom) in SharePoint Online\/2013\/2016.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Example-6: Create subsite in SharePoint Online using JavaScript<\/h3>\n\n\n\n<p>Now, let us see how to create a SharePoint subsite using jQuery and JavaScript client object model in SharePoint 2016, SharePoint 2013 or SharePoint Online.<\/p>\n\n\n\n<p>We will also see, how to get all SharePoint subsites using the JavaScript object model (jsom).<\/p>\n\n\n\n<p>The code will work in SharePoint 2016\/2013 and SharePoint Online also. You can directly put the below code inside a script editor web part on a web part page in SharePoint.<\/p>\n\n\n\n<p>As you can see here I am taking one textbox and I am using the value for the site name, description as well as the URL.<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-javascript\" data-line=\"\">&lt;h1&gt;Create Site&lt;\/h1&gt;\n\nSite Name: &lt;input type=&quot;text&quot; name=&quot;txtSitename&quot; id=&quot;txtSitename&quot;&gt;\n&lt;input type=&quot;submit&quot; value=&quot;Submit&quot; id=&quot;btnCreateSite&quot;&gt;\n\n&lt;script type=&quot;text\/javascript&quot;&gt;\n\n$(&quot;#btnCreateSite&quot;).click(function(){\nCreateWebsite($(&quot;#txtSitename&quot;).val(), $(&quot;#txtSitename&quot;).val(), $(&quot;#txtSitename&quot;).val(), &quot;BLANKINTERNET#2&quot;);\n});\n\nfunction CreateWebsite(title, description, webUrl, templateTitle)\n{\nvar context = new SP.ClientContext.get_current();\nvar web = context.get_web();\ncontext.load(web);\nvar webTemplates = web.getAvailableWebTemplates(1033,false);\ncontext.load(webTemplates);\ncontext.executeQueryAsync(function(){\nvar enumerator = webTemplates.getEnumerator();\nvar customTemplate;\nwhile(enumerator.moveNext())\n{\nvar webTemplate = enumerator.get_current();\nvar webTitle = webTemplate.get_title();\nif(webTitle == templateTitle)\n{\ncustomTemplate = webTemplate.get_name();\nbreak;\n}\n}\nvar webCreationInformation = new SP.WebCreationInformation();\nwebCreationInformation.set_title(title);\nwebCreationInformation.set_description(description);\nwebCreationInformation.set_language(1033);\nwebCreationInformation.set_url(webUrl);\nwebCreationInformation.set_useSamePermissionsAsParentSite(true);\nwebCreationInformation.set_webTemplate(customTemplate);\nvar newWeb= web.get_webs().add(webCreationInformation);\ncontext.executeQueryAsync(function(){\nalert(\u2018Website created successfully.\u2019);\n},\nfunction(sender, args){\nalert(args.get_message());\n});\n},\nfunction(sender, args){\nalert(args.get_message())\n}\n);\n}\n&lt;\/script&gt;<\/code><\/pre>\n\n\n\n<p>Give a name and click on Submit button which will create a sub site under the site.<\/p>\n\n\n\n<p><strong>Another Example:<\/strong><\/p>\n\n\n\n<p>Here, I have created an HTML textbox and a button where the user will provide a site name and click on the button to&nbsp;create a subsite&nbsp;and page using the&nbsp;JavaScript object model&nbsp;(jsom) in SharePoint 2013\/2016 or SharePoint Online.<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-javascript\" data-line=\"\">Title: &lt;input type=&quot;text&quot; id=&quot;txtSitename&quot; \/&gt; &amp;nbsp &lt;button type=&quot;button&quot; id=&quot;btnCreateSite&quot; &gt;Create&lt;\/button&gt;\n\n&lt;script type=&quot;text\/javascript&quot; src=&quot;\/sites\/Intranet\/Style%20Library\/aaa\/jquery-1.8.3.min.js&quot; &gt;&lt;\/script&gt;\n&lt;script type=&quot;text\/javascript&quot; src=&quot;\/_layouts\/15\/SP.Runtime.js&quot;&gt;&lt;\/script&gt;\n&lt;script type=&quot;text\/javascript&quot; src=&quot;\/_layouts\/15\/SP.js&quot;&gt;&lt;\/script&gt;\n&lt;script type=&quot;text\/javascript&quot; src=&quot;\/_layouts\/15\/sp.publishing.js&quot;&gt;&lt;\/script&gt;\n\n&lt;script type=&quot;text\/javascript&quot;&gt;\n\n$(&quot;#btnCreateSite&quot;).click(function(){\nCreateWebsite($(&quot;#txtSitename&quot;).val(), $(&quot;#txtSitename&quot;).val(), $(&quot;#txtSitename&quot;).val(), &quot;BLANKINTERNET#2&quot;);\n});\n\nvar context;\nvar web;\nvar newWeb;\nfunction CreateWebsite(title, description, webUrl, templateTitle)\n{\ncontext = new SP.ClientContext.get_current();\nweb = context.get_web();\ncontext.load(web);\nvar webTemplates = web.getAvailableWebTemplates(1033,false);\ncontext.load(webTemplates);\ncontext.executeQueryAsync(function(){\nvar enumerator = webTemplates.getEnumerator();\nvar customTemplate;\nwhile(enumerator.moveNext())\n{\nvar webTemplate = enumerator.get_current();\nvar webTitle = webTemplate.get_title();\nif(webTitle == templateTitle)\n{\ncustomTemplate = webTemplate.get_name();\nbreak;\n}\n}\nvar webCreationInformation = new SP.WebCreationInformation();\nwebCreationInformation.set_title(title);\nwebCreationInformation.set_description(description);\nwebCreationInformation.set_language(1033);\nwebCreationInformation.set_url(webUrl);\nwebCreationInformation.set_useSamePermissionsAsParentSite(true);\nwebCreationInformation.set_webTemplate(customTemplate);\nnewWeb= web.get_webs().add(webCreationInformation);\ncontext.executeQueryAsync(function(){\ncreatePublishingPage(&quot;Home.aspx&quot;, &quot;blankWebPartPage.aspx&quot;)\nalert(&#039;Website created successfully.&#039;);\n},\nfunction(sender, args){\nalert(args.get_message());\n});\n},\nfunction(sender, args){\nalert(args.get_message())\n}\n);\n}\n\nfunction loadPageLayout (pageLayoutName, callback) {\nvar pageFromDocLayout, pageLayoutItem;\n\nSP.SOD.executeFunc(&#039;SP.js&#039;, &#039;SP.ClientContext&#039;, function () {\ncontext = SP.ClientContext.get_current();\nvar site = context.get_site();\n\ncontext.executeQueryAsync(function () {\nvar rootWeb = site.get_rootWeb();\ncontext.load(rootWeb, &#039;ServerRelativeUrl&#039;);\n\ncontext.executeQueryAsync(function () {\nvar rootUrl = rootWeb.get_serverRelativeUrl();\npageFromDocLayout = rootWeb.getFileByServerRelativeUrl(rootUrl + &quot;_catalogs\/masterpage\/&quot; + pageLayoutName);\n\ncontext.executeQueryAsync(function () {\npageLayoutItem = pageFromDocLayout.get_listItemAllFields();\n\ncontext.executeQueryAsync(function () {\nif (typeof callback == &quot;function&quot;) {\ncallback(pageLayoutItem);\n}\n});\n});\n});\n});\n});\n};\n\nfunction createPublishingPage (filename, pageLayoutName, callback) {\nSP.SOD.executeFunc(&#039;SP.js&#039;, &#039;SP.ClientContext&#039;, function () {\nSP.SOD.executeFunc(&#039;SP.Publishing.js&#039;, &#039;SP.Publishing.PublishingWeb&#039;, function () {\nvar pubWeb, pageInfo, newPage, listItem;\n\/\/context = new SP.ClientContext(&#039;\/sites\/Intranet&#039;);\n\n\/\/web = currWeb;\ncontext.load(newWeb);\ncontext.executeQueryAsync(function () {\npubWeb = SP.Publishing.PublishingWeb.getPublishingWeb(context, newWeb);\ncontext.load(newWeb);\ncontext.load(pubWeb);\ncontext.executeQueryAsync(function () {\n\n\/\/ load page layout and create the new page\nloadPageLayout(pageLayoutName, function (pageLayoutItem) {\npageInfo = new SP.Publishing.PublishingPageInformation();\npageInfo.set_pageLayoutListItem(pageLayoutItem);\npageInfo.set_name(filename);\n\nnewPage = pubWeb.addPublishingPage(pageInfo);\n\ncontext.load(newPage);\n\ncontext.executeQueryAsync(function () {\n\/\/ Success callback after adding a new Publishing Page.\n\/\/ We want to get the actual list item that is represented by the Publishing Page.\nlistItem = newPage.get_listItem();\ncontext.load(listItem);\n\ncontext.executeQueryAsync(\n\n\/\/ Success callback after getting the actual list item that is\n\/\/ represented by the Publishing Page.\n\/\/ We can now get its FieldValues, one of which is its FileLeafRef value.\n\/\/ We can then use that value to build the Url to the new page\n\/\/ and set the href or our link to that Url.\nfunction () {\nif (typeof callback == &quot;function&quot;) {\ncallback(listItem);\n}\n},\n\n\/\/ Failure callback after getting the actual list item that is\n\/\/ represented by the Publishing Page.\nfunction (sender, args) {\nalert(&#039;Failed to get new page: &#039; + args.get_message());\n}\n);\n},\n\/\/ Failure callback after trying to add a new Publishing Page.\nfunction (sender, args) {\nalert(&#039;Failed to Add Page: &#039; + args.get_message());\n}\n);\n});\n},\n\/\/ Failure callback after trying to get the host Web as a PublishingWeb.\nfunction (sender, args) {\nalert(&#039;Failed to get the PublishingWeb: &#039; + args.get_message());\n});\n});\n});\n});\n\n}\n\n&lt;\/script&gt;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Example-7: Get all SharePoint subsites using JavaScript<\/h3>\n\n\n\n<p>Now, we will see how to get all SharePoint subsites using JavaScript object model (jsom).<\/p>\n\n\n\n<p>To use the code, create a web part page and a content editor webpart or script editor web part and add the below code.<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-javascript\" data-line=\"\">ontext = new SP.ClientContext.get_current();\ncurrentweb = currentcontext.get_web();\n\/\/this.subsites = currentweb.get_webs();\nthis.subsites = currentweb.getSubwebsForCurrentUser(null);\ncurrentcontext.load(this.subsites);\ncurrentcontext.executeQueryAsync(Function.createDelegate(this, this.ExecuteOnSuccess),\nFunction.createDelegate(this, this.ExecuteOnFailure));\n}\n\nfunction ExecuteOnSuccess(sender, args) {\nvar subsites = &quot;;\nvar enum1 = this.subsites.getEnumerator();\nvar el = document.getElementById(\u2018LKMSubWebs&#039;);\nwhile (enum1.moveNext())\n{\nvar Site = enum1.get_current();\nsubsites += \u2018\\n&#039; + \u2018&lt;a class=subsitecls href=&#039;+ Site.get_serverRelativeUrl()+&#039;&gt;&#039;+Site.get_title()+&#039;&lt;\/a&gt; &lt;\/br&gt;&#039;\n\/\/RootElement.append(\u2018&lt;a class=subsitecls href=&#039;+ siteTitle+&#039;&gt;&#039;+siteTitle+&#039;&lt;\/a&gt; &lt;\/br&gt;&#039;);\n\/\/alert(subsites);\n}\nel.innerHTML = subsites;\n}\n\nfunction ExecuteOnFailure(sender, args) {\nalert(&quot;error&quot;);\n\/\/alert(args.get_message());\n}\n&lt;\/script&gt;\n\n&lt;div id=&quot;LKMSubWebs&quot;&gt;&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<p>This will bind all the SharePoint subsites titles and will display them.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Example-8: Retrieve alternative languages in SharePoint using JavaScript<\/h3>\n\n\n\n<p>Now, let us see, how to&nbsp;<strong>retrieve alternative languages from language settings in SharePoint<\/strong>&nbsp;Online using JavaScript object model (jsom). In the same way, we can get alternative languages in SharePoint 2013\/2016 using JavaScript.<\/p>\n\n\n\n<p>If you want to retrieve alternative languages in SharePoint using Rest API, then you can follow&nbsp;<a rel=\"noreferrer noopener\" href=\"https:\/\/www.enjoysharepoint.com\/sharepoint-rest-api\/\" target=\"_blank\">this article<\/a>.<\/p>\n\n\n\n<p><strong>Retrieve alternative languages in SharePoint using JavaScript<\/strong><\/p>\n\n\n\n<p>You can see the alternative languages from Site settings -&gt; language settings that are under Site Administration. It shows like below:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"674\" height=\"412\" src=\"https:\/\/kb.astrocroc.com\/wp-content\/uploads\/2022\/11\/image.png\" alt=\"\" class=\"wp-image-197\" srcset=\"https:\/\/kb.astrocroc.com\/wp-content\/uploads\/2022\/11\/image.png 674w, https:\/\/kb.astrocroc.com\/wp-content\/uploads\/2022\/11\/image-300x183.png 300w\" sizes=\"auto, (max-width: 674px) 100vw, 674px\" \/><figcaption class=\"wp-element-caption\">For this particular post, I have added the below code inside a script editor web part on a SharePoint web part page.<br>Remember it will display like for the English language it will return 1033.<\/figcaption><\/figure>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-javascript\" data-line=\"\">&lt;input type=&quot;button&quot; id=&quot;btnGetLanguages&quot; value=&quot;Click Here&quot;\/&gt;\n&lt;script src=&quot;https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/3.1.1\/jquery.min.js&quot;&gt;&lt;\/script&gt;\n&lt;script&gt;\n$(document).ready(function(){\n$(\u201c#btnGetLanguages&quot;).click(function(){\nGetLanguages();\n});\n});\n\nvar web;\nfunction GetLanguages(){\nvar clientContext = new SP.ClientContext();\nweb=clientContext.get_web();\nclientContext.load(web,&quot;SupportedUILanguageIds&quot;);\nclientContext.executeQueryAsync(Function.createDelegate(this, this.onSuccess),\nFunction.createDelegate(this, this.onFailure));\n}\n\nfunction onSuccess() {\nvar supportedlanguage = web.get_supportedUILanguageIds();\nfor (var i = 0; i &lt; supportedlanguage.length; i++) {\nvar languageName = supportedlanguage[i].toString();\nalert(languageName);\n}\n}\nfunction onFailure(sender, args) {\nalert(\u2018Error Occurred. \u2018 + args.get_message());\n}\n&lt;\/script&gt;<\/code><\/pre>\n\n\n\n<p>This is how to&nbsp;<strong>get alternative languages in SharePoint Online<\/strong>&nbsp;or SharePoint 2013\/2016 using the JavaScript object model (jsom).<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Example-9: Create and delete SharePoint list using JavaScript Object Model (JSOM)<\/h3>\n\n\n\n<p>Here I will explain how to create, and delete the SharePoint list using the Javascript object model (jsom).<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Create SharePoint list using JavaScript Object Model (JSOM)<\/h4>\n\n\n\n<p>Here we will create our HTML and JS file using SharePoint designer 2013. Open Sharepoint Designer. Create .HTML file under the SiteAssets folder.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"719\" height=\"356\" src=\"https:\/\/kb.astrocroc.com\/wp-content\/uploads\/2022\/11\/image-1.png\" alt=\"\" class=\"wp-image-198\" srcset=\"https:\/\/kb.astrocroc.com\/wp-content\/uploads\/2022\/11\/image-1.png 719w, https:\/\/kb.astrocroc.com\/wp-content\/uploads\/2022\/11\/image-1-300x149.png 300w\" sizes=\"auto, (max-width: 719px) 100vw, 719px\" \/><\/figure>\n\n\n\n<p>Add the necessary scripts into the top of the HTML file to create a sharepoint list.<\/p>\n\n\n\n<p>Then Add one text input box to get the list title and Add one Input button to create action.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"748\" height=\"367\" src=\"https:\/\/kb.astrocroc.com\/wp-content\/uploads\/2022\/11\/image-2.png\" alt=\"\" class=\"wp-image-199\" srcset=\"https:\/\/kb.astrocroc.com\/wp-content\/uploads\/2022\/11\/image-2.png 748w, https:\/\/kb.astrocroc.com\/wp-content\/uploads\/2022\/11\/image-2-300x147.png 300w\" sizes=\"auto, (max-width: 748px) 100vw, 748px\" \/><\/figure>\n\n\n\n<p>Lets add some piece of code to create a list<br><strong>Scripts:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-javascript\" data-line=\"\">&lt;script src=&quot;_layouts\/15\/sp.runtime.js&quot; type=&quot;text\/javascript&quot;&gt;&lt;\/script&gt;\n&lt;script src=&quot;_layouts\/15\/sp.js&quot; type=&quot;text\/javascript&quot;&gt;&lt;\/script&gt;\n&lt;script src=&quot; \/SiteAssets\/JS\/CRUD list.js&quot; type=&quot;text\/ javascript&quot;&gt;&lt;\/script&gt;<\/code><\/pre>\n\n\n\n<p><strong>HTML:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-xml\" data-line=\"\">&lt;div id=&quot;form&quot;&gt;\n&lt;table&gt;\n&lt;tr&gt;\n&lt;td&gt;\n&lt;p&gt;Enter List Name&lt;\/p&gt;\n&lt;\/td&gt;\n&lt;td&gt;\n&lt;input type=&quot;text&quot; id=&quot;txtlistname&quot; \/&gt;\n&lt;\/td&gt;\n&lt;\/tr&gt;\n&lt;tr&gt;\n&lt;td&gt;\n&lt;input type=&quot;button&quot; id=&quot;btncreate&quot; value=&quot;submit&quot; \/&gt;\n&lt;\/td&gt;\n&lt;\/tr&gt;\n&lt;\/table&gt;\n&lt;\/div&gt;\n&lt;div id=&quot;results&quot;&gt;&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<p><strong>CreateList.js<\/strong><\/p>\n\n\n\n<p>Create a function named \u201cbtncreate\u201d<\/p>\n\n\n\n<p><strong>Note:-<\/strong>&nbsp;Using this function am get the value of the list name from the HTML input box on button click event. Then pass the list value into another function \u201cCreateList\u201d<\/p>\n\n\n\n<p><strong>Code:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-javascript\" data-line=\"\">function btncreate()\n{\n$(&#039;#btncreate&#039;).on(&quot;click&quot;, function () {\nvar listValue = $(&#039;#txtlistname&#039;).val();\nCreateList(listValue);\n});\n}<\/code><\/pre>\n\n\n\n<p><strong>Code<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-javascript\" data-line=\"\">function CreateList(listValue)\n{\nvar context = new SP.ClientContext() \/\/ Get the site collection from the context\nvar web = context.get_web(); \/\/ Get all the list properties\nvar listcreation = new SP.ListCreationInformation(); \/\/ Used for create a list\nlistcreation.set_title(listValue); \/\/ get the title of the list\nlistcreation.set_templateType(SP.ListTemplateType.genericList) \/\/ Provide the template for list ex:announcement, task in this scenario used genericlistproperty\nthis.list = web.get_lists().add(listcreation); \/\/ Create a list using web property\ncontext.load(list); \/\/ load the values into the site context\ncontext.executeQueryAsync(\nFunction.createDelegate(this, this.onsuccess),\nFunction.createDelegate(this, this.onfailed)\n);\n}\n\nfunction onsuccess()\n{\nvar results = list.get_title() + &#039;Create success&#039;; \/\/ if success message will be rendered into html element\n$(&#039;#results&#039;).html(results);\n}\nfunction onfailed(sender, args){\nalert(&#039;Creation Failed&#039; + args.get_message() + &#039;\\n&#039; +args.get_stackTrace()); \/\/ If failed shows error message\n}<\/code><\/pre>\n\n\n\n<p><strong>Full Code<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-javascript\" data-line=\"\">$(function () {\nbtncreate();\n});\n\nfunction btncreate()\n{\n$(&#039;#btncreate&#039;).on(&quot;click&quot;, function () {\nvar listValue = $(&#039;#txtlistname&#039;).val();\nCreateList(listValue);\n});\n}\n\nfunction CreateList(listValue)\n{\nvar context = new SP.ClientContext()\nvar web = context.get_web();\nvar listcreation = new SP.ListCreationInformation();\nlistcreation.set_title(listValue);\nlistcreation.set_templateType(SP.ListTemplateType.genericList)\nthis.list = web.get_lists().add(listcreation);\ncontext.load(list);\ncontext.executeQueryAsync(\nFunction.createDelegate(this, this.onsuccess),\nFunction.createDelegate(this, this.onfailed)\n);\n}\n\nfunction onsuccess()\n{\nvar results = list.get_title() + &#039;Create success&#039;;\n$(&#039;#results&#039;).html(results);\n}\nfunction onfailed(sender, args){\nalert(&#039;Creation Failed&#039; + args.get_message() + &#039;\\n&#039; +args.get_stackTrace());\n}<\/code><\/pre>\n\n\n\n<p><strong>Final Result:<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"735\" height=\"418\" src=\"https:\/\/kb.astrocroc.com\/wp-content\/uploads\/2022\/11\/image-3.png\" alt=\"\" class=\"wp-image-200\" srcset=\"https:\/\/kb.astrocroc.com\/wp-content\/uploads\/2022\/11\/image-3.png 735w, https:\/\/kb.astrocroc.com\/wp-content\/uploads\/2022\/11\/image-3-300x171.png 300w\" sizes=\"auto, (max-width: 735px) 100vw, 735px\" \/><\/figure>\n\n\n\n<p>Now let\u2019s go and delete a created sharepoint list.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Delete SharePoint list using JavaScript Object Model (JSOM)<\/h4>\n\n\n\n<p><strong>HTML<\/strong>:<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-xml\" data-line=\"\">&lt;div id=&quot;form&quot;&gt;\n&lt;table&gt;\n&lt;tr&gt;\n&lt;td&gt;\n&lt;p&gt;Enter List Name&lt;\/p&gt;\n&lt;\/td&gt;\n&lt;td&gt;\n&lt;input type=&quot;text&quot; id=&quot;txtlistname&quot; \/&gt;\n&lt;\/td&gt;\n&lt;\/tr&gt;\n&lt;tr&gt;\n&lt;td&gt;\n&lt;input type=&quot;button&quot; id=&quot;btncreate&quot; value=&quot;submit&quot; \/&gt;\n&lt;input type=&quot;button&quot; id=&quot;btndelete&quot; value=&quot;delete&quot; \/&gt;\n&lt;\/td&gt;\n&lt;\/tr&gt;\n&lt;\/table&gt;\n&lt;\/div&gt;\n&lt;div id=&quot;results&quot;&gt;&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<p><strong>Scripts:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-javascript\" data-line=\"\">&lt;script src=&quot;_layouts\/15\/sp.runtime.js&quot; type=&quot;text\/javascript&quot;&gt;&lt;\/script&gt;\n&lt;script src=&quot;_layouts\/15\/sp.js&quot; type=&quot;text\/javascript&quot;&gt;&lt;\/script&gt;\n&lt;script src=&quot; SiteAssets\/JS\/DeleteList.js&quot; type=&quot;text\/javascript&quot;&gt;&lt;\/script&gt;<\/code><\/pre>\n\n\n\n<p><strong>DeleteList.js<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-javascript\" data-line=\"\">$( function () {\nbtndelete()\n});\n\nfunction btndelete()\n{\n$(&#039;#btndelete&#039;).on(&quot;click&quot;, function () {\nvar listValue = $(&#039;#txtlistname&#039;).val();\nDeleteList(listValue);\n});\n}\n\nfunction DeleteList(listValue)\n{\nvar context = new SP.ClientContext();\nvar web = context.get_web();\nthis.list = web.get_lists().getByTitle(listValue);\nlist.deleteObject(); \/\/ Delete the created list from the site\ncontext.executeQueryAsync(\nFunction.createDelegate(this, this.ondeletesuccess),\nFunction.createDelegate(this, this.ondeletefailed)\n);\n}\n\nfunction ondeletesuccess()\n{\n$(&#039;#results&#039;).html(&quot;List deleted successfully&quot;); \/\/ on success bind the results in HTML code\n}\n\nfunction ondeletefailed(sender, args){\nalert(&#039;Delete Failed&#039; + args.get_message() + &#039;\\n&#039; +args.get_stackTrace()); \/\/ display the errot details if deletion failed\n}<\/code><\/pre>\n\n\n\n<p><strong>Final result:<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"753\" height=\"413\" src=\"https:\/\/kb.astrocroc.com\/wp-content\/uploads\/2022\/11\/image-4.png\" alt=\"\" class=\"wp-image-201\" srcset=\"https:\/\/kb.astrocroc.com\/wp-content\/uploads\/2022\/11\/image-4.png 753w, https:\/\/kb.astrocroc.com\/wp-content\/uploads\/2022\/11\/image-4-300x165.png 300w\" sizes=\"auto, (max-width: 753px) 100vw, 753px\" \/><figcaption class=\"wp-element-caption\">This is how to\u00a0<strong>create and delete SharePoint list using the JavaScript<\/strong>\u00a0Object Model (JSOM).<br>Example-10: Add Column using JavaScript in SharePoint Online<br>Let us see, how to\u00a0<strong>create fields or columns in a SharePoint list using JSOM<\/strong>\u00a0(javascript client object model) in SharePoint Online. The same jsom code we can use to create columns in SharePoint 2013\/2016 list also.<br><strong>Create columns in SharePoint Online list using JavaScript<\/strong><br>Here we will\u00a0<strong>add columns to a custom list using jsom<\/strong>\u00a0in SharePoint Online. Here we will design an HTML form, where we will provide options to the user an input form to enter column name, data type and description and a submit button.<br>Once the user fills the details like column name, data type, and description and clicks on Submit, the column will be created or added to the SharePoint custom list.<br>So we have added an HTML form and added the input controls like dropdown list, textbox, and a button etc. And we will have a js file which will have the jsom code to create the column.<br>Here we have taken two text boxes one drop-down list and a submit button. Here I have hardcoded the dropdown values as the column types as Single line, multi-line, and number type. Have taken a &lt;p> tag to display the success message. Below is HTML code:<\/figcaption><\/figure>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-javascript\" data-line=\"\">&lt;script type=&quot;text\/javascript&quot; src=&quot;https:\/\/ajax.aspnetcdn.com\/ajax\/jQuery\/jquery-3.3.1.min.js&quot;&gt;&lt;\/script&gt;\n&lt;script type=&quot;text\/javascript&quot; src=&quot;https:\/\/onlysharepoint2013.sharepoint.com\/sites\/Raju\/SiteAssets\/Bihusdevelopment2\/creatingcolumns.js&quot;&gt;&lt;\/script&gt;\n\n&lt;table&gt;\n&lt;tr&gt;\n&lt;td&gt;\nDisplay Name\n&lt;\/td&gt;\n&lt;tdcolspan=&quot;4&quot;&gt;\n&lt;inputtype=&quot;text&quot;id=&quot;txtcolDisplayNmae&quot;&gt;\n&lt;\/td&gt;\n&lt;\/tr&gt;\n&lt;tr&gt;\n&lt;td&gt;\ncolumnsType\n&lt;\/td&gt;\n&lt;tdcolspan=&quot;4&quot;&gt;\n&lt;selectid=&quot;ddlcolumnstype&quot;&gt;\n&lt;option&gt;Single line&lt;\/option&gt;\n&lt;option&gt;multi line&lt;\/option&gt;\n&lt;option&gt;number&lt;\/option&gt;\n&lt;\/select&gt;\n&lt;\/td&gt;\n&lt;\/tr&gt;\n&lt;tr&gt;\n&lt;td&gt;\nDescription\n&lt;\/td&gt;\n&lt;tdcolspan=&quot;4&quot;&gt;\n&lt;textarearows=&quot;4&quot;cols=&quot;22&quot;id=&quot;txtcolDescr&quot;&gt;&lt;\/textarea&gt;\n&lt;\/td&gt;\n&lt;\/tr&gt;\n&lt;tr&gt;\n&lt;tdcolspan=&quot;3&quot;&gt;\n&lt;\/td&gt;\n&lt;td&gt;\n&lt;tdcolspan=&quot;4&quot;&gt;\n&lt;inputtype=&quot;button&quot;value=&quot;AddColumns&quot;id=&quot;btncreatecol&quot;&gt;&lt;\/input&gt;\n&lt;\/td&gt;\n&lt;\/tr&gt;\n&lt;\/table&gt;\n\n&lt;p id=&quot;psuccess&quot; align=&quot;center&quot;&gt;&lt;\/p&gt;<\/code><\/pre>\n\n\n\n<p>I have created a custom list as \u201cdepartment\u201d where the columns will be added.<\/p>\n\n\n\n<p>Here we will take the inputs from the user like a type of Column, Display Name and description. We will retrieve all those inputs and bind using JSOM to create desired columns. Below is JSOM code to create Columns.<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-javascript\" data-line=\"\">$(document).ready(function () {\n$(&quot;#btncreatecol&quot;).click(function(){\nretrievecolumnsTemplate();\n});\n});\nfunction retrievecolumnsTemplate(){\nvar coldisplayname=$(&quot;#txtcolDisplayNmae&quot;).val();\nvar template=$(&#039;#ddlcolumnstype :selected&#039;).val();\nvar coldescription=$(&quot;#txtcolDescr&quot;).val();\nvar clientContext=newSP.ClientContext.get_current();\nvar oWebsite=clientContext.get_web();\noList = clientContext.get_web().get_lists().getByTitle(&#039;department&#039;);\nvarfldCollection=oList.get_fields();\nif ( template==&#039;multi line&#039;){\nvarrichTextField=clientContext.castTo(\nfldCollection.addFieldAsXml(&#039;&lt;Field Type=&quot;Note&quot; DisplayName=\\&quot;NewField\\&quot; Name=&quot;NewField&quot; Required=&quot;False&quot; NumLines=&quot;12&quot; RichText=&quot;TRUE&quot; AppendOnly=&quot;TRUE&quot; \/&gt;&#039;, true, SP.AddFieldOptions.addToDefaultContentType),SP.FieldMultiLineText);\nrichTextField.set_description(coldescription);\nrichTextField.set_title(coldisplayname);\nrichTextField.update();\n}\nelseif(template==&#039;Single line&#039; )\n{\nvar singlelinetext=clientContext.castTo(\nfldCollection.addFieldAsXml(&#039;&lt;Field Type=&quot;Text&quot; DisplayName=\\&quot;NewField\\&quot; Name=&quot;NewField&quot; \/&gt;&#039;, true,SP.AddFieldOptions.addToDefaultContentType),SP.FieldText);\nsinglelinetext.set_title(coldisplayname);\nsinglelinetext.set_description(coldescription);\nsinglelinetext.update();\n}\nelseif(template==&#039;number&#039;)\n{\nvar numberField=clientContext.castTo(\nfldCollection.addFieldAsXml(&#039;&lt;Field Type=&quot;Number&quot; DisplayName=\\&quot;NewField\\&quot; Name=&quot;NewField&quot; Required=&quot;False&quot; \/&gt;&#039;, true, SP.AddFieldOptions.addToDefaultContentType),SP.FieldNumber) ;\nnumberField.set_title(coldisplayname);\nnumberField.set_description(coldescription);\nnumberField.update();\n}\nclientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded),\nFunction.createDelegate(this, this.onQueryFailed));\n}\nfunction onQuerySucceeded(sender, args) {\nalert(&quot;column added&quot;);\n    }\nfunction onQueryFailed(sender, args) {\nalert(&#039;Error: &#039;+args.get_message() +&#039;\\n&#039;+args.get_stackTrace());\n}<\/code><\/pre>\n\n\n\n<p>As you can see in the below image Display Name, Column Type and description are provided and when we click on Add Column button a popup is displayed as Column is added.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"block-5a1dd531-5955-4b9a-a8eb-03802e89fb70\">Example-11: Get all SharePoint lists and libraries using JavaScript<\/h3>\n\n\n\n<p>In this SharePoint jsom tutorial, we will discuss, how to&nbsp;<strong>retrieve all lists and libraries from SharePoint site<\/strong>&nbsp;using the JavaScript object model (jsom) in SharePoint Online&nbsp;<a href=\"https:\/\/www.spguides.com\/what-is-office-365\/\" target=\"_blank\" rel=\"noreferrer noopener\">Office 365<\/a>.<\/p>\n\n\n\n<p>The same jsom code we can use to&nbsp;<strong>retrieve all lists and libraries from SharePoint<\/strong>&nbsp;2013\/2016 sites.<\/p>\n\n\n\n<p><strong>Get all SharePoint list and libraries using jsom<\/strong><\/p>\n\n\n\n<p>Here we have put the jsom code inside a script editor web part inside a web part page in the SharePoint site.<\/p>\n\n\n\n<p>If you face one issue like&nbsp;<strong>Uncaught TypeError: SP.ClientContext is not a constructor<\/strong>&nbsp;error, then you can resolve by following&nbsp;<a rel=\"noreferrer noopener\" href=\"https:\/\/www.enjoysharepoint.com\/sp-clientcontext-is-not-a-constructor\/\" target=\"_blank\">this article<\/a>.<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-javascript\" data-line=\"\">&lt;script src=&quot;https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.11.2\/jquery.min.js&quot;&gt;&lt;\/script&gt;\n\n&lt;div id=&quot;divGetListData&quot;&gt;&lt;\/div&gt;\n\n&lt;script&gt;\n$(function () {\nExecuteOrDelayUntilScriptLoaded(getAllLists, &quot;sp.js&quot;);\n});\nvar collList;\nfunction getAllLists() {\nvar clientContext = new SP.ClientContext();\nvar oWebsite = clientContext.get_web();\ncollList = oWebsite.get_lists();\nclientContext.load(collList);\nclientContext.executeQueryAsync(\nFunction.createDelegate(this, this.onQuerySucceeded),Function.createDelegate(this, this.onQueryFailed)\n);\n}\n\nfunction onQuerySucceeded() {\nvar listInfo = &quot;;\nvar listEnumerator = collList.getEnumerator();\nwhile (listEnumerator.moveNext()) {\nvar oList = listEnumerator.get_current();\nlistInfo += oList.get_title() + &#039;&lt;br \/&gt;&#039;;\n}\n$(&quot;#divGetListData&quot;).html(listInfo);\n}\n\nfunction onQueryFailed(sender, args) {\nalert(&#039;Request failed. &#039; + args.get_message() +\n&#039;\\n&#039; + args.get_stackTrace());\n}\n\n&lt;\/script&gt;<\/code><\/pre>\n\n\n\n<p>Once you will save this code it will display all the lists and libraries from the SharePoint site like below:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"264\" height=\"413\" src=\"https:\/\/kb.astrocroc.com\/wp-content\/uploads\/2022\/11\/image-5.png\" alt=\"\" class=\"wp-image-202\" srcset=\"https:\/\/kb.astrocroc.com\/wp-content\/uploads\/2022\/11\/image-5.png 264w, https:\/\/kb.astrocroc.com\/wp-content\/uploads\/2022\/11\/image-5-192x300.png 192w\" sizes=\"auto, (max-width: 264px) 100vw, 264px\" \/><\/figure>\n\n\n\n<p>Here, we learned how to&nbsp;<strong>get all the list and libraries from the SharePoint site<\/strong>&nbsp;using the JavaScript object model (jsom).<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Example-12: Create a file using JavaScript in SharePoint document library<\/h3>\n\n\n\n<p>Now, we will see how to&nbsp;<strong>create a file using the JavaScript object model<\/strong>&nbsp;(jsom) in SharePoint Online or SharePoint 2013\/2016.<\/p>\n\n\n\n<p>Here in this particular example let us take an&nbsp;<a href=\"https:\/\/www.enjoysharepoint.com\/design-html-form\/\" target=\"_blank\" rel=\"noreferrer noopener\">HTML form<\/a>&nbsp;that has a textbox, multiple text boxes as well as a button. Here the user will give a name for the file and the user can put the file content in the multiline textbox. Then the user can submit in the button which will&nbsp;<strong>create a text file in a SharePoint document library<\/strong>.<\/p>\n\n\n\n<p>Here we will write both the HTML code as well as in the JavaScript object model (jsom) inside a script editor web part which will be inside a web part page in SharePoint. The HTML code will look like below:<\/p>\n\n\n\n<p><strong>HTML Code:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-xml\" data-line=\"\">&lt;div id=&quot;CreateFile&quot;&gt;\n&lt;div&gt;\n&lt;strong&gt;Enter a title for the document:&lt;\/strong&gt;\n&lt;br \/&gt;\n&lt;input type=&quot;text&quot; id=&quot;txtDocumentTitle&quot; \/&gt;\n&lt;\/div&gt;\n&lt;div&gt;\n&lt;strong&gt;Enter content for the document:&lt;\/strong&gt;\n&lt;br \/&gt;\n&lt;textarea cols=&quot;20&quot; id=&quot;txtDocumentContent&quot;&gt;&lt;\/textarea&gt;\n&lt;\/div&gt;\n&lt;br \/&gt;\n&lt;input type=&quot;button&quot; id=&quot;btnSubmit&quot; value=&quot;Submit&quot; \/&gt;\n&lt;\/div&gt;\n&lt;div id=&quot;divResults&quot;&gt;&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<p><strong>JSOM Code:<\/strong><\/p>\n\n\n\n<p>Below is the code to&nbsp;<strong>create a file in the document library using jsom<\/strong>.<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-javascript\" data-line=\"\">&lt;script src=&quot;https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.11.2\/jquery.min.js&quot;&gt;&lt;\/script&gt;\n&lt;script&gt;\n$(function () {\nbindButtonClick();\n});\nfunction bindButtonClick() {\n$(&quot;#btnSubmit&quot;).on(&quot;click&quot;, function () {\ncreateDocument();\n});\n}\n\nfunction createDocument() {\nvar docTitle = $(&quot;#txtDocumentTitle&quot;).val() + &quot;.txt&quot;;\nvar docContent = $(&quot;#txtDocumentContent&quot;).val();\nvar clientContext = new SP.ClientContext();\nvar oWebsite = clientContext.get_web();\nvar oList = oWebsite.get_lists().getByTitle(&quot;Documents&quot;);\nvar fileCreateInfo = new SP.FileCreationInformation();\nfileCreateInfo.set_url(docTitle);\nfileCreateInfo.set_content(new SP.Base64EncodedByteArray());\nfor (var i = 0; i &lt; docContent.length; i++) {\nfileCreateInfo.get_content().append(docContent.charCodeAt(i));\n}\n\nthis.newFile = oList.get_rootFolder().get_files().add(fileCreateInfo);\nclientContext.load(this.newFile);\nclientContext.executeQueryAsync(\nFunction.createDelegate(this, this.onQuerySucceeded),Function.createDelegate(this, this.onQueryFailed)\n);\n}\n\nfunction onQuerySucceeded() {\n$(&quot;#divResults&quot;).html(&quot;Document successfully created!&quot;);\n}\n\nfunction onQueryFailed(sender, args) {\nalert(&#039;Request failed. &#039; + args.get_message() +&#039;\\n&#039; + args.get_stackTrace());\n}\n&lt;\/script&gt;<\/code><\/pre>\n\n\n\n<p>Once we will\u00a0<strong>Save\u00a0<\/strong>the page you can see a page like below where user can give a title for the file, then the user can put content in the content textbox and then the user can click on the submit button which will create a file inside the SharePoint document library like below:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"409\" height=\"285\" src=\"https:\/\/kb.astrocroc.com\/wp-content\/uploads\/2022\/11\/image-6.png\" alt=\"\" class=\"wp-image-203\" srcset=\"https:\/\/kb.astrocroc.com\/wp-content\/uploads\/2022\/11\/image-6.png 409w, https:\/\/kb.astrocroc.com\/wp-content\/uploads\/2022\/11\/image-6-300x209.png 300w\" sizes=\"auto, (max-width: 409px) 100vw, 409px\" \/><\/figure>\n\n\n\n<p>Now you can check in the\u00a0<strong>SharePoint document library<\/strong>\u00a0where you can see the file got created in the document library.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"614\" height=\"278\" src=\"https:\/\/kb.astrocroc.com\/wp-content\/uploads\/2022\/11\/image-7.png\" alt=\"\" class=\"wp-image-204\" srcset=\"https:\/\/kb.astrocroc.com\/wp-content\/uploads\/2022\/11\/image-7.png 614w, https:\/\/kb.astrocroc.com\/wp-content\/uploads\/2022\/11\/image-7-300x136.png 300w\" sizes=\"auto, (max-width: 614px) 100vw, 614px\" \/><\/figure>\n\n\n\n<p>This is how we can&nbsp;<strong>create a file inside a SharePoint document library using javascript<\/strong>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Example-13: Read file content using JavaScript object model (jsom) in SharePoint<\/h3>\n\n\n\n<p>Now, we will see how to read file content from a&nbsp;<a href=\"https:\/\/www.enjoysharepoint.com\/what-is-a-sharepoint-document-library\/\" target=\"_blank\" rel=\"noreferrer noopener\">document library<\/a>&nbsp;using javascript in SharePoint.<\/p>\n\n\n\n<p>Here we have taken a button, on click on that button we will read the content of the document and will display in a div. Here we will write both HTML and javascript object model code inside a script editor web part which we will add inside a SharePoint web part page.<\/p>\n\n\n\n<p><strong>HTML Code:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-xml\" data-line=\"\">&lt;input type=&quot;button&quot; id=&quot;btnSubmit&quot; value=&quot;Read Document&quot; \/&gt;&lt;br \/&gt;\n&lt;div id=&quot;divReadDocument&quot; \/&gt;<\/code><\/pre>\n\n\n\n<p><strong>Jsom Code:<\/strong><\/p>\n\n\n\n<p>Below is the JSOM code to read content from a file which is presented in a SharePoint document library.<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-javascript\" data-line=\"\">&lt;script src=&quot;https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.11.2\/jquery.min.js&quot;&gt;&lt;\/script&gt;\n&lt;script&gt;\n\n$(function () {\nbindButtonClick();\n});\n\nfunction bindButtonClick() {\n$(&quot;#btnSubmit&quot;).on(&quot;click&quot;, function () {\nreadDocument();\n});\n}\n\nfunction readDocument() {\nvar fullUrl = _spPageContextInfo.webAbsoluteUrl + &quot;\/Shared Documents\/Bijay.txt&quot;;\n$.ajax({\nurl: fullUrl,\ntype: &quot;GET&quot;\n})\n\n.done(function (data) {\n$(&quot;#divReadDocument&quot;).html(data);\n})\n.fail(function () {\nalert(&quot;error&quot;);\n});\n}\n&lt;\/script&gt;<\/code><\/pre>\n\n\n\n<p>Once you will Save the page and click on the button, you can see the .txt file content like below:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"583\" height=\"90\" src=\"https:\/\/kb.astrocroc.com\/wp-content\/uploads\/2022\/11\/image-8.png\" alt=\"\" class=\"wp-image-205\" srcset=\"https:\/\/kb.astrocroc.com\/wp-content\/uploads\/2022\/11\/image-8.png 583w, https:\/\/kb.astrocroc.com\/wp-content\/uploads\/2022\/11\/image-8-300x46.png 300w\" sizes=\"auto, (max-width: 583px) 100vw, 583px\" \/><\/figure>\n\n\n\n<p>This is how we can read file content using javascript object model (jsom) in SharePoint Online\/2013\/2016.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Example-14: Update file content using JavaScript object model (jsom) in SharePoint<\/h3>\n\n\n\n<p>Now, we will see how to update file content using the&nbsp;<strong>JavaScript object model<\/strong>&nbsp;(jsom) in SharePoint Online or SharePoint 2013\/2016.<\/p>\n\n\n\n<p>Here let us take a textbox where the user can enter a file name, and a multiline textbox where the user can enter the content and a submit button. On click of the submit button, the content will be updated in the file name given in the textbox.<\/p>\n\n\n\n<p>Here as usual like other examples, we will write the code inside a&nbsp;<a href=\"https:\/\/www.spguides.com\/enable-script-editor-web-part-in-sharepoint-online\/\" target=\"_blank\" rel=\"noreferrer noopener\">script editor web part<\/a>&nbsp;which we will put inside a web part page.<\/p>\n\n\n\n<p><strong>HTML Code:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-xml\" data-line=\"\">&lt;div id=&quot;UpdateFile&quot;&gt;\n&lt;div&gt;\n&lt;strong&gt;Document Title to Update&lt;\/strong&gt;\n&lt;br \/&gt;\n&lt;input type=&quot;text&quot; id=&quot;txtDocumentTitle&quot; \/&gt;\n&lt;\/div&gt;\n&lt;div&gt;\n&lt;strong&gt;Enter Update Document Content:&lt;\/strong&gt;\n&lt;br \/&gt;\n&lt;textarea cols=&quot;20\u2033 id=&quot;txtDocumentContent&quot;&gt;&lt;\/textarea&gt;\n&lt;\/div&gt;\n&lt;br \/&gt;\n&lt;input type=&quot;button&quot; id=&quot;btnSubmit&quot; value=&quot;Update Document Content&quot; \/&gt;\n&lt;\/div&gt;\n&lt;div id=&quot;divResults&quot;&gt;&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<p><strong>Jsom Code:<\/strong><\/p>\n\n\n\n<p>Below is the jsom code to update the file content jsom in SharePoint.<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-javascript\" data-line=\"\">&lt;script src=&quot;https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.11.2\/jquery.min.js&quot;&gt;&lt;\/script&gt;\n&lt;script&gt;\n$(function () {\nbindButtonClick();\n});\n\nfunction bindButtonClick() {\n$(&quot;#btnSubmit&quot;).on(&quot;click&quot;, function () {\ncreateDocument();\n});\n}\n\nfunction createDocument() {\nvar docTitle = $(&quot;#txtDocumentTitle&quot;).val() + &quot;.txt&quot;;\nvar docContent = $(&quot;#txtDocumentContent&quot;).val();\nvar clientContext = new SP.ClientContext();\nvar oWebsite = clientContext.get_web();\nvar oList = oWebsite.get_lists().getByTitle(&quot;Documents&quot;);\nvar fileCreateInfo = new SP.FileCreationInformation();\nfileCreateInfo.set_url(docTitle);\nfileCreateInfo.set_content(new SP.Base64EncodedByteArray());\nfor (var i = 0; i &lt; docContent.length; i++) {\nfileCreateInfo.get_content().append(docContent.charCodeAt(i));\nfileCreateInfo.set_overwrite(true);\n}\n\nthis.newFile = oList.get_rootFolder().get_files().add(fileCreateInfo);\nclientContext.load(this.newFile);\nclientContext.executeQueryAsync(\nFunction.createDelegate(this, this.onQuerySucceeded),Function.createDelegate(this, this.onQueryFailed)\n);\n}\n\nfunction onQuerySucceeded() {\n$(&quot;#divResults&quot;).html(&quot;Document updated successfully!&quot;);\n}\n\nfunction onQueryFailed(sender, args) {\nalert(&#039;Request failed. &#039; + args.get_message() +&#039;\\n&#039; + args.get_stackTrace());\n}\n&lt;\/script&gt;<\/code><\/pre>\n\n\n\n<p>Once you save the page, you can see the form like below, where user can give the name of the file and then the content to update. Once the user clicks on the Update Document Content button, the document will get updated.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"407\" height=\"309\" src=\"https:\/\/kb.astrocroc.com\/wp-content\/uploads\/2022\/11\/image-9.png\" alt=\"\" class=\"wp-image-206\" srcset=\"https:\/\/kb.astrocroc.com\/wp-content\/uploads\/2022\/11\/image-9.png 407w, https:\/\/kb.astrocroc.com\/wp-content\/uploads\/2022\/11\/image-9-300x228.png 300w\" sizes=\"auto, (max-width: 407px) 100vw, 407px\" \/><\/figure>\n\n\n\n<p>Now if you will open the document library and see the file content, you can see the updated content.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"666\" height=\"111\" src=\"https:\/\/kb.astrocroc.com\/wp-content\/uploads\/2022\/11\/image-10.png\" alt=\"\" class=\"wp-image-207\" srcset=\"https:\/\/kb.astrocroc.com\/wp-content\/uploads\/2022\/11\/image-10.png 666w, https:\/\/kb.astrocroc.com\/wp-content\/uploads\/2022\/11\/image-10-300x50.png 300w\" sizes=\"auto, (max-width: 666px) 100vw, 666px\" \/><\/figure>\n\n\n\n<p>This is how we can&nbsp;<strong>update file content in SharePoint<\/strong>&nbsp;using the JavaScript object model (jsom).<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Example-15: Delete file from document library using JavaScript object model (jsom) in SharePoint<\/h3>\n\n\n\n<p>Now, we will discuss how to delete a file from a SharePoint document library using a&nbsp;<a href=\"https:\/\/www.enjoysharepoint.com\/sharepoint-crud-operations-using-jsom\/\" target=\"_blank\" rel=\"noreferrer noopener\">JavaScript object model (jsom)<\/a>. The same jsom SharePoint code we can use to delete a file from the document library in SharePoint Online as well as SharePoint 2013\/2016.<\/p>\n\n\n\n<p>Here in this example let us take an input textbox and a button, where the user can put the file name to delete and click on the Delete File button to delete the file from the SharePoint document library.<\/p>\n\n\n\n<p>Here we will put the JavaScript and the HTML code inside a script editor web part which we will put inside a web part page. And in this example, we are searching for the file inside the Documents document library.<\/p>\n\n\n\n<p><strong>HTML Code:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-xml\" data-line=\"\">&lt;div id=&quot;DeleteFile&quot;&gt;\n&lt;div&gt;\n&lt;strong&gt;Enter File Name to Delete:&lt;\/strong&gt;\n&lt;br \/&gt;\n&lt;input type=&quot;text&quot; id=&quot;txtDocumentTitle&quot; \/&gt;\n&lt;\/div&gt;\n&lt;br \/&gt;\n&lt;input type=&quot;button&quot; id=&quot;btnSubmit&quot; value=&quot;Delete File&quot; \/&gt;\n&lt;\/div&gt;\n&lt;div id=&quot;divResults&quot;&gt;&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<p><strong>Jsom Code:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-javascript\" data-line=\"\">&lt;script src=&quot;https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.11.2\/jquery.min.js&quot;&gt;&lt;\/script&gt;\n&lt;script&gt;\n$(function () {\nbindButtonClick();\n});\n\nfunction bindButtonClick() {\n$(&quot;#btnSubmit&quot;).on(&quot;click&quot;, function () {\ndeleteDocument();\n});\n}\n\nfunction deleteDocument() {\nvar docTitle = $(&quot;#txtDocumentTitle&quot;).val() + &quot;.txt&quot;;\nvar clientContext = new SP.ClientContext();\nvar oWebsite = clientContext.get_web();\nvar fileUrl = _spPageContextInfo.webServerRelativeUrl + &quot;\/Shared Documents\/&quot; + docTitle;\nthis.fileToDelete = oWebsite.getFileByServerRelativeUrl(fileUrl);\nthis.fileToDelete.deleteObject();\nclientContext.executeQueryAsync(\nFunction.createDelegate(this, this.onQuerySucceeded),Function.createDelegate(this, this.onQueryFailed)\n);\n}\n\nfunction onQuerySucceeded() {\n$(&quot;#divResults&quot;).html(&quot;Document successfully deleted!&quot;);\n}\n\nfunction onQueryFailed(sender, args) {\nalert(&#039;Request failed. &#039; + args.get_message() + &#039;\\n&#039; + args.get_stackTrace());\n}\n\n&lt;\/script&gt;<\/code><\/pre>\n\n\n\n<p>Once you Save the code, you can see a page like below where user can give the file name and then click on the button and on successful deletion it will display a message like below:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"293\" height=\"156\" src=\"https:\/\/kb.astrocroc.com\/wp-content\/uploads\/2022\/11\/image-11.png\" alt=\"\" class=\"wp-image-208\"\/><\/figure>\n\n\n\n<p>After this, if you will go to the SharePoint document library, you can not find the document because it has been already deleted.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"638\" height=\"293\" src=\"https:\/\/kb.astrocroc.com\/wp-content\/uploads\/2022\/11\/image-12.png\" alt=\"\" class=\"wp-image-209\" srcset=\"https:\/\/kb.astrocroc.com\/wp-content\/uploads\/2022\/11\/image-12.png 638w, https:\/\/kb.astrocroc.com\/wp-content\/uploads\/2022\/11\/image-12-300x138.png 300w\" sizes=\"auto, (max-width: 638px) 100vw, 638px\" \/><\/figure>\n\n\n\n<p>This is, how to&nbsp;<strong>delete a file from a document library<\/strong>&nbsp;using the JavaScript object model (jsom) in SharePoint.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Example-16: get sharepoint site URL programmatically using jsom<\/h3>\n\n\n\n<p>Let us see, how to get sharepoint site URL programmatically using jsom.<\/p>\n\n\n\n<p>Now, we will see how to&nbsp;<strong>get SharePoint site URL<\/strong>&nbsp;using JSOM (JavaScript object model) in&nbsp;<a href=\"https:\/\/www.spguides.com\/what-is-sharepoint-online\/\" target=\"_blank\" rel=\"noreferrer noopener\">SharePoint Online<\/a>&nbsp;or SharePoint 2013\/2016.<\/p>\n\n\n\n<p>Below JSOM code you can add inside a script editor web part or content editor web part in a&nbsp;<a rel=\"noreferrer noopener\" href=\"https:\/\/www.enjoysharepoint.com\/add-a-web-part-to-page-in-sharepoint\/\" target=\"_blank\">SharePoint web part page<\/a>.<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-javascript\" data-line=\"\">&lt;script language=&quot;javascript&quot; type=&quot;text\/javascript&quot;&gt;\nvar client context;\nvar website;\n\/\/ Make sure the SharePoint script file &#039;sp.js&#039; is loaded before your\ncode runs.\nSP.SOD.executeFunc(&#039;sp.js&#039;, &#039;SP.ClientContext&#039;, getWebSiteURL);\n\/\/ Create an instance of the current context.\nfunction getWebSiteURL() {\nclientContext = SP.ClientContext.get_current();\nwebsite = clientContext.get_web();\nclientContext.load(website);\nclientContext.executeQueryAsync(onRequestSucceeded, onRequestFailed);\n}\nfunction onRequestSucceeded()\n{\nalert(website.get_url());\n}\nfunction onRequestFailed(sender, args)\n{\nalert(&#039;Error: &#039; + args.get_message());\n}\n&lt;\/script&gt;<\/code><\/pre>\n\n\n\n<p>By using the above code, we can&nbsp;<strong>get sharepoint site url<\/strong>&nbsp;programmatically using JavaScript object model.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Example-17: Get selected item id from SharePoint 2013 list view using JSOM<\/h3>\n\n\n\n<p>Let us see, how to get selected item id\u2019s from a SharePoint 2013 list view by using JavaScript object model (jsom). Here I have a SharePoint 2013 list which has few items. Now in the All Items view I want to know on a button click what are items selected, basically I want to get the ids of the items.<\/p>\n\n\n\n<p>Here I have taken a button and on the button click, we are retrieving selected list item id from&nbsp;<a href=\"https:\/\/www.spguides.com\/sharepoint-list-view\/\" target=\"_blank\" rel=\"noreferrer noopener\">SharePoint list view<\/a>&nbsp;using javascript.<\/p>\n\n\n\n<p>Open your SharePoint 2013 site in the browser then open the list (All Items view). Then edit the page and click on Add a web part to add a web part. Then from the Media and Content select a&nbsp;<a href=\"https:\/\/www.spguides.com\/script-editor-web-part-sharepoint-2016\/\" target=\"_blank\" rel=\"noreferrer noopener\">Script Editor web part<\/a>&nbsp;to the page. Then put the below code inside the script editor web part.<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-javascript\" data-line=\"\">&lt;input type=&#039;button&#039; value=&#039;Get Item IDs&#039; onclick=&quot;clickMethod();&quot;\/&gt;\n\n&lt;br \/&gt;\n&lt;script language=&quot;javascript&quot; type=&quot;text\/javascript&quot;&gt;\nfunction clickMethod() {\nvar ctx = SP.ClientContext.get_current();\nvar items = SP.ListOperation.Selection.getSelectedItems(ctx);\nvar mySeletedItems = &#039;&#039;;\nvar i;\nfor (i in items)\n{\nmySeletedItems += &#039;|&#039; + items[i].id;\n}\nalert (mySeletedItems);\n}\n&lt;\/script&gt;<\/code><\/pre>\n\n\n\n<p>Now Save the page and select few items from the list and then click on the button, it will display you id\u2019s of the selected items in a dialog box as shown in the fig below:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"368\" height=\"375\" src=\"https:\/\/kb.astrocroc.com\/wp-content\/uploads\/2022\/11\/image-13.png\" alt=\"\" class=\"wp-image-210\" srcset=\"https:\/\/kb.astrocroc.com\/wp-content\/uploads\/2022\/11\/image-13.png 368w, https:\/\/kb.astrocroc.com\/wp-content\/uploads\/2022\/11\/image-13-294x300.png 294w\" sizes=\"auto, (max-width: 368px) 100vw, 368px\" \/><\/figure>\n\n\n\n<p>This is how to&nbsp;<strong>get selected item id from SharePoint 2013 list view using JSOM<\/strong>&nbsp;(JavaScript object model).<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Example-18: How to set lookup column value in SharePoint using jsom<\/h3>\n\n\n\n<p>Let us see, how to&nbsp;<strong>set lookup column value in SharePoint<\/strong>&nbsp;2013\/2016 using jsom.<\/p>\n\n\n\n<p>As part of my code to add \/update the list items, I was trying to set the value for a lookup field using ECMA script block. When I try to do it I got the error message: fnFailedAdd. Message: Invalid data has been used to update the list item. The field you are trying to update may be read-only.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"482\" height=\"186\" src=\"https:\/\/kb.astrocroc.com\/wp-content\/uploads\/2022\/11\/image-14.png\" alt=\"\" class=\"wp-image-211\" srcset=\"https:\/\/kb.astrocroc.com\/wp-content\/uploads\/2022\/11\/image-14.png 482w, https:\/\/kb.astrocroc.com\/wp-content\/uploads\/2022\/11\/image-14-300x116.png 300w\" sizes=\"auto, (max-width: 482px) 100vw, 482px\" \/><\/figure>\n\n\n\n<p>I was trying to set the lookup value with the below code:<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-javascript\" data-line=\"\">var objCrrItem = ObjLstEnum.get_current();\nobjCrrItem.set_item(&quot;CompanyName&quot;, &quot;Honda&quot;);<\/code><\/pre>\n\n\n\n<p><strong>Note:<\/strong>&nbsp;This works for a normal field but this field is Lookup Field<\/p>\n\n\n\n<p><strong>JSOM code to set lookup column value sharepoint 2013<\/strong><\/p>\n\n\n\n<p>We must have to set the lookup field value with SP.FieldLookupValue() object.<\/p>\n\n\n\n<p>The code snippet will be like as below:<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-javascript\" data-line=\"\">var _objLkpField = new SP.FieldLookupValue();\n_objLkpField.set_lookupId(1);\nobjCrrItem.set_item(&#039;CompanyName&#039;, _objLkpField);\nThe complete code will be like as below:\nfunction fnSetlkpValue()\n{\n    var objClntContext = new SP.ClientContext.get_current();\n    var objWeb = objClntContext.get_web();\n    var ObjLst = objWeb.get_lists().getByTitle(&quot;Car Inventory&quot;);\n    var camlQuery = new SP.CamlQuery();\n    camlQuery.set_viewXml(&#039;&lt;View&gt;&lt;Query&gt;&lt;Where&gt;&lt;Eq&gt;&lt;FieldRef Name=\\&#039;ID\\&#039;\/&gt;&lt;Value Type=\\&#039;Number\\&#039;&gt;3&lt;\/Value&gt;&lt;\/Eq&gt;&lt;\/Where&gt;&lt;\/Query&gt;&lt;RowLimit&gt;10&lt;\/RowLimit&gt;&lt;\/View&gt;&#039;);\n    this.allItems =ObjLst.getItems(camlQuery);\n    objClntContext.load(allItems, &quot;Include(Title,CompanyName)&quot;);\n    objClntContext.executeQueryAsync(Function.createDelegate(this, this.fnSccSetVal), Function.createDelegate(this, this.fnFailSetVal));\n}\nfunction fnSccSetVal() {\n    var objClntContext = new SP.ClientContext.get_current();\n    var ObjLstEnum = this.allItems.getEnumerator();\n    while(ObjLstEnum.moveNext())\n    {\n        var objCrrItem = ObjLstEnum.get_current();\n        var _objLkpField = new SP.FieldLookupValue();\n        _objLkpField.set_lookupId(2); \/* Updated with some lookup ID value from Primary List for lookup field *\/\n        objCrrItem.set_item(&#039;CompanyName&#039;, _objLkpField);\n        objCrrItem.update();\n        objClntContext.load(objCrrItem);\n        objClntContext.executeQueryAsync(Function.createDelegate(this, this.fnsuccessAdd), Function.createDelegate(this, this.fnFailedAdd));\n    }\n}\nfunction fnFailSetVal(sender, args) {\n    alert(&quot;fnFailSetVal. Message:&quot; + args.get_message());\n}\nfunction fnsuccessAdd()\n{\n    alert(&quot;Lookup Value added Successfully!!!&quot;)\n}\nfunction fnFailedAdd(sender, args) {\n    alert(&quot;fnFailedAdd. Message:&quot; + args.get_message());\n}<\/code><\/pre>\n\n\n\n<p>Little background\/prerequisites to execute this script:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Create 2 lists<\/li>\n\n\n\n<li>Primary List<\/li>\n\n\n\n<li>Car Inventory<\/li>\n\n\n\n<li>Create lookup field from car inventory list to primary list<\/li>\n<\/ul>\n\n\n\n<p>With this code operation completed successfully.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"398\" height=\"283\" src=\"https:\/\/kb.astrocroc.com\/wp-content\/uploads\/2022\/11\/image-15.png\" alt=\"\" class=\"wp-image-212\" srcset=\"https:\/\/kb.astrocroc.com\/wp-content\/uploads\/2022\/11\/image-15.png 398w, https:\/\/kb.astrocroc.com\/wp-content\/uploads\/2022\/11\/image-15-300x213.png 300w\" sizes=\"auto, (max-width: 398px) 100vw, 398px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"316\" height=\"293\" src=\"https:\/\/kb.astrocroc.com\/wp-content\/uploads\/2022\/11\/image-16.png\" alt=\"\" class=\"wp-image-213\" srcset=\"https:\/\/kb.astrocroc.com\/wp-content\/uploads\/2022\/11\/image-16.png 316w, https:\/\/kb.astrocroc.com\/wp-content\/uploads\/2022\/11\/image-16-300x278.png 300w\" sizes=\"auto, (max-width: 316px) 100vw, 316px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"303\" height=\"172\" src=\"https:\/\/kb.astrocroc.com\/wp-content\/uploads\/2022\/11\/image-17.png\" alt=\"\" class=\"wp-image-214\" srcset=\"https:\/\/kb.astrocroc.com\/wp-content\/uploads\/2022\/11\/image-17.png 303w, https:\/\/kb.astrocroc.com\/wp-content\/uploads\/2022\/11\/image-17-300x170.png 300w\" sizes=\"auto, (max-width: 303px) 100vw, 303px\" \/><figcaption class=\"wp-element-caption\">This is how to\u00a0<strong>set lookup column value in SharePoint 2013<\/strong>\/2016\/2019 using jsom<br>Example-19: SharePoint list column operations using jsom<br><strong>Title:<\/strong><br>This is the default filed will get created as soon as we create a SharePoint list with Item content type. To read Title field<br><strong>Syn:<\/strong><br>To read value: ObjListItem.get_item(\u2018Title\u2019)<br>To set value: ObjListItem.set_item(\u2018Title\u2019, \u201cTitle Value\u201d);<\/figcaption><\/figure>\n\n\n\n<p><strong>D:<\/strong><br>The default column get creates with the list and it is an auto incremental field.<\/p>\n\n\n\n<p><strong>Syn:<\/strong><br>To get ID: ObjListItem.get_id()<\/p>\n\n\n\n<p><strong>URL\/Hyperlink Field:<\/strong>&nbsp;In SharePoint URL field will have to set 2 values 1 is URL and the other one is description.<\/p>\n\n\n\n<p><strong>Syn:<\/strong><br>To get URL value \u2013 ObjListItem.get_item(\u2018urlfieldname\u2019).get_url()<br>To set URL value \u2013 ObjListItem.set_item(\u2018urlfieldname\u2019,\u201dURL field Value\u201d)<br>To get description value \u2013 ObjListItem.get_item(\u2018descriptionfieldname\u2019).get_description();<br>To set description value \u2013 ObjListItem.set_item(\u201cdescriptionfieldname\u201d,\u201ddescription Value\u201d);<\/p>\n\n\n\n<p><strong>Setting Hyperlink Field from UI:<\/strong><br>Below is the way you can set hyperlink field through UI in SharePoint 2013.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"704\" height=\"174\" src=\"https:\/\/kb.astrocroc.com\/wp-content\/uploads\/2022\/11\/image-18.png\" alt=\"\" class=\"wp-image-215\" srcset=\"https:\/\/kb.astrocroc.com\/wp-content\/uploads\/2022\/11\/image-18.png 704w, https:\/\/kb.astrocroc.com\/wp-content\/uploads\/2022\/11\/image-18-300x74.png 300w\" sizes=\"auto, (max-width: 704px) 100vw, 704px\" \/><\/figure>\n\n\n\n<p><strong>Hyperlink list field:<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"734\" height=\"639\" src=\"https:\/\/kb.astrocroc.com\/wp-content\/uploads\/2022\/11\/image-19.png\" alt=\"\" class=\"wp-image-216\" srcset=\"https:\/\/kb.astrocroc.com\/wp-content\/uploads\/2022\/11\/image-19.png 734w, https:\/\/kb.astrocroc.com\/wp-content\/uploads\/2022\/11\/image-19-300x261.png 300w\" sizes=\"auto, (max-width: 734px) 100vw, 734px\" \/><\/figure>\n\n\n\n<p><strong>Version Details:<\/strong><br>To get the version details of a&nbsp;<a href=\"https:\/\/www.spguides.com\/retrieve-sharepoint-list-items-using-sharepoint-framework\/\" target=\"_blank\" rel=\"noreferrer noopener\">SharePoint list item<\/a>.<\/p>\n\n\n\n<p><strong>Syn:<\/strong><br>To read the version details: ObjListItem.get_item(\u201c_UIVersionString\u201d)<\/p>\n\n\n\n<p><strong>Choice field:<\/strong><br>In SharePoint, we have a field to facilitate selecting a single value from a list of values.<\/p>\n\n\n\n<p><strong>Syn:<\/strong><br>To get the value: ObjListItem.get_item(\u2018ChoiceFieldName\u2019)<br>To set the value: ObjListItem.set_item(\u2018ChoiceFieldName\u2019,\u2019Choice Value\u2019)<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"697\" height=\"1000\" src=\"https:\/\/kb.astrocroc.com\/wp-content\/uploads\/2022\/11\/image-20.png\" alt=\"\" class=\"wp-image-217\" srcset=\"https:\/\/kb.astrocroc.com\/wp-content\/uploads\/2022\/11\/image-20.png 697w, https:\/\/kb.astrocroc.com\/wp-content\/uploads\/2022\/11\/image-20-209x300.png 209w\" sizes=\"auto, (max-width: 697px) 100vw, 697px\" \/><\/figure>\n\n\n\n<p><strong>Created Date:<\/strong><br>SharePoint creates the default time stamp as soon as list item get created.<\/p>\n\n\n\n<p><strong>Syn:<\/strong><br>To get the time stamp: objListItem.get_item(\u201cCreated\u201d)<\/p>\n\n\n\n<p><strong>Modified Date:<\/strong><br>SharePoint also tracks updated date time.<\/p>\n\n\n\n<p><strong>Syn:<\/strong><br>To get the updated timestamp: objListItem. get_item(\u201cModified\u201d)<\/p>\n\n\n\n<p><strong>Created User Name:<\/strong><br>As we learned just before SharePoint keep track of all the operations and user accounts operated with. This will get the Created User Name.<\/p>\n\n\n\n<p><strong>Syn:<\/strong><br>To get the created User Name: objListItem.get_item(\u201cAuthor\u201d).get_lookupValue()<\/p>\n\n\n\n<p><strong>Modified User Name:<\/strong><br>Now that we learned to get the created user, the below will get the modified user name.<\/p>\n\n\n\n<p><strong>Syn:<\/strong><br>Modified User Name: objListItem.get_item(\u201cEditor\u201d).get_lookupValue()<\/p>\n\n\n\n<p><strong>List Item Content Type:<\/strong><br>As we learned at the beginning of the article list will get associate with one content type. If we need to know the content type associated with the list item.<\/p>\n\n\n\n<p><strong>Syn:<\/strong><br>To know the Content Type: objListItem.get_contentType()<\/p>\n\n\n\n<p>The above are a few examples of how to work with SharePoint list columns using jsom.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Example-20: How to get count of items in sharepoint list using javascript<\/h3>\n\n\n\n<p>Let us see, how to get count of items in sharepoint list using javascript.<\/p>\n\n\n\n<p>We can also r<strong>etrieve list item count using jsom (javascript client object model) in SharePoint<\/strong>. Put the below code inside a&nbsp;<a rel=\"noreferrer noopener\" href=\"https:\/\/www.enjoysharepoint.com\/script-editor-web-part-sharepoint\/\" target=\"_blank\">script editor web part<\/a>&nbsp;or content editor web part.<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-javascript\" data-line=\"\">&lt;script type=&quot;text\/javascript&quot;&gt;\nvar clientContext = null;\nvar web = null;\nExecuteOrDelayUntilScriptLoaded(Initialize, &quot;sp.js&quot;);\nfunction Initialize()\n{\nclientContext = new SP.ClientContext.get_current();\nweb = clientContext.get_web();\nvar list = web.get_lists().getByTitle(&quot;MyTestList&quot;);\nvar camlQuery = new SP.CamlQuery();\nvar q = &quot;&lt;View&gt;&lt;Query&gt;&lt;Where&gt;&lt;Eq&gt;&lt;FieldRef Name=\u2019Title\u2019 \/&gt;&lt;Value Type=\u2019Text\u2019&gt;abc&lt;\/Value&gt;&lt;\/Eq&gt;&lt;\/Where&gt;&lt;\/Query&gt;&lt;RowLimit&gt;0&lt;\/RowLimit&gt;&lt;\/View&gt;&quot;;\ncamlQuery.set_viewXml(q);\nthis.listItems = list.getItems(camlQuery);\nclientContext.load(listItems, \u2018Include(Title)\u2019);\nclientContext.executeQueryAsync(Function.createDelegate(this, this.onListItemsLoadSuccess),\nFunction.createDelegate(this, this.onQueryFailed));\n}\nfunction onListItemsLoadSuccess(sender, args) {\nvar count = this.listItems.get_count();\nalert(count);\n}\n\nfunction onQueryFailed(sender, args) {\nalert(\u2018request failed \u2018 + args.get_message() + \u2018\\n\u2019 + args.get_stackTrace());\n}\n&lt;\/script&gt;<\/code><\/pre>\n\n\n\n<p>This is an example of&nbsp;<strong>how to get count of items in sharepoint list using javascript<\/strong>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Example-21: Get internal name of SharePoint list programmatically<\/h3>\n\n\n\n<p>Let us see, how to get internal name of sharepoint list programmatically.<\/p>\n\n\n\n<p>Let us see, how to get internal names of fields from list using JSOM (JavaScript object model) in SharePoint 2013\/2016\/2019 or SharePoint Online.<\/p>\n\n\n\n<p>Every SharePoint list column has an internal name as well as the display name. You can change the display name but you can not change the internal name once the column got created in SharePoint Online or SharePoint 2013\/2016\/2019.<\/p>\n\n\n\n<p>Below is the&nbsp;<a href=\"https:\/\/www.spguides.com\/jsom-sharepoint\/\" target=\"_blank\" rel=\"noreferrer noopener\">JSOM code<\/a>&nbsp;which will retrieve internal names of field from list using JavaScript Object Model (jsom) in SharePoint.<\/p>\n\n\n\n<p>You can add the below code inside a&nbsp;<a href=\"https:\/\/www.enjoysharepoint.com\/script-editor-web-part-sharepoint\/\" target=\"_blank\" rel=\"noreferrer noopener\">script editor web part<\/a>&nbsp;or inside a content editor web part in SharePoint Online or SharePoint 2013\/2016.<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-javascript\" data-line=\"\">&lt;input type=&quot;text&quot; id=&quot;txtListTime&quot;&gt;&lt;\/input&gt;\n&lt;input type=&#039;button&#039; value=&#039;Get column names&#039; onclick=&quot;GetFieldList();&quot;\/&gt;\n\n&lt;script language=&quot;javascript&quot; type=&quot;text\/javascript&quot;&gt;\n\nfunction GetFieldList()\n{\nvar listname = document.getElementById(&#039;txtListTime&#039;).value;\nvar ctx = SP.ClientContext.get_current();\nthis.web = ctx.get_web();\nctx.load(this.web);\nthis.list = web.get_lists().getByTitle(listname);\nctx.load(this.list);\nthis.fields = this.list.get_fields();\nctx.load(this.fields);\nctx.executeQueryAsync(Function.createDelegate(this, this.getListInfoSuccess), Function.createDelegate(this, this.getListInfoFail));\n}\n\nfunction getListInfoSuccess(sender, args)\n{\nvar fieldEnumerator = this.fields.getEnumerator();\nvar results=&quot;&quot;;\nwhile (fieldEnumerator.moveNext()) {\nvar oField = fieldEnumerator.get_current();\nif (!oField.get_hidden())\nresults+= oField.get_title()\n+ &quot; \u2013 &quot; + oField.get_internalName()\n+ &quot; \u2013 &quot; + oField.get_hidden()\n+ &quot;\\n&quot;;\n}\nalert(results);\n}\nfunction getListInfoFail(sender, args)\n{\nalert(&#039;Something failed. Error:&#039;+args.get_message());\n}\n&lt;\/script&gt;<\/code><\/pre>\n\n\n\n<p>Once you\u00a0<strong>Save\u00a0<\/strong>the above code and click on the button, it will display all the\u00a0<strong>internal names<\/strong>\u00a0of the fields of SharePoint list using JavaScript. You can see the result below:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"933\" height=\"461\" src=\"https:\/\/kb.astrocroc.com\/wp-content\/uploads\/2022\/11\/image-21.png\" alt=\"\" class=\"wp-image-218\" srcset=\"https:\/\/kb.astrocroc.com\/wp-content\/uploads\/2022\/11\/image-21.png 933w, https:\/\/kb.astrocroc.com\/wp-content\/uploads\/2022\/11\/image-21-300x148.png 300w, https:\/\/kb.astrocroc.com\/wp-content\/uploads\/2022\/11\/image-21-768x379.png 768w\" sizes=\"auto, (max-width: 933px) 100vw, 933px\" \/><\/figure>\n\n\n\n<p>This is how to get internal name of sharepoint list programmatically using jsom.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Example-22: Get sharepoint list items between created date using jsom<\/h3>\n\n\n\n<p>Let us see, how to&nbsp;<strong>get sharepoint list items between created date using jsom<\/strong>.<\/p>\n\n\n\n<p>Let us see, how to retrieve list items from a SharePoint list item between a specified date range (created date).<\/p>\n\n\n\n<p><strong>Get SharePoint list items between created dates using JavaScript object model<\/strong><\/p>\n\n\n\n<p>In this particular example, I have used two date pickers for users to select the start date and end date. And also we will use a Script editor web part to write our javascript object model code which I have added into a SharePoint web part page.<\/p>\n\n\n\n<p>Below is the full code to get SharePoint list items between created dates using the JavaScript object model (jsom).<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-javascript\" data-line=\"\">&lt;link rel=&quot;stylesheet&quot; href=&quot;https:\/\/code.jquery.com\/ui\/1.10.0\/themes\/base\/jquery-ui.css&quot; \/&gt;\n&lt;script src=&quot;https:\/\/code.jquery.com\/jquery-1.8.3.js&quot;&gt;&lt;\/script&gt;\n&lt;script src=&quot;https:\/\/code.jquery.com\/ui\/1.10.0\/jquery-ui.js&quot;&gt;&lt;\/script&gt;\n\n&lt;script&gt;\n$(document).ready(function() {\nif($(&quot;#fromdatepicker&quot;).hasClass(&quot;hasDatepicker&quot;)){\n$(&quot;#fromdatepicker&quot;).removeClass(&quot;hasDatepicker&quot;)\n}\nif($(&quot;#todatepicker&quot;).hasClass(&quot;hasDatepicker&quot;)){\n$(&quot;#todatepicker&quot;).removeClass(&quot;hasDatepicker&quot;)\n}\n$(&quot;#fromdatepicker&quot;).datepicker();\n$(&quot;#todatepicker&quot;).datepicker();\n});\n&lt;\/script&gt;\nFrom Date: &lt;input type=&quot;text&quot; id=&quot;fromdatepicker&quot; \/&gt;\nTo Date: &lt;input type=&quot;text&quot; id=&quot;todatepicker&quot; \/&gt;\n&lt;input type=\u2019button\u2019 value=\u2019Export Data to Excel\u2019 onclick=&quot;retrieveListItems();&quot;\/&gt;\n\n&lt;script language=&quot;javascript&quot; type=&quot;text\/javascript&quot;&gt;\nfunction retrieveListItems() {\n\nvar query;\nvar startDate = $(&quot;#fromdatepicker&quot;).datepicker(&quot;getDate&quot;);\nvar endDate = $(&quot;#todatepicker&quot;).datepicker(&quot;getDate&quot;);\nif(startDate==null)\n{\nalert(&#039;Please select Start Date.\u2019);\nreturn;\n}\nif(endDate==null)\n{\nalert(&#039;Please select End Date.\u2019);\nreturn;\n}\nif(startDate !=null &amp;&amp; endDate !=null)\n{\nstartDate = startDate.getFullYear()+&quot;-&quot;+(startDate.getMonth()+1)+&quot;-&quot;+startDate.getDate()+\u2019T00:00:01Z\u2019;\nendDate = endDate.getFullYear()+&quot;-&quot;+(endDate.getMonth()+1)+&quot;-&quot;+endDate.getDate()+\u2019T00:00:01Z\u2019;\n\nquery = &quot;&lt;View Scope=\u2019RecursiveAll\u2019&gt;&lt;Query&gt;&lt;Where&gt;&lt;And&gt;&lt;Geq&gt;&lt;FieldRef Name=\u2019Created\u2019\/&gt;&lt;Value Type=\u2019DateTime\u2019 IncludeTimeValue=\u2019FALSE\u2019&gt;&quot;+startDate+ &quot;&lt;\/Value&gt;&lt;\/Geq&gt;&lt;Leq&gt;&lt;FieldRef Name=\u2019Created\u2019\/&gt;&lt;Value Type=\u2019DateTime\u2019 IncludeTimeValue=\u2019FALSE\u2019&gt;&quot;+ endDate + &quot;&lt;\/Value&gt;&lt;\/Leq&gt;&lt;\/And&gt;&lt;\/Where&gt;&lt;\/Query&gt;&lt;\/View&gt;&quot;;\n}\nvar clientContext = new SP.ClientContext.get_current();\nvar oList = clientContext.get_web().get_lists().getByTitle(&#039;MyTestList\u2019);\nvar camlQuery = new SP.CamlQuery();\ncamlQuery.set_viewXml(query);\nthis.collListItem = oList.getItems(camlQuery);\n\nclientContext.load(collListItem, &#039;Include(Title,FirstName,LastName)\u2019);\nclientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded),\nFunction.createDelegate(this, this.onQueryFailed)); }\n\nfunction onQuerySucceeded(sender, args) {\nvar listItemInfo = &quot;;\nvar listItemEnumerator = collListItem.getEnumerator();\nwhile (listItemEnumerator.moveNext())\n{\nvar oListItem = listItemEnumerator.get_current();\n\/\/here you can get the field values.\n}\n}\nfunction onQueryFailed(sender, args) {\nalert(&#039;Request failed. &#039; + args.get_message() + &#039;\\n\u2019 + args.get_stackTrace());\n}\n&lt;\/script&gt;<\/code><\/pre>\n\n\n\n<p>Once you save the page and select the&nbsp;<strong>start date<\/strong>&nbsp;and&nbsp;<strong>end date<\/strong>&nbsp;and click on the button it will display all the items created between the start and end date from the SharePoint list.<\/p>\n\n\n\n<p><strong>Get last N days record from SharePoint list using the JavaScript object model<\/strong><\/p>\n\n\n\n<p>Now, let us see how to&nbsp;<strong>get last N days record from SharePoint 2013 list<\/strong>&nbsp;using the JavaScript client object model.<\/p>\n\n\n\n<p>For example, suppose we want to get the last 10 days record and we will compare with the default created date column in the SharePoint list.<\/p>\n\n\n\n<p>The same JavaScript code, we can use to get the last N days record from SharePoint 2013\/2016\/Online list.<\/p>\n\n\n\n<p><strong>Get last N days record from SharePoint list using JavaScript<\/strong><\/p>\n\n\n\n<p>Here in this example user will put the number of days in an input textbox and click on the Submit button to display the records.<\/p>\n\n\n\n<p>Here we will use a&nbsp;<a rel=\"noreferrer noopener\" href=\"https:\/\/www.enjoysharepoint.com\/script-editor-web-part-sharepoint\/\" target=\"_blank\">Script editor web part<\/a>&nbsp;to write our code inside a SharePoint web part page.<\/p>\n\n\n\n<p>Below is the full code to retrieve the last N days record from the SharePoint list using the JavaScript object model.<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-javascript\" data-line=\"\">Enter number of days before: &lt;input type=&#039;text&#039; id=&#039;txtNumber&#039;\/&gt; &lt;input type=&#039;button&#039; value=&#039;Export Data to Excel&#039; onclick=&quot;retrieveListItems();&quot;\/&gt;\n&lt;br \/&gt;\n&lt;br \/&gt;\n&lt;script language=&quot;javascript&quot; type=&quot;text\/javascript&quot;&gt;\nfunction retrieveListItems() {\n\nvar d = new Date();\nvar yyyy = d.getFullYear();\nvar mm = (d.getMonth()+1);\nvar dd = d.getDate();\nvar enddate=yyyy+&#039;-&#039;+mm+&#039;-&#039;+dd+&#039;T00:00:01Z&#039;;\n\nvar nd=document.getElementById(&#039;txtNumber&#039;).value;\nif(nd==&quot;)\n{\nnd=1;\n}\nvar date = new Date();\nvar result = new Date(date);\nresult.setDate(date.getDate() \u2013 nd);\n\nvar yyyy = result.getFullYear();\nvar mm = (result.getMonth()+1);\nvar dd = result.getDate();\nvar startdate=yyyy+&#039;-&#039;+mm+&#039;-&#039;+dd+&#039;T00:00:01Z&#039;;\n\nvar query = &quot;&lt;View Scope=&#039;RecursiveAll&#039;&gt;&lt;Query&gt;&lt;Where&gt;&lt;And&gt;&lt;Geq&gt;&lt;FieldRef Name=&#039;Created&#039;\/&gt;&lt;Value Type=&#039;DateTime&#039; IncludeTimeValue=&#039;FALSE&#039;&gt;&quot;+startdate+\n&quot;&lt;\/Value&gt;&lt;\/Geq&gt;&lt;Leq&gt;&lt;FieldRef Name=&#039;Created&#039;\/&gt;&lt;Value Type=&#039;DateTime&#039; IncludeTimeValue=&#039;FALSE&#039;&gt;&quot;+ enddate + &quot;&lt;\/Value&gt;&lt;\/Leq&gt;&lt;\/And&gt;&lt;\/Where&gt;&lt;\/Query&gt;&lt;\/View&gt;&quot;;\n\nvar clientContext = new SP.ClientContext.get_current();\nvar oList = clientContext.get_web().get_lists().getByTitle(&#039;MyTestList&#039;);\nvar camlQuery = new SP.CamlQuery();\ncamlQuery.set_viewXml(query);\nthis.collListItem = oList.getItems(camlQuery);\n\nclientContext.load(collListItem, &#039;Include(Title,FirstName,LastName)&#039;);\nclientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded),\nFunction.createDelegate(this, this.onQueryFailed)); }\n\nfunction onQuerySucceeded(sender, args) {\nvar listItemInfo = &quot;;\nvar listItemEnumerator = collListItem.getEnumerator();\nwhile (listItemEnumerator.moveNext())\n{\nvar oListItem = listItemEnumerator.get_current();\n\/\/here you can get the field values.\n}\n}\nfunction onQueryFailed(sender, args) {\nalert(&#039;Request failed. &#039; + args.get_message() + &#039;\\n&#039; + args.get_stackTrace());\n}\n&lt;\/script&gt;<\/code><\/pre>\n\n\n\n<p>This way we can able to get the last N days record from the SharePoint list using the JavaScript object model (jsom) in SharePoint 2013\/2016 or SharePoint Online.<\/p>\n\n\n\n<p>This is how to&nbsp;<strong>get SharePoint list items between created dates<\/strong>&nbsp;using the JavaScript object model (jsom) in SharePoint Online or SharePoint 2013\/2016\/2019.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Example-23: Export sharepoint list to excel programmatically using JavaScript<\/h3>\n\n\n\n<p>Let us see, how to&nbsp;<strong>export sharepoint list data to excel programmatically<\/strong>&nbsp;using JavaScript object model (jsom) and&nbsp;<a href=\"https:\/\/www.enjoysharepoint.com\/spservices-in-sharepoint-2013\/\" target=\"_blank\" rel=\"noreferrer noopener\">SPServices in SharePoint Online<\/a>&nbsp;or SharePoint 2013\/2016.<\/p>\n\n\n\n<p>Recently we got one requirement to&nbsp;<strong>export selected list items to excel in SharePoint 2013<\/strong>. By default, the export to excel will export all the records from the list view.<\/p>\n\n\n\n<p>But here the requirement was a bit different, we need only selected items to export. Due to some restrictions, we can not use any server-side code, we can use only a client-side object model code like&nbsp;<a rel=\"noreferrer noopener\" href=\"https:\/\/www.enjoysharepoint.com\/sharepoint-online-jsom-examples\/\" target=\"_blank\">JavaScript client object model<\/a>&nbsp;or jQuery object model, etc.<\/p>\n\n\n\n<p><strong>Export sharepoint list data to excel programmatically using JavaScript and SPServices<\/strong><\/p>\n\n\n\n<p>In the list view page, we have added an HTML button and when a user clicks on that, we are exporting. Here we have used&nbsp;<a rel=\"noreferrer noopener\" href=\"https:\/\/www.enjoysharepoint.com\/jquery-examples\/\" target=\"_blank\">jQuery<\/a>&nbsp;and SPServices for this purpose.<\/p>\n\n\n\n<p>You can put the below code in the list view page inside a&nbsp;<a href=\"https:\/\/www.enjoysharepoint.com\/script-editor-web-part-sharepoint\/\" target=\"_blank\" rel=\"noreferrer noopener\">script editor web part<\/a>.<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-javascript\" data-line=\"\">&lt;script type=&quot;text\/javascript&quot; src=&quot;https:\/\/jqueryjs.googlecode.com\/files\/jquery-1.3.2.min.js&quot;&gt;&lt;\/script&gt;\n&lt;script type=&quot;text\/javascript&quot; src=&quot;https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jquery.SPServices\/2014.02\/jquery.SPServices.min.js&quot;&gt;&lt;\/script&gt;\n\n&lt;div&gt;\n&lt;input type=&#039;button&#039; id=&#039;btbdiv&#039; value=&#039;Generate Excel&#039; onclick=&quot;DownloadListItems();&quot;\/&gt;\n&lt;\/div&gt;\n&lt;script language=&quot;javascript&quot; type=&quot;text\/javascript&quot;&gt;\nvar projectItem1,projectItem,id;\nfunction DownloadListItems()\n{\nvar item;\ni=0;\nvar table = document.getElementById(&#039;cntryTable&#039;);\nwhile (table.rows.length &gt; 1) {\ntable.deleteRow(1);\n}\n\nvar context = SP.ClientContext.get_current();\nvar selectedItems = SP.ListOperation.Selection.getSelectedItems(context);\nvar list = context.get_web().get_lists().getByTitle(&quot;TestList&quot;);\nfor (item in selectedItems){\nprojectItem1 = selectedItems[item].id;\nvar CamlQuery = &quot;&lt;Query&gt;&lt;Where&gt;&lt;Eq&gt;&lt;FieldRef Name=&#039;ID&#039;\/&gt;&lt;Value Type=&#039;Number&#039;&gt;&quot; + projectItem1 + &quot;&lt;\/Value&gt;&lt;\/Eq&gt;&lt;\/Where&gt;&lt;\/Query&gt;&quot;;\n$().SPServices({\noperation: &quot;GetListItems&quot;,\nasync: false,\nlistName: &quot;TestList&quot;,\nCAMLViewFields: &quot;&lt;ViewFields&gt;&lt;FieldRef Name=&#039;Title&#039; \/&gt;&lt;FieldRef Name=&#039;First_x0020_Name&#039; \/&gt;&lt;\/ViewFields&gt;&quot;,\nCAMLQuery: CamlQuery,\ncompletefunc: function (xData, Status) {\n\n$(xData.responseXML).SPFilterNode(&quot;z:row&quot;).each(function() {\nvar table = document.getElementById(&#039;cntryTable&#039;);\nvar row = table.insertRow(1);\nvar cell1 = row.insertCell(0);\nvar cell2 = row.insertCell(1);\ncell1.innerHTML =$(this).attr(&quot;ows_Title&quot;);\ncell2.innerHTML =$(this).attr(&quot;ows_First_x0020_Name&quot;);\n});\n}\n});\n\n}\ngenerateexcel();\n\n}\n\n&lt;\/script&gt;\n\n&lt;table id=&quot;cntryTable&quot; border=&quot;1\u2033 style=&quot;display:none;&quot;&gt;\n&lt;tbody&gt;\n&lt;tr width=&#039;250px&#039;&gt;\n&lt;th&gt;Title&lt;\/th&gt;\n&lt;th&gt;First Name&lt;\/th&gt;\n&lt;\/tr&gt;\n&lt;\/tbody&gt;\n&lt;\/table&gt;\n&lt;br\/&gt;\n\n&lt;script language=&quot;javascript&quot; type=&quot;text\/javascript&quot;&gt;\nfunction generateexcel() {\nvar x = document.getElementById(&#039;cntryTable&#039;).rows;\nvar xls = new ActiveXObject(&quot;Excel.Application&quot;);\nxls.visible = true\nxls.Workbooks.Add\nfor (i = 0; i &lt; x.length; i++) {\nvar y = x[i].cells;\nfor (j = 0; j &lt; y.length; j++) {\nxls.cells(i + 1, j + 1).value = y[j].innerText;\n}\n}\n\n}\n&lt;\/script&gt;<\/code><\/pre>\n\n\n\n<p>Save this code and when you click on the button, it should appear like below:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"349\" height=\"387\" src=\"https:\/\/kb.astrocroc.com\/wp-content\/uploads\/2022\/11\/image-22.png\" alt=\"\" class=\"wp-image-219\" srcset=\"https:\/\/kb.astrocroc.com\/wp-content\/uploads\/2022\/11\/image-22.png 349w, https:\/\/kb.astrocroc.com\/wp-content\/uploads\/2022\/11\/image-22-271x300.png 271w\" sizes=\"auto, (max-width: 349px) 100vw, 349px\" \/><\/figure>\n\n\n\n<p>If you want to retrieve individual records in different different sheet then you can modify the generateexcel() method like below:<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-javascript\" data-line=\"\">&lt;script language=&quot;javascript&quot; type=&quot;text\/javascript&quot;&gt;\nfunction generateexcel() {\nvar x = document.getElementById(&#039;cntryTable&#039;).rows;\nvar xls = new ActiveXObject(&quot;Excel.Application&quot;);\nvar ExcelSheet = new ActiveXObject(&quot;Excel.Sheet&quot;);\n\nfor (i = 0; i &lt; x.length; i++) {\n\/\/xls.Workbooks.Add(z);\nExcelSheet.sheets.Add;\n\nExcelSheet.Application.Visible=true;\nvar y = x[i].cells;\n\nvar z=x[0].cells;\n\nfor (j = 0; j &lt; y.length; j++) {\n\/\/ xls.cells(i + 1, j + 1).value = y[j].innerText;\nExcelSheet.ActiveSheet.cells(1, j+1).value = z[j].innerText;\nExcelSheet.ActiveSheet.cells(2, j + 1).value = y[j].innerText;\n}\n\n}\nxls.visible = true\n}\n\n&lt;\/script&gt;<\/code><\/pre>\n\n\n\n<p>This is how we can export selected records to excel in SharePoint 2013 using the JavaScript client object model and SPServices.<\/p>\n\n\n\n<p><strong>Export selected record to excel in SharePoint 2013 using JavaScript client object model<\/strong><\/p>\n\n\n\n<p>Here we got one requirement to export selected list items to excel in SharePoint 2013 JavaScript client object model. We can not use the default export to excel because it will export all the list view items.<\/p>\n\n\n\n<p>we have used jQuery to export which works on Asynchronous mode. Put the below code in a script editor web part in the list view page.<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-javascript\" data-line=\"\">&lt;script type=&quot;text\/javascript&quot; src=&quot;https:\/\/jqueryjs.googlecode.com\/files\/jquery-1.3.2.min.js&quot;&gt;&lt;\/script&gt;\n&lt;script type=&quot;text\/javascript&quot; src=&quot;https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jquery.SPServices\/2014.02\/jquery.SPServices.min.js&quot;&gt;&lt;\/script&gt;\n\n&lt;input type=&#039;button&#039; id=&#039;btbdiv1\u2032 value=&#039;Generate Excel&#039; onclick=&quot;GetProjectenGoedkeuren();&quot;\/&gt;\n&lt;\/div&gt;\n&lt;script language=&quot;javascript&quot; type=&quot;text\/javascript&quot;&gt;\nvar projectItem1, projectItem2, projectItem3;\nvar field2, field1;\nvar countrvalue,i,id;\nvar tempctx, tempItem, fieldCollection, tempList;\n\nfunction GetProjectenGoedkeuren()\n{\nvar table = document.getElementById(&#039;cntryTable&#039;);\nwhile (table.rows.length &gt; 1) {\ntable.deleteRow(1);\n}\n\nvar item;\ni=0;\nvar qryString;\n\nvar context = SP.ClientContext.get_current();\nvar selectedItems = SP.ListOperation.Selection.getSelectedItems(context);\nvar list = context.get_web().get_lists().getByTitle(&quot;TestList&quot;);\nqryString =&quot;&lt;View&gt;&lt;Query&gt;&lt;Where&gt;&lt;In&gt;&lt;FieldRef Name=&#039;ID&#039; \/&gt;&lt;Values&gt;&quot;;\n\nfor (item in selectedItems){\nprojectItem = list.getItemById(selectedItems[item].id);\nprojectItem1 = selectedItems[item].id;\nqryString=qryString+&quot;&lt;Value Type=&#039;Text&#039;&gt;&quot;+projectItem1+&quot;&lt;\/Value&gt;&quot;;\n}\nqryString=qryString+&quot;&lt;\/Values&gt;&lt;\/In&gt;&lt;\/Where&gt;&lt;\/Query&gt;&lt;\/View&gt;&quot;;\ncamlQuery =new SP.CamlQuery();\ncamlQuery.set_viewXml(qryString,&#039;Include(Title,First_x0020_Name)&#039;);\nthis.objitems = list.getItems(camlQuery);\ncontext.load(objitems);\ncontext.executeQueryAsync(Function.createDelegate(this, this.createListItem), Function.createDelegate(this, this.onQueryFailed));\ngenerateexcel();\n}\n\n\/\/create a new item and load it\nfunction createListItem(sender, args) {\nvar listItemEnumerator = objitems.getEnumerator();\nwhile (listItemEnumerator.moveNext()) {\nvar oListItem = listItemEnumerator.get_current();\nvar table = document.getElementById(&#039;cntryTable&#039;);\nvar row = table.insertRow(1);\nvar cell1 = row.insertCell(0);\nvar cell2 = row.insertCell(1);\n\nif(oListItem.get_item(&#039;Title&#039;))\n{\ncell1.innerHTML =oListItem.get_item(&#039;Title&#039;);\n}\nelse\n{\ncell1.innerHTML =&quot;;\n}\n\nif(oListItem.get_item(&#039;First_x0020_Name&#039;))\n{\ncell2.innerHTML =oListItem.get_item(&#039;First_x0020_Name&#039;);\n}\nelse\n{\ncell2.innerHTML =&quot;;\n}\n}\n}\n\nfunction onQueryFailed(sender, args) { alert(&#039;Request failed. &#039; + args.get_message() + &#039;\\n&#039; + args.get_stackTrace()); } &lt;\/script&gt;\n\n&lt;table id=&quot;cntryTable&quot; border=&quot;1\u2033 style=&quot;display:none;&quot;&gt;\n&lt;tbody&gt;\n&lt;tr width=&#039;250px&#039;&gt;\n&lt;th&gt;Title&lt;\/th&gt;\n&lt;th&gt;First Name&lt;\/th&gt;\n&lt;\/tr&gt;\n&lt;\/tbody&gt;\n&lt;\/table&gt;\n&lt;br\/&gt;\n\n&lt;script language=&quot;javascript&quot; type=&quot;text\/javascript&quot;&gt;\nfunction generateexcel() {\nvar x = document.getElementById(&#039;cntryTable&#039;).rows;\nvar xls = new ActiveXObject(&quot;Excel.Application&quot;);\nxls.visible = true\nxls.Workbooks.Add\nfor (i = 0; i &lt; x.length; i++) {\nvar y = x[i].cells;\nfor (j = 0; j &lt; y.length; j++) {\nxls.cells(i + 1, j + 1).value = y[j].innerText;\n}\n}\nwindow.location.href=&quot;https:\/\/onlysharepoint2013.sharepoint.com\/Lists\/TestList\/AllItems.aspx&quot;;\n}\n&lt;\/script&gt;<\/code><\/pre>\n\n\n\n<p>If you want to retrieve individual records in different different sheet then you can modify the generateexcel() method like below:<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-javascript\" data-line=\"\">&lt;script language=&quot;javascript&quot; type=&quot;text\/javascript&quot;&gt;\nfunction generateexcel() {\nvar x = document.getElementById(&#039;cntryTable&#039;).rows;\nvar xls = new ActiveXObject(&quot;Excel.Application&quot;);\nvar ExcelSheet = new ActiveXObject(&quot;Excel.Sheet&quot;);\n\nfor (i = 0; i &lt; x.length; i++) {\n\/\/xls.Workbooks.Add(z);\nExcelSheet.sheets.Add;\n\nExcelSheet.Application.Visible=true;\nvar y = x[i].cells;\n\nvar z=x[0].cells;\n\nfor (j = 0; j &lt; y.length; j++) {\n\/\/ xls.cells(i + 1, j + 1).value = y[j].innerText;\nExcelSheet.ActiveSheet.cells(1, j+1).value = z[j].innerText;\nExcelSheet.ActiveSheet.cells(2, j + 1).value = y[j].innerText;\n}\n\n}\nxls.visible = true\n}\n&lt;\/script&gt;<\/code><\/pre>\n\n\n\n<p>This is how to export sharepoint list to excel programmatically.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Example-24: Export SharePoint list items to Excel using JavaScript<\/h3>\n\n\n\n<p>Let us see, how to export SharePoint list items to excel using the javascript object model (jsom) in SharePoint Online or SharePoint 2013\/2016\/2019.<\/p>\n\n\n\n<p>I have a list name as MyTestList, we are retrieving and displaying the list items in a table. And in another button, we are exporting list items to an excel in SharePoint.<\/p>\n\n\n\n<p>The limitation of this method is export to excel will work in IE because it requires ActiveX.<\/p>\n\n\n\n<p>So to do this Put the below code in a single&nbsp;<a href=\"https:\/\/www.enjoysharepoint.com\/script-editor-web-part-sharepoint\/\" target=\"_blank\" rel=\"noreferrer noopener\">Script editor web part<\/a>&nbsp;in a web part page in SharePoint Online or SharePoint 2013\/2016.<\/p>\n\n\n\n<p>Below is the code to display items into the table in SharePoint:<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-javascript\" data-line=\"\">&lt;script language=&quot;javascript&quot; type=&quot;text\/javascript&quot;&gt;\nfunction retrieveListItemsInclude() {\nvar table = document.getElementById(&#039;cntryTable&#039;);\nwhile (table.rows.length &gt; 1) {\ntable.deleteRow(1);\n}\nvar clientContext = new SP.ClientContext.get_current();\nvar oList = clientContext.get_web().get_lists().getByTitle(&#039;MyTestList&#039;);\nvar camlQuery = new SP.CamlQuery();\ncamlQuery.set_viewXml(&#039;&lt;View&gt;&lt;RowLimit&gt;100&lt;\/RowLimit&gt;&lt;\/View&gt;&#039;);\nthis.collListItem = oList.getItems(camlQuery);\nclientContext.load(collListItem, &#039;Include(Title)&#039;);\nclientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed)); }\nfunction onQuerySucceeded(sender, args) {\nvar listItemInfo = &quot;;\nvar listItemEnumerator = collListItem.getEnumerator();\nwhile (listItemEnumerator.moveNext()) {\nvar oListItem = listItemEnumerator.get_current();\nvar table = document.getElementById(&#039;cntryTable&#039;);\nvar row = table.insertRow(1);\nvar cell1 = row.insertCell(0);\ncell1.innerHTML = oListItem.get_item(&#039;Title&#039;);\n} }\nfunction onQueryFailed(sender, args) { alert(&#039;Request failed. &#039; + args.get_message() + &#039;\\n&#039; + args.get_stackTrace()); } &lt;\/script&gt;\n&lt;table id=&quot;cntryTable&quot; border=&quot;1\u2033&gt;\n&lt;tbody&gt;\n&lt;tr&gt;\n&lt;th&gt;\nTitle\n&lt;\/th&gt;\n&lt;\/tr&gt;\n&lt;\/tbody&gt;\n&lt;\/table&gt;\n\n&lt;input type=&#039;button&#039; value=&#039;Display List Items&#039; onclick=&quot;retrieveListItemsInclude();&quot;\/&gt;<\/code><\/pre>\n\n\n\n<p>Below is the code to\u00a0<strong>export the data to excel in SharePoint<\/strong>.<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-javascript\" data-line=\"\">&lt;script language=&quot;javascript&quot; type=&quot;text\/javascript&quot;&gt;\nfunction generateexcel() {\nvar x = document.getElementById(&#039;cntryTable&#039;).rows;\nvar xls = new ActiveXObject(\u201cExcel.Application&quot;);\nxls.visible = true\nxls.Workbooks.Add\nfor (i = 0; i &lt; x.length; i++) {\nvar y = x[i].cells;\nfor (j = 0; j &lt; y.length; j++) {\nxls.cells(i + 1, j + 1).value = y[j].innerText;\n}\n}\n}\n&lt;\/script&gt;\n&lt;input type=&#039;button&#039; value=&#039;Export To Excel&#039; onclick=&quot;generateexcel();&quot;\/&gt;<\/code><\/pre>\n\n\n\n<p>It will display like this in the page:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"220\" height=\"243\" src=\"https:\/\/kb.astrocroc.com\/wp-content\/uploads\/2022\/11\/image-23.png\" alt=\"\" class=\"wp-image-220\"\/><\/figure>\n\n\n\n<p>This is how to&nbsp;<strong>export list items to Excel using JavaScript object model in SharePoint<\/strong>&nbsp;2013\/2016\/2019 or SharePoint Online.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Example-25: Add SharePoint Online custom action<\/h3>\n\n\n\n<p>Let us discuss, how to add custom actions menu options in Site Actions in SharePoint online using JavaScript Object Model.<\/p>\n\n\n\n<p>The menu will appear when you click on the gear icon.<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-javascript\" data-line=\"\">&lt;script src=\u201dhttps:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.4.2\/jquery.min.js\u201d&gt;&lt;\/script&gt;\n\n&lt;input name=\u201dADD\u201d id=\u201dbtnAdd\u201d type=\u201dsubmit\u201d value=\u201dAdd new custom actions\u201d \/&gt;\n\n&lt;script language=\u201djavascript\u201d type=\u201dtext\/javascript\u201d&gt;\n$(document).ready(function () {\n$(\u201c#btnAdd\u201d).click(function () {\nAddCustomActions();\n});\n});\nfunction AddCustomActions() {\nvar clientContext = new SP.ClientContext();\nvar web=clientContext.get_web();\nvar customActions = web.get_userCustomActions();\nvar newCustomActionMenu = customActions.add();\nnewCustomActionMenu.set_location(\u2018Microsoft.SharePoint.StandardMenu\u2019);\nnewCustomActionMenu.set_group(\u2018SiteActions\u2019);\nnewCustomActionMenu.set_sequence(3000);\nnewCustomActionMenu.set_title(\u2018EnjoySharePoint.com\u2019);\nnewCustomActionMenu.set_description(\u2018Go to EnjoySharePoint.com\u2019);\nnewCustomActionMenu.set_url(\u2018https:\/\/www.enjoysharepoint.com\u2019);\nnewCustomActionMenu.update();\n\nclientContext.executeQueryAsync(Function.createDelegate(this, this.onSuccess),\nFunction.createDelegate(this, this.onFailure));\n}\nfunction onSuccess() {\nalert(\u2018New Item Added to Site Actions Menu\u2019);\n}\nfunction onFailure(sender, args) {\nalert(\u2018Error Occurred. \u2018 + args.get_message());\n}\n&lt;\/script&gt;<\/code><\/pre>\n\n\n\n<p>Once you will add, it will come like below:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"270\" height=\"613\" src=\"https:\/\/kb.astrocroc.com\/wp-content\/uploads\/2022\/11\/image-24.png\" alt=\"\" class=\"wp-image-221\" srcset=\"https:\/\/kb.astrocroc.com\/wp-content\/uploads\/2022\/11\/image-24.png 270w, https:\/\/kb.astrocroc.com\/wp-content\/uploads\/2022\/11\/image-24-132x300.png 132w\" sizes=\"auto, (max-width: 270px) 100vw, 270px\" \/><\/figure>\n\n\n\n<p>This is how we can&nbsp;<strong>add SharePoint Online custom action<\/strong>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Example-26: Delete SharePoint Online custom action<\/h3>\n\n\n\n<p>Let us see, how to delete custom action menu option in the&nbsp;<strong>Site Actions<\/strong>&nbsp;menu in SharePoint online using&nbsp;<strong>JavaScript Object Model<\/strong>.<\/p>\n\n\n\n<p>Below is the code which will delete custom actions menu options in SharePoint.<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-javascript\" data-line=\"\">&lt;script src=\u201dhttps:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.4.2\/jquery.min.js\u201d&gt;&lt;\/script&gt;\n&lt;input name=\u201dDelete\u201d id=\u201dbtnDelete\u201d type=\u201dsubmit\u201d value=\u201dDelete custom actions\u201d \/&gt;\n\n&lt;script language=\u201djavascript\u201d type=\u201dtext\/javascript\u201d&gt;\nvar customActions;\nvar clientContext;\n$(document).ready(function () {\n\n$(\u201c#btnDelete\u201d).click(function () {\n\nDeleteCustomActions();\n});\n});\nfunction DeleteCustomActions() {\nclientContext = new SP.ClientContext();\nvar web=clientContext.get_web();\ncustomActions = web.get_userCustomActions();\nclientContext.load(web, \u2018UserCustomActions\u2019, \u2018Title\u2019);\n\nclientContext.executeQueryAsync(Function.createDelegate(this, this.onSuccess),\nFunction.createDelegate(this, this.onFailure));\n}\nfunction onSuccess() {\nvar customActionEnumerator = customActions.getEnumerator();\nwhile (customActionEnumerator.moveNext())\n{\nvar oUserCustomAction = customActionEnumerator.get_current();\nalert(oUserCustomAction.get_title());\nif (oUserCustomAction.get_title() == \u2018EnjoySharePoint.com\u2019)\n{\noUserCustomAction.deleteObject();\nclientContext.load(oUserCustomAction);\nclientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceededdelete), Function.createDelegate(this, this.onQueryFailed));\n}\n}\n}\nfunction onQuerySucceededdelete()\n{\nalert(\u2018Custom Actions Deleted Successfully\u2019);\n}\nfunction onQueryFailed(sender, args) {\nalert(\u2018Error Occurred. \u2018 + args.get_message()+ \u2018\\n\u2019 + args.get_stackTrace());\n}\nfunction onFailure(sender, args) {\nalert(\u2018Error Occurred. \u2018 + args.get_message());\n}\n&lt;\/script&gt;<\/code><\/pre>\n\n\n\n<p>You can see like below the menu will be removed.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"239\" height=\"554\" src=\"https:\/\/kb.astrocroc.com\/wp-content\/uploads\/2022\/11\/image-25.png\" alt=\"\" class=\"wp-image-222\" srcset=\"https:\/\/kb.astrocroc.com\/wp-content\/uploads\/2022\/11\/image-25.png 239w, https:\/\/kb.astrocroc.com\/wp-content\/uploads\/2022\/11\/image-25-129x300.png 129w\" sizes=\"auto, (max-width: 239px) 100vw, 239px\" \/><\/figure>\n\n\n\n<p>This is how we can delete SharePoint site actions.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Example-27: Add value to SharePoint lookup field using JSOM<\/h3>\n\n\n\n<p>Let us see how to add value to SharePoint lookup field using JSOM.<\/p>\n\n\n\n<p>Here I have a SharePoint list that has a&nbsp;<strong>lookup column<\/strong>. That lookup column is pulling data from a SharePoint list. And I want to add an item to the list using the&nbsp;<strong>JavaScript object model<\/strong>&nbsp;(jsom).<\/p>\n\n\n\n<p>So if your list lookup column allows only single value selection then you can add the lookup value like below:<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Add value to SharePoint lookup field (single value selection)<\/h4>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-javascript\" data-line=\"\">var countryvalue = new SP.FieldLookupValue();\ncountryvalue.set_lookupId(1);\nlistItem.set_item(&#039;MyCountry&#039;, countryvalue);<\/code><\/pre>\n\n\n\n<p>Here 1 is the id of the source list and MyCounty is the column name of my parent list which is the lookup column name.<\/p>\n\n\n\n<p>Below is the full code which you can put inside a&nbsp;<a href=\"https:\/\/www.spguides.com\/enable-script-editor-web-part-in-sharepoint-online\/\" target=\"_blank\" rel=\"noreferrer noopener\">Script editor web part<\/a>.<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-javascript\" data-line=\"\">&lt;input type=&#039;button&#039; id=&#039;1234&#039; value=&#039;Click Me&#039; onclick=&quot;additemstolist();&quot;\/&gt;\n\n&lt;script language=&quot;javascript&quot; type=&quot;text\/javascript&quot;&gt;\n\nfunction additemstolist()\n{\nvar context = new SP.ClientContext.get_current();\nvar web = context.get_web();\nvar list = web.get_lists().getByTitle(&#039;MyTest&#039;);\nvar listItemInfo = new SP.ListItemCreationInformation();\nvar listItem = list.addItem(listItemInfo);\nlistItem.set_item(&#039;Title&#039;, &#039;My Test Title&#039;);\nvar countryvalue = new SP.FieldLookupValue();\ncountryvalue.set_lookupId(1);\nlistItem.set_item(&#039;MyCountry&#039;, countryvalue);\nlistItem.update();\ncontext.executeQueryAsync(Function.createDelegate(this, this.onSuccess), Function.createDelegate(this, this.onFailure));\n}\n\nfunction onSuccess() {\nalert(\u201cItem Added Successfully.&quot;);\n}\n\nfunction onFailure() {\nalert(\u201cError Occured!!!&quot;);\n}\n&lt;\/script&gt;<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Add value to SharePoint lookup field (multiple selections)<\/h4>\n\n\n\n<p>If your list lookup column allows multiple selections then you can add multiple values like below:<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-javascript\" data-line=\"\">var lookupsIds = [1,2,3];\nvar lookups = [];\nfor (var ii in lookupsIds) {\nvar lookupValue = new SP.FieldLookupValue();\nlookupValue.set_lookupId(lookupsIds[ii]);\nlookups.push(lookupValue);\n}\nlistItem.set_item(&#039;MyCountry&#039;, lookups);<\/code><\/pre>\n\n\n\n<p>Here in this line var lookupsIds = [1,2,3]; 1,2,3 are the id of the source list. Here suppose you want to select 2 values you can like var lookupsIds = [2,3];<\/p>\n\n\n\n<p>Below is the full code which you can put inside a script editor web part in the web part page in SharePoint.<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-javascript\" data-line=\"\">&lt;input type=&#039;button&#039; id=&#039;1234&#039; value=&#039;Click Me&#039; onclick=&quot;additemstolist();&quot;\/&gt;\n\n&lt;script language=&quot;javascript&quot; type=&quot;text\/javascript&quot;&gt;\n\nfunction additemstolist()\n{\n\nvar context = new SP.ClientContext.get_current();\nvar web = context.get_web();\nvar list = web.get_lists().getByTitle(&#039;MyTest&#039;);\n\nvar listItemInfo = new SP.ListItemCreationInformation();\nvar listItem = list.addItem(listItemInfo);\n\nlistItem.set_item(&#039;Title&#039;, &#039;My Test Title&#039;);\n\nvar lookupsIds = [1,2,3];\nvar lookups = [];\nfor (var ii in lookupsIds) {\nvar lookupValue = new SP.FieldLookupValue();\nlookupValue.set_lookupId(lookupsIds[ii]);\nlookups.push(lookupValue);\n}\nlistItem.set_item(&#039;MyCountry&#039;, lookups);\nlistItem.update();\ncontext.executeQueryAsync(Function.createDelegate(this, this.onSuccess), Function.createDelegate(this, this.onFailure));\n}\n\nfunction onSuccess() {\nalert(\u201cItem Added Successfully.&quot;);\n}\n\nfunction onFailure() {\nalert(\u201cError Occured!!!&quot;);\n}\n&lt;\/script&gt;<\/code><\/pre>\n\n\n\n<p>This is how to&nbsp;<strong>add value to a lookup field using JavaScript<\/strong>&nbsp;Object Model in SharePoint 2013\/2016\/2019 and SharePoint Online.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Example-28: Cascading drop down list in SharePoint 2013 using jquery<\/h3>\n\n\n\n<p>Now, we will see how to do cascading dropdown in sharepoint using&nbsp;<a href=\"https:\/\/www.enjoysharepoint.com\/jquery-examples\/\" target=\"_blank\" rel=\"noreferrer noopener\">jquery<\/a>&nbsp;and javascript.<\/p>\n\n\n\n<p>Here we have a requirement where we have two SharePoint lists as Country and State list. There will be multiple states under a country, so the State list contains a lookup column as a country.<\/p>\n\n\n\n<p>Two dropdown list I have created in HTML form. Now we have to bind the SharePoint country list to a drop-down on page load, and when the country is selected it should only populate corresponding states. We need to cascade country dropdown to state dropdown.<\/p>\n\n\n\n<p>Here we have created a SharePoint custom list and a column as CountryNames.<\/p>\n\n\n\n<p>Now we need to&nbsp;<a href=\"https:\/\/www.enjoysharepoint.com\/how-to-create-a-list-or-library-in-sharepoint\/\" target=\"_blank\" rel=\"noreferrer noopener\">create a SharePoint list<\/a>&nbsp;as State List with a lookup column as a country and have used the default Title column to enter a state.<\/p>\n\n\n\n<p>Now we need to bind the list items to a dropdown list. For this we need to create two HTML drop-down lists.<\/p>\n\n\n\n<p><strong>HTML Code:<\/strong><\/p>\n\n\n\n<p>Here we have taken two drop-down lists. We have not added an option to the dropdownlist, because we will bind the dropdown list at run time from the respective SharePoint lists which we have created. We also need to pass JSOM reference and JQuery file reference. Check the below code<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-xml\" data-line=\"\">&lt;!DOCTYPE HTML&gt;\n&lt;HTML&gt;\n&lt;head&gt;\n&lt;script type=&quot;text\/javascript&quot; src=&quot;https:\/\/ajax.aspnetcdn.com\/ajax\/jQuery\/jquery-3.3.1.min.js&quot;&gt;&lt;\/script&gt;\n&lt;script type=&quot;text\/javascript&quot; src=&quot;https:\/\/onlysharepoint2013.sharepoint.com\/sites\/Raju\/SiteAssets\/Bihusdevelopment2\/CountryAndStates.js&quot;&gt;&lt;\/script&gt;\n&lt;\/head&gt;\n&lt;body id=&quot;body&quot;&gt;\nCountries&lt;select id=&quot;ddlcountry&quot;&gt;\n&lt;\/select&gt;&lt;br&gt;\nStates&lt;select id=&quot;ddlstate&quot;&gt;\n&lt;\/select&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n\n\n\n<p><strong>Bind Dropdownlist from SharePoint list using jQuery<\/strong><\/p>\n\n\n\n<p>We have now two dropdown list one is country other is states. Country needs to bind on page load. So to bind the country list we have created the below method.<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-javascript\" data-line=\"\">var CountrycollListItem;\n\nfunction retrieveListItems() {\nvar clientContext = new SP.ClientContext.get_current();\nvar oList = clientContext.get_web().get_lists().getByTitle(&#039;CountryList&#039;);\nvar camlQuery = new SP.CamlQuery();\nCountrycollListItem = oList.getItems(camlQuery);\nclientContext.load(CountrycollListItem);\nclientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded),\nFunction.createDelegate(this, this.onQueryFailed));\n}\n\nfunction onQuerySucceeded(sender, args) {\nvar listItemEnumerator = CountrycollListItem.getEnumerator();\nwhile (listItemEnumerator.moveNext()) {\nvar oListItem = listItemEnumerator.get_current();\n$(&quot;#ddlcountry&quot;).append(&#039;&lt;option&gt;&#039; + oListItem.get_item(&#039;Title&#039;) + &#039;&lt;\/option&gt;&#039;);\n}\n}\nfunction onQueryFailed(sender, args) {\nalert(&#039;Error: &#039; + args.get_message() + &#039;\\n&#039; + args.get_stackTrace());\n}<\/code><\/pre>\n\n\n\n<p>Now we need to bind State list. To bind State List we need CAML query to retrieve particular states names when we choose Country name from the dropdown list.<\/p>\n\n\n\n<p>We have created the below method and the method is called after the country method is called.<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-javascript\" data-line=\"\">var statecollListItem;\nfunction retriveStatelist() {\nvar countryname= $(&quot;#ddlcountry option:selected&quot;).text();\nvar clientContext = new SP.ClientContext.get_current();\nvar oList = clientContext.get_web().get_lists().getByTitle(&#039;StateList&#039;);\nvar camlQuery = new SP.CamlQuery();\ncamlQuery.set_viewXml(&quot;&lt;View&gt;&lt;Query&gt;&lt;Where&gt;&lt;Eq&gt;&lt;FieldRef Name=&#039;Country&#039; \/&gt;&lt;Value Type=&#039;Lookup&#039;&gt;&quot;+countryname+&quot;&lt;\/Value&gt;&lt;\/Eq&gt;&lt;\/Where&gt;&lt;\/Query&gt;&lt;ViewFields&gt;&lt;FieldRef Name=&#039;Title&#039; \/&gt;&lt;FieldRef Name=&#039;Country&#039; \/&gt;&lt;\/ViewFields&gt;&lt;QueryOptions \/&gt;&lt;\/View&gt;&quot;);\nstatecollListItem = oList.getItems(camlQuery);\nclientContext.load(statecollListItem);\nclientContext.executeQueryAsync(Function.createDelegate(this, this.onQueryStateSucceeded),\nFunction.createDelegate(this, this.onStateQueryFailed));\n}\n\nfunction onQueryStateSucceeded(sender, args) {\nvar listItemEnumerator = statecollListItem.getEnumerator();\nwhile (listItemEnumerator.moveNext()) {\nvar oListItem = listItemEnumerator.get_current();\n$(&quot;#ddlstate&quot;).append(&#039;&lt;option&gt;&#039; + oListItem.get_item(&#039;Title&#039;) + &#039;&lt;\/option&gt;&#039;);\n}\n}\nfunction onStateQueryFailed(sender, args) {\nalert(&#039;Error: &#039; + args.get_message() + &#039;\\n&#039; + args.get_stackTrace());\n}<\/code><\/pre>\n\n\n\n<p><strong>.empty():<\/strong>&nbsp;The method is used to remove elements without destroying their data or event handlers. Multiple state values appear as when we select different countries, so if we will not execute this method we will find multiple state names in the dropdown.<\/p>\n\n\n\n<p>Below is complete JSOM code to display country drop down and when a country is selected shows corrosponding states.<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-javascript\" data-line=\"\">$(document).ready(function () {\nExecuteOrDelayUntilScriptLoaded(retrieveListItems, &quot;sp.js&quot;);\n$(&#039;#ddlcountry&#039;).change(function() {\nretriveStatelist();\n$(&#039;#ddlstate&#039;).empty();\n});\n});\nvar CountrycollListItem;\nfunction retrieveListItems() {\nvar clientContext = new SP.ClientContext.get_current();\nvar oList = clientContext.get_web().get_lists().getByTitle(&#039;CountryList&#039;);\nvar camlQuery = new SP.CamlQuery();\nCountrycollListItem = oList.getItems(camlQuery);\nclientContext.load(CountrycollListItem);\nclientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded),\nFunction.createDelegate(this, this.onQueryFailed));\n}\n\nfunction onQuerySucceeded(sender, args) {\nvar listItemEnumerator = CountrycollListItem.getEnumerator();\nwhile (listItemEnumerator.moveNext()) {\nvar oListItem = listItemEnumerator.get_current();\n$(&quot;#ddlcountry&quot;).append(&#039;&lt;option&gt;&#039; + oListItem.get_item(&#039;Title&#039;) + &#039;&lt;\/option&gt;&#039;);\n}\n}\nfunction onQueryFailed(sender, args) {\nalert(&#039;Error: &#039; + args.get_message() + &#039;\\n&#039; + args.get_stackTrace());\n}\nvar statecollListItem;\nfunction retriveStatelist() {\nvar countryname= $(&quot;#ddlcountry option:selected&quot;).text();\nvar clientContext = new SP.ClientContext.get_current();\nvar oList = clientContext.get_web().get_lists().getByTitle(&#039;StateList&#039;);\nvar camlQuery = new SP.CamlQuery();\ncamlQuery.set_viewXml(&quot;&lt;View&gt;&lt;Query&gt;&lt;Where&gt;&lt;Eq&gt;&lt;FieldRef Name=&#039;Country&#039; \/&gt;&lt;Value Type=&#039;Lookup&#039;&gt;&quot;+countryname+&quot;&lt;\/Value&gt;&lt;\/Eq&gt;&lt;\/Where&gt;&lt;\/Query&gt;&lt;ViewFields&gt;&lt;FieldRef Name=&#039;Title&#039; \/&gt;&lt;FieldRef Name=&#039;Country&#039; \/&gt;&lt;\/ViewFields&gt;&lt;QueryOptions \/&gt;&lt;\/View&gt;&quot;);\nstatecollListItem = oList.getItems(camlQuery);\nclientContext.load(statecollListItem);\nclientContext.executeQueryAsync(Function.createDelegate(this, this.onQueryStateSucceeded),\nFunction.createDelegate(this, this.onStateQueryFailed));\n}\n\nfunction onQueryStateSucceeded(sender, args) {\nvar listItemEnumerator = statecollListItem.getEnumerator();\nwhile (listItemEnumerator.moveNext()) {\nvar oListItem = listItemEnumerator.get_current();\n$(&quot;#ddlstate&quot;).append(&#039;&lt;option&gt;&#039; + oListItem.get_item(&#039;Title&#039;) + &#039;&lt;\/option&gt;&#039;);\n}\n}\nfunction onStateQueryFailed(sender, args) {\nalert(&#039;Error: &#039; + args.get_message() + &#039;\\n&#039; + args.get_stackTrace());\n}<\/code><\/pre>\n\n\n\n<p>This is how we can implement a sharepoint online cascading dropdown or sharepoint 2013 cascading dropdown using jquery.<\/p>\n\n\n\n<p>Here, we learned how to&nbsp;<strong>bind sharepoint list items<\/strong>&nbsp;to dropdownlist using javascript and jQuery. We also saw how to bind cascading dropdown in sharepoint using javascript or jQuery.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Example-29: Bind SharePoint list items to dropdownlist using JavaScript<\/h3>\n\n\n\n<p>Here we have taken a SharePoint list with country names that we need to bind to a drop-down list in a&nbsp;<a href=\"https:\/\/www.enjoysharepoint.com\/add-a-web-part-to-page-in-sharepoint\/\" target=\"_blank\" rel=\"noreferrer noopener\">web part page in SharePoint<\/a>&nbsp;Online.<\/p>\n\n\n\n<p>Here, I have also created an HTML file were added all the jQuery files. In this Html file, we have created a Dropdown list and have not added an option to the drop-down list, because we will bind the dropdown list at runtime using JSOM (JavaScript object model).<\/p>\n\n\n\n<p>Here I have created a SharePoint list, name as DemoList. It has one column as Country and also I have inserted a few items to the SharePoint list.<\/p>\n\n\n\n<p><strong>HTML Code:<\/strong><\/p>\n\n\n\n<p>Below is my HTML file which is having the jQuery file references and also I have added an HTML dropdown like below:<\/p>\n\n\n\n<p>Here, also I have given the reference to my custom .js file which contains by JavaScript code.<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-xml\" data-line=\"\">&lt;!DOCTYPE HTML&gt;\n&lt;HTML&gt;\n&lt;head&gt;\n&lt;script type=&quot;text\/javascript&quot; src=&quot;https:\/\/ajax.aspnetcdn.com\/ajax\/jQuery\/jquery-3.3.1.min.js&quot;&gt;&lt;\/script&gt;\n&lt;script type=&quot;text\/javascript&quot; src=&quot;https:\/\/onlysharepoint2013.sharepoint.com\/sites\/Raju\/SiteAssets\/Bihusdevelopment2\/DropDownbindingfromlistonpageload.js&quot;&gt;&lt;\/script&gt;\n&lt;\/head&gt;\n&lt;body id=&quot;body&quot;&gt;\n&lt;select id=&quot;ddlcountry&quot;&gt;\n&lt;\/select&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n\n\n\n<p><strong>JSOM code to bind SharePoint list items to dropdown on pageload:<\/strong><\/p>\n\n\n\n<p>Below is the full JavaScript code to bind&nbsp;<a href=\"https:\/\/www.enjoysharepoint.com\/delete-all-items-from-sharepoint-list\/\" target=\"_blank\" rel=\"noreferrer noopener\">sharepoint list items<\/a>&nbsp;to dropdownlist using javascript.<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-javascript\" data-line=\"\">$(document).ready(function () {\nExecuteOrDelayUntilScriptLoaded(retrieveListItems, &quot;sp.js&quot;);\n});\n\nvar collListItem;\nfunction retrieveListItems() {\nvar clientContext = new SP.ClientContext.get_current();\nvar oList = clientContext.get_web().get_lists().getByTitle(&#039;DemoList&#039;);\nvar camlQuery = new SP.CamlQuery();\ncollListItem = oList.getItems(camlQuery);\nclientContext.load(collListItem);\nclientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded),\nFunction.createDelegate(this, this.onQueryFailed));\n}\n\nfunction onQuerySucceeded(sender, args) {\nvar listItemEnumerator = collListItem.getEnumerator();\nwhile (listItemEnumerator.moveNext()) {\nvar oListItem = listItemEnumerator.get_current();\n$(&quot;#ddlcountry&quot;).append(&#039;&lt;option&gt;&#039; + oListItem.get_item(&#039;Title&#039;) + &#039;&lt;\/option&gt;&#039;)\n}\n}\n\nfunction onQueryFailed(sender, args) {\nalert(&#039;Error: &#039; + args.get_message() + &#039;\\n&#039; + args.get_stackTrace());\n}<\/code><\/pre>\n\n\n\n<p>Once you save the code in a&nbsp;<a href=\"https:\/\/www.spguides.com\/sharepoint-2013-content-editor-web-part-html\/\" target=\"_blank\" rel=\"noreferrer noopener\">content editor web part<\/a>&nbsp;or&nbsp;<a href=\"https:\/\/www.enjoysharepoint.com\/script-editor-web-part-sharepoint\/\" target=\"_blank\" rel=\"noreferrer noopener\">script editor web part<\/a>, you can see the dropdown list will be populated from the sharePoint list.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Example-30: Get SharePoint List Attachments using JSOM<\/h3>\n\n\n\n<p>Now, we will discuss, how to&nbsp;<strong>get list item attachments using the JavaScript<\/strong>&nbsp;client object model (jsom) in SharePoint 2013\/2016\/Online.<\/p>\n\n\n\n<p>Whenever a user does an attachment then the attachments are stored in an attachment folder and you can view that items attachment by URL:<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-javascript\" data-line=\"\">{SITE URL}\/Lists\/{LIST NAME}\/Attachments\/{ITEM ID}\/{ATTACHED FILE}\n\nExample: http:\/\/&lt;servername&gt;\/lists\/MyTestList\/Attachments\/1\/MyTestDoc.docx<\/code><\/pre>\n\n\n\n<p>Below is the JavaScript code to get all attachments from the SharePoint list item using JavaScript.<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-javascript\" data-line=\"\">&lt;script type=&quot;text\/javascript&quot;&gt;\nExecuteOrDelayUntilScriptLoaded(getWebProperties, &quot;SP.js&quot;);\nvar attachmentFiles;\nfunction getWebProperties() {\nvar itemId=2;\nvar ctx = new SP.ClientContext.get_current();\nvar web = ctx.get_web();\nvar attachmentFolder=web.getFolderByServerRelativeUrl(\u2018Lists\/City\/Attachments\/\u2019+itemId);\n\nattachmentFiles= attachmentFolder.get_files();\nctx.load(attachmentFiles);\nctx.executeQueryAsync(Function.createDelegate(this,this.onSuccess),Function.createDelegate(this,this.onFailed));\n}\nfunction onSuccess(sender, args) {\nvar i=0;\nfor(var file in attachmentFiles)\n{\nalert(attachmentFiles.itemAt(i).get_serverRelativeUrl());\ni++;\n}\n}\nfunction onFailed(sender, args) {\nalert(&quot;Something went Wrong&quot;);\n}\n&lt;\/script&gt;<\/code><\/pre>\n\n\n\n<p>Here, we discussed how to get all list item attachments using jsom (JavaScript object model) in SharePoint.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Examples-31: Add current user to SharePoint group using JavaScript<\/h3>\n\n\n\n<p>Let us see, how to add the current SharePoint user to a SharePoint group using the JavaScript object model. We will also see, how to remove the user other than the logged-in user to the SharePoint group using the&nbsp;<a href=\"https:\/\/www.spguides.com\/javascript-object-model-sharepoint\/\" target=\"_blank\" rel=\"noreferrer noopener\">JavaScript object model (jsom)<\/a>.<\/p>\n\n\n\n<p>Here we will see how to add the logged-in user to the SharePoint group using jsom and also we will see how to add a user (other than the logged-in user) to the SharePoint group using JavaScript in SharePoint Online or SharePoint 2013\/2016.<\/p>\n\n\n\n<p><strong>Add user to SharePoint group using JavaScript<\/strong><\/p>\n\n\n\n<p>Below is the jsom code which we can add inside a&nbsp;<a rel=\"noreferrer noopener\" href=\"https:\/\/www.enjoysharepoint.com\/script-editor-web-part-sharepoint\/\" target=\"_blank\">script editor web part<\/a>&nbsp;in a web part page in SharePoint Online\/2013\/2016.<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-javascript\" data-line=\"\">&lt;input type=&#039;button&#039; value=&#039;Add User to SharePoint Group&#039; onclick=&quot;AddUserToSharePointGroup();&quot;\/&gt;\n&lt;br \/&gt;\n\n&lt;script language=&quot;javascript&quot; type=&quot;text\/javascript&quot;&gt;\nvar user;\nvar spGroup;\nfunction AddUserToSharePointGroup() {\n\nvar clientContext = new SP.ClientContext.get_current();\n\nvar siteGroups = clientContext.get_web().get_siteGroups();\nspGroup=siteGroups.getById(7);\nuser=clientContext.get_web().get_currentUser();\nalert(user.email);\nvar userCollection=spGroup.get_users();\nuserCollection.addUser(user);\nclientContext.load(user);\nclientContext.load(spGroup);\nclientContext.executeQueryAsync(onQuerySucceeded, onQueryFailed);\n}\n\nfunction onQuerySucceeded() {\nalert(\u2018success&#039;);\n}\n\nfunction onQueryFailed() {\nalert(\u2018Request failed.&#039;);\n}\n&lt;\/script&gt;<\/code><\/pre>\n\n\n\n<p>Once you run the code, the logged-in user or the current user will be added to the SharePoint group using the JavaScript object model (jsom).<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Examples-32: Add user other than logged-in user to SharePoint group using JavaScript object model<\/h3>\n\n\n\n<p>Now, we will see how to add a user other than the logged-in user to a SharePoint group using the JavaScript client object model (jsom).<\/p>\n\n\n\n<p>Put the below code inside a script editor web part in a web part page in SharePoint Online or SharePoint 2013\/2016.<\/p>\n\n\n\n<p>Here we need to call the&nbsp;<a rel=\"noreferrer noopener\" href=\"https:\/\/docs.microsoft.com\/en-us\/previous-versions\/office\/sharepoint-visio\/jj245233(v%3Doffice.15)\" target=\"_blank\">ensureUser() method<\/a>&nbsp;to validate the user. And parameter it will take as domainname\\username.<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-javascript\" data-line=\"\">&lt;input type=&#039;button&#039; value=&#039;Add User to SharePoint Group&#039; onclick=&quot;clickMethod();&quot;\/&gt;\n&lt;br \/&gt;\n\n&lt;script language=&quot;javascript&quot; type=&quot;text\/javascript&quot;&gt;\n\nvar user;\nvar spGroup;\nfunction clickMethod() {\n\nvar clientContext = new SP.ClientContext.get_current();\n\nvar web=clientContext.get_web();\nvar siteGroups = clientContext.get_web().get_siteGroups();\nspGroup=siteGroups.getById(2544);\n\/\/user=clientContext.get_web().get_currentUser();\nuser=web.ensureUser(\u201cdomain\\\\username&quot;);\nvar userCollection=spGroup.get_users();\nuserCollection.addUser(user);\nclientContext.load(user);\nclientContext.load(spGroup);\nclientContext.executeQueryAsync(onQuerySucceeded, onQueryFailed);\n\n}\n\nfunction onQuerySucceeded() {\nalert(\u2018success&#039;);\n}\n\nfunction onQueryFailed() {\nalert(\u2018Request failed.&#039;);\n}\n&lt;\/script&gt;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Examples-33: Remove user from SharePoint group using JavaScript<\/h3>\n\n\n\n<p>Similarly, if you want to remove a user from a SharePoint group then we can use the remove() method which usually takes the user as the parameter.<\/p>\n\n\n\n<p>Below is the full code to remove a user from a SharePoint group using JavaScript.<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-javascript\" data-line=\"\">&lt;input type=&#039;button&#039; value=&#039;Remove User from SharePoint Group&#039; onclick=&quot;RemoveUser();&quot;\/&gt;\n&lt;br \/&gt;\n\n&lt;script language=&quot;javascript&quot; type=&quot;text\/javascript&quot;&gt;\n\nvar user;\nvar spGroup;\nfunction RemoveUser() {\n\nvar clientContext = new SP.ClientContext.get_current();\nvar web=clientContext.get_web();\nvar siteGroups = clientContext.get_web().get_siteGroups();\nspGroup=siteGroups.getById(2544);\n\/\/user=clientContext.get_web().get_currentUser();\nuser=web.ensureUser(\u201cDomainName\\\\username&quot;);\nvar userCollection=spGroup.get_users();\nuserCollection.remove(user);\nclientContext.executeQueryAsync(onQuerySucceeded, onQueryFailed);\n\n}\n\nfunction onQuerySucceeded() {\nalert(\u2018success&#039;);\n}\n\nfunction onQueryFailed() {\nalert(\u2018Request failed.&#039;);\n}\n\n&lt;\/script&gt;<\/code><\/pre>\n\n\n\n<p>Here we discussed, how to add the logged-in user as well as other users to the SharePoint group using the JavaScript object model (jsom) in SharePoint 2013\/2016 or SharePoint Online. We will also discuss how to remove a user from a SharePoint group using jsom.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Examples-34: Check if a user belongs to a SharePoint group using JavaScript<\/h3>\n\n\n\n<p>Let us see how to check if a user belongs to a SharePoint group or not using the JavaScript client object model (jsom). The jsom code we can use to check if a user belongs to the SharePoint group in SharePoint Online, SharePoint 2016\/2013 also.<\/p>\n\n\n\n<p>Below is the full code to check user belongs to the SharePoint group using&nbsp;<a href=\"https:\/\/www.spguides.com\/jsom-sharepoint\/\" target=\"_blank\" rel=\"noreferrer noopener\">jsom<\/a>:<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-javascript\" data-line=\"\">function isUserMemberOfSharePointGroup() {\nvar currentContext = new SP.ClientContext.get_current();\nvar currentWeb = currentContext.get_web();\nvar currentUser = currentContext.get_web().get_currentUser();\ncurrentContext.load(currentUser);\nvar allGroups = currentWeb.get_siteGroups();\ncurrentContext.load(allGroups);\nvar group = allGroups.getByName(&#039;MyTestGroup&#039;);\ncurrentContext.load(group);\nvar groupUsers = group.get_users();\ncurrentContext.load(groupUsers);\ncurrentContext.executeQueryAsync(OnSuccess,OnFailure);\nfunction OnSuccess(sender, args) {\nvar userInGroup = false;\nvar groupUserEnumerator = groupUsers.getEnumerator();\nwhile (groupUserEnumerator.moveNext()) {\nvar groupUser = groupUserEnumerator.get_current();\nif (groupUser.get_id() == currentUser.get_id()) {\nuserInGroup = true;\nbreak;\n}\n}\nalert (userInGroup);\n}\nfunction OnFailure(sender, args) {\nalert(&#039;Something wrong happened !!!&#039;);\n}\n}<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Examples-35: Check if user belongs to a SharePoint group JavaScript<\/h3>\n\n\n\n<p>Here is another example, of how to check if the current logged-in user belongs to a particular SharePoint group using the JavaScript object model.<\/p>\n\n\n\n<p>Here I have a SharePoint group as \u201c<strong>Team Site Owners<\/strong>\u201d where I am checking if the current user belongs to the particular group or not.<\/p>\n\n\n\n<p>I have put the below JavaScript code inside a script editor web part in the SharePoint web part page.<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"\" data-line=\"\">&lt;input id=&quot;btnCheckUserCurrentGroup&quot; onclick=&quot;CheckCurrentUserBelongstoGroup()&quot; type=&quot;button&quot; value=&quot;Check current user belongs to group&quot; \/&gt;\n\n&lt;script src=&quot;https:\/\/code.jquery.com\/jquery-1.10.2.min.js&quot; type=&quot;text\/javascript&quot;&gt;&lt;\/script&gt;\n\n&lt;script type=&quot;text\/javascript&quot;&gt;\nvar userGroups;\nfunction CheckCurrentUserBelongstoGroup()\n{\nvar clientContext = new SP.ClientContext.get_current();\nthis.currentUser = clientContext.get_web().get_currentUser();\nclientContext.load(this.currentUser);\nuserGroups = this.currentUser.get_groups();\nclientContext.load(userGroups);\nclientContext.executeQueryAsync(OnQuerySucceeded);\n\n}\n\nfunction OnQuerySucceeded() {\nvar isMember = false;\nvar groupsEnumerator = userGroups.getEnumerator();\nwhile (groupsEnumerator.moveNext()) {\nvar group= groupsEnumerator.get_current();\nif(group.get_title() == &quot;Team Site Owners&quot;) {\nisMember = true;\nbreak;\n}\n}\nalert(isMember);\n}\n\nfunction OnQueryFailed() {\nalert(&#039;Error occured&#039;);\n}\n\n&lt;\/script&gt;<\/code><\/pre>\n\n\n\n<p>This is how to check if the user belongs to a SharePoint group javascript object model (jsom) in SharePoint Online\/2013\/2016.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Examples-36: Get all SharePoint groups using JavaScript Object Model (jsom)<\/h3>\n\n\n\n<p>Let us see, how to&nbsp;<strong>get all the SharePoint groups<\/strong>&nbsp;on the site using the JavaScript object model in SharePoint 2013\/2016 or SharePoint Online.<\/p>\n\n\n\n<p>Below is the code to&nbsp;<strong>get all SharePoint groups using jsom<\/strong>&nbsp;(Javascript Object Model) which I can put the below code inside a script editor web part in a page in SharePoint.<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-javascript\" data-line=\"\">&lt;input type=&#039;button&#039; value=&#039;Get All Groups&#039; onclick=&quot;clickMethod();&quot;\/&gt;\n\n&lt;br \/&gt;\n\n&lt;script language=&quot;javascript&quot; type=&quot;text\/javascript&quot;&gt;\n\nvar siteGroups =&quot;;\nfunction clickMethod() {\n\nvar clientContext = new SP.ClientContext.get_current();\n\nsiteGroups = clientContext.get_web().get_siteGroups();\nclientContext.load(siteGroups);\nclientContext.executeQueryAsync(onQuerySucceeded, onQueryFailed);\n}\n\nfunction onQuerySucceeded() {\n\nvar allGroups=&#039;Group Name: Group ID \u2018+&#039;\\n&#039;;\nfor (var i =0 ; i &lt; siteGroups.get_count(); i++)\n{\nallGroups +=siteGroups.itemAt(i).get_title()+&#039; \u2018+siteGroups.itemAt(i).get_id()+&#039;\\n&#039;;\n}\nalert(allGroups);\n}\nfunction onQueryFailed() {\n\nalert(\u2018Request failed.&#039;);\n}\n&lt;\/script&gt;<\/code><\/pre>\n\n\n\n<p>When you click on the button, it will display all the SharePoint groups and the group id like below:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"359\" height=\"335\" src=\"https:\/\/kb.astrocroc.com\/wp-content\/uploads\/2022\/11\/image-26.png\" alt=\"\" class=\"wp-image-223\" srcset=\"https:\/\/kb.astrocroc.com\/wp-content\/uploads\/2022\/11\/image-26.png 359w, https:\/\/kb.astrocroc.com\/wp-content\/uploads\/2022\/11\/image-26-300x280.png 300w\" sizes=\"auto, (max-width: 359px) 100vw, 359px\" \/><\/figure>\n\n\n\n<p>This is&nbsp;<strong>how to get all SharePoint groups using the JavaScript<\/strong>&nbsp;object model (jsom).<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Examples-37: Redirect to a different page after adding new list items in SharePoint<\/h3>\n\n\n\n<p>Now, we will see how to&nbsp;<strong>Redirect to a different page<\/strong>&nbsp;after adding new list items in SharePoint. The code will work in SharePoint Online\/2013\/2016, but the code will not work in&nbsp;<a rel=\"noreferrer noopener\" href=\"https:\/\/www.spguides.com\/sharepoint-modern-experience\/\" target=\"_blank\">Modern SharePoint Sites<\/a>.<\/p>\n\n\n\n<p>Below is the JavaScript code which you can add inside a script editor web part page.<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-javascript\" data-line=\"\">&lt;script  type=&quot;text\/javascript&quot; src=&quot;\/sites\/Test\/Reports\/Shared%20Documents\/jquery-1.11.1.min.js&quot;&gt;&lt;\/script&gt;  \n  \n&lt;input type=&quot;button&quot; value=&quot;Edit Item&quot; id=&quot;editItem&quot; onclick=&quot;MoveToViewPage()&quot; \/&gt;  \n  \n&lt;script type=&quot;text\/javascript&quot;&gt;  \n\/\/ get the item id parameter from the URL  \nfunction urlParam (name){  \n    var results = new RegExp(&#039;[\\?&amp;]&#039; + name + &#039;=([^&amp;#]*)&#039;).exec(window.location.href);  \n  \n    return results[1] || 0;  \n}  \n  \nfunction MoveToViewPage()  \n{    \n    window.location.href = &quot;\/sites\/Test\/Reports\/Lists\/Testing%20Environment\/EditForm.aspx?ID=&quot; + urlParam(&#039;ID&#039;) + &quot;&amp;Source=&quot; + &quot;\/sites\/Test\/Reports\/Lists\/Testing%20Environment\/DispForm.aspx?ID=&quot; + urlParam(&#039;ID&#039;);  \n}    \n&lt;\/script&gt;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Examples-38: SharePoint list open attachments in a new tab<\/h3>\n\n\n\n<p>Now, in this section, we will decide how to open SharePoint list attachments in a new tab in SharePoint Online\/2013\/2016. We can Open list attachments in a new tab in the SharePoint list by using the below JavaScript code which you can add inside a script editor web part.<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-javascript\" data-line=\"\">&lt;script type=&quot;text\/javascript&quot; src=&quot;\/sites\/Test\/Reports\/Shared%20Documents\/jquery-latest.js&quot;&gt;&lt;\/script&gt;  \n  \n&lt;script type=&quot;text\/javascript&quot;&gt;  \n  \n$(document).ready(function(){  \n                $(&quot;table#idAttachmentsTable a&quot;).mousedown(function () {  \n                var url=$(this).attr(&#039;href&#039;);  \n                window.open(url);  \n});  \n});  \n&lt;\/script&gt;  <\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Examples-39: Assign value to RichTextbox field using JavaScript in SharePoint 2013<\/h3>\n\n\n\n<p>Now we will see, how to assign a default value to a rich text box field using javascript in SharePoint 2013. And the form where we have the Rich text box is an InfoPath customized form.<\/p>\n\n\n\n<p>Our InfoPath form is there inside a site page. And we have put one button ion the page and click on that button we wanted to put some default value to a rich textbox using javascript.<\/p>\n\n\n\n<p>Once the form is customized the richtextbox becomes a &lt;div&gt; when you will check that in the view source. Here the id we got is from the view source of the page.<\/p>\n\n\n\n<p>Add one script editor webpart and write the below code. Once you click on the submit then the text will appear in the Rich textbox.<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-javascript\" data-line=\"\">&lt;input type=&#039;button&#039; id=&#039;123\u2032 value=&#039;Click Me&#039; onclick=&quot;updateListItem();&quot;\/&gt;\n\n&lt;script language=&quot;javascript&quot; type=&quot;text\/javascript&quot;&gt;\nfunction updateListItem() {\ndocument.getElementById(\u201cctl00_ctl30_g_412fea2a_5a21_4cf7_acbd_c9231e395d67_FormControl0_V1_I1_RTC8_RTI4_RT1_newRichText&quot;).innerHTML = \u2018&lt;b&gt;Very bad day&lt;\/b&gt;&#039;;\n}\n&lt;\/script&gt;<\/code><\/pre>\n\n\n\n<p>This is not a great post but I just wanted to put it since I was trying to set the value by using the .Value property but .innerHTML worked for me. Just note the letter case here also.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Examples-40: How to display current date in SharePoint Page using JavaScript<\/h3>\n\n\n\n<p>Here we will discuss how to display the current date and time using javascript and jQuery in SharePoint page. We can use JavaScript\/jQuery code inside a content editor web part. If you want show current date and time in SharePoint 2013\/2016 page, then you can embed the code inside a script editor web part.<\/p>\n\n\n\n<p>Here we will append today\u2019s date in the SharePoint page using jQuery like \u201cweekday, YYYY\/MM\/dd\u201d.<\/p>\n\n\n\n<p>For this follow the below steps to display the current date in SharePoint Page using JavaScript.<\/p>\n\n\n\n<p>Edit the SharePoint page and then Add a Content Editor Web Part like below:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"640\" height=\"394\" src=\"https:\/\/kb.astrocroc.com\/wp-content\/uploads\/2022\/11\/image-27.png\" alt=\"\" class=\"wp-image-224\" srcset=\"https:\/\/kb.astrocroc.com\/wp-content\/uploads\/2022\/11\/image-27.png 640w, https:\/\/kb.astrocroc.com\/wp-content\/uploads\/2022\/11\/image-27-300x185.png 300w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/figure>\n\n\n\n<p>Now edit that Web Part and click on Click here to add new content.<\/p>\n\n\n\n<p>After this On Ribbon under editing tools click on HTML after this On Ribbon under editing tools click on HTML Source under Format Text shown in fig.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"640\" height=\"426\" src=\"https:\/\/kb.astrocroc.com\/wp-content\/uploads\/2022\/11\/image-28.png\" alt=\"\" class=\"wp-image-225\" srcset=\"https:\/\/kb.astrocroc.com\/wp-content\/uploads\/2022\/11\/image-28.png 640w, https:\/\/kb.astrocroc.com\/wp-content\/uploads\/2022\/11\/image-28-300x200.png 300w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/figure>\n\n\n\n<p>After this one popup window is open, under this window add the following code.<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-javascript\" data-line=\"\">&lt;script src=&quot;\/JS\/jquery-1.3.2.min.js&quot; type=&quot;text\/javascript&quot;&gt;&lt;\/script&gt;\n&lt;script language=&quot;javascript&quot; type=&quot;text\/javascript&quot;&gt;\nfunction strpad00(s) {\ns = s + &quot;;\nif (s.length === 1) s = &#039;0&#039; + s;\nreturn s;\n}\n\n$(document).ready(function () {\nvar weekday = new Array(7);\nweekday[0] = &quot;Sunday&quot;;\nweekday[1] = &quot;Monday&quot;;\nweekday[2] = &quot;Tuesday&quot;;\nweekday[3] = &quot;Wednesday&quot;;\nweekday[4] = &quot;Thursday&quot;;\nweekday[5] = &quot;Friday&quot;;\nweekday[6] = &quot;Saturday&quot;;\nvar now = new Date();\nvar n = weekday[now.getDay()];\nvar currentDate = now.getFullYear() + &quot;\/&quot; + strpad00(now.getMonth() + 1) + &quot;\/&quot; + strpad00(now.getDate());\n$(&#039;.s4-pagedescription&#039;).append(&quot;&lt;div style=&#039;float:right&#039;&gt;&quot; + n + &quot;,&quot; + currentDate + &quot;&lt;\/div&gt;&quot;);\n});\n\n&lt;\/script&gt;<\/code><\/pre>\n\n\n\n<p>Now Save the page and the date will appear like below:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"312\" height=\"161\" src=\"https:\/\/kb.astrocroc.com\/wp-content\/uploads\/2022\/11\/image-29.png\" alt=\"\" class=\"wp-image-226\" srcset=\"https:\/\/kb.astrocroc.com\/wp-content\/uploads\/2022\/11\/image-29.png 312w, https:\/\/kb.astrocroc.com\/wp-content\/uploads\/2022\/11\/image-29-300x155.png 300w\" sizes=\"auto, (max-width: 312px) 100vw, 312px\" \/><figcaption class=\"wp-element-caption\">This is how we can display today\u2019s date in SharePoint page using JavaScript.<\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Examples-41: Display web part page in a modal dialog box using JavaScript in SharePoint<\/h3>\n\n\n\n<p>Let us see how to&nbsp;<strong>display web part page inside a dialog box using JavaScript<\/strong>&nbsp;in SharePoint Online or SharePoint 2013\/2016.<\/p>\n\n\n\n<p>Here we will use the JavaScript and&nbsp;<strong>SP.UI.ModalDialog<\/strong>&nbsp;to display a web part page in the modal dialog box in SharePoint.<\/p>\n\n\n\n<p>Remember the page should be a web part page, it will not work for&nbsp;<a rel=\"noreferrer noopener\" href=\"https:\/\/www.spguides.com\/sharepoint-2016-web-part-page-and-wiki-page\/\" target=\"_blank\">wiki pages in SharePoint<\/a>.<\/p>\n\n\n\n<p>We can use the code inside a script editor web part or inside a&nbsp;<a rel=\"noreferrer noopener\" href=\"https:\/\/www.spguides.com\/sharepoint-2013-content-editor-web-part-html\/\" target=\"_blank\">content editor web part in a web part<\/a>&nbsp;page in SharePoint.<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-javascript\" data-line=\"\">&lt;script type=&quot;text\/javascript&quot;&gt;\nfunction OpenDialog(dialogUrl, dialogTitle) {\nvar options = {\nurl: dialogUrl,\ntitle: dialogTitle\n};\nSP.UI.ModalDialog.showModalDialog(options);\n}\n&lt;\/script&gt;\n\n&lt;a href=&quot;#&quot; onclick=&quot;OpenDialog(&#039;https:\/\/tsinfo.sharepoint.com\/sites\/TSInfoClassic\/SitePages\/Test.aspx&#039;,&#039;My Dialog Box&#039;);&quot;&gt;Show Modal Dialog&lt;\/a&gt;<\/code><\/pre>\n\n\n\n<p>Now when you click on the above link then Test web part page will open as a dialog box. It will appear like below:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"670\" src=\"https:\/\/kb.astrocroc.com\/wp-content\/uploads\/2022\/11\/image-30.png\" alt=\"\" class=\"wp-image-227\" srcset=\"https:\/\/kb.astrocroc.com\/wp-content\/uploads\/2022\/11\/image-30.png 1024w, https:\/\/kb.astrocroc.com\/wp-content\/uploads\/2022\/11\/image-30-300x196.png 300w, https:\/\/kb.astrocroc.com\/wp-content\/uploads\/2022\/11\/image-30-768x503.png 768w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>This is how to&nbsp;<strong>display web part page in a modal dialog box using JavaScript in SharePoint Online<\/strong>&nbsp;or SharePoint 2013\/2016.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Examples-42: Retrieve workflow id by using jsom in SharePoint online<\/h3>\n\n\n\n<p>Let us see&nbsp;<strong>how to retrieve workflow id from a list using JavaScript object model<\/strong>&nbsp;code (jsom) in SharePoint online. Here we have a list in our SharePoint Online site and into that list, we have attached a few list workflows. By using, the below code we are going to&nbsp;<strong>retrieve the id of the workflow<\/strong>&nbsp;whose name is \u201cArchiving\u201d.<\/p>\n\n\n\n<p>In this particular example, I have added the below code inside a script editor web part which I have added inside a web part page.<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-javascript\" data-line=\"\">&lt;input type=&quot;button&quot; id=&quot;btnSubmit&quot; value=&quot;Get Workflow ID&quot; \/&gt;&lt;br\/&gt;\n\n&lt;script src=&quot;https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.11.2\/jquery.min.js&quot;&gt;&lt;\/script&gt;\n&lt;script&gt;\n$(function () {\nbindButtonClick();\n});\nfunction bindButtonClick() {\n$(&quot;#btnSubmit&quot;).on(&quot;click&quot;, function () {\ngetWorkflowId();\n});\n}\n\nfunction getWorkflowId() {\nSP.SOD.executeFunc(&quot;sp.js&quot;, &quot;SP.ClientContext&quot;, function () {\nSP.SOD.registerSod(\u2018sp.workflowservices.js\u2019, SP.Utilities.Utility.getLayoutsPageUrl(\u2018sp.workflowservices.js\u2019));\nSP.SOD.executeFunc(\u2018sp.workflowservices.js\u2019, &quot;SP.WorkflowServices.WorkflowServicesManager&quot;, function () {\ncontext = SP.ClientContext.get_current();\nweb = context.get_web();\nworkflowServicesManager = new SP.WorkflowServices.WorkflowServicesManager(context, web);\n\nvar subs = workflowServicesManager.getWorkflowSubscriptionService().enumerateSubscriptionsByList(\u20184C384857-8AEF-484E-8163-FED3592E15A4\u2019);\ncontext.load(subs);\ncontext.executeQueryAsync(function () {\nvar subEnumerator = subs.getEnumerator();\nwhile (subEnumerator.moveNext()) {\nvar sub = subEnumerator.get_current();\nif (sub.get_name() == \u2018Archiving\u2019) {\nvar templateId = \u2018Workflow id: \u2018+sub.get_id();\nalert(templateId)\nreturn;\n}\n}\n},\nfunction (sender, args) {\nalert(args.get_message());\n});\n});\n});\n}\n&lt;\/script&gt;<\/code><\/pre>\n\n\n\n<p>Once you Save the code and click on the button, it will display the workflow id inside an alert box like below:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"882\" height=\"417\" src=\"https:\/\/kb.astrocroc.com\/wp-content\/uploads\/2022\/11\/image-31.png\" alt=\"\" class=\"wp-image-228\" srcset=\"https:\/\/kb.astrocroc.com\/wp-content\/uploads\/2022\/11\/image-31.png 882w, https:\/\/kb.astrocroc.com\/wp-content\/uploads\/2022\/11\/image-31-300x142.png 300w, https:\/\/kb.astrocroc.com\/wp-content\/uploads\/2022\/11\/image-31-768x363.png 768w\" sizes=\"auto, (max-width: 882px) 100vw, 882px\" \/><\/figure>\n\n\n\n<p>This is how to&nbsp;<strong>retrieve workflow id by using jsom in SharePoint<\/strong>&nbsp;online Office 365.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Examples-43: jquery get query string in SharePoint<\/h3>\n\n\n\n<p>This SharePoint jQuery tutorial explains, how to get query string values in SharePoint 2013 using JavaScript or jQuery. We can get the query string value inside the page by using JS request utility which we can put inside a SharePoint 2013 script editor inside the page.<\/p>\n\n\n\n<p>The request is a utility that helps to get information from a URL. We can get information like File Name, Path Name &amp; QueryString value from the URL.<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-javascript\" data-line=\"\">var filename= JSRequest.FileName;\nvar pathname = JSRequest.PathName;\nvar parValue= JSRequest.QueryString[&quot;par1&quot;];<\/code><\/pre>\n\n\n\n<p>To get the values like above first we need to initialize the request like below:<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-javascript\" data-line=\"\">JSRequest.EnsureSetup();<\/code><\/pre>\n\n\n\n<p>Here is an example where we are trying to get the query string and other information by using JSRequest.<\/p>\n\n\n\n<p>We put the below code in a script editor web part in NewForm.aspx (Edit the page and then click on Insert Web part and then from the Category select Script editor web part under media and content category).<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-javascript\" data-line=\"\">&lt;script src=&quot;http:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.4.2\/jquery.min.js&quot;&gt;&lt;\/script&gt;\n\n&lt;SCRIPT type=text\/javascript&gt;\njQuery(document).ready(function() {\nJSRequest.EnsureSetup();\nvar itemId = JSRequest.QueryString[&quot;Itemuid&quot;];\nalert (&#039;Item ID: &#039;+itemId);\nvar fileName = JSRequest.FileName;\nalert(&#039;File Name: &#039;+fileName);\nvar pathName = JSRequest.PathName;\nalert (&#039;Path Name: &#039;+pathName);\n});\n&lt;\/SCRIPT&gt;<\/code><\/pre>\n\n\n\n<p>The results will appear like below:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"502\" height=\"373\" src=\"https:\/\/kb.astrocroc.com\/wp-content\/uploads\/2022\/11\/image-32.png\" alt=\"\" class=\"wp-image-229\" srcset=\"https:\/\/kb.astrocroc.com\/wp-content\/uploads\/2022\/11\/image-32.png 502w, https:\/\/kb.astrocroc.com\/wp-content\/uploads\/2022\/11\/image-32-300x223.png 300w\" sizes=\"auto, (max-width: 502px) 100vw, 502px\" \/><\/figure>\n\n\n\n<p>This is how we can get query string parameter in SharePoint.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Examples-44: How to get dropdown text in jquery<\/h3>\n\n\n\n<p>Let us see, how we can get drop down list selected value and selected text using jQuery. I was having a requirement to get the dropdown selected text and selected value in my SharePoint online site.<\/p>\n\n\n\n<p>Here I have put the code inside a script editor web part to get dropdown selected value using jquery in SharePoint Online.<\/p>\n\n\n\n<p>Here I have a dropdown list that has 3 values like:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>USA<\/li>\n\n\n\n<li>UK<\/li>\n\n\n\n<li>Canada<\/li>\n<\/ul>\n\n\n\n<p>By using jQuery we will&nbsp;<strong>retrieve the selected value and text of the dropdown list<\/strong>.<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-javascript\" data-line=\"\">Select Country\n&lt;select id=&quot;ddlCountry&quot;&gt;\n&lt;option value=&quot;1&quot;&gt;USA&lt;\/option&gt;\n&lt;option value=&quot;2&quot;&gt;UK&lt;\/option&gt;\n&lt;option value=&quot;3&quot;&gt;Canada&lt;\/option&gt;\n&lt;\/select&gt;\n&lt;input type=&quot;button&quot; id = &quot;btnSelectDropDownValue&quot; value=&quot;Retrieve Dropdown Value&quot; \/&gt;\n\n&lt;script type=&quot;text\/javascript&quot; src=&quot;https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.8.3\/jquery.min.js&quot;&gt;&lt;\/script&gt;\n&lt;script type=&quot;text\/javascript&quot;&gt;\n$(function () {\n$(&quot;#btnSelectDropDownValue&quot;).click(function () {\nvar selectedText = $(&quot;#ddlCountry&quot;).find(&quot;option:selected&quot;).text();\nalert (selectedText);\nvar selectedValue = $(&quot;#ddlCountry&quot;).val();\nalert (selectedValue);\n});\n});\n&lt;\/script&gt;<\/code><\/pre>\n\n\n\n<p>Once you click on the button it will show you the dropdown selected value and selected text in an alert box. You can see the output like below:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"997\" height=\"457\" src=\"https:\/\/kb.astrocroc.com\/wp-content\/uploads\/2022\/11\/image-33.png\" alt=\"\" class=\"wp-image-230\" srcset=\"https:\/\/kb.astrocroc.com\/wp-content\/uploads\/2022\/11\/image-33.png 997w, https:\/\/kb.astrocroc.com\/wp-content\/uploads\/2022\/11\/image-33-300x138.png 300w, https:\/\/kb.astrocroc.com\/wp-content\/uploads\/2022\/11\/image-33-768x352.png 768w\" sizes=\"auto, (max-width: 997px) 100vw, 997px\" \/><\/figure>\n\n\n\n<p>This code we can use to&nbsp;<strong>get dropdown selected value using jQuery<\/strong>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Examples-45: javascript calendar picker<\/h3>\n\n\n\n<p>Date Picker in SharePoint will allow us to select a date from the calendar control. In this example, we will put an input box and whenever a user clicks on the input box, the date picker will appear and the user should be able to select a date from the date picker.<\/p>\n\n\n\n<p><strong>Add Date Picker in SharePoint using JavaScript<\/strong><\/p>\n\n\n\n<p>Open the SharePoint site and open the web part page. Edit the page, then Add a Script Editor web part from the Media and Content Category and place the below code. Now save the page.<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-javascript\" data-line=\"\">&lt;link rel=&quot;stylesheet&quot; href=&quot;http:\/\/code.jquery.com\/ui\/1.10.0\/themes\/base\/jquery-ui.css&quot; \/&gt;\n&lt;script src=&quot;http:\/\/code.jquery.com\/jquery-1.8.3.js&quot;&gt;&lt;\/script&gt;\n&lt;script src=&quot;http:\/\/code.jquery.com\/ui\/1.10.0\/jquery-ui.js&quot;&gt;&lt;\/script&gt;\n\n&lt;script&gt;\n$(function() {\n$( &quot;#fromdatepicker&quot; ).datepicker();\n});\n$(function() {\n$(&quot;#btnSubmit&quot;).click(function() {\nvar startDate = $(&quot;#fromdatepicker&quot;).datepicker(&quot;getDate&quot;);\nstartDate = startDate.getFullYear()+&quot;-&quot;+(startDate.getMonth()+1)+&quot;-&quot;+startDate.getDate();\n\nalert(startDate);\n});\n});\n&lt;\/script&gt;\n\nSelect a Date: &lt;input type=&quot;text&quot; id=&quot;fromdatepicker&quot;\/&gt;\n&lt;input type=&quot;button&quot; id=&quot;btnSubmit&quot; value=&quot;Get Date&quot;&gt;<\/code><\/pre>\n\n\n\n<p>Now when you click on the button, it will display the date in the alert box.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"355\" height=\"263\" src=\"https:\/\/kb.astrocroc.com\/wp-content\/uploads\/2022\/11\/image-35.png\" alt=\"\" class=\"wp-image-232\" srcset=\"https:\/\/kb.astrocroc.com\/wp-content\/uploads\/2022\/11\/image-35.png 355w, https:\/\/kb.astrocroc.com\/wp-content\/uploads\/2022\/11\/image-35-300x222.png 300w\" sizes=\"auto, (max-width: 355px) 100vw, 355px\" \/><\/figure>\n\n\n\n<p><strong>Add date picker in SharePoint 2013 using JavaScript<\/strong><\/p>\n\n\n\n<p>Let us see, how to&nbsp;<strong>add a date picker in SharePoint<\/strong>&nbsp;page using the SharePoint javascript object model. Here in this post, we will see how the date validation work means like the start date should not be greater than the end date. And also End should not be less than the start date.<\/p>\n\n\n\n<p>Write the below code using the script editor web part on a&nbsp;<a rel=\"noreferrer noopener\" href=\"https:\/\/www.enjoysharepoint.com\/add-a-web-part-to-page-in-sharepoint\/\" target=\"_blank\">web part page in SharePoint 2013<\/a>\/2016\/Online.<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-javascript\" data-line=\"\">&lt;link rel=&quot;stylesheet&quot; href=&quot;http:\/\/code.jquery.com\/ui\/1.10.0\/themes\/base\/jquery-ui.css&quot; \/&gt;\n&lt;script src=&quot;http:\/\/code.jquery.com\/jquery-1.8.3.js&quot;&gt;&lt;\/script&gt;\n&lt;script src=&quot;http:\/\/code.jquery.com\/ui\/1.10.0\/jquery-ui.js&quot;&gt;&lt;\/script&gt;\n\n&lt;script&gt;\n$(document).ready(function() {\n\n$( &quot;#fromdatepicker&quot; ).datepicker({\nonClose: function( selectedDate ) {\n$( &quot;#todatepicker&quot; ).datepicker( &quot;option&quot;, &quot;minDate&quot;, selectedDate );\n}\n});\n\n$( &quot;#todatepicker&quot; ).datepicker({\nonClose: function( selectedDate ) {\n$( &quot;#fromdatepicker&quot; ).datepicker( &quot;option&quot;, &quot;maxDate&quot;, selectedDate );\n}\n});\n\n});\n&lt;\/script&gt;\nFrom Date: &lt;input type=&quot;text&quot; id=&quot;fromdatepicker&quot; \/&gt;\nTo Date: &lt;input type=&quot;text&quot; id=&quot;todatepicker&quot; \/&gt;\n&lt;input type=\u2019button\u2019 value=\u2019Export Data to Excel\u2019 onclick=&quot;retrieveListItems();&quot;\/&gt;\n\n&lt;script language=&quot;javascript&quot; type=&quot;text\/javascript&quot;&gt;\nfunction retrieveListItems() {\nvar startDate = $(&quot;#fromdatepicker&quot;).datepicker(&quot;getDate&quot;);\nvar endDate = $(&quot;#todatepicker&quot;).datepicker(&quot;getDate&quot;);\nalert(startDate);\nalert(endDate);\n}\n&lt;\/script&gt;<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"689\" height=\"340\" src=\"https:\/\/kb.astrocroc.com\/wp-content\/uploads\/2022\/11\/image-36.png\" alt=\"\" class=\"wp-image-233\" srcset=\"https:\/\/kb.astrocroc.com\/wp-content\/uploads\/2022\/11\/image-36.png 689w, https:\/\/kb.astrocroc.com\/wp-content\/uploads\/2022\/11\/image-36-300x148.png 300w\" sizes=\"auto, (max-width: 689px) 100vw, 689px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"690\" height=\"314\" src=\"https:\/\/kb.astrocroc.com\/wp-content\/uploads\/2022\/11\/image-37.png\" alt=\"\" class=\"wp-image-234\" srcset=\"https:\/\/kb.astrocroc.com\/wp-content\/uploads\/2022\/11\/image-37.png 690w, https:\/\/kb.astrocroc.com\/wp-content\/uploads\/2022\/11\/image-37-300x137.png 300w\" sizes=\"auto, (max-width: 690px) 100vw, 690px\" \/><\/figure>\n\n\n\n<p>This is an example of javascript calendar picker.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Examples-46: Get Middle East prayer timing using JavaScript in SharePoint<\/h3>\n\n\n\n<p>I have created a simple webpart to&nbsp;<strong>get QATAR local paryer timing using JavaScript code in SharePoint<\/strong>.<\/p>\n\n\n\n<p><strong>Get timing using JavaScript Code in SharePoint<\/strong><\/p>\n\n\n\n<p><strong>Step 1:<\/strong>&nbsp;Open the&nbsp;<a href=\"https:\/\/www.spguides.com\/change-sharepoint-online-site-url\/\" target=\"_blank\" rel=\"noreferrer noopener\">SharePoint Online site<\/a>&nbsp;where you want to display the time. and then add a script editor web part into the web part page.<\/p>\n\n\n\n<p><strong>Step 2:<\/strong>&nbsp;Add the below JavaScript code in your project.<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-javascript\" data-line=\"\">&lt;script src=&quot;https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/moment.js\/2.18.1\/moment.min.js&quot;&gt;&lt;\/script&gt; \n&lt;script src=&quot;https:\/\/ajax.aspnetcdn.com\/ajax\/jQuery\/jquery-2.2.4.js&quot;&gt;&lt;\/script&gt;\n&lt;script type=&quot;text\/javascript&quot; src=&quot;https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jquery\/3.0.0\/jquery.min.js&quot;&gt;&lt;\/script&gt;\n&lt;link rel=&quot;stylesheet&quot; href=&quot;https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/3.4.0\/css\/bootstrap.min.css&quot;&gt;\n&lt;script src=&quot;https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/3.4.0\/js\/bootstrap.min.js&quot;&gt;&lt;\/script&gt;\n\n\n&lt;script&gt;  \n    var canvas;  \n    var ctx;  \n    var radius;  \n    $(document).ready(function () {  \n        canvas = document.getElementById(&quot;canvas&quot;);  \n        ctx = canvas.getContext(&quot;2d&quot;);  \n        radius = canvas.height \/ 2;  \n        ctx.translate(radius, radius);  \n        radius = radius * 0.90  \n        setInterval(drawClock, 1000);          \n    });  \n  \n    function drawClock() {  \n        drawFace(ctx, radius);  \n        drawNumbers(ctx, radius);  \n        drawTime(ctx, radius);  \n    }  \n  \n    function drawFace(ctx, radius) {  \n        var grad;  \n        ctx.beginPath();  \n        ctx.arc(0, 0, radius, 0, 2 * Math.PI);  \n        ctx.fillStyle = &#039;white&#039;;  \n        ctx.fill();  \n        grad = ctx.createRadialGradient(0, 0, radius * 0.95, 0, 0, radius * 1.05);  \n        grad.addColorStop(0, &#039;#333&#039;);  \n        grad.addColorStop(0.5, &#039;white&#039;);  \n        grad.addColorStop(1, &#039;#333&#039;);  \n        ctx.strokeStyle = grad;  \n        ctx.lineWidth = radius * 0.1;  \n        ctx.stroke();  \n        ctx.beginPath();  \n        ctx.arc(0, 0, radius * 0.1, 0, 2 * Math.PI);  \n        ctx.fillStyle = &#039;#333&#039;;  \n        ctx.fill();  \n    }  \n  \n    function drawNumbers(ctx, radius) {  \n        var ang;  \n        var num;  \n        ctx.font = radius * 0.15 + &quot;px arial&quot;;  \n        ctx.textBaseline = &quot;middle&quot;;  \n        ctx.textAlign = &quot;center&quot;;  \n        for (num = 1; num &lt; 13; num++) {  \n            ang = num * Math.PI \/ 6;  \n            ctx.rotate(ang);  \n            ctx.translate(0, -radius * 0.85);  \n            ctx.rotate(-ang);  \n            ctx.fillText(num.toString(), 0, 0);  \n            ctx.rotate(ang);  \n            ctx.translate(0, radius * 0.85);  \n            ctx.rotate(-ang);  \n        }  \n    }  \n  \n    function drawTime(ctx, radius) {  \n        var now = new Date();  \n        var hour = now.getHours();  \n        var minute = now.getMinutes();  \n        var second = now.getSeconds();  \n        \/\/hour  \n        hour = hour % 12;  \n        hour = (hour * Math.PI \/ 6) +  \n            (minute * Math.PI \/ (6 * 60)) +  \n            (second * Math.PI \/ (360 * 60));  \n        drawHand(ctx, hour, radius * 0.5, radius * 0.07);  \n        \/\/minute  \n        minute = (minute * Math.PI \/ 30) + (second * Math.PI \/ (30 * 60));  \n        drawHand(ctx, minute, radius * 0.8, radius * 0.07);  \n        \/\/ second  \n        second = (second * Math.PI \/ 30);  \n        drawHand(ctx, second, radius * 0.9, radius * 0.02);  \n    }  \n  \n    function drawHand(ctx, pos, length, width) {  \n        ctx.beginPath();  \n        ctx.lineWidth = width;  \n        ctx.lineCap = &quot;round&quot;;  \n        ctx.moveTo(0, 0);  \n        ctx.rotate(pos);  \n        ctx.lineTo(0, -length);  \n        ctx.stroke();  \n        ctx.rotate(-pos);  \n    }  \n&lt;\/script&gt;  \n  \n&lt;script&gt;  \n  \n    $(document).ready(function () {  \n        var settings = {  \n            &quot;async&quot;: true,  \n            &quot;crossDomain&quot;: true,  \n            &quot;url&quot;: &quot;https:\/\/aladhan.p.mashape.com\/timingsByCity?city=Doha&amp;country=Qatar&quot;,  \n            &quot;method&quot;: &quot;GET&quot;,  \n            &quot;headers&quot;: {  \n                &quot;x-mashape-key&quot;: &quot;4seB9mx5g0mshrkpLviV9IsQKRYNp1cZ9n8jsn70KjeMIgrBxm&quot;  \n            }  \n        }  \n  \n        $.ajax(settings).done(function (response) {  \n            console.log(response);  \n            \/\/var responseObj = JSON.parse(response);  \n            var d = new Date();  \n            var n = d.getHours();  \n            var m = d.getMinutes();  \n            m = m \/ 60;  \n            n = n+m;  \n            if (n &lt; 6) {  \n                $(&#039;.prayer_laber &#039;).text(&quot;Fajr&quot;);  \n                $(&#039;.prayer_timing&#039;).text(response.data.timings.Fajr);  \n            }  \n            else if (n &lt; 11 &amp;&amp; n &gt; 6) {  \n                $(&#039;.prayer_laber&#039;).text(&quot;Dhuhr&quot;);  \n                $(&#039;.prayer_timing&#039;).text(response.data.timings.Dhuhr);  \n            }  \n            else if (n &lt; 14 &amp;&amp; n &gt; 11) {  \n                $(&#039;.prayer_laber&#039;).text(&quot;Asr&quot;);  \n                $(&#039;.prayer_timing&#039;).text(response.data.timings.Asr);  \n            }  \n            else if (n &lt; 16 &amp;&amp; n &gt; 14) {  \n                $(&#039;.prayer_laber&#039;).text(&quot;Maghrib&quot;);  \n                $(&#039;.prayer_timing&#039;).text(response.data.timings.Maghrib);  \n            }  \n            else if (n &lt; 20 &amp;&amp; n &gt; 16) {  \n                $(&#039;.prayer_laber&#039;).text(&quot;Isha&quot;);  \n                $(&#039;.prayer_timing&#039;).text(response.data.timings.Isha);  \n            }  \n        });  \n    });  \n&lt;\/script&gt;  <\/code><\/pre>\n\n\n\n<p>The output will appear like below:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"367\" height=\"93\" src=\"https:\/\/kb.astrocroc.com\/wp-content\/uploads\/2022\/11\/image-38.png\" alt=\"\" class=\"wp-image-235\" srcset=\"https:\/\/kb.astrocroc.com\/wp-content\/uploads\/2022\/11\/image-38.png 367w, https:\/\/kb.astrocroc.com\/wp-content\/uploads\/2022\/11\/image-38-300x76.png 300w\" sizes=\"auto, (max-width: 367px) 100vw, 367px\" \/><\/figure>\n\n\n\n<p>This is how to&nbsp;<strong>get middle east prayer timing JavaScript code<\/strong>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Examples-47: JavaScript get weather<\/h3>\n\n\n\n<p>Let us see an example on<strong>&nbsp;javascript get weather<\/strong>&nbsp;or&nbsp;<strong>weather javascript code<\/strong>.<\/p>\n\n\n\n<p>We can&nbsp;<strong>get current weather using JavaScript<\/strong>&nbsp;and display it on the SharePoint page. Here we will see how we can use&nbsp;<strong>OpenWeatherMap<\/strong>&nbsp;Weather API using JavaScript in SharePoint.<\/p>\n\n\n\n<p><a rel=\"noreferrer noopener\" href=\"https:\/\/openweathermap.org\/\" target=\"_blank\">OpenWeatherMap&nbsp;<\/a>is one of the leading digital weather information providers. The OpenWeatherMap API is free to use and it also has a paid version having more weather data and features.<\/p>\n\n\n\n<p>OpenWeatherMap provides:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Current weather for any geolocation<\/li>\n\n\n\n<li>5-days\/3 hour weather forecast<\/li>\n\n\n\n<li>16-days\/daily weather forecast<\/li>\n\n\n\n<li>Historical weather data for 6 years in the past<\/li>\n\n\n\n<li>Weather maps: Forecast, Historical, Current<\/li>\n\n\n\n<li>Relief maps<\/li>\n\n\n\n<li>Weather alerts<\/li>\n\n\n\n<li>UV index<\/li>\n\n\n\n<li>Network of weather stations<\/li>\n<\/ul>\n\n\n\n<p><strong>Get current weather javascript SharePoint<\/strong><\/p>\n\n\n\n<p>To get current weather using JavaScript SharePoint, check out the&nbsp;<a href=\"https:\/\/openweathermap.org\/guide\" target=\"_blank\" rel=\"noreferrer noopener\">OpenWeatherMap guide<\/a>&nbsp;to generate the API key which we will use to call.<\/p>\n\n\n\n<p>In SharePoint, we can insert the code using a Script editor web part or a content editor web part inside a web part page.<\/p>\n\n\n\n<p><strong>Step 1:<\/strong>&nbsp;Open you SharePoint site and Add a Script Editor Web part in your&nbsp;<a rel=\"noreferrer noopener\" href=\"https:\/\/www.enjoysharepoint.com\/add-modern-sharepoint-site-page-in-microsoft-teams\/\" target=\"_blank\">web part page<\/a>.<\/p>\n\n\n\n<p><strong>Step 2:<\/strong>&nbsp;Add the CSS and JavaScript file as a reference.<\/p>\n\n\n\n<p><strong>Step 3:<\/strong>&nbsp;Copy the below code<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-javascript\" data-line=\"\">&lt;script src=&quot;https:\/\/gist.github.com\/lyuba\/874368&quot;&gt;&lt;\/script&gt;\n&lt;script src=&quot;https:\/\/ajax.aspnetcdn.com\/ajax\/jQuery\/jquery-2.2.4.js&quot;&gt;&lt;\/script&gt;  \n&lt;script type=&quot;text\/javascript&quot;&gt;  \n    $(document).ready(function () {  \n        var settings = {  \n            &quot;async&quot;: true,  \n            &quot;crossDomain&quot;: true,  \n            &quot;url&quot;: &quot;https:\/\/api.openweathermap.org\/data\/2.5\/weather?lat=25.2854&amp;lon=51.5310&amp;units=metric&amp;appid=8419181060b4dc0a4080aca18bcd29b6&quot;,  \n            &quot;method&quot;: &quot;GET&quot;,  \n            &quot;processData&quot;: false,  \n            &quot;contentType&quot;: false,  \n            &quot;mimeType&quot;: &quot;multipart\/form-data&quot;,  \n        }  \n        $.ajax(settings).done(function (response) {  \n            console.log(response);  \n            var data = JSON.parse(response);  \n            var selector;  \n            switch (data.weather[0].main) {  \n                case &#039;Haze&#039;: $(&#039;.Windy&#039;).show(); selector = &#039;.&#039; + &#039;Windy&#039; + &#039;_&#039;;  \n                    break;  \n                case &#039;Cloudy&#039;: $(&#039;.Cloudy&#039;).show(); selector = &#039;.&#039; + data.weather[0].main + &#039;_&#039;;  \n                    break;  \n                case &#039;Rain&#039;: $(&#039;.Rain&#039;).show(); selector = &#039;.&#039; + data.weather[0].main + &#039;_&#039;;  \n                    break;  \n                case &#039;Windy&#039;: $(&#039;.Windy&#039;).show(); selector = &#039;.&#039; + data.weather[0].main + &#039;_&#039;;  \n                    break;  \n                case &#039;Snow&#039;: $(&#039;.Snow&#039;).show(); selector = &#039;.&#039; + &#039;Cloudy&#039; + &#039;_&#039;;  \n                    break;  \n                case &#039;Mist&#039;: $(&#039;.Cloudy&#039;).show(); selector = &#039;.&#039; + &#039;Cloudy&#039; + &#039;_&#039;;  \n                    break;  \n                default: $(&#039;.Cloudy&#039;).show(); selector = &#039;.&#039; + data.weather[0].main + &#039;_&#039;;  \n            }  \n            $(selector + &#039;temp&#039;).text(data.main.temp + &quot;\u00b0&quot;);  \n            $(selector + &#039;wind&#039;).text(data.wind.speed + &quot;MPH&quot;);  \n            $(selector + &#039;humidity&#039;).text(data.main.humidity + &quot;%&quot;);  \n            $(selector + &#039;pressure&#039;).text(data.main.pressure + &quot;\u00b0&quot;);  \n        })  \n            .fail(function (response) {  \n                console.log(&quot;error fecting wether data&quot;);  \n  \n            });  \n  \n    });  \n&lt;\/script&gt;  \n&lt;!-- end script for weather--&gt;<\/code><\/pre>\n\n\n\n<p><strong>Step 4:<\/strong>&nbsp;Click on the Save button and now you will get current weather in QATAR. in the SharePoint Page.<\/p>\n\n\n\n<p>You can check the console (In Google Chrome More tools -&gt; Developer Tools), and the output will appear like below:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"52\" src=\"https:\/\/kb.astrocroc.com\/wp-content\/uploads\/2022\/11\/image-39.png\" alt=\"\" class=\"wp-image-236\" srcset=\"https:\/\/kb.astrocroc.com\/wp-content\/uploads\/2022\/11\/image-39.png 1024w, https:\/\/kb.astrocroc.com\/wp-content\/uploads\/2022\/11\/image-39-300x15.png 300w, https:\/\/kb.astrocroc.com\/wp-content\/uploads\/2022\/11\/image-39-768x39.png 768w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>This is how to&nbsp;<strong>get current weather using JavaScript<\/strong>&nbsp;in SharePoint Online\/2013\/2016\/2019.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Examples-48: Create SharePoint content type using JavaScript<\/h3>\n\n\n\n<p>Let us see, how to create a content type using the&nbsp;<a href=\"https:\/\/www.spguides.com\/javascript-object-model-sharepoint\/\" target=\"_blank\" rel=\"noreferrer noopener\">JavaScript object model<\/a>&nbsp;(jsom) in SharePoint Online Office 365 or SharePoint 2013\/2016\/2019.<\/p>\n\n\n\n<p>For this particular example I have added a script editor web part and in the script editor web part in a SharePoint web part page.<\/p>\n\n\n\n<p>Here, I have taken a button and on button click, it will create the content type in the SharePoint site.<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-javascript\" data-line=\"\">&lt;script src=&quot;https:\/\/code.jquery.com\/jquery-1.10.2.min.js&quot; type=&quot;text\/javascript&quot;&gt;&lt;\/script&gt;\n\n&lt;script type=&quot;text\/javascript&quot;&gt;\nvar contentTypeCollection;\n\nfunction createContentType() {\nvar clientContext = new SP.ClientContext.get_current();\nif (clientContext != undefined &amp;&amp; clientContext != null) {\nvar web = clientContext.get_web();\nthis.contentTypeCollection = web.get_contentTypes();\nthis.contentType = contentTypeCollection.getById(&quot;0x0101&quot;);\nvar newContentType = new SP.ContentTypeCreationInformation();\nnewContentType.set_name(&#039;My Custom Content Type&#039;);\nnewContentType.set_description(&#039;My custom content type&#039;);\nnewContentType.set_parentContentType(contentType);\nthis.contentTypeCollection.add(newContentType);\nclientContext.load(this.contentTypeCollection);\nclientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed));\n}\n}\n\nfunction onQuerySucceeded() {\nalert(&quot;Content Type created successfully&quot;)\n}\n\nfunction onQueryFailed(sender, args) {\nalert(&#039;Request failed. &#039; + args.get_message() + &#039;\\n&#039; + args.get_stackTrace());\n}\n&lt;\/script&gt;\n\n&lt;input id=&quot;btnCreateContentType&quot; onclick=&quot;createContentType()&quot; type=&quot;button&quot; value=&quot;Create Content Type&quot; \/&gt;<\/code><\/pre>\n\n\n\n<p>Once you clicked on the button the content type will get created. You can see the content type from the site settings page. Go to site settings -> then click on \u201cSite content types\u201d which is under Web Designer Galleries. Then you can see your content type like below:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"931\" height=\"229\" src=\"https:\/\/kb.astrocroc.com\/wp-content\/uploads\/2022\/11\/image-40.png\" alt=\"\" class=\"wp-image-237\" srcset=\"https:\/\/kb.astrocroc.com\/wp-content\/uploads\/2022\/11\/image-40.png 931w, https:\/\/kb.astrocroc.com\/wp-content\/uploads\/2022\/11\/image-40-300x74.png 300w, https:\/\/kb.astrocroc.com\/wp-content\/uploads\/2022\/11\/image-40-768x189.png 768w\" sizes=\"auto, (max-width: 931px) 100vw, 931px\" \/><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>Want to know how to work with&nbsp;jsom SharePoint? Check out various&nbsp;sharepoint javascript examples. Let us see the best 11&nbsp;SharePoint Online jsom examples. Here we will discuss how to use the&nbsp;javascript client object model in SharePoint 2013. In some other posts, we will see some jsom SharePoint 2013 examples. This is also known as&nbsp;ECMAScript Client Object [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[14,11],"tags":[28,46,33],"class_list":["post-196","post","type-post","status-publish","format-standard","hentry","category-javascript","category-sharepoint","tag-javascript","tag-jsom","tag-sharepoint"],"blocksy_meta":{"styles_descriptor":{"styles":{"desktop":"","tablet":"","mobile":""},"google_fonts":[],"version":6}},"_links":{"self":[{"href":"https:\/\/kb.astrocroc.com\/index.php?rest_route=\/wp\/v2\/posts\/196","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kb.astrocroc.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kb.astrocroc.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kb.astrocroc.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kb.astrocroc.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=196"}],"version-history":[{"count":1,"href":"https:\/\/kb.astrocroc.com\/index.php?rest_route=\/wp\/v2\/posts\/196\/revisions"}],"predecessor-version":[{"id":238,"href":"https:\/\/kb.astrocroc.com\/index.php?rest_route=\/wp\/v2\/posts\/196\/revisions\/238"}],"wp:attachment":[{"href":"https:\/\/kb.astrocroc.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=196"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kb.astrocroc.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=196"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kb.astrocroc.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=196"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}