See the Github repository I created about it.

To remove this behavior, and load the webpart as soon as possible, you must declare your webpart as a dynamic data source.

Here is the minimal code example (in pure JS, not in TS):

import { BaseClientSideWebPart } from '@microsoft/sp-webpart-base';
import { DisplayMode } from '@microsoft/sp-core-library';

export default class HtmlViewerWebPart extends BaseClientSideWebPart {
  constructor() {
    super();
    // the below is used by the dynamic data source to avoid lazy loading
    this._sourceId = 'my_webpart';
  }

  onInit() {
    // to avoid lazy loading of the webpart, we register it as a dynamic data source
    // we only need to do it during the Edit of the page
    if (this.isPageInEditMode() && this.context.dynamicDataSourceManager) {
      this.context.dynamicDataSourceManager.initializeSource(this);
      console.log('Dynamic Data Source initialized to avoid lazy loading.');
    }
    
    return Promise.resolve();
  }

  isPageInEditMode() {
    return this.displayMode === DisplayMode.Edit;
  }

  // we need to declare this method because it's used by the data source to avoid lazy loading
  getPropertyDefinitions() {
    return []
  }

  // we need to declare this method because it's used by the data source to avoid lazy loading
  getPropertyValue(propertyId) {
    return propertyId;
  }
}

Then, edit the page, which will trigger the dynamic data source registration, and publish it.

Let’s define the properties:

@property --_x {
  syntax: "<number>";
  inherits: true;
  initial-value: 0; 
}
@property --_y {
  syntax: "<number>";
  inherits: true;
  initial-value: 0; 
}
@property --w {
  syntax: "<integer>";
  inherits: true;
  initial-value: 0; 
}
@property --h {
  syntax: "<integer>";
  inherits: true;
  initial-value: 0; 
}

Then, let’s find an element that is a common parent for both the element where we’ll calculate the height/width, and the element that will use this height/width, and we apply some CSS:

.parent {
  timeline-scope: --cx,--cy;
  --w:calc(1/(1 - var(--_x)));
  --h:calc(1/(1 - var(--_y)));
  animation: x linear,y linear;
  animation-timeline: --cx,--cy !important;
  animation-range: entry 100% exit 100%;
}

We finish up with some additional CSS:

.get-dimension {
  overflow: hidden;
  position: relative;
}
.get-dimension:before {
  content:"";
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  aspect-ratio: 1;
  view-timeline: --cx inline,--cy block;
}
@keyframes x {to{--_x:1}}
@keyframes y {to{--_y:1}}

And finally, we can use --w and --h in the other element:

.apply-dimension {
  height: calc(var(--h)*1px);
  width: calc(var(--w)*1px);
}

Here is a demo:

Pour éviter cela, il faut prendre quelques précautions.

Type “SPF”

Tout d’abord, il faut ajouter une entrée SPF via le gestionnaire de domaine d’OVH. Le wizard va aider à composer la chaine qui sera enregistrée pour le domaine.

Il faudra fournir :

• L’IPv4 du serveur qui envoie les emails
• L’IPv6 du serveur qui envoie les emails
• Inclure le MX d’OVH (include:mx.ovh.com)

Au final, le champ SPF devrait ressembler à ça :
300 IN TXT "v=spf1 a mx ip4:1.2.3.4 ip6:2001:41d0:a:abcd::1/128 include:mx.ovh.com -all"

Type “DKIM”

Cette fois on va ajouter une entrée de type “DKIM”.

Il faudra utiliser https://dkimcore.org/tools/ et :

• Le sous domaine est fourni par l’outil (exemple : 1547992053.kodono._domainkey)
• Choisir la version “DKIM 1”
• Type de clé : RSA
• La clé publique générée par l’outil dkimcore

Au final, le champ DKIM devrait ressembler à ça :
1547992053.kodono._domainkey.kodono.info. 0 DKIM v=DKIM1;k=rsa;p=MIGfMA0GCSqGSIb3DQE...anzmm2RIpt0tV3gwTGwuLQIDAQAB;t=s;

On pourra ensuite utiliser https://github.com/louisameline/php-mail-signature qui est une librairie PHP et qui aide à signer les emails qu’on envoie en PHP.

Type “DMARC”

Enfin, on ajoute une entrée de type “DMARC”.

Il faudra utiliser :

1. Le sous-domaine doit être _dmarc
2. Règle pour le domaine : none

Au final, le champ DMARC devrait ressemble à ça :
_dmarc.kodono.info. 0 DMARC v=DMARC1; p=none;

Ajout d’un reverse

Il va falloir ajouter un reverse (PTR) pour l’IPv4 et l’IPv6 du serveur. Cela se fait via la console de votre serveur (par exemple via le site Kimsufi si votre serveur est là bas).

Tester

Une fois vos emails créés, vous pouvez les tester grâce aux sites https://www.mail-tester.com/ et https://dkimvalidator.com/

Sources :

• https://blogs.msdn.microsoft.com/iliast/2016/11/10/how-to-emulate-raspberry-pi/
• https://enavarro.me/emuler-un-raspberry-pi-avec-qemu.html

Voici les étapes :

