Archives de catégorie : Intranet

Comment ouvrir un formulaire dans une fenêtre modale avec SharePoint 2016?

Introduction

On me demande souvent comment faire pour ouvrir un formulaire dans une fenêtre modale et malheureusement, ça ne se fait pas à partir du ruban « Insérer un lien ».

Il serait intéressant d’avoir une case à cocher permettant d’ouvrir un lien dans une fenêtre modale.

Procédure

  1. Modifier la page;
  2. Positionner le curseur à l’emplacement désiré;
  3. Sélectionnez l’onglet « Insérer » puis cliquez sur « Composant WebPart »;
  4. Sélectionnez la catégorie « Média et contenu » -> Éditeur de script;
  5. Sélectionnez le composant WebPart et cliquez sur « Modifier le composant WebPart »;
  6. Modifier le titre pour une valeur significative. Ex : « script_formulaire_fenetre_modale » et cliquez sur OK;
  7. Cliquez sur « Modifier l’extrait de code « ;
  8. Copier le code HTML suivant :

function openModalWindow(tUrl, tTitle) 
{
	var options = {
          url: tUrl,
          title: tTitle
        };

SP.SOD.execute('sp.ui.dialog.js', 'SP.UI.ModalDialog.showModalDialog', options);

}

<a href="#">Formulaire avec ouverture modale</a>

 
9. Ajuster la valeur des paramètres openModalWindow(‘URL’,’TITRE’) pour pointer sur le bon formulaire et qui sera affiché dans la fenêtre modale.

Ex : openModalWindow(‘/site/Lists/NomListe/NewForm.aspx’, ‘Formulaire avec ouverture modale’)

Si vous voulez utiliser une apostrophe dans le titre, il faut mettre un backslash devant.

Ex : \’

10. Ajuster la texte affiché entre les balises et

11. Appuyez sur OK

12. Enregistrer la page

Résultat

OuvertureModale

 

Advertisements

Techniques pour récupérer les éléments HTML d’une WebPart en JavaScript (Partie 2)

Dans mon billet précédent, j’ai abordé différentes techniques pour récupérer les éléments HTML d’une WebPart en JavaScript.

Cependant, que faire si vous ne voulez pas afficher le Titre d’une WebPart de recherche de contenu et que des changements dans l’ordre des WebParts est possible (changement de ID)?

J’ai donc trouvé deux nouvelles techniques :

Technique 3 – Ajouter une balise dans le modèle d’affichage et naviguer dans ses éléments parents

Cette technique consiste à utiliser le ajouter une balise (un div avec un ID « wp » dans ce cas) puis de naviguer dans ses éléments parents pour récupérer le HTML d’une WebPart précise.

Voici le code pour y arriver :

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
ExecuteOrDelayUntilScriptLoaded(initializeScript, "sp.js");</pre>


function initializeScript()
{
//Find the DIV with the webpartid then the closest parent div starting with MSOZoneCell_WebPartWPQ
$wp= $("#wp").parents("div[id*='MSOZoneCell_WebPartWPQ']"); //MSOZoneCell_WebPartWPQ2
$wp.css('max-width', '660px');
$wp.css('float', 'left');
}
</script>

Résultat

Dans cet exemple de WebPart de recherche de contenu, un style est appliqué sur le DIV MSOZoneCell_WebPartWPQ2 en utilisant une balise :

techniqueHTML3

Points à faire attention avec cette technique

  • Assurez-vous de mettre un ID significatif qui est unique dans votre page.

Technique 4 – Utiliser le GUID de la WebPart

Cette technique consiste à utiliser le webpartid puis de naviguer dans ses éléments parents pour récupérer le HTML d’une WebPart précise.

Voici le code pour y arriver :

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
ExecuteOrDelayUntilScriptLoaded(initializeScript, "sp.js");

function initializeScript()
{
//Find the DIV with the webpartid then the closest parent div starting with MSOZoneCell_WebPartWPQ
$wp= $("DIV[webpartid='13c8d6db-fa88-4e77-985c-ef4fcc858865']").parents("div[id*='MSOZoneCell_WebPartWPQ']"); //MSOZoneCell_WebPartWPQ2
$wp.css('max-width', '660px');
$wp.css('float', 'left');
}
</script>

