Adding custom javascript to sharepoint
Hi, i would like to create a webpart that pops up on a site at random location with something like "Congratz, you won!". I am absolutely new to sharepoint development, but i am very familiar with java. So i guess i can manipulate the DOM somehow with javascript and insert somewhere my visible part of the webpart. I followed https://learn.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part but i am already struggling. Where i can inject the javascript so it gets executed? Because everything is getting escaped (and the code is shown). I found some old code on one of our servers which "loads" some .js from inside a .ts like: link = document.createElement("script"); link.setAttribute('type', 'module'); link.setAttribute('src', srcPath); link.setAttribute(dataIdentifier, 'true'); and then adding it with document.head.appendChild(link), but i am not sure if this is really how this is supposed to work or if there is something like "addJavascript(...)" or any other better approach to add javascript on client side. Any help is very appreciated!
Properties do not display due to JSON JavaScriptSerializer error
I have a SharePoint online library that utilizes several lookup columns. The other day we started receiving errors in the modern view when trying to view the properties. The error we are getting is "Sorry, properties can not be displayed, having error: Error during serialization or deserialization using the JSON JavaScriptSerializer. The length of the string exceeds the value set on the maxJsonLength property.." If I look at the library in classic view everything appears to be operating correctly, modern just seems to be the issue. Any ideas on where I should be looking to find the source of the problem? I looked at the developer tools in Chrome (F12) and noticed there were a few 400 errors getting returned for the /GetList(@listUrl)/RenderListDataAsStream...... Not sure if that has anything to do with the problem or if it is just a symptom of the cause.Next Js as WebPart
Hi there, I have an application that was made using Next Js and my team wants to put it on a share point page, I have been trying to find information to know if this is even possible. I found WebParts but I am not sure if that is compatible with Next Js and I haven't found any resources that could help me with this. Any help will be appreciated. Thanks.
SharePoint - Users have to click Save twice when create new Document Set
I am not sure what customization has been done on our SharePoint site but when user create new Document Set, there are 2 Save buttons, the 1st one is useless, the one at the bottom right is working. We are using SharePoint online. New site collection does not have this issue.
Sharepoint putting extra "src" information in <img> tags
Hello, I'm trying to find a resolution to a problem i have never came across previously. I have created a quill rich text editor where i intend to put text and images that i can store as html in sharepoint lists in order to load it on a custom landing page instead of updating the html code itself every time there is new content. While storing formatted text works perfectly, i am facing an issue whereas <img> tags get altered by sharepoint by adding an extra URL in them before the actual URL of the image. This makes the <img src="" property incorrect and the image doesnt load. I tried with reading the element from the DOM and altering the property with javacript.replace, but whenever i load the corrected code back to the DOM, sharepoint puts the extra (wrong) link snippet back to its place. example: URL of the image i upload as html code into a list: <div class=""><p><img class="class" src="https://company.sharepoint.com/sites/PortalName/DocumentLibraryname/image.jpg" data-themekey=""></p></div> Then what comes out when rendering the DOM is: <div class=""><p><img class="class" src="https://company.sharepoint.com/pages/%22https://company.sharepoint.com/sites/PortalName/DocumentLibraryname/image.jpg" data-themekey=""></p></div> Notice the addition of an extra url part in bold. I tried replacing the parts i dont need in "src" with javascript, and even though console.log-ing displays the corrected value, when i put it back as innerHTML to its place, the wrong link gets added back. The process of reading the content of a sharepoint list item, putting it into a var and replacing stuff is connected to an onClick event, therefore document.ready shouldn't be an issue. Has anyone face this issue before? Any help would be much appreciated! Thanks!
Best JS framework(Angular/React/Vue) to use in SharePoint 2013
Hi, We have tools (Basically CRUD operations in multiple lists across sites/site collections. Handles large amount of data and has lots of business functionalities/logic) that were built using jQuery and Datatables.js. We are planning to rebuild in 2013. Visual Studio/ server side coding is not allowed. Can anyone suggest which JavaScript framework (Angular Js1.x, Angular 2+, React, Vue/ Others) is best to use in SharePoint 2013? Difficult to get Node.JS/NPM/CLI on DEV environment. we have tried a PoC in Angular 4 using SystemJs-Manual mapping concept. But not sure how bundling and future upgrade will be if CLI/NPM is not used. Any suggestions please? Thanks, PuliAccessing SharePoint List via external html page using .ajax function but getting CORS error
I need to query SharePoint List from simple javascript, using .ajax call. I need to use a AD user credentials who will have read permissions to the SharePoint Site. I am doing something like this but getting a lots of errors. Any suggestions. var user = "****@AD2012.***"; var passwordtemp = "**********"; $.ajax({ url: siteURL + "/_api/web/lists/GetByTitle('"+ listName +"')/items" + filterQuery, method: "GET", headers: { "Accept": "application/json; odata=verbose" }, crossDomain: true, beforeSend: function (xhr) { xhr.setRequestHeader('Authorization', make_base_auth(user, passwordtemp)); }, success: function (data) { // Doing something with data .. }}, error: function (data) { failure(data); } }); } // function ends ..Retrieving list data from multiple sub-sites using same site content type with JavaScript
Dear all, I'm running a SharePoint site for projects where every project is created as a sub-site with a number of lists. Each sub-site has a list with one list item including the most important project data. This list is using a Site Content Type. I'd like to pull the data from all those lists and write it to one list on the parent site, e.g. by a weekly run of a workflow or manually. Can this task be done by using JavaScript, Rest API, etc.? Has anybody done something similar? Thanks for your tips.Update Group SharePoint Custom Field Collums after Fileupload with REST Graph API in Javascript
Hi, I've made an upload with Graph with the following JS code: async function uploadSingleFileMetaToSharepoint(file, name, metaData, groupId, graphAccessToken) { //console.log(file, name, metaData, groupId); //TODO get Filepath from config of App let pathToFiles = 'General' let apiurl = msgraph + `/groups/${groupId}/drive/root:/${pathToFiles}/${name}:/content`; if (debug) { console.log("uploading File: ", file); console.log(`API-URL: ${apiurl}`); } let header = { 'Authorization': graphAccessToken, } let body = file; //TODO catch errors let result = await fetch(apiurl, { "method": 'PUT', "headers": header, "body": body }); if (!result.ok) { console.error("upload file to sharepoint failed"); return } let res = await result.json(); //console.log(res); if (res === undefined || res.id === undefined) {console.error("Die DAtei wurde nicht hochgeladen"); return;} /... } which is working fine. But now i'm struggling to fill the values of the collumns from sharepoint : Does anybody know how to approach this?Sharepoint CORS Policy issue persist even after ISS Configurations
I am currently trying to fetch my Sharepoint API via my code. However I am running into the issue below. I have already enabled the ISS Configurations as shown in the link below. However, the issue still persist. https://techcommunity.microsoft.com/t5/iis-support-blog/access-to-xmlhttprequest-from-origin-has-been-blocked-by-cors/ba-p/3800362 Error: index.html:1 Access to XMLHttpRequest at 'http://testing- sharepoint/Shared%20Documents/query%20result%20BEFORE.xml' from origin 'http://127.0.0.1:2233' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. My code: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script> $(document).ready(function() { function apiCallTest(searchValue) { const adminAccount = 'testUser'; const adminAccountPassword = 'testPassword'; const auth = btoa(`${adminAccount}:${adminAccountPassword}`); const testQuery = 'BEFORE'; const apiUrl= "http://testing-sharepoint/Shared%20Documents/query%20result%20BEFORE.xml" const headers = { 'Authorization': `Basic ${auth}`, // 'Accept': 'application/json;odata=nometadata', // 'Content-Type':'application/json', // 'Access-Control-Allow-Credentials':'TRUE', // 'Access-Control-Allow-Headers':'Access-Control-Allow-Headers, Origin,Accept, X-Requested-With, Content-Type, Access-Control-Request-Method, Access-Control-Request-Headers,Authorization', // 'Access-Control-Allow-Origin':'*', // 'Access-Control-Allow-Methods':'GET,POST,PUT,OPTIONS' }; $.ajax({ url: apiUrl, headers: headers, method: 'GET', dataType: 'xml', success: function(data) { // Process the search results as needed console.log('Search Results:', data) }, error: function(xhr, textStatus, errorThrown) { console.log("Cannot connect") console.error('Error:', xhr, textStatus, errorThrown); } }); } function checkConnection(url) { if (navigator.onLine) { console.log(`You are online. Checking connection to ${url}...`); // You can attempt further actions here if needed } else { console.log('You are offline. Check your network connection.'); } } checkConnection("https://testing-sharepoint/_api/site"); apiCallTest(); }); </script> </head> <body style="background: black; color: aliceblue; font-size: 2rem;"> </body> </html>