1. Télécharger la dernière version disponible de QEMU sur le site https://qemu.weilnetz.de/w32/ (par exemple qemu-w32-setup-20171211.exe au moment où j’écris cet article)
2. Une fois téléchargé, on va faire un clique-droit et dézipper qemu-w32-setup-20171211.exe vers qemu-w32-setup-20171211
3. Télécharger la dernière version de Raspbian via https://www.raspberrypi.org/downloads/raspbian/ dans le répertoire qemu-w32-setup-20171211/ (ou via ce lien https://downloads.raspberrypi.org/raspbian_latest) (par exemple je prends la version lite qui se nomme 2017-11-29-raspbian-stretch-lite.zip)
4. Télécharger le kernel dans le répertoire qemu-w32-setup-20171211/ via https://github.com/dhruvvyas90/qemu-rpi-kernel (par exemple j’ai pris kernel-qemu-4.4.34-jessie)
5. On va immédiatement agrandir la taille de notre image de 5G (pour éviter d’avoir des problèmes d’espace disque plus tard). Pour cela on va se rendre dans le dossier qemu-w32-setup-20171211/ avec CMD et on va taper : qemu-img.exe resize 2017-11-29-raspbian-stretch-lite +5G
6. On peut lancer l’émulation avec la commande (voir tous les paramètres disponibles) : qemu-system-arm.exe -kernel -cpu arm1176 -m 256 -M versatilepb -serial stdio -append "root=/dev/sda2 panic=1 rootfstype=ext4 rw" -drive "file=,index=0,media=disk,format=raw" -redir tcp:2222::22
   (ce qui va donner chez moi : qemu-system-arm.exe -kernel kernel-qemu-4.4.34-jessie -cpu arm1176 -m 256 -M versatilepb -serial stdio -append "root=/dev/sda2 panic=1 rootfstype=ext4 rw" -drive "file=2017-11-29-raspbian-stretch-lite.img,index=0,media=disk,format=raw" -redir tcp:2222::22)
7. Si tout se passe comme prévu l’image devrait démarrer et arriver jusqu’à vous demander un login (pi) et pass (raspberry) … Attention, par défaut c’est un clavier QWERTY qui est appliqué, il faut donc taper rqspberry pour le password.
8. On va passer le clavier en français en tapant : sudo apt-get install console-data, puis sudo sudo dpkg-reconfigure console-data
   On choisit select keymap from fullist puis pc / azerty / French / Same as X11 (latin 9) / Standard.
9. Si le clavier continue à être en anglais, taper : sudo dpkg-reconfigure keyboard-configuration en sélectionnant le clavier par défaut proposé, puis pour la langue, choisir Other puis French, et ensuite les propositions par défaut.
   Et finalement la commande : sudo setupcon
10. On va maintenant finir d’agrandir notre partition. Pour cela on tape : sudo fdisk /dev/sda et on suit les instructions ci-dessous :
    • On affiche la table des partitions avec la lettre “p”. On va noter le chiffre qui apparait dans la colonne Start pour la deuxième ligne (celle qui correspond à la partition de type Linux) (chez moi cela vaut 94208)
    • On efface la partition principale avec la lettre “d” (cela devrait être la 2)
    • On crée une nouvelle partition avec la lettre “n”, puis on choisit primary avec “p” et la position “2”
    • Pour le premier secteur on va utiliser la valeur trouvée précédemment (94208 pour moi)
    • On appuie sur “Enter” pour le last sector (pour utiliser la valeur proposée)
    • À la question Do you want to remove the signature?, répondre “N”
    • On écrit la table de partition avec “w”
    • Puis on reboot avec sudo shutdown -r now
    • Après le reboot on va terminer par : sudo resize2fs /dev/sda2
11. Maintenant on va augmenter la taille du swap : sudo nano /etc/dphys-swapfile où on va remplacer CONF_SWAPSIZE=100 par CONF_SWAPSIZE=1024
12. On redémarre le service avec : sudo /etc/init.d/dphys-swapfile stop puis sudo /etc/init.d/dphys-swapfile start

Maintenant l’émulateur est prêt à être utilisé. Se reporter aux deux sources fournies en début d’article pour plus de détails et des options supplémentaires !

You could use a webservice to change the ReadOnly property in order to overwrite its value.

Using SharepointPlus the code is:

// don't change the below information
// the details about this field are found using $SP().list().info
var updateSystemFields = "" +
    '' +
    '' +
    "" +
    "";
// send the request to the server
$SP().webService({
  webURL: "https://website.url.com/",
  service: "Lists",
  operation:"UpdateList",
  properties:{
    listName: "Name of the list",
    listProperties: "",
    updateFields: updateSystemFields,
    newFields: "",
    deleteFields: "",
    listVersion: "",
  }
})

I wanted to use an ASP page to get a remote page. However I needed to pass some NTLM authenticate to it.

After a few searches I found this solution:

<%
' I want this page to be accessible for Cross Domain, especially from http://my.company.com (using JavaScript)
Response.AddHeader "Access-Control-Allow-Origin", "http://my.company.com"
Response.AddHeader "Access-Control-Allow-Credentials", "true"

' get "url" from the parameters
set REMOTE_FILE_URL=Request.QueryString("url")

If REMOTE_FILE_URL <> "" Then
  ' You could use MSXML2.ServerXMLHTTP but you would have to hardcoded the login/password
  ' Example:
  '    Set http = Server.CreateObject("MSXML2.ServerXMLHTTP.6.0")
  '    http.open "GET", REMOTE_FILE_URL, False, "domain\user_name", "Password"
  ' So here we'll use "WinHttp.WinHttpRequest.5.1" that will pass the IIS' credentials
  set http = CreateObject("WinHttp.WinHttpRequest.5.1")
  http.SetAutoLogonPolicy 0

  ' we can define timeouts (http://msdn.microsoft.com/en-us/library/windows/desktop/aa384061(v=vs.85).aspx)
  ' http.SetTimeouts(resolveTimeout, ConnectTimeout, SendTimeout, ReceiveTimeout)
  ' example: http.SetTimeouts 60000, 60000, 60000, 60000

  ' we can add some headers to the request that will be done by the server
  ' http.SetRequestHeader "Content-type", "application/json"

  ' multiple options can be defined
  ' https://msdn.microsoft.com/en-us/library/windows/desktop/aa384108(v=vs.85).aspx
  ' examples:
  ' to define the user agent: http.Option(0) = "Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.1; Trident/6.0)"
  ' to ignore ssl errors: http.Option(4) = 13056

  ' if you use a proxy
  http.SetProxy 2, "proxy:80"

  ' method: open(http method, absolute uri to request, async (true: async, false: sync)
  http.open "GET", REMOTE_FILE_URL, False
  http.send

  'Response.AddHeader http.GetAllResponseHeaders
  Response.write http.responseText
