Ajouter un texte de description dans le “Chrome Control” de vos APPs SharePoint 2013

Voici la KB technique du mois ! ça faisait longtemps que j’avais pas fait de billet technique…. En ce moment je prépare des APPs pour la Conf SharePoint, et récemment j’ai mis un petit “hook” en place pour le look de mes APPs qui utilisent le Chrome Control

C’est quoi le Chrome Control ? En quelques mots c’est un composant client (JavaScript) qui permet, dans une APPs de type “Provider Hosted” (donc hébergée ailleurs que sur le site SharePoint), d’utiliser la css du site SharePoint ”parent” ainsi que son “look & feel”. En gros on est à la base sur une page blanche d’un site asp maison, et avec quelques lignes de JS on à l’impression d’être dans SharePoint :). Voilà ce que ça peut donner :

 

Page web distante avec le contrôle Chrome

 

Pour plus de détail sur son utilisation : http://msdn.microsoft.com/fr-fr/library/fp179916.aspx

 

Mais la KB n’est pas là 🙂 …

Au niveau du bandeau ce composant permet un minimum de paramétrage : Logo, Titre, Lien d’aide, Menu de settings. Ni plus, ni moins.

Pour l’utiliser c’est très simple comme vous le verrez dans la doc msdn citée ci dessus, voilà ma version initiale de la fonction renderChrome :

  function renderChrome() {
          var options = {
              "appIconUrl": "../img/Logo Bleu.png",
              "appTitle": "Bon App'"

          };

          var nav = new SP.UI.Controls.Navigation(
                                  "chrome_ctrl_placeholder",
                                  options
                            );
          nav.setVisible(true);
	}

Et ça donne ça :

image

 

Un peu vide non ?…

 

Malheureusement, le composant ne semble pas prendre en charge aujourd’hui l’ajout d’une description (ou sous titre, ou slogan, appelez ça comme vous voulez).

 

Et c’est là que je vous offre ce magnifique Tips 😉 (bon j’avoue j’ai pas eu à chercher très longtemps l’id de la div qui va bien où insérer mon texte)

 

Le Tips consiste à ajouter un poil de JQuery et de “compléter” le html  généré par le Chrome Control :

	function renderChrome() {
          var options = {
              "appIconUrl": "../img/Logo Bleu.png",
              "appTitle": "Bon App'"

          };
          var nav = new SP.UI.Controls.Navigation(
                                  "chrome_ctrl_placeholder",
                                  options
                            );
          nav.setVisible(true);


	  //récupération de la div contenant le titre de l'APP
          var titleDiv = $("#chromeControl_bottomheader_apptitle").parent().parent();
	  //sauvegarde du html de cette div
          var originalHtml = titleDiv.html();
 	  //ajout d'une div en plus pour le message secondaire
          titleDiv.html(originalHtml + "<div style="clear: left"><p>L'app SharePoint qui vous dit Bon appétit !</p></div>");
         
      }

Et voilà le résultat :

image

 

Plus sympa non !?

Publié dans SharePoint Tagués avec :

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

*

Verifions que vous êtes un humain * Time limit is exhausted. Please reload CAPTCHA.

Archives

Social

  • Twitter
  • LinkedIn
  • Flux RSS
  • mvp
  • technet
  • Google+