customisation

Office 365 / toutes les tailles d’images

Citation Publié le Mis à jour le

Bonjour,

Je dresse ici pour mémoire et pour tout ceux qui ont un besoin de customisation toutes les tailles des images dans Office 365, classés par outil. J’ai également ajouté les liens pour savoir comment et où les modifier.

Office 365

Thème du bandeau haut

Voici comment le modifier

O365_theme_logo_200X30Logo bandeau haut : 200 x 30 pixels au format JPG, PNG ou GIF, et taille inférieure à 10 Ko

O365_bandeau_theme_1366x50Image de thème : 1366 x 50 pixels ou moins au format JPG, PNG ou GIF, et taille inférieure à 15 Ko

Votre photo de profil

Cliquez ici pour savoir comment la modifier.

Barre de lancement rapide

Cliquez ici pour savoir comment ajouter une apps dans le lanceur.

0365_applaucnher_icon_60x60.png

Icone dans le lanceur d’application : png transparent 60 x 60 pixels

Sharepoint

SP_icon_180X64

Icone de site par défaut : 180 x 64 pixels

SP_PersonPlaceholder_96x96

Résultat de recherche de personne : 96 x 96 pixels

A suivre ….

Publicité

Cette entrée a été publiée dans design, Office 365, overview et taguée .

Customization graphique Sharepoint, quelques points à retenir

Publié le Mis à jour le

Bonjour,

Ce billet rassemble quelques points clés à connaitre pour bien construire une charte graphique Sharepoint 2013 et Sharepoint online

Activation, utilisation