Else
  Response.write "Parameter 'url' not provided."
End If
%>

Here I use the URL parameter url to call that specific page.

However you cannot use the same trick to preview a file into the browser with WopiFrame.aspx. But there is a way to do it, using the parameters into the URL.

Let’s say the url to preview your document is:
https://my.company.com/sharepoint/_layouts/15/WopiFrame.aspx?sourcedoc=/files/Demo.docx&action=default

You need to replace action=default with action=embedview, AND you need to call WopiFrame2.aspx instead of WopiFrame.aspx (which will lead to a Something Went Wrong - Sorry, you don't have access to this page).

So the URL to use for your iframe will be:
https://my.company.com/sharepoint/_layouts/15/WopiFrame2.aspx?sourcedoc=/files/Demo.docx&action=embedview

Below is a way to do it by using jQuery and SharepointPlus. It will hide the “Specify your own value” stuff, and add the old value (if any) into the dropdown selection.

For example if you have a Choice field with options “A”, “B”, “C”. Your item ID #1 has value “B”.
After a while you decide to delete “B” and add “D”, but you want to be able to find items with the “B” value.
So you choose “Choice with Fill-In” and apply the below code:

// For flexibility reasons we create them as a Choice with Fill-In option,
//    however we hide the free text field and we show only the dropdown
//    in case of the fill-in has a value, then we add it into the list of options
$SP().formfields(["My Fist Dropdown", "Another One"]).each(function() {
  var $e = this.elem();
  // hide all except the dropdown
  //$e.not('select').hide().filter(':radio:last').closest('tr').hide(); // SP2010
  $e.eq(0).closest('table').find('tr:gt(0)').hide(); // SP2013
  // if we have a value into the fill-in box, then:
  //   - add it into the options
  //   - when another value is selected we check the first checkbox
  var fillValue = $e.last().val();
  if (fillValue) {
    $e.filter('select').append('<option data-fillin="true">'+fillValue+'</option>').each(function() {
      var $this=$(this);
      $this.find('option:last').prop("selected", true);
      $this.removeAttr("onclick").on('change', function(event) {
        var $opt = $(this).find(':selected');
        if ($opt.data("fillin")) {
          $e.filter(':radio:last').prop("checked", true);
        } else {
          $e.filter(':radio:first').prop("checked", true);
        }
      });
    });
  }
})

So now, if you create a new item you’ll see a dropdown with “A”, “C”, and “D” only.
But if you edit your item #1, you’ll have a dropdown with “A”, “C”, “D” and “B”.

// we need to make sure sp.core.js is loaded
SP.SOD.executeOrDelayUntilScriptLoaded(function() {
  window.UploadFinishFunc=function(b, a) {
    typeof g_currentControl.postUploadFunc == "function" && a.status != UploadStatus.CANCELLED && g_currentControl.postUploadFunc(a.files);
    a.status != UploadStatus.CANCELLED && myPostUploadFunc(a);
    g_currentControl.status = ControlStatus.UPLOADED;
    UpdateProgressBar(ProgressMessage.UPLOADED, a);
    RefreshResult(a);
    g_currentControl.status = ControlStatus.IDLE
  }
}, 'sp.core.js');
SP.SOD.executeFunc('sp.core.js')

// below is the function that will be called
function myPostUploadFunc(data) {
  console.log("myPostUploadFunc => ",data)
}

Here is the result:

// source: https://www.eliostruyf.com/adding-a-custom-action-to-a-callout-in-sharepoint-2013/
// add a special callout action for our library
SP.SOD.executeFunc("callout.js", "Callout", function () {
  var itemCtx = {};
  itemCtx.Templates = {};
  itemCtx.BaseViewID = 'Callout';
  // Define the list template type
  itemCtx.ListTemplateType = 101;
  itemCtx.Templates.Footer = function (itemCtx) {
    // context, custom action function, show the ECB menu (boolean)
    return CalloutRenderFooterTemplate(itemCtx, AddCustomAction, true);
  };
  SPClientTemplates.TemplateManager.RegisterTemplateOverrides(itemCtx);
});

function AddCustomAction (renderCtx, calloutActionMenu) {
  var itemIndex = renderCtx.CurrentItemIdx
  // Add your custom action
  calloutActionMenu.addAction(new CalloutAction ({
    text: "Custom Action",
    tooltip: 'This is your custom action',
    onClickCallback: function() {
      // all the data related to your item are into `renderCtx.ListData.Row[itemIndex]`
      console.log('Callback from custom action');
    }
  }));
  // re-add EDIT action
  calloutActionMenu.addAction(new CalloutAction ({
    text: "Edit",
    onClickCallback: function(event) {
      // use the default action we have when clicking on the filename into the library
      // or call the EditForm if it's a list item and not a library
      DispEx(this, event,'TRUE','FALSE','FALSE','SharePoint.OpenDocuments.3','1','SharePoint.OpenDocuments','','1https://your.sharepoint.com/_layouts/15/WopiFrame.aspx?sourcedoc='+renderCtx.ListData.Row[itemIndex].FileRef+'&action=default','','1','0','0','0x7fffffffffffffff')
    }
  }));
}

It might also be interesting to look at Intersection Observer that is now available in most browsers, and there is also a polyfill.

const observer = new IntersectionObserver((entries, observer) => {
  entries.forEach((entry) => {
    let isVisible=(entry.intersectionRatio===1);
  });
}, {threshold:1});
observer.observe(document.querySelector('#element');

END EDIT

I have this specific need that is to trigger an event when an element becomes visible/invisible into a scrollable area. Here is the code I came to:

/**
 * Create the handler
 * @param {NodeElement} holder The scrollable area to monitor (where the 'scroll' event will be apply)
 */
var VisibleEventListener = function(holder) {
  var _this=this;
  _this.started = false;
  _this.holder = holder;
  // detect if an element is visible
  _this.isScrolledIntoView=function(el) {
    var bndElem = el.getBoundingClientRect();
    var bndHolder = _this.holder.getBoundingClientRect();
    return bndElem.top <= bndHolder.top ? !(bndHolder.top - bndElem.top > bndElem.height) : !(bndElem.bottom - bndHolder.bottom > bndElem.height);
  }
  // permits to deal with the scroll
  _this.scrollHandler=function(e) {
    for (var i=0, len=_this.events.length; i<len; i++) {
      _this.events[i].check();
    }
  }
  _this.events=[];
}
/**
 * Add the visible/invisible event for an element into a scrollable area
 * @param {NodeElement}   element  The element to test
 * @param {String}   listener 'visible' or 'invisible'
 * @param {Function} callback The callback function to be called when the event is triggered
 */
VisibleEventListener.prototype.add = function(element, listener, callback) {
  var _this=this;
  var ElementToMonitor=function(element, listener, callback) {
    this._super=_this;
    this.element=element;
    this.isVisible=false;
    this.callback=callback;
    this.listener=listener;
  }
  ElementToMonitor.prototype.check = function() {
    var visible=this._super.isScrolledIntoView(this.element);
    if (visible && !this.isVisible) { // becomes visible
      this.isVisible=true;
      if (this.listener==='visible') this.callback.call(this.element)
    } else if (!visible && this.isVisible) { // becomes invisible
      this.isVisible=false;
      if (this.listener==='invisible') this.callback.call(this.element)
    }
  };
  var etm=new ElementToMonitor(element,listener,callback);
  _this.events.push(etm);
  // if we have started to monitor
  if (_this.started===true) etm.check();
}
VisibleEventListener.prototype.start = function() {
  this.holder.addEventListener('scroll', this.scrollHandler);
  this.started = true;
  // trigger the check to verify if the elements are already visible
  this.scrollHandler();
}
VisibleEventListener.prototype.stop = function() {
  this.holder.removeEventListener('scroll', this.scrollHandler);
  this.started = false;
}

And to use it:

// initiate our area with VisibleEventListener
var vel = new VisibleEventListener(document.querySelector('#s4-workspace'));
// add the elements to monitor
vel.add(document.querySelector('.slideshow'), 'invisible', function() {
  console.log(this,' is now invisible')
})
vel.add(document.querySelector('.slideshow'), 'visible', function() {
  console.log(this,' is now visible')
})
// start the monitoring
vel.start();

function PromiseChain(arr, fct) {
  var dfd = Promise.resolve();
  var res = arr.map(function(item,idx) {
    dfd = dfd.then(function() {
      return fct(item,idx)
    });
    return dfd
  });
  return Promise.all(res)
}

// for short version:
// function PromiseChain(n,r){var e=Promise.resolve(),i=n.map(function(n,i){return e=e.then(function(){return r(n,i)})});return Promise.all(i)}

And an example about how to use it:

function promFunc(key) {
  return new Promise(function(prom_res) {
    setTimeout(function() { prom_res(key) }, 1000);
  })
}

PromiseChain(["a", "b", "c"], function(val, idx) {
  console.log(idx, val);
  return promFunc(idx+"_"+val);
})
.then(function(res) {
  console.log(res);
})

// result:
// 0 a
// 1 b
// 2 c
// Array [ "0_a", "1_b", "2_c" ]

In my case the one that worked is this code.

Below you’ll find a compressed version of the extend() function (with a fix):

function extend(){var r,t,n,o,e=arguments[0]||{},f=1,i=arguments.length,u=!1,y=function(r){if(null===r||"object"!=typeof r||r.nodeType||null!==r&&r===r.window)return!1;try{if(r.constructor&&!this.hasOwnProperty.call(r.constructor.prototype,"isPrototypeOf"))return!1}catch(t){return!1}return!0};for("boolean"==typeof e&&(u=e,e=arguments[f]||{},f++),"object"!=typeof e&&"function"!=typeof e&&(e={}),!1;i>f;f+=1)if(null!==(r=arguments[f]))for(t in r)e!==r[t]&&"undefined"==typeof e[t]&&(u&&r[t]&&(y(r[t])||(n=Array.isArray(r[t])))?(n?(n=!1,o=e[t]&&Array.isArray(e[t])?e[t]:[]):o=e[t]&&y(e[t])?e[t]:{},e[t]=extend(u,o,r[t])):void 0!==r[t]&&(e[t]=r[t]));return e}

And here an example:

var object_a = {
    value_1: 'a',
    value_2: true,
    value_3: 354,
    value_4: [
      'x',
      'y',
      'z'
    ],
    value_5: {
      I: 'I',
      II: 'II',
      III: 'III',
      IV: {
        a: 'A',
        b: 'B'
      },
      V: [
        'elm', {
          5: 'five'
        },
        ['my_array']
      ]
    },
    value_6: function() {
      return "pouet"
    },
    value_7: new Date(2017, 0, 1)
  };
var object_b = {};
// clone object_a into object_b
extend(true, object_b, object_a);
object_a.value_2 = false;
object_a.value_1 = "b";
console.log("A => ", object_a);
console.log("B => ", object_b);

To verify the PermMask against the different level of permissions you can proceed with the below method (using functions from core.js):

var permMask = '0x1b03c4313ff';
var permissions = new SP.BasePermissions();
permissions.initPropertiesFromJson({High:GetPermMaskH(permMask), Low:GetPermMaskL(permMask)});
// we can now check permissions using SP.BasePermissions.has()
// and we can compare with SP.PermissionKind — see https://msdn.microsoft.com/en-us/library/office/ee556747(v=office.14).aspx
var canEdit = permissions.has(SP.PermissionKind.editListItems);

On Sharepoint 2010 GetPermMaskH and GetPermMaskL are not defined, so here is their code:

function GetPermMaskH(b) {
    var a = b.length;
    return a <= 10 ? 0 : parseInt(b.substring(2, a - 8), 16)
}

function GetPermMaskL(b) {
    var a = b.length;
    return a <= 10 ? parseInt(b) : parseInt(b.substring(a - 8, a), 16)
}

It took me many hours to find how to proceed, so I hope it will help some others.

If you want to decode those unicode strings, you can use this short code:
unescape(JSON.parse('"' + s.replace('"', '\\"') + '"'))

To change it I used the below Javascript code:

// replace the Delete Item default action when into a popup
$(document).ready(function() {
  // if it's in a popup
  if (window !== window.top) {
    $('a[id$="_toolBarTbl_RptControls_diidIODeleteItem"]').attr("href","javascript:commonDeleteItem(); return false")
  }
})
// now when clicking on the Delete item it will call my own function
// here I use http://aymkdn.github.io/SharepointPlus/ to show a waiting message and to delete the current item, and then close the modal
function commonDeleteItem() {
  $SP().waitModalDialog("Deleting...");
  $SP().list("{"+WPQ2FormCtx.ListAttributes.Id+"}").remove({ID:GetUrlKeyValue("ID")}, {
    after:function() {
      $SP().closeModalDialog();
      $SP().closeModalDialog(2);
    }
  })
}

After searching a bit about it, I found a clue that helped me to find a good solution: on Firefox/Chrome when you click on an Excel file, you’ll now have a modal asking if you want to open it in edit or readonly mode!

To achieve this result you have to insert the below Javascript code somewhere into your masterpage:

/**
 * fix problem with Excel documents on Firefox/Chrome
 * @param  {HTMLElement} p the <A> element
 * @param  {HTMLEvent} a the click event
 * @param  {Boolean} h TRUE
 * @param  {Boolean} e FALSE
 * @param  {Boolean} g FALSE
 * @param  {Strin} k the ActiveX command (e.g. "SharePoint.OpenDocuments.3")
 * @param  {Number} c 0
 * @param  {String} o the activeX command, here we look at "SharePoint.OpenDocuments"
 * @param  {String} m
 * @param  {String} b the replacement URL to the xslviewer
 */
var bak_DispEx;
var modalOpenDocument; // it will be use with the modal
SP.SOD.executeOrDelayUntilEventNotified(function() {
  bak_DispEx = _DispEx;
  _DispEx=function(p, a, h, e, g, k, c, o, m, b, j, l, i, f, d) {
    // if o==="SharePoint.OpenDocuments" && !IsClientAppInstalled(o)
    // in that case we want to open ask the user if he/she wants to readonly or edit the file
    var fileURL = b.replace(/.*_layouts\/xlviewer\.aspx\?id=(.*)/, "$1");
    if (o === "SharePoint.OpenDocuments" && !IsClientAppInstalled(o) && /\.xlsx?$/.test(fileURL)) {
      // if the URL doesn't start with http
      if (!/^http/.test(fileURL)) {
        fileURL = window.location.protocol + "//" + window.location.host + fileURL;
      }
      var ohtml = document.createElement('div');
      ohtml.style.padding = "10px";
      ohtml.style.display = "inline-block";
      ohtml.style.width = "200px";
      ohtml.style.width = "200px";
      ohtml.innerHTML = '<style>'
                      + '.opendocument_button { background-color:#fdfdfd; border:1px solid #ababab; color:#444; display:inline-block; padding: 7px 10px; }'
                      + '.opendocument_button:hover { box-shadow: none }'
                      + '#opendocument_readonly,#opendocument_edit { float:none; font-size: 100%; line-height: 1.15; margin: 0; overflow: visible; box-sizing: border-box; padding: 0; height:auto }'
                      + '.opendocument_ul { list-style-type:none;margin-top:10px;margin-bottom:10px;padding-top:0;padding-bottom:0 }'
                      + '</style>'
                      + 'You are about to open:'
                      + '<ul class="opendocument_ul">'
                      + '  <li>Name: <b>'+fileURL.split("/").slice(-1)+'</b></li>'
                      + '  <li>From: <b>'+window.location.hostname+'</b></li>'
                      + '</ul>'
                      + 'How would like to open this file?'
                      + '<ul class="opendocument_ul">'
                      + '  <li><label><input type="radio" name="opendocument_choices" id="opendocument_readonly" checked> Read Only</label></li>'
                      + '  <li><label><input type="radio" name="opendocument_choices" id="opendocument_edit"> Edit</label></li>'
                      + '</ul>'
                      + '<div style="text-align: center;margin-top: 20px;"><button type="button" class="opendocument_button" style="background-color: #2d9f2d;color: #fff;" onclick="modalOpenDocument.close(document.getElementById(\'opendocument_edit\').checked)">Open</button> <button type="button" class="opendocument_button" style="margin-left:10px" onclick="modalOpenDocument.close(-1)">Cancel</button></div>';
      // show the modal
      modalOpenDocument=SP.UI.ModalDialog.showModalDialog({
        html:ohtml,
        dialogReturnValueCallback:function(ret) {
          if (ret!==-1) {
            if (ret === true) { // edit
              // reformat the fileURL
              var ext;
              if (/\.xlsx?$/.test(b)) ext = "ms-excel";
              if (/\.docx?$/.test(b)) ext = "ms-word"; // not currently supported
              fileURL = ext + ":ofe|u|" + fileURL;
            }
            window.location.href = fileURL; // open the file
          }
        }
      });
      a.preventDefault();
      a.stopImmediatePropagation()
      a.cancelBubble = true;
      a.returnValue = false;
      return false;
    }
    return bak_DispEx.apply(this, arguments);
  }
}, "sp.scriptloaded-core.js")

// this function will do our asynchronous check
function beforeSaving() {
  var deferred=jQuery.Deferred();
  setTimeout(function() {
    alert("Test Complete!")
    deferred.reject(); // if the test failed
    // or deferred.resolve() to valid the test
  }, 2000)
  return deferred;
}
// force PostBackRequired to true in the context, otherwise it won't work if you open it into a modal
WPQ2FormCtx.PostBackRequired=true;
// we override SPClientForms.ClientFormManager.SubmitClientForm
SPClientForms.ClientFormManager.SubmitClientForm=function(b){
  var a=SPClientForms.ClientFormManager.GetClientForm(b);
  var res = (a!=null&&a.SubmitClientForm());
  // if the form is not valid, then res===true
  if (res === true) return true;
  else {
    // at this stage, all fields' value have been saved into a hidden input
    // e.g. document.querySelector('input[type="hidden"][id$="Field_x0020_Name"]')
    // all these saved values will be sent back to the server when "WebForm_DoPostBackWithOptions" is executed

    // if the form is valid we now want to do our asynchronous check
    beforeSaving().done(function() {
      // our test is valid too so we can send the form to the server
      WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions($get(WPQ2FormCtx.SubmitButtonID).name, "", true, "", "", false, true))
    }).fail(function() {
      // if it fails we just unblock the save button
      $get(WPQ2FormCtx.SubmitButtonID).disabled=false;
    })
  }
  // to make sure the form won't be submitted yet
  return true;
};

You can also add it into your masterpage to allow it everywhere on your website. Add it into your <head> block:

Now you can use postMessage() to communicate with your iframe.

Sharepoint is really annoying to limit the access to the list with more than 5,000 items… It causes many troubles, and one of them is when you use a lookup field into a form that is tied to a big list. Sharepoint will not display the field/dropdown but will show the message:

This is a lookup column that displays data from another list that currently exceeds the List View Threshold defined by the administrator

There is a solution to bypass this problem and show our lookup dropdowns.

You need:

• jQuery
• Sharepoint
• And I use Chosen to have a better dropdown

I’ll show how I did it for the EditForm.

First, copy/paste the below JavaScript code into a file that you’ll store somewhere on your Sharepoint:

// load jQuery, SharepointPlus and Chosen
var toLoad = '<script src="/Toolbox/Documents/js/jQuery/jquery-1.12.3.min.js"></script>'
           + '<script src="/Toolbox/Documents/js/SharepointPlus/3.13/sharepointplus-3.13.min.js"></script>'
           + '<link href="/Toolbox/Documents/js/Chosen/1.5.0/chosen.min.css" rel="stylesheet" type="text/css">'
           + '<script src="/Toolbox/Documents/js/Chosen/1.5.0/chosen.jquery.min.js"></script>'
document.write(toLoad);

(function() {
  var aDeferred=[];
  var modal;
  // list the fields we want to fix
  // /!\ Add here the Field ID of the fields that need to be fixed
  var lookupFieldsToFix = ["Voucher_x0020_Code", "User_x0020_Name"];
  // /!\ Specify the name of the related list, as well as the Column to retrieve
  var configurationsLookup = [{list:"Vouchers", field:"Title"}, {list:"Users", field:"Name"}];

  // this function is triggered once the form is loaded
  function allLoaded(ctx) {
    // delete all existing localStorage
    localStorage.removeItem('RequestsLookup')
    // check if our call to lists are done
    $.when.apply(this, aDeferred).done(function() {
      var save={}, count=0, i;
      for (i=arguments.length; i--;) {
        if (arguments[i]) {
          save[arguments[i].field] = arguments[i].choices; // save it as {fieldName:choices}
          count++;
        }
      }
      if (count > 0) {
        // we use localStorage
        localStorage.setItem('RequestsLookup', JSON.stringify(save));
        // now reload the page
        $SP().closeModalDialog();
        $('#aspnetForm').hide().after('<h1>Reloading...</h1>');
        window.location.reload();
      } else {
        // we use Chosen
        for (i=lookupFieldsToFix.length; i--;) {
          var e=WPQ2FormCtx.ListSchema[lookupFieldsToFix[i]];
          $(document.getElementById(e.Name+"_"+e.Id+"_$"+e.FieldType+"Field")).chosen({search_contains:true});
        }
        // and on Exam Name
        $SP().formfields("Exam Name").elem().chosen({search_contains:true});
      }
    })
  }
  
  /**
   * Fix the broken lookup fields
   * @param  {String} field Name of the field to fix
   * @return {Deferred}
   */  
  function fixLookup(field) {
    var deferred = jQuery.Deferred();
    var saved, choices=[], config;

    // we check if there is a Throttled
    if (WPQ2FormCtx.ListSchema[field].Throttled) {
      WPQ2FormCtx.ListSchema[field].Throttled=false;
      // check if we have a localStorage, if yes it means we are after the reload
      saved = localStorage.getItem("RequestsLookup");
      if (saved !== null) {
        saved = JSON.parse(saved);
        // we use the stored data to create our dropdown
        WPQ2FormCtx.ListSchema[field].ChoiceCount=saved[field].length;
        WPQ2FormCtx.ListSchema[field].Choices=saved[field];
        deferred.resolve();
      } else {
        WPQ2FormCtx.ListSchema[field].ChoiceCount=0;
        WPQ2FormCtx.ListSchema[field].Choices=[];
        // then we show a Waiting message
        if (!modal) {
          modal=true;
          $SP().waitModalDialog("Loading some data...");
        }
        // and we get data from the list
        config = configurationsLookup[SPArrayIndexOf(lookupFieldsToFix, field)];
        if (config.list) {
          $SP().list(config.list).get({fields:config.field, paging:true}, function(data) {
            var res=[];
            for (var i=data.length; i--;) {
              res.push({LookupId:data[i].getAttribute("ID"), LookupValue:data[i].getAttribute(config.field)});
            }
            deferred.resolve({field:field, choices:res});
          });
        } else deferred.resolve([]);
      }

    } else deferred.resolve();
    return deferred;
  }

  // do some actions as soon as the fields are shown
  var changeForm = {
    Templates: {
      OnPreRender:function(ctx) {
        // we want to show Voucher Code and User Name even if there are more than 5000 items in those lists
        if (SPArrayIndexOf(lookupFieldsToFix, ctx.ListSchema.Field[0].Name) > -1) {
          aDeferred.push(fixLookup(ctx.ListSchema.Field[0].Name));
        }
      },
      OnPostRender:function(ctx) {
        // only trigger when everything is loaded
        if (ctx.ListSchema.Field[0].Name === "Attachments") {
          allLoaded(ctx)
        }
      }
    }
  }
  // don't do it when editing the page
  if (GetUrlKeyValue("PageView") !== "Shared") SPClientTemplates.TemplateManager.RegisterTemplateOverrides(changeForm);
})();

Please refer to the /!\ symbol to configure two variables: only lookupFieldsToFix and configurationsLookup need to be set by you.
Note that the above code is compatible for IE8+, and all modern browsers.

Now go to the EditForm.aspx of your list. Then edit the page:

Next, edit the webpart settings:

Go to the Miscellaneous section and enter the path to your JavaScript file (created before) in the JS Link field – you can use ~site in the path:

Finally click ON, and then on Stop Editing in the ribbon.

You can now try to edit an item and the lookup fields should be fixed. Example:

NOTE

The document.write() is not really a good practice because it will delay the page load. It would be better to load asyn the JS using this tiny function. In that case you need to make sure to have only Vanilla JS in your changeForm.

Pour cela on va utiliser le logiciel HandBrake. Commencer par le télécharger puis l’installer.

1. On choisit notre fichier vidéo d’origine (ici un .mp4) en cliquant sur “Source” :
   
   
2. On choisit la destination, c’est-à-dire là où notre nouveau fichier sera sauvegardé :
   
3. On clique ensuite sur l’onglet “Subtitles” puis sur “Import SRT” et on choisit notre fichier avec l’extension “.srt” :
   
4. On choisit la langue et on coche la case “Burn In” :
   
5. Et enfin on clique sur le bouton “Start” dans la barre d’outil.

Using REST API and a call into my Workflow I’ve been able to get a list of login names (using $expand=MyUserField and $select=MyUserField/Name), then you just need to concatenate them separate by ;.

At the end you should have a string that looks like domain\login_name1;domain\login_name2;domain\login_name3; into yout To field for the email.

My attempt here is to remove some rows from the DispForm. To do so I needed to trigger an action as soon as the fields rendering has been done. After different tries, I finally came up with the PostRender option.

// https://gist.github.com/Aymkdn/98acfbb46fbe7c1f00cdd3c753520ea8
function loadExt(e,t){var s=this;s.files=e,s.js=[],s.head=document.getElementsByTagName("head")[0],s.after=t||function(){},s.loadStyle=function(e){var t=document.createElement("link");t.rel="stylesheet",t.type="text/css",t.href=e,s.head.appendChild(t)},s.loadScript=function(e){var t=document.createElement("script");t.type="text/javascript",t.src=s.js[e];var a=function(){++e<s.js.length?s.loadScript(e):s.after()};t.onload=function(){a()},s.head.appendChild(t)};for(var a=0;a<s.files.length;a++)/\.js$|\.js\?/.test(s.files[a])&&s.js.push(s.files[a]),/\.css$|\.css\?/.test(s.files[a])&&s.loadStyle(s.files[a]);s.js.length>0?s.loadScript(0):s.after()}

// verify when all scripts have been loaded
var loadExtLoaded = false;
function checkExt(ctx) {
  if (loadExtLoaded) {
    // here you can call a function that is in one of the called script
  } else {
    setTimeout(function() { checkExt(ctx) }, 50);
  }
}
loadExt([
  'file_you_want_to_load.js',
  'style_you_want_to_load.css',
  'no_cache_file.js?timestamp='+(Date.now())
], function() {
  loadExtLoaded=true;
});

(function() {
  function onLoad(ctx) {
    checkExt(ctx);
  }

  // do some actions as soon as the fields are shown
  var loadAfterForm = {
    Templates: {
      OnPostRender:function(ctx) {
         // only trigger when everything is loaded
        // --> ctx.ListData.Items[0] all the fields
        if (ctx.ListSchema.Field[0].Name === "Attachments") {
          onLoad(ctx)
        }
      }
    }
  }
  SPClientTemplates.TemplateManager.RegisterTemplateOverrides(loadAfterForm);
})();

Here is the snippet you need to add into your HTML page to get a SharePointWebControls:

<!--SPM<%@ Register Tagprefix="SharePointWebControls" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>-->
<!--CS: Start Create Snippets From Custom ASP.NET Markup Snippet-->
<!--SPM:<SharePointWebControls:TextField runat="server" FieldName="Title" />-->
<!--CE: End Create Snippets From Custom ASP.NET Markup Snippet-->

I found the solution on the phpBB forum:

Modified /forums/config/parameters.yml. Set core.disable_super_globals to false and delete the cache

It’s been a pain, but after a couple of days I’ve been able to create a PHP page to do so. It will use the server-to-server auth mechanism.

I’ll try to provide the different steps (please note that my Google Console is in French so I tried to translate) :

1. Go to https://console.developers.google.com/apis/api/calendar/overview and Activate the Calendar API (or create first a project if required)
2. Once the API is activated you should be invited to go to the Identification part ; make sure you choose “Account Service Key” for the identification mode
3. Then pick “New Service” and complete the fields (choose JSON for the file format)
4. Download the JSON file and save it where your PHP file will stand on your web server
5. Open the JSON file and search for the client_email
6. Go to https://calendar.google.com/ and in the sharing parameters : make sure that you share your calendar in editing with the client_email address found in the previous step (the editing mode is required to get the Colors)
7. Now you need to install the PHP library from Google … in my case I don’t have a console access on the server, so I transfered the files from Github to the web server, in the same directory as our PHP file will be (so I got a folder called google-api-php-client-1.1.7)
8. Create your PHP file with the below content :

   <?php
   // make sure the include path got the Google API (please refer to https://developers.google.com/api-client-library/php/start/installation)
   set_include_path(get_include_path() . PATH_SEPARATOR . '/full/path/WordPress/wp-content/agenda/google-api-php-client-1.1.7/src/Google');
   require_once "autoload.php";
   
   // Connect to the Google Calendar Service
   $client = new Google_Client();
   $client->setApplicationName("Google Calendar");
   $data = json_decode(file_get_contents('YourKeyFile-xxxxx.json'));
   $client_id = $data->client_id;
   $client_email = $data->client_email;
   $cred = new Google_Auth_AssertionCredentials(
     $client_email,
     array(Google_Service_Calendar::CALENDAR),
     $data->private_key
   );
   
   // Remember to cache the access token locally if making multiple calls
   // and don't just use this function for each request!
   $client->getAuth()->refreshTokenWithAssertion($cred);
   $service = new Google_Service_Calendar($client);
   $optParams = array(
     "calendarId"   => "TheGoogleAccountForTheCalendar@gmail.com",
     "singleEvents" => true,
     "timeZone"     => "Europe/Paris",
     "maxResults"   => 250,
     "timeMin"      => date("c", strtotime("midnight")), /* to get events from today... */
     "timeMax"      => date("c",strtotime('+3 day')), /* ...to the 3 next days */
     "orderBy"      => "startTime"
   );
   $events = $service->events->listEvents('TheGoogleAccountForTheCalendar@gmail.com', $optParams);
   ?>
   <!DOCTYPE html>
   <html>
     <head>
       <meta charset="UTF-8">
       <meta http-equiv="Content-Language" content="fr" />
       <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
       <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">
     </head>
     <body>
   <?php
     while(true) {
       foreach ($events->getItems() as $event) {
         $endTime = new DateTime($event->getEnd()->getDateTime());
         echo $event->getSummary() ." [".$event->getColorId()."] (".$endTime->format('Y-m-d').")<br>";
       }
       $pageToken = $events->getNextPageToken();
       if ($pageToken) {
         $optParams['pageToken'] = $pageToken;
         $events = $service->events->listEvents('lgpmontpellier@gmail.com', $optParams);
       } else {
         break;
       }
     }
   ?>
     </body>
   </html>
   

   Finally you can refer to the Google Calendar API.

   FYI I retrieved the below colorId for the below available colors:
   

       // same order as the image above
       switch ($event->getColorId()) {
         case 9: $color="#5484ED"; break;
         case 1: $color="#A4BDFC"; break;
         case 7: $color="#46D6DB"; break;
         case 2: $color="#7AE7BF"; break;
         case 10: $color="#51B749"; break;
         case 5: $color="#FBD75B"; break;
         case 6: $color="#FFB878"; break;
         case 4: $color="#FF887C"; break;
         case 11: $color="#DC2127"; break;
         case 3: $color="#DBADFF"; break;
         case 8: $color="#E1E1E1"; break;
         default: $color="#AC725E"; // the first one in the picture, the one that is checked
       }
   

   ]]> https://blog.kodono.info/wordpress/2016/04/18/get-color_id-from-a-google-calendar-using-api-php/feed/ 0 https://blog.kodono.info/wordpress/2016/03/17/play-with-ribbon-on-sharepoint/ https://blog.kodono.info/wordpress/2016/03/17/play-with-ribbon-on-sharepoint/#respond Thu, 17 Mar 2016 15:49:50 +0000 http://blog.kodono.info/wordpress/?p=1604 In Sharepoint 2010 and 2013, there are some existing functions to deal with the ribbon.

   Below an example of what we can do:

   // we need the file "sp.ribbon.js"
   SP.SOD.executeOrDelayUntilScriptLoaded(function () {
     // use PageManager
     var pm = SP.Ribbon.PageManager.get_instance();
   
     // define a function to call when the ribbon is loaded
     var DoSomethingWithRibbon=function(ribbon) {
       // For example, we can select the "Browse" tab
       ribbon.selectTabById("Ribbon.ListForm.Display", true);
       // Note: You can explore the DOM to find the related IDs
       // other example "Edit" tab is "Ribbon.ListForm.Edit"
     
       // We can now remove the "Edit" tab
       ribbon.removeChild("Ribbon.ListForm.Edit");
     }
   
     // perform an action when the ribbon has been inited
     pm.add_ribbonInited(function () {
       DoSomethingWithRibbon(pm.get_ribbon())
     });
   
     // if the ribbon is already loaded
     var ribbon = null;
     try {
       // get an instance of the ribbon
       ribbon = pm.get_ribbon();
     } catch (e) {}
     if (!ribbon) {
       if (typeof(_ribbonStartInit) == "function")
         _ribbonStartInit(_ribbon.initialTabId, false, null);
     } else {
       DoSomethingWithRibbon(ribbon);
     }
   
   }, "sp.ribbon.js");
   

   And there are also solutions to add stuff to the ribbon. I have to dig into these solutions… In the meantime you can try this blog post, or this one.

   ]]> https://blog.kodono.info/wordpress/2016/03/17/play-with-ribbon-on-sharepoint/feed/ 0 https://blog.kodono.info/wordpress/2016/01/06/how-to-change-the-default-logon-name-on-windows-7/ https://blog.kodono.info/wordpress/2016/01/06/how-to-change-the-default-logon-name-on-windows-7/#respond Wed, 06 Jan 2016 08:51:25 +0000 http://blog.kodono.info/wordpress/?p=1595 On a remote PC it was another logon name that appeared by default… In that case I had to click on “Switch User”, then “Other User”, and finally enter my username and password. Very frustrating.

   After a few searches I found we can change the default name using the registry and with the below commands (to enter into a cmd console in admin mode) :
   call reg add "HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows\CurrentVersion\Authentication\LogonUI" /v LastLoggedOnSAMUser /t REG_SZ /d "The_Default_Domain\The_Default_Username" /f
call reg add "HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows\CurrentVersion\Authentication\LogonUI" /v LastLoggedOnUser /t REG_SZ /d "The_Default_Domain\The_Default_Username" /f

   Log off and The_Default_Domain\The_Default_Username should prompt!

   ]]> https://blog.kodono.info/wordpress/2016/01/06/how-to-change-the-default-logon-name-on-windows-7/feed/ 0