Tiago Duarte

The PnP community has become a valuable resource for documentation, sample code, and overall collaboration for all things Microsoft. If you've worked with Office/Microsoft 365, odds are that you've bumped into at least one community-driven component. Here are a few examples: Modern Script Editor SPFx web part that allows the embedding custom html/js/css into a modern page. PnP Modern Search Set of web parts that allow a more customized search experience, which fills some of the gaps left by the highlighted content out-of-the-box web part. Additional background here . Custom list view header One of the many example json styles for customizing content rendering in SharePoint. In this case, it sets a static, customized header instead of the default view header. List formatting has many samples to showcase different customization options. In the meantime, Microsoft is on track to add a few new things, while shutting down a few others. Microsoft has announced deprecations for older...

Problem: Recently I started to notice that SharePoint Designer has been behaving strangely. When we click save on a JS file it goes on an eternal quest to try and save it The simple opening of an .aspx file that contains javascript functions will take minutes and fail with " The server could not complete your request. For more specific information, click the Details button. " After it gives up, the error is displayed: " The server unexpectedly closed the connection. " After this (and if you have pending changes) the Designer will prompt to save the file to an alternate location, but not before throwing yet another error: " Could not find a Web server at 'SiteUrl'. Please check to make sure that the Web server name is valid and your proxy settings are set correctly. If you are sure that everything is correct, the Web server may be temporarily out of service. " Solution: It seems that some file contents sort of get blocke...

Problem: I started this mini-project saying to myself: If I work with Firefox, why can't I get "Open with Explorer". Soon I realized that I was in way over head. SharePoint's tight coupling to Internet Explorer, on top of security mechanisms of the web, make trying this a bumpy road. After many attempts failed, I eventually gave up, but not before I defined a workaround, which would allow me to have something similar, not "one-click" but almost... Solution: Some post-attempt observations: - Trying to re-use the "built-in" functionality quickly seems to be a showstopper. - Trying to call an URL with file:// seems to have worked in the past, but due to new browser security mechanisms, it no longer works 1. Install grease monkey https://addons.mozilla.org/pt-PT/firefox/addon/greasemonkey/ 2. Add a script Click "New user script..." from the Grease Monkey context menu. 3. Include jQuery http://stackoverflow.com/question...

Problem: It appears that once we customize a view (e.g. add a webpart), the "Documents" and "Library" tabs will now be hidden from the ribbon until you manually click the list view webpart. Solution: There is a way to invoke the ribbon through JavaScript by identifying the containing webpart. This will automatically pick the "Documents" tab, so we will also be tweaking that so we can try to create an almost seamless behaviour as before by choosing the "Browse" tab instead. One caveat of this approach is that we need to wait until the ribbon has loaded in order to run our code. This was possible thanks to a few posts in stack exchange, http://sharepoint.stackexchange.com/questions/73174/items-and-list-tabs-in-ribbon-dont-show-after-editing-page http://sharepoint.stackexchange.com/questions/49003/showing-the-tab-on-button-click

In this post I will keep an updated list of my day-to-day tools of choice. Sure, I have a lot of favourite links and saved software but hopefully this will help me keep track, while perhaps helping others as well. Do you have a cool extension you use? Feel free to add a comment below. Visual Studio CSS3 Validation for VS2010 http://visualstudiogallery.msdn.microsoft.com/7211bcac-091b-4a32-be2d-e797be0db210 Spellcheck http://visualstudiogallery.msdn.microsoft.com/a23de100-31a1-405c-b4b7-d6be40c3dfff Web Essentials http://vswebessentials.com/ Web Troubleshooting Firebug for Firefox https://getfirebug.com/ Fiddler http://www.telerik.com/fiddler RESTClient (Firefox / Chrome / Safari) http://restclient.net/ Code Deobfuscating JavaScript http://jsbeautifier.org/ CSS http://mrcoles.com/blog/css-unminify/ .NET Reflector (and alternatives) http://stackoverflow.com/questions/2425973/open-source-alternatives-to-reflector SharePoint Log Viewers http://sh...

Problem: Want to submit a form to a custom page, with an additional calculated information, such as a querystring. Solution: Since the content within ddwrt:GenFireServerEvent is XSLT, we need to create a variable. If we want to call a JavaScript function, it will not be a problem, because the "call" to the function will be appended to the submit event and will only be executed when the button is actually clicked. //save the execution of a JavaScript function with a static parameter and a calculated one based on a selected tab option <xsl:variable name="actionAuthor">' + getActor("PR",$(".nav-tabs .active").index()) + '</xsl:variable> //set the input redirection link to a page and an additional querystring value with the XSLT concat method <input class="submitFormInput" type="button" onclick="if(!ValidateForm()) return false; { ddwrt:GenFireServerEvent(concat('__commit;__redirect={.....