snip_20160205160807

  • Si vous créez une masterpage minimal en .html, pensez à la décorréler de votre page .master, en décochant la case dans ses propriétés sharepoint (via la bibliotheque http://<votresite>/_catalogs/masterpage/Forms/AllItems.aspx). Sans ceci vous ne pourrez pas modifier directement la masterpage (ex oslo.master ou seatle.master) :

snip_20160205162516

Customization masterpage

Voici des exemples d’ajout de pages javascripts et css dans votre <header>

&amp;amp;amp;amp;lt;SharePoint:CssRegistration name=&amp;amp;amp;amp;quot;&amp;amp;amp;amp;amp;lt;% $SPUrl:~sitecollection/SiteForms/css/accueil.css %&amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;quot; runat=&amp;amp;amp;amp;quot;server&amp;amp;amp;amp;quot; after=&amp;amp;amp;amp;quot;corev4.css&amp;amp;amp;amp;quot;/&amp;amp;amp;amp;gt;
&amp;amp;amp;amp;lt;SharePoint:CssRegistration name=&amp;amp;amp;amp;quot;&amp;amp;amp;amp;amp;lt;% $SPUrl:~sitecollection/SiteForms/js/bootstrap/3.3.5/css/bootstrap.css %&amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;quot; runat=&amp;amp;amp;amp;quot;server&amp;amp;amp;amp;quot; after=&amp;amp;amp;amp;quot;corev4.css&amp;amp;amp;amp;quot;/&amp;amp;amp;amp;gt;

&amp;amp;amp;amp;lt;SharePoint:ScriptLink language=&amp;amp;amp;amp;quot;javascript&amp;amp;amp;amp;quot; name=&amp;amp;amp;amp;quot;&amp;amp;amp;amp;amp;lt;% $SPUrl:~sitecollection/SiteForms/js/jquery/jquery-1.11.3.min.js %&amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;quot; OnDemand=&amp;amp;amp;amp;quot;true&amp;amp;amp;amp;quot; runat=&amp;amp;amp;amp;quot;server&amp;amp;amp;amp;quot; Localizable=&amp;amp;amp;amp;quot;false&amp;amp;amp;amp;quot; /&amp;amp;amp;amp;gt;
&amp;amp;amp;amp;lt;SharePoint:ScriptLink language=&amp;amp;amp;amp;quot;javascript&amp;amp;amp;amp;quot; name=&amp;amp;amp;amp;quot;&amp;amp;amp;amp;amp;lt;% $SPUrl:~sitecollection/SiteForms/js/jquery.SPServices/jquery.SPServices-2014.02.min.js %&amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;quot; OnDemand=&amp;amp;amp;amp;quot;true&amp;amp;amp;amp;quot; runat=&amp;amp;amp;amp;quot;server&amp;amp;amp;amp;quot; Localizable=&amp;amp;amp;amp;quot;false&amp;amp;amp;amp;quot; /&amp;amp;amp;amp;gt;
&amp;amp;amp;amp;lt;SharePoint:ScriptLink language=&amp;amp;amp;amp;quot;javascript&amp;amp;amp;amp;quot; name=&amp;amp;amp;amp;quot;&amp;amp;amp;amp;amp;lt;% $SPUrl:~sitecollection/SiteForms/js/bootstrap/3.3.5/js/bootstrap.min.js %&amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;quot; OnDemand=&amp;amp;amp;amp;quot;true&amp;amp;amp;amp;quot; runat=&amp;amp;amp;amp;quot;server&amp;amp;amp;amp;quot; Localizable=&amp;amp;amp;amp;quot;false&amp;amp;amp;amp;quot; /&amp;amp;amp;amp;gt;

Customization CSS

Voici le code css à ajouter pour passer votre site en largeur fixe :

form
{
margin: auto;
max-width: 1590px;
}
#s4-workspace
{
margin: auto;
max-width: 1590px;
background:#FFFFFF !important;
}

Liens Utiles

Cette entrée a été publiée dans design et taguée , .

Collab365 – Créer des applicatifs métier sous Sharepoint, oui ! Mais comment faire..?

Citation Publié le Mis à jour le

collab365-300x179J’ai eu le plaisir d’animer la session #C365015 en direct Jeudi 08 Octobre 2015 à 18h lors de la Conférence Collab365. Cet évènement uniquement en ligne rassemble 137 conférenciers, pour animer 148 sessions sur 24 heures sur les sujets Office 365, SharePoint ou Azure.

Ma session était principalement destinée aux Power-User Sharepoint et Office 365. L’idée était de vous présenter trois solutions (parmi d’autres) qui permettent de constituer des solutions applicatives. Dans un premier temps j’ai fait un tour des solutions standard et me suis attardé sur Infopath, sa roadmap, et comment se projeter si vous utilisez cet outil. Je me suis ensuite concentré sur l’injection de javascript dans les pages SharePoint (formulaire création, modification, affichage). Voici le tableau des fonctions JavaScripts et frameworks Jquery de customisation SharePoint et Office 365 que j’utilise au jour le jour, leur description et leurs urls de téléchargements :

Outil Description URL
SP15ModalDialog Ouverture de popup modal https://alinimer.wordpress.com/2013/02/25/open-pages-and-forms-in-modal-dialog-for-sharepoint-2013/
lozzi.fields Masquer ou mettre en lecture seul des champs https://lozzisp2013.codeplex.com/
spjs-utility.js Manipulation de valeur de formulaires http://spjsblog.com/2015/01/19/spjs-utility-js-is-updated-to-v1-200/
spservices Bibliothèque Jquery proposant une couche d’abstraction des web Services Sharepoint. http://spservices.codeplex.com/
jslink Modification de l’affichage de listes
sp.js  Accès au modèle objet JavaScript de SharePoint
jquery Framework javascript http://code.jquery.com/

Je me suis enfin attardé sur la liste des solutions-tiers pour mettre en forme des formulaires complexes sous SharePoint et Office 365. Voici la liste des outils-tiers présentés :

Num. Outil Sharepoint Office 365 Saas Mobile Source de donnée Workflow
1 Form7 X X
2 Dynamic Forms for SharePoint (DFFS) X
3 Dell – Quick Apps for SharePoint X
4 Ujelo – Simple Forms for SharePoint X X
5 PDF Share Forms X X OnDemand
6 Sharepoint Forms Designer X X
7 Infowise – Ultimate Forms Solution X X REST APIs
8 Formotus – Mobile Forms X X X SOAP/REST
9 KWizCom – KWizCom Forms X X Kwizcom mobile X
10 Nintex – Nintex forms X X X XX X
11 K2 – K2 forms X X AppIT X XX X

Si vous souhaitez télécharger les fichiers utilisés pendants les démonstrations, cliquez sur le lien suivant :

Téléchargez les fichiers -> http://1drv.ms/1G8vzjl

Au cas où vous avez raté la session (et que vous avez une raison valable de ne pas l’avoir vue) voici les slides :

PS : 2 places VIP pour un match du PSG Handball sont toujours à gagner si vous m’envoyez un tweet avec les mots clés @thierrybuisson @gfiinformatique #collab365 et en précisant le nombre de solutions tiers présentées lors de cette session.

Permalien de l'image intégrée

Vous trouverez l’enregistrement YouTube du Live ici :

Les statistiques de collab365 sur les réseaux sociaux

Cette entrée a été publiée dans Office 365, sharepoint 2013 et taguée , .

Astuce office 365 : ajoutez un lien de téléchargement direct sur vos fichiers joints

Citation Publié le Mis à jour le

Bonjour

Ci-joint un script jquery permettant d’ajouter un lien de téléchargement direct à tous vos fichiers joints

Ce code est à disposer dans la page de votre formulaire spécifique http://<votretenant>.sharepoint.com/Lists/votreliste/dispform.aspx

Avant (fonctionnement nominal, on ouvre Office Web Apps en cliquant sur le lien) :

Après (ajout d’un lien téléchargement directe « download ») :

Méthode d’installation :

  1. Cliquez sur un élément de la liste pour accéder à un formulaire de consultation de liste en pleine page (pas de fenêtre modale), puis cliquez sur « Modifier la page »

  1. Cliquez sur « Ajouter un composant Web Part » puis dans la barre de menu haute qui apparait « Média et Contenu » et « Editeur de contenu »

  1. Pointez votre souris dans la nouvelle webpart qui apparait, puis cliquez sur « Modifier la source »

  1. Saisissez le code suivant dans la fenêtre modal « Source HTML », puis cliquez sur OK :

&lt;script src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js&quot;&gt;&lt;/script&gt;

&lt;script language=&quot;javascript&quot;&gt;
jQuery(document).ready(function(){
 		var table = jQuery(this).find('table#idAttachmentsTable').first();
 		jQuery(table).find('span[dir=&quot;ltr&quot;] &gt; a').each(function(idx){
 			if ( jQuery(table).find('span.dl_'+idx).length === 0 ){ 
 				jQuery('&lt;span class=&quot;dl_'+idx+'&quot; src=&quot;&quot; target=&quot;test&quot;&gt;&amp;nbsp;&amp;nbsp;&lt;a class=&quot;noloop&quot; href=&quot;'+jQuery(this).attr('href')+'&quot; target=&quot;_blank&quot;&gt;download&lt;/a&gt;&lt;/span&gt;').insertAfter(jQuery(this));
 			}
 		});
});
&lt;/script&gt;
 
  1. N’oubliez pas de masquer votre webpart via les propriétés de celle ci.

Bon courage !

Cette entrée a été publiée dans jquery, Office 365, sharepoint 2013 et taguée , , .