How To Get Effective Z-Indexes on All Elements On A Page

Sometimes you need to know what z-Index to set on a positioned element in order for it to really be on top of everything. If you own the whole page, that’s easy to manage, but when working on a page shared with other scripts that you don’t control, you need a way to tell what are elements have z-Index set.

You can run this in the console to get a list of all elements that have z-Index set and the corresponding elements:

document.querySelectorAll('*').forEach(e=>{const s = getComputedStyle(e);if (s.zIndex !== 'auto') console.log(s.zIndex, e)})

Or you can define a function that you can call dynamically when you need to get the current largest z-Index:

function largestZIndex() {
    let z = 0;
    document.querySelectorAll(‘*’).forEach((e) => {
        const s = getComputedStyle(e);
        if (s.zIndex !== ‘auto’ && +s.zIndex > z) {
            z = +s.zIndex;
    return z;


How To Change UserCustomAction in SharePoint with Javascript (JSOM)

If you customized some part of SharePoint with a User Custom Action, Location=Scriptlink and need to update the js file at some point, having users use the new version is achieved by changing the scriptSrc. Otherwise, the old version of the JS file is cached by the browser even after F5. Only a SHIFT+F5 would refresh it to the new version. To avoid having all users the pain, you can easily update the path to you js by adding some date code in the path, like http://path-to-file/siteassets/file.js?v=2017112702

var ideaCtx = SP.ClientContext.get_current();
var web = ideaCtx.get_web();
var oCustomActions = web.get_userCustomActions();
function () {
var enumerator = oCustomActions.getEnumerator();
while (enumerator.moveNext()) {
// first log all Custom Actions to identify the one you want to delete
console.log(enumerator.get_current().get_title() + " -> " + enumerator.get_current().get_location() + ' -> ' + enumerator.get_current().get_scriptSrc());
var ca = oCustomActions.getItemAtIndex(IDENTIFIED_ZERO_BASED_INDEX_IN_ABOVE_ENUM); // choose this after
function () { console.log('CA modified'); },
function (sender, args) { console.log(args.get_message()); }
function (sender, args) { console.log(args.get_message()); });

SharePoint – Cannot change hidden attribute for this field

In case you ever provisioned a Title field with the property Hidden=TRUE, and you need to set it to Hidden=FALSE later, you end up with this enchanting error:

Cannot change hidden attribute for this field

There are a couple of articles that suggest using PowerShell and Reflection, but if you like a pure web / JS solution, here it is:

Get the current SchemaXML for the field. In Chrome, while viewing a list, run the following line by line (the executequeryasync being async, you would need to use a callback if you wanted to run all commands as a block)

let myctx = SP.ClientContext.get_current()
let field = myctx.get_web().get_lists().getByTitle('List 1').get_fields().getByInternalNameOrTitle('Title')
myctx.load(field, 'SchemaXml')
myctx.executeQueryAsync(()=>console.log('success'), (a,error)=>console.log('error',error))

(wait for success here, should take max 1s)


(change Hidden=”FALSE” in this string and use it in the set_SchemaXml command)

field.set_schemaXml(`previous string with Hidden="FALSE" instead of TRUE`)
myctx.executeQueryAsync(()=>console.log('success'), (a,error)=>console.log('error',error))

That’s it, your field is visible now

SharePoint – Changing JSLink property for a Content Type with REST

JSLink is a way to attach custom JavaScript code to run when the object it is attached to is shown on the page. For example, if setting the JSLink property on a field, the JS file(s) will be executed whenever that field is shown in a view or in a form.

JSLink property can be set on:

  • Fields
  • Content Types
  • Views

Although the JSLink property can be specified in a list schema for the list forms, the JSLink value gets attached to the form’s web part instead of being a property.

Coming back to fields, content types and views, JSLink property can be set declaratively in the XML and can also be changed later with REST and JSOM. This article will show you how to set or change the JSLink property of a list content type (copy of a content type applied to a list). You can run this in Chrome Console on a SharePoint page:

fetch("https://webAbsoluteUrl/_api/lists/getbytitle('List Title')/contenttypes('<content_type_id>')",
{"method": "POST",
"credentials": "include",
"body": JSON.stringify({"__metadata": { "type": "SP.ContentType" }, "JSLink": "~sitecollection/Style Library/js/file.js?rev=2017050801"})
"accept": "application/json;odata=verbpse",
"X-RequestDigest": document.querySelector('#__REQUESTDIGEST').value}

Versions of SharePoint: 2013, 2016

Moving from event receivers to workflows in SharePoint Online (Office 365)

As Microsoft announced at end of July 2016 that coded sandbox solutions will stop working, any existing event receivers must be moved to one of:

  • Remote event receiver in a provider hosted app
  • Workflow
  • JavaScript that runs on the New or Edit forms

Each has advantages and drawbacks, so you would plan ahead. Actually at the time of writing, transitioning from existing working coded sandboxed solutions is very rough because coded sandboxed solutions cannot be activated anymore, making testing in a site collection separate from production impossible.

This post only touches lightly the subject, so if you need help, please contact us and we’ll try to give a hand.

Remote event receiver in a provider hosted app

This would probably be the most robust option, but also the most complex and one that requires additional hosting costs. Also, the fact that that the service must pe SOAP would probably push back a lot of people.


Workflows can be set to start automatically on a new item or when an item is changed, so this would make for a good substitute. Only thing is that we don’t have synchronous capabilities like an event receiver could have been, so we need to analyze if a workflow is suitable.

There are two main type of workflows when it comes to development tools: SharePoint Designer workflows and Visual Studio workflows. Apart from the tooling, there’s an important distinction between them which is very important in our scenario: performance. VS workflows are way faster and kick off without delay, whereas Sharepoint Designer ones tend to take their time, making for a laggy experience. So if you’re comfortable with VS, you’d definitely choose it.

JavaScript that runs on the New / Edit forms

Actually one might need to combine this option with the previous one to achieve what was so simple to do in an event receiver.

In order to to this, you would most probably set the JSLink of forms.

How To Create a QR Code Small Enough To Fit on The Front of Your Business Card

zazzle_businesscardEven though many consider paper business cards obsolete and prefer to connect directly by social networks, it’s still very common to see people exchanging that old piece of paper called a business card. And while it’s handy to pop it out when you get at the office and write an e-mail with that meeting minute, it would still be very handy to be able to accurately import all contact data into your smartphone’s contacts. There are a lot of apps these days that try to OCR names, phone numbers and addresses, but to be honest, they are all slow and error prone.

What if you could just enter all data from the printed business card into your phone in a snap with no error what so ever? Well, you can! At least if your peers will also read this article 🙂

It only takes 2 minutes and can also be accomplished company wide using Excel or a Google Sheet.

The trick is for people to create a virtual contact card on their computer or simply create a new contact with their own details on their smartphone and share that by e-mail to create the virtual contact card. The file would normally have a .vcf extension and is easily recognized by major e-mail clients on PCs and by the OS on your smartphone.

Then you upload the yourname.vcf file on whatever cloud service you’re using and share it with a link (most cloud storage providers allow you to share by link, while still keeping it unlisted).

Next, you shorten that link using a .. duh! shortener service like or

Finally, you create a QR code from the shortened URL with a free service like and you put the generated QR code on your business card.

The traditional way of creating a QR code for business cards was to actually embed all contact details in the QR, which resulted in a very big QR code that was pretty hard to fit and read from a business card.

In conclusion, the steps are:

  1. Create a .vcf with all your contact details, even your picture if you like
  2. Upload the yourname.vcf file to Dropbox, Google Drive, OneDrive, whichever you like and share it by link
  3. Shorten the link
  4. Generate the (really small) QR on and put it on your card
  5. Share this post so that you increase the chance that people will have the QR code on their business card next time 🙂


Show or hide fields in list forms in SharePoint 2013, SharePoint Online (Office 365)

Using Visual Studio at provision time, you can set the properties in the list’s Schema.xml:
<Field Name=”SomeField” ShowInDisplayForm=”FALSE” ShowInNewForm=”FALSE” ShowInEditForm=”FALSE” ShowInViewForm=”FALSE”></Field>

Though, if you later need to update these properties for an already deployed field, you can do this using JavaScript (JSOM). Just navigate with your browser to any list in the site, open the console and run:

var ctx = SP.ClientContext.get_current(),
  field = ctx.get_web().get_lists().getByTitle('MyList').get_fields().getByInternalNameOrTitle("MyField");
field.setShowInDisplayForm(false); // false to hide, true to show

ctx.executeQueryAsync(function() { console.log('Field updated');},
                      function(sender, args) {
                          console.log('Eroare: ', args.get_message());

How To Remove a Custom Action At Web Level With JSOM in SharePoint

var ideaCtx = SP.ClientContext.get_current();
var web = ideaCtx.get_web();
var oCustomActions = web.get_userCustomActions();
function () {
    var enumerator = oCustomActions.getEnumerator();
    while (enumerator.moveNext()) {
        // first log all Custom Actions to identify the one you want to delete
        console.log(enumerator.get_current().get_title() + " -> " + enumerator.get_current().get_location());                
    var ca = oCustomActions.getItemAtIndex(theRightIndex); // choose this after 
    function () { console.log('CA deleted successfully'); },
    function (sender, args) { console.log(args.get_message()); }
function (sender, args) { console.log(args.get_message()); });

How To Enforce Uniqueness of Records Based on Two or More Columns in SharePoint

Applies to: SharePoint 2013, SharePoint Online (Office 365) wave 15 and 16.

As you probably already know, you can set one field at a time to be unique.

If you require records to be unique based on more columns, there’s no build in way of checking this option either in UI or declaratively, and while you could code some event receiver to check for uniqueness and cancel new items, we’ll show you a  much simpler way of doing it which will stand for both new items and updating items.

All you have to do is create a new calculated column which is based on the required columns and set it as unique. You won’t be able to do this in the UI if the columns you want to based the calculated column are lookup columns, so you would need to do it declaratively in Visual Studio or with code: JS in page or C# in a feature receiver.

The message that the user gets when trying to create an item that is not unique is “Cannot create item because field [Calculated-Field-Name] is not unique”. Unfortunately, users get this message only when trying to add a new item in datasheet mode, so if you need to warn users on the new form, additional checks must be done, as at the moment, SharePoint doesn’t throw any warning, it simply doesn’t add the record.

SharePoint 2013 – How to Change the text of the First Link in Global Navigation

If you’re using the global navigation in SharePoint, you noticed that the first link is always named after the name of the site and links to home. There’s no way you can change the text of this link to say for example “Home” or “Homepage” or “Landing” from the UI without changing the name of the site. Problem is that if you change the name of the site to “Homepage” for example, you’ll end up receiving notification e-mails which appear to come from Homepage <> which is weird at least.

What you can do instead is use CSS to hide the name of the site and show whatever text you need.

This is the CSS:


/* Change the Home link in Global Navigation*/
#DeltaTopNavigation>div>ul>li:first-of-type>a>span:first-of-type>span:first-of-type {
  font-size: 0px;

#DeltaTopNavigation>div>ul>li:first-of-type>a>span:first-of-type>span:first-of-type::after {
  font-size: 13px;
  content: "Homepage";

and you can apply it in a feature receiver like this:

using (SPWeb web = properties.Feature.Parent as SPWeb)
  string linkBase = web.Url + "/";
  linkBase = linkBase.Substring(linkBase.IndexOf("/", 8));
  // alternate CSS
  web.AlternateCssUrl = linkBase + "SiteAssets/your-css-file.css";