Play with ribbon on Sharepoint

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.

Mise à jour mysql 5.5 vers 5.6, sur Debian Wheezy

1) Nouveau repo

On crée d’abord le fichier /etc/apt/sources.list.d/mysql.list avec les deux lignes ci-dessous :
deb http://repo.mysql.com/apt/debian/ wheezy mysql-5.6
deb-src http://repo.mysql.com/apt/debian/ wheezy mysql-5.6

2) Clé publique du repo

On crée un fichier mysql.key dans lequel on copie/colle la clé publique de mysql.

Puis on l’ajoute à apt :
apt-key add mysql.key

3) Export / Backup

On va faire une sauvegarde de la base de données et de la configuration de mysql :
mysqldump -u root -pPASSWORD --add-drop-table --routines --events --add-drop-table --all-databases --force > data-for-upgrade.sql
tar cvfvz /root/mysql_conf.tgz /etc/mysql

4) Arrêt du serveur

On stoppe mysql :
mysqladmin -u root -pPASSWORD shutdown

5) On met à jour apt

apt-get update

6) On installe

On installe la nouvelle version :
apt-get install mysql-server-5.6

7) On vérifie

Une fois fait, on lance :
mysql_upgrade -v -u root -pPASSWORD

8) Dernier upgrade

On lance l’upgrade pour que tout soit à jour :
apt-get upgrade

9) Mise à jour de PHP-Mysql

Si vous avez l’erreur mysql_connect(): Headers and client library minor version mismatch, il est recommandé d’installer php5-mysqlnd :
apt-get install php5-mysqlnd

How to change the default logon name on Windows 7

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!

VirtualBox qui utilise le VPN de la machine hôte

Dans le cadre de mon travail j’ai dû utiliser VirtualBox afin de pouvoir tester différentes versions d’IE. Mon problème est que mon PC utilise normalement un VPN pour accéder au réseau de l’entreprise et que ma VM n’arrive pas à y accéder de base….

Pour y remédier il faut d’abord définir deux adaptateurs dans l’onglet Network de la VM :

  1. NAT (s’assurer que “Cable Connected” est coché)
  2. Bridged Adapter (avec “Promiscous Mode”: Allow All, et “Cable Connected” de coché)

Ensuite, au niveau de la machine virtuelle, il devrait y avoir deux connexions :

  1. Une qui doit avoir une IP en 10.x.x.x (réseau du VPN)
  2. La deuxième qui doit avoir une IP de notre réseau local (192.168.0.x chez moi) … IP Local à définir manuellement si nécessaire, et à noter qu’il faut aussi définir les DNS manuellement (j’utilise ceux de Google) si on veut que ça fonctionne bien

A partir d’ici votre système devrait être en mesure d’accéder au réseau VPN.

(ci-dessous une configuration que je dois faire pour réussir à avoir un semblant d’accès au reste du Net … à noter que ça rend les choses instables)

Dans l’exemple qui suit on va supposer que ma gateway pour le VPN est 10.0.2.2 et pour le réseau local 192.168.0.254