I keep needing some way in JavaScript to check if a variable contains another. Guess I'll just post it for future necessities.  function custom_contains(str_full, str_partial)  {      var new_full = str_full.toString().toLowerCase();      if(new_full.indexOf(str_partial) !== -1)      {          return true;      }      return false;  } usage: if(custom_contains("my string", "my")) { //true, do something } else { //false, do something }

Problem: Providing a string to the user so he can use it in his clipboard. Solution: Forget the keyword "clipboard" or you will go nuts with all the cross-browser support for clipboard methods. A simple workaround with JavaScript is showing a dialog with the string pasted and already selected. All the user has to do is making a CTRL+C himself.     function copyToClipboard (text) {         window.prompt ("Copy to clipboard: Ctrl+C, Enter", text);     } $("input.copyurl").click(function(){            copyToClipboard($(this).prev().text());         }); Problem: Creating a dialog so that the user the confirm if he's sure he wants to proceed with the selected action. If he hits yes ("ok") the action will run (the button onclick event will be called). If he hits no ("cancel") nothing will happen. Solution: Use the OnClientC...

Problem: After adding the Google Maps API v3 to a website, the map page, in Firefox , displays a strange behavior. When the request comes from another page, most times, the map page keeps loading the Google Maps API ("retrieving data from maps.googleapis.com ") but it never actually ends. Follow-up scripts end up never being loaded. If we stop the page load and refresh it (F5 or CTRL+F5), the page loads correctly. Solution: There are lots of posts already with people trying to figure this out. Some are recomending changing the google script call to asynchronous: http://stackoverflow.com/questions/14233350/infinite-load-on-firefox-transferring-data-from-maps-googleapis-com https://developers.google.com/maps/documentation/javascript/tutorial#Loading_the_Maps_API However, for me, I just needed to move from $( document ). ready (function () {                     initializeMap(); ...

It's not uncommon to want to add a separator dot or comma to improve visuals on a big number. Here is how. function getValueWithThousandDot(value) { var newValue = value.toString(); b = "."; position = 3; if (newValue.length >= 4) { newValue = [newValue.slice(0, newValue.length - position), b, newValue.slice(newValue.length - position, newValue.length)].join(''); } return newValue; }

Problem: When downloading files with xhr (xml http request) we need to set a callback to the onreadystatechange property, which does not allow sending arguments such as the current url being downloaded (which also can't be retrieved from the xhr instance). This is usually an issue when downloading multiple files, and specially when we want to maintain the file names. Solution: Use "closures" by immediately defining the function on the onreadystatechange property and calling a method inside it, instead of using a callback (e.g. onreadystatechange=mycallback; ). string url = "http://myurl.com/myfile.extension"; Client = new XMLHttpRequest();             if (Client) {                 Client.onreadystatechange = function () {                     readyStateCallBa...

Here's a simple script, nice to have around. It gets ONE ul element, that is below a top ID element, and adds a class to it.

JavaScript language "IDE" Page http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_replace3

<script type="text/javascript"> var today = new Date(); var d = today.getDate(); var m = today.getMonth(); var y = today.getFullYear(); var months = new Array("January", "February", "March", "April", "May", "June", "Jully", "August", "September", "October", "November", "December"); datestr = months[m] + " " + d + ", " + y; document.write(datestr); </script> This displays always "Month Day, Year", regardless of user browser language, or system regional settings. The code can be added in-line, where it is needed within the html.

<input type="button" value="Cancelar" onClick="history.back()" /> credits http://www.comptechdoc.org/independent/web/cgi/javamanual/javahistory.html

In SharePoint sites language 2070 (PT-PT), login welcome message is "Bem-vindo a [DOMAIN\USER]" we can change this message with javascript, finding the Menu ID of the link button. _spBodyOnLoadFunctionNames.push("welcomeBemVindo"); function welcomeBemVindo() { var re= new RegExp('_Menu','g') var el = document.getElementsByTagName('a'); for(var i=0;i { if(el[i].id.match(re)) { var content = document.getElementById(el[i].id); content.innerHTML = content.innerHTML.replace("Bem-vindo a", "Bem-vindo"); } } } the id is dynamic, so we have to use a regular expression to get it. usually it is zz8_Menu but it can change for other pages

So you want to change the properties of a control, such as button "btnPost". Seems rufly easy to accomplish, unless SharePoint, DotNetNuke or other environment decides to change the ID property of the control, adding internal IDs. Like this: ctl00_m_g_d14f2004_461a_4c76_9224_70143135d269_btnGen So how do you change, say, the display option of the control, to make it visible or hidden? The trick is to make a function that looks for the control, given a regular expression. btnGen.Attributes.Add("onclick", "this.style.display='none';var re = new RegExp('btnPost', 'g');var elems = document.getElementsByTagName('*'), i = 0, el;while (el = elems[i++]){if (el.id.match(re)){document.getElementById(el.id).style.display='';location.href='" + url + "';}}"); //hide button I must say, creadits to make this possible go to Kor's postings on webdeveloper.com , where we can find the complete function.