Résultat

Dans cet exemple de WebPart de recherche de contenu, un style est appliqué sur le DIV MSOZoneCell_WebPartWPQ2 en utilisant le webpartid:

techniqueHTML4

Points à faire attention avec cette technique

  • Assurez-vous d’ajuster votre code si vous supprimez puis ajoutez à nouveau la WebPart car le webpartid changera.

Conclusion

Les deux nouvelles techniques présentées dans cet article peuvent vous permettre facilement d’appliquer des personnalisations sur un élément HTML d’une WebPart.

Ces techniques peuvent répondre à un besoin simple mais cela ne constituent pas une solution aussi robuste et à l’épreuve du futur que l’utilisation du SharePoint Framework.

Il faut comprendre que l’utilisation de code client qui repose sur des éléments du DOM spécifiques ne sont pas recommandé car ceci n’est pas pris en charge dans l’interface utilisateur moderne. De plus, le DOM dans SharePoint Online est sujet à des changements fréquents…

Comment copier des affichages SharePoint d’une liste/bibliothèque vers une autre ?

Introduction

Si vous travaillez avec SharePoint depuis un bon moment, vous vous êtes surement retrouvé dans une situation dont vous aviez créé une liste/bibliothèque avec bon nombre d’affichages et qu’à un bon moment, vous aviez besoin de copier ces affichages vers une autre liste ayant les mêmes colonnes. Malheureusement, il n’y a pas de mécanisme permettant de tout sélectionner vos affichages et de les copier vers une autre liste. Dans ce billet je vous présenterai quelque façons pour y arriver en utilisant en premier un outil tiers et en second un script PowerShell.

Les outils tiers

Bien évidemment, si les outils tiers peuvent copier des listes et des bibliothèques, ils peuvent également être utilisé pour copier des affichages dans des listes existantes.

Dans l’exemple ci-dessous j’utilise ShareGate pour copier des affichages :

Affichage1

Affichage2

Puisque c’est seulement une case à cocher, c’est tout ou rien alors ce n’est pas possible de sélectionner les affichages que l’on veut copier ou pas. Heureusement, ça ne nécessite pas un doctorat en génie nucléaire pour arriver à copier des affichages avec un outils tiers.

Le PowerShell à la rescousse

Si vous effectuer une recherche sur google avec les termes « Copy sharepoint view », les premiers résultats que vous allez trouver utilise majoritairement un script PowerShell afin d’effectuer la tâche. En effet, puisqu’il y a peu de chance qu’on effectue cela à tous les jours, il est préférable de faire un script PowerShell qu’une solution utilisant le modèle objet serveur (SSOM) ou client (CSOM).

Ce script permet d’effectuer la copie des affichages d’une liste source vers une liste de destination.

On peut l’appeler facilement ainsi :

.\Copy-SPListViews.ps1 -SourceWebUrl « https://portal.contoso.com/sites/teamsite/ &raquo; -DestinationWebUrl « https://portal.contoso.com/hr &raquo; -SourceListTitle « Team Documents » -DestinationListTitle « HR Documents »

Celui-ci peut vous offrir d’avantage de flexibilité si de sélectionner les affichages que l’on veut copier ou pas

 

Conclusion

La copie d’affichage est possible dans la mesure ou les deux listes/bibliothèques ont les mêmes colonnes et dans ce billet je vous ai présenté deux méthodes ayant chacun leur niveau de convivialité et de flexibilité.

Facilitez la recherche de sites, d’applications et de ressources pertinentes au travail de vos utilisateurs grâce aux vignettes personnalisées dans SharePoint Server 2016

Introduction

Le lanceur d’applications est une fonctionnalité native d’Office 365 très utile permettant de redimensionner, positionner, épingler, rechercher vos applications en plus de permettre d’ajouter des vignettes personnalisés. Cette fonctionnalité est maintenant disponible dans SharePoint 2016 Server mais pour l’instant, il est seulement possible d’ajouter des vignettes personnalisés.

Prérequis

Il faut installer au minimum la mise à jour publique de novembre 2016 pour SharePoint Server 2016 (Feature Pack 1).