Ensuite j’ai modifié les routes en ouvrant une console cmd en tant qu’administrateur puis je tape :
route print (pour trouver le numéro des interfaces, on va dire que #13 est pour 10.x.x.x et #15 pour l’interface en 192.168.0.x)
route -f (on flush les règles existantes)
route add 0.0.0.0 mask 0.0.0.0 192.168.0.254 IF 15 (par défaut tout le trafic passe par le réseau normal)
route add 10.0.0.0 mask 255.0.0.0 10.0.2.2 IF 13 (et tout ce qui concerne le réseau du VPN on l’envoie vers celui-ci)

Change screen saver timeout [Windows]

Let’s say your network admin blocked the default screensaver timeout to 15 minutes, but you want more…. You can change this timeout by running as an administrator the regedit then use the “Find…” command to look for “ScreenSaveTimeOut”.

It should be under Computer\HKEY_CURRENT_USER\Software\Policies\Microsoft\Windows\Control Panel\Desktop

The timeout is defined in seconds. Just change the value and reboot.

http://www.iegallery.com/addonsie7/ is returned when trying to change the default search engine for Internet Explorer

I have IE11 on my pro laptop, with Bing, while I want to use Google as my default search engine. However it keeps returning me the page http://www.iegallery.com/addonsie7/ with no way to install another search provider…

After looking for a solution, I found you can use the direct link http://www.iegallery.com/addonsie7/Detail?resourceId=13555 to be able to install Google on Internet Explorer.

Excel file as an HTML table and Date formatting

If you create an Excel file using an HTML Table, then it exists a way to format the cells based on some CSS rules. Some examples can be found on this blog post.

I spent some time trying to figure out how to display correctly the dates, whatever your regional settings are ; for exemple in the USA the format is MM/dd/YYYY, and for the rest of the world is dd/MM/YYYY.

Finally I found that the content of the date cells must always be defined with the same format : YYY-MM-dd HH:mm, and then we can apply a style like mso-number-format:"dd\-mmm\-yyyy\ hh\:mm".

Example:

<html>
<head>
<style>br {mso-data-placement:same-cell} .xls-date {mso-number-format:"dd-mmm-yyyy hh:mm"}</style>
</head>
<body>
  <table>
    <tr>
      <th>Event Name</th>
      <th>Event Date</th>
    </tr>
    <tr>
      <td>Birthday Party</td>
      <td class="xls-date">2015-11-01 10:00</td>
    </tr>
  </table>
</html>

So the date cell will display: 01-Nov-2015 10:00 and will be interpreted as a Date cell by Excel.

Pure Javascript Drag and Drop cross browser from IE8

I was looking for a simple JavaScript to drag a div element around, and that would work with IE8 and without any third party libraries (like jQuery). It’s been very difficult to find a simple code !

Finally http://news.qooxdoo.org/mouse-capturing saved me with some code… but there was still a problem with IE8 due to the mouse that wasn’t losing capture. So after some research, I’ve been able to create a code that works for IE8 and modern browsers:

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <!-- `top` and `left` must be defined into the `style` -->
    <div id="popup" style="background-color:green;position:absolute;top:0px;left:0px;width:250px;height:250px;z-index:9999;box-shadow: 6px 6px 5px #888888;border-radius:6px;border:1px solid #4f4f4f;">
      <div id="popup_bar" style="width:100%;background-color:#aaff66;position:relative;top:0;border-radius:6px 6px 0 0; text-align:center;height:24px;cursor:move">Title</div>
      <p>Content of the popup</p>
    </div>
  </body>
<script>/* see below for the javascript */</script>
</html>
!function() {
  function addListener(element, type, callback, capture) {
    if (element.addEventListener) {
      element.addEventListener(type, callback, capture);
    } else {
      element.attachEvent("on" + type, callback);
    }
  }
  
  function draggable(element) {
    var dragging = null;
  
    addListener(element, "mousedown", function(e) {
      var e = window.event || e;
      dragging = {
        mouseX: e.clientX,
        mouseY: e.clientY,
        startX: parseInt(element.style.left),
        startY: parseInt(element.style.top)
      };
      if (element.setCapture) element.setCapture();
    });
  
    addListener(element, "losecapture", function() {
      dragging = null;
    });
  
    addListener(document, "mouseup", function() {
      dragging = null;
      if (document.releaseCapture) document.releaseCapture();
    }, true);
  
    var dragTarget = element.setCapture ? element : document;
  
    addListener(dragTarget, "mousemove", function(e) {
      if (!dragging) return;
  
      var e = window.event || e;
      var top = dragging.startY + (e.clientY - dragging.mouseY);
      var left = dragging.startX + (e.clientX - dragging.mouseX);
  
      element.style.top = (Math.max(0, top)) + "px";
      element.style.left = (Math.max(0, left)) + "px";
    }, true);
  };    
  
  // here you must define the element to be draggable
  draggable(document.getElementById("popup"));
}();

You can test this code with the demo or see it on Gist.

How to expand Sharepoint 2013 calendar by default [JavaScript]

This code has been tested for Sharepoint 2013 only. It permits to expand by default (so as soon as the page is loaded) the events in the Month calendar view.

See here a solution for Sharepoint 2010.

Tested with IE8 and Firefox 41. You’ll have to add the below JavaScript code into your calendar page:

// the below function simulate a click on a link
function fireEventClick(elem){
    if(document.createEvent){                                                 
      var e = document.createEvent('MouseEvents');
      e.initMouseEvent('click', /* Event type */
      true, /* Can bubble */
      true, /* Cancelable */
      document.defaultView, /* View */
      1, /* Mouse clicks */
      0, /* Screen x */
      0, /* Screen y */
      0, /* Client x */
      0, /* Client y */
      false, /* Ctrl */
      false, /* Alt */
      false, /* Shift */
      false, /* Meta */
      0, /* Button */
      null); /* Related target */
      elem.dispatchEvent(e);                     
    } else { // pour IE
      elem.click();
    }
}

// Expand the events
// because Sharepoint redraw ALL the events when we click on Expand, then we need a special recurrent function
function ExpandEvents(idx) {
  var a = document.querySelectorAll('a[evtid="expand_collapse"]');
  if (idx < a.length) {
    if (a[idx].parentNode.getAttribute("_expand") !== "collapse") fireEventClick(a[idx]);
    ExpandEvents(++idx);
  }
}

function onCalendarGridsRendered(){
  setTimeout(function() {
    ExpandEvents(0)
  }, 250)
}

// some code reused from http://www.codeproject.com/Tips/759006/Enhancing-SharePoint-Calendar-sp-ui-applicationpag
SP.SOD.executeOrDelayUntilScriptLoaded(function () {
    //Week or Day Calendar View
    SP.UI.ApplicationPages.DetailCalendarView.prototype.renderGrids_Old = SP.UI.ApplicationPages.DetailCalendarView.prototype.renderGrids;
    SP.UI.ApplicationPages.DetailCalendarView.prototype.renderGrids = function SP_UI_ApplicationPages_DetailCalendarView$renderGrids($p0) {
      this.renderGrids_Old($p0);
      onCalendarGridsRendered();
    };
    
    //Month Calendar View
    SP.UI.ApplicationPages.SummaryCalendarView.prototype.renderGrids_Old = SP.UI.ApplicationPages.SummaryCalendarView.prototype.renderGrids;
    SP.UI.ApplicationPages.SummaryCalendarView.prototype.renderGrids = function SP_UI_ApplicationPages_SummaryCalendarView$renderGrids($p0) {
      this.renderGrids_Old($p0);
      onCalendarGridsRendered();
    };
    
    ExpandEvents(0)
}, "SP.UI.ApplicationPages.Calendar.js");

And we can hide the “Collapse” links with one line of CSS:

.ms-cal-nav[evtid="expand_collapse"] { display: none !important }