Configuration

La configuration pour activer les vignettes personnalisées est très bien décrite sur le site MSDN alors je ne répéterai pas ces étapes.

Ajouter des vignettes personnalisées

Tout d’abord accéder à la liste de vignette créé lors de l’étape précédente :

http://VotreSite/lists/custom%20tiles

Ensuite ajouter un nouvelle élément dans cette liste :

CustomTile.PNG

 

Note : Le champ Publics peut être laissé vide si on veut que la vignette s’affiche pour tous les utilisateurs.

 

Idéalement l’icône devrait être blanc avec un fond transparent afin d’être similaire aux autres icônes.

Exemple d’icône

Une fois que vous avez ajouté un nouvel élément à la liste de vignettes personnalisées, l’affichage dans le lanceur d’application peut prendre jusqu’à 24 heures en raison de la mise en cache. Cependant, on peut forcer le rafraîchissement de cette cache en exécutant avec la fonction JavaScript ClearSuiteLinksCache() dans la console via F12 :

Affiche les résultats dans la console du navigateur du développeur

Résultat :

Application Web Intranet

HomeIntranet

Application Web autre

TilesWebApp

On peut voir que la vignette personnalisé s’ajoute uniquement dans la Web Application Intranet.

Si jamais vous avez spécifié un URL d’icône non-accessible ou invalide vous aurez droit à magnifique hexagone :

TileHExagone.PNG

Activer les vignettes personnalisées dans plusieurs applications web

Pour utiliser la même liste de vignettes personnalisées dans plusieurs applications, activez la fonctionnalité sur chaque application web, puis mettez à jour la propriété CustomTilesListHostUrl dans l’application web qui contient la liste de vignettes personnalisées souhaitée.

Ex :

Enable-SPFeature -Identity CustomTiles -Url http://web_app -Force

$w = Get-SPWebApplication http://web_app
$w.Properties.CustomTilesListHostUrl = « http://web_app url/ »
$w.Update()

Attention de bien spécifier uniquement l’URL de l’application Web et non pas le lien vers la liste de tuile.

Il faut quand même forcer un ClearSuiteLinksCache() et ensuite les tuiles provenant de la première Application Web s’afficheront :

TileWebAppAutre

Dans ce cas, j’ai utilisé deux applications Web de Publication en HTTP et ça a fonctionné correctement. Je n’ai pas réussi à partager de vignettes entre deux applications Web HTTPS (Certificat SSL non vérifié) dont une est de type Publication et l’autre de type Hôte de site Mon Site.

 

Conclusion

C’est une fonctionnalité très intéressante pour permettre la recherche de sites, d’applications et de ressources pertinentes au travail de vos utilisateurs. Ça ne permet pas aux utilisateurs d’ajouter et de redimensionner leur propres tuiles comme dans O365 mais c’est déjà un bon premier pas.

Référence

Vignettes personnalisées dans SharePoint Server 2016 (MSDN)

 

 

 

Conférencier @ SharePoint Saturday Montréal 2017

Introduction

Le 13 mai 2017 aura lieu au Collège Maisoneuve, 2701 Rue Nicolet, Montréal l’événement SharePoint Saturday Montréal. J’aurai la chance d’y participer à nouveau en tant que conférencier.

Vous travaillez de près ou de loin avec SharePoint, Office 365 ou Azure? Joignez-vous à un groupe d’architectes, de développeurs, d’intégrateurs, de gestionnaires de communautés et des gens d’affaires gravitant autour de SharePoint lors de de la tenue de la 5e édition du SharePoint Saturday Montréal.
Plusieurs conférenciers de qualité sont annoncés avec des présentations de DEV/ITPRO/User/Business.
Voici le lien pour vous inscrire :
inscrire

Conclusion

C’est un super événement GRATUIT, à ne pas manquer avec plein de goodies, du smoked meat et d’excellents conférenciers.

Utiliser une validation de colonne pour valider le numéro de téléphone de vos contacts

Similairement à mon billet précédent, je vous propose une autre formule afin de valider le numéro de téléphone de vos contacts.

On peut ajouter une formule directement dans la colonne de type « Une seule ligne de texte » nommé « Téléphone mobile » :

Les fonctions utilisés dans la formule doivent être dans la même langue que votre site (Français dans ce cas) :

=SI(ESTVIDE([Téléphone mobile]);VRAI;
ET(
 ESTERREUR(TROUVE(";";[Téléphone mobile];1));
 ESTERREUR(TROUVE(".";[Téléphone mobile];1));
 ESTERREUR(TROUVE("p";[Téléphone mobile];1));
 ESTERREUR(TROUVE("#";[Téléphone mobile];1));
 ESTERREUR(TROUVE(",";[Téléphone mobile];1));
 ESTERREUR(TROUVE("(";[Téléphone mobile];1));
 ESTERREUR(TROUVE(")";[Téléphone mobile];1)))
)

La formule ci-haut n’est pas aussi restrictive qu’une expression régulière mais elle constitue tout de même un bon départ :

  • Ignore la validation si le champ est vide;
  • Ne doit pas contenir le caractère « ; »;
  • Ne doit pas contenir le caractère « . »;
  • Ne doit pas contenir le caractère « p »;
  • Ne doit pas contenir le caractère « # »;
  • Ne doit pas contenir le caractère « , »;
  • Ne doit pas contenir le caractère « ( »;
  • Ne doit pas contenir le caractère « ) »;

Par la suite, entrer le message d’erreur désiré et tester le tout :

ValidationTelephoneMsg

 

Afficher des tuiles comme résultats de recherche à l’aide d’un modèle d’affichage

J’ai récemment présenté une session intitulé « Construisez votre intranet avec Microsoft Office 365 sans code » dans laquelle j’ai expliqué comment faire une composante « Qui s’en occupe? ». Cette composante permet d’afficher le ou les répondants pour une activité précise dans l’organisation en utilisant une liste personnalisé, la recherche et un modèle d’affichage.

Cet article va donc détailler les différentes étapes pour construire votre propre composante avec des modèles de recherche dans Office 365 :

QuiSenOccupe1.PNG

Cas d’utilisation

L’utilisateur recherche un sujet selon la première lettre et ensuite il clique sur la tuile afin d’afficher le ou les répondants.

QuiSenOccupe2

QuiSenOccupe4

Comment réaliser cette composante ?

La première étape consiste à créer une liste personnalisé afin d’entreposer les différents sujets :

QuiSenOccupe5

Ensuite, dans les configuration du service de recherche, il suffit de lier la crawled property « ows_LinkTitle » avec une propriété géré « RefinableString » de votre choix. Puisqu’on ne peut pas créé de nouvelles propriétés dans le service de recherche d’O365, Microsoft en a créé suffisamment pour qu’on puisse les réutiliser. Par la suite, ajouter alias sur cette propriété afin de l’identifier et de l’utiliser plus tard dans la zone de recherche.

QuiSenOccupe3

Puis, dans la page de composants web part dans lequel on veut ajouter la composante « Qui s’en occupe? », on ajoute 2 web parts de type Éditeur de contenu.

Pour permettre l’affichage des filtres par lettres, la première aura un lien vers un fichier contenant ceci :

La deuxième web part aura un lien vers un fichier contenant ceci :

Comme vous avez pu le remarquer il y a une référence à un fichier CSS qu’il faut déposer dans Style Library et ensuite ajuster le chemin.

Ensuite, il faut ajouter deux web parts « Zone de recherche » et « Résultats de la recherche » et configurer la dernière avec cette requête (Ajuster au besoin selon le URL de votre site) :

QuiSenOccupe6

Finalement, il reste à télécharger le modèle d’affichage de tuiles dans la galerie des pages maîtres et à configurer le modèle dans la web part :

QuiSenOccupe7

URL : /sites/intranet/_catalogs/masterpage/Forms/AllItems.aspx –> Display Templates –> Search

Conclusion

Il est possible qu’il y ai un certain délais (jusqu’à 24h) avant que les modifications aux propriétés gérés soient prisent en compte dans O365. Malgré cela, il est possible d’arriver à un résultat visuellement intéressant et performant sans avoir à développer plusieurs jours dans Visual Studio.

Références

Modèle d’affichage de tuiles

Barre de filtre avec les lettres