SlideShare une entreprise Scribd logo
SharePoint Saturday Montreal#SPSMontreal
Personnaliser l'affichage
de vos colonnes avec la
mise en forme et les
extensions du SPFx
Dans le passé, plusieurs techniques pouvaient êtres utilisées pour
personnaliser l'affichage de vos colonnes : JSLink, JavaScript dans une
WebPart Éditeur de contenu, code serveur, etc...
Ces façons de faire ne sont plus supportées dans les sites modernes.
Samuel Lévesque
Architecte SharePoint
@sharepointerie http://sharepointerie.com
SharePoint Saturday Montreal#SPSMontreal
Objectifs
• Présenter différents scénarios de personnalisation
supporté dans l’environnement moderne de
SharePoint Online;
• Présenter les avantages et inconvénients.
Public cible : Développeur / Super-utilisateurs
Niveau : 200
SharePoint Saturday Montreal#SPSMontreal
Sommaire de la présentation
Pourquoi ?
Comment ? Recommandations
et démos
SharePoint Saturday Montreal#SPSMontreal
Historique – Personnaliser l'affichage de colonnes
SP2010 :
XSL/XSLT
JavaScript incorporée (WebParts éditeur de contenu)
Balises HTML dans les champs calculé
SP2013 :
Client side rendering (CSR) JSLINK
SPO :
2016 → Site d’équipe moderne → Fin de la prise en charge du JavaScript incorporée
Juin 2017 → Fin de la prise en charge des balises HTML dans les champs calculés
Septembre 2017 → SPFx Extension → Field Customizer
SharePoint Saturday Montreal#SPSMontreal
Comparatif
HTML dans un
champ calculé
JavaScript
incorporée
Client side
rendering (JSLINK)
Mise en forme
(JSON)
Personnalisateur de
champ (SPFx
Extension)
Déploiement
simple et rapide
Supporté dans
l’experience
moderne
Code
personnalisé ?
Limitation sur le
type de colonne
Flexibilité
Mise en forme
conditionnelle
Liens d'action
*
SharePoint Saturday Montreal#SPSMontreal
Scénarios possibles
• Afficher un tableau de bord exécutif (KPI)
• Afficher des indicateurs de gestion de projet
• Afficher différentes compagnies avec un lien vers le symbole boursier
• Afficher vos contacts avec un lien pour envoyer un courriel (mailto)
• etc.
SharePoint Saturday Montreal#SPSMontreal
Exemple
SharePoint Saturday Montreal#SPSMontreal
Sommaire de la présentation
Pourquoi ?
Comment ? Recommandations
et démos
SharePoint Saturday Montreal#SPSMontreal
Comment ?
• Consiste à construire un objet JSON qui décrit les éléments affichés lorsqu’un champ est inclus
dans une vue de liste, ainsi que les styles à appliquer à ces éléments.
• La mise en forme de la colonne ne modifie pas les données dans l’élément de liste ou le fichier;
elle change uniquement la façon dont elles apparaissent lorsque les utilisateurs parcourent la
liste.
• Toute personne pouvant créer et gérer des vues dans une liste peut utiliser la mise en forme
pour configurer l’affichage des champs;
• Nécessite des connaissances en JSON + HTML + CSS;
SharePoint Saturday Montreal#SPSMontreal
Syntaxe détaillé en JSON
• elmType – Spécifie le type d'élément : div, span, a, img, svg, path, button
• txtContent - Propriété facultative qui spécifie le contenu du texte de l'élément
spécifié par elmType. @currentField permet d’évaluer la valeur du champ actuel.
• style - Propriété facultative qui spécifie les attributs de style à appliquer à
l'élément spécifié par elmType. Attributs de style limité.
• attributes - Propriété facultative qui spécifie des attributs supplémentaires à
ajouter à l'élément : href, rel, src, class, target, title, role, iconName, d, aria
• children - Propriété facultative qui spécifie les éléments enfants de l'élément
spécifié par elmType
• class – Spécifie la classe prédéfinie pour le style et l'action
• operator - Spécifie le type d'opération à effectuer comme =, -, +, <, >, <=, etc…
• operands - Spécifie les paramètres ou les opérations d'une expression
SharePoint Saturday Montreal#SPSMontreal
Exemple JSON
{
"elmType": "div",
"txtContent": "@currentField"
}
Le format de colonne le plus simple est celui qui place la valeur du champ dans un élément <div />
JSON
SharePoint Saturday Montreal#SPSMontreal
Exemple JSON
Cet exemple applique la couleur rouge du champ en cours lorsque la valeur à l'intérieur de la
colonne DueDate (Nom interne) d'un élément est antérieure à la date / heure actuelle.
{
"elmType": "div",
"txtContent": "@currentField",
"style": {
"color": {
"operator": "?",
"operands": [
{
"operator": "<=",
"operands": [
"[$DueDate]",
"@now"
]
},
"#ff0000",
""
]
}
}
}
JSON
Résultat
SharePoint Saturday Montreal#SPSMontreal
Exemple JSON
Le format de colonne le plus simple est celui qui place la valeur du champ dans un élément <div />
{
"elmType": "a",
"txtContent": "@currentField",
"attributes": {
"target": "_blank",
"href": {
"operator": "+",
"operands": [
"http://finance.yahoo.com/quote/",
"@currentField"
]
}
}
}
JSON
Résultat
SharePoint Saturday Montreal#SPSMontreal
Comment?
• Lors de la création d’une
colonne
• En modifiant une colonne
existante
SharePoint Saturday Montreal#SPSMontreal
Plusieurs modèles disponibles
https://github.com/SharePoint/sp-dev-column-formatting/tree/master/samples
https://docs.microsoft.com/en-us/sharepoint/dev/declarative-customization/column-formatting
SharePoint Saturday Montreal#SPSMontreal
Column formatter 1.2
• Gratuit sur GitHub;
• Rend la personnalisation
de colonne plus facile
pour un utilisateur sans
connaissances JSON +
HTML + CSS;
SharePoint Saturday Montreal#SPSMontreal
Column formatter 1.2
SharePoint Saturday Montreal#SPSMontreal
Sommaire de la présentation
Pourquoi ?
Comment ? Recommandations
et démos
SharePoint Saturday Montreal#SPSMontreal
Démonstration
SharePoint Saturday Montreal#SPSMontreal
Recommandation
1 ) Penser à convertir vos solutions « Legacy »
• JavaScript incorporée (WebParts éditeur de contenu)
• Balises HTML dans les champs calculé
• JSLINK
Afin d’être supporté dans l’expérience moderne
2) Penser à adresser la personnalisation de champ dans votre gouvernance
SharePoint Saturday Montreal#SPSMontreal
Conclusion
SharePoint Saturday Montreal#SPSMontreal
Avantages
• JSON est un format standard pour plusieurs développeurs;
• Supporté par plusieurs outils et éditeurs;
• Permet d’effectuer de la personnalisation tout en
conservant SharePoint Out of the box;
• Fonctionne avec les listes et bibliothèques modernes.
Inconvénients
Conclusion
• Pas de code personnalisé;
• Possible problème de gouvernance similaire aux Script
Editor WebPart;
• JSON + HTML + CSS pas si "conviviaux" pour un utilisateur
moyen;
• Ne fonctionne pas en mode "classique".
SharePoint Saturday Montreal#SPSMontreal
Questions ?
SharePoint Saturday Montreal#SPSMontreal
• Gestion des balises HTML dans les champs calculé de
SharePoint
• Column formatter (Solution)
• Personnalisation des pages du site « modernes »
• https://github.com/SharePoint/sp-dev-column-
formatting/tree/master/samples
• https://github.com/SharePoint/sp-dev-fx-
extensions/tree/master/samples
Références

Contenu connexe

Tendances

Struktura racunarskog sistema
Struktura racunarskog sistemaStruktura racunarskog sistema
Struktura racunarskog sistema
Miroslav Vidović
 
좋은 코드를 고민하는 주니어 개발자들을 위한 안드로이드 디자인 패턴
좋은 코드를 고민하는 주니어 개발자들을 위한 안드로이드 디자인 패턴좋은 코드를 고민하는 주니어 개발자들을 위한 안드로이드 디자인 패턴
좋은 코드를 고민하는 주니어 개발자들을 위한 안드로이드 디자인 패턴
원희 정
 
IGC 2018 - 던그리드 이랬으면 더 좋았을 걸[SlideShare]
IGC 2018 - 던그리드 이랬으면 더 좋았을 걸[SlideShare]IGC 2018 - 던그리드 이랬으면 더 좋았을 걸[SlideShare]
IGC 2018 - 던그리드 이랬으면 더 좋았을 걸[SlideShare]
지환 문
 
Ćelija
ĆelijaĆelija
Ćelija
Ena Horvat
 
Пиар-проект ресторана
Пиар-проект ресторанаПиар-проект ресторана
Пиар-проект ресторана
Юлия Балка
 
Velike promene u prošlosti.pdf
Velike promene u prošlosti.pdfVelike promene u prošlosti.pdf
Velike promene u prošlosti.pdf
Ivana Damnjanović
 
Тема 2
Тема 2Тема 2
Тема 2
shulga_sa
 
10 книг для письменника-початківця
10 книг для письменника-початківця10 книг для письменника-початківця
10 книг для письменника-початківця
Vinnytsia Regional Universal Scientific Library named after Valentin Otamanovsky
 
Izučavanje ćelija
Izučavanje ćelijaIzučavanje ćelija
Biologija- Golosemenice- Marko Petrović- Milan Ilić
Biologija- Golosemenice- Marko Petrović- Milan IlićBiologija- Golosemenice- Marko Petrović- Milan Ilić
Biologija- Golosemenice- Marko Petrović- Milan Ilić
nasaskolatakmicenja1
 
Презентація відкритого уроку 2021.pdf
Презентація відкритого уроку 2021.pdfПрезентація відкритого уроку 2021.pdf
Презентація відкритого уроку 2021.pdf
ssuser60fe74
 
лекція 2
лекція 2лекція 2
лекція 2
Olga Koval
 
Wirusy komputerowe
Wirusy komputeroweWirusy komputerowe
Wirusy komputerowe
Katarzyna_B
 
왜 게임에 빠질까 Chap 13, Bonus A, B
왜 게임에 빠질까 Chap 13, Bonus A, B왜 게임에 빠질까 Chap 13, Bonus A, B
왜 게임에 빠질까 Chap 13, Bonus A, B
SeungYeon Jeong
 
Urogenitalni trakt
Urogenitalni traktUrogenitalni trakt
Urogenitalni trakt
dr Šarac
 
Struktura racunara
Struktura racunaraStruktura racunara
Struktura racunara
Andrija Stankovic
 

Tendances (20)

Struktura racunarskog sistema
Struktura racunarskog sistemaStruktura racunarskog sistema
Struktura racunarskog sistema
 
좋은 코드를 고민하는 주니어 개발자들을 위한 안드로이드 디자인 패턴
좋은 코드를 고민하는 주니어 개발자들을 위한 안드로이드 디자인 패턴좋은 코드를 고민하는 주니어 개발자들을 위한 안드로이드 디자인 패턴
좋은 코드를 고민하는 주니어 개발자들을 위한 안드로이드 디자인 패턴
 
IGC 2018 - 던그리드 이랬으면 더 좋았을 걸[SlideShare]
IGC 2018 - 던그리드 이랬으면 더 좋았을 걸[SlideShare]IGC 2018 - 던그리드 이랬으면 더 좋았을 걸[SlideShare]
IGC 2018 - 던그리드 이랬으면 더 좋았을 걸[SlideShare]
 
Ćelija
ĆelijaĆelija
Ćelija
 
Пиар-проект ресторана
Пиар-проект ресторанаПиар-проект ресторана
Пиар-проект ресторана
 
Endokrini sistem kičmenjaka
Endokrini sistem kičmenjakaEndokrini sistem kičmenjaka
Endokrini sistem kičmenjaka
 
Polni sistem
Polni sistemPolni sistem
Polni sistem
 
Velike promene u prošlosti.pdf
Velike promene u prošlosti.pdfVelike promene u prošlosti.pdf
Velike promene u prošlosti.pdf
 
Тема 2
Тема 2Тема 2
Тема 2
 
Geni i ponasanje
Geni i ponasanjeGeni i ponasanje
Geni i ponasanje
 
10 книг для письменника-початківця
10 книг для письменника-початківця10 книг для письменника-початківця
10 книг для письменника-початківця
 
Nervni sistem kičmenjaka
Nervni sistem kičmenjakaNervni sistem kičmenjaka
Nervni sistem kičmenjaka
 
Izučavanje ćelija
Izučavanje ćelijaIzučavanje ćelija
Izučavanje ćelija
 
Biologija- Golosemenice- Marko Petrović- Milan Ilić
Biologija- Golosemenice- Marko Petrović- Milan IlićBiologija- Golosemenice- Marko Petrović- Milan Ilić
Biologija- Golosemenice- Marko Petrović- Milan Ilić
 
Презентація відкритого уроку 2021.pdf
Презентація відкритого уроку 2021.pdfПрезентація відкритого уроку 2021.pdf
Презентація відкритого уроку 2021.pdf
 
лекція 2
лекція 2лекція 2
лекція 2
 
Wirusy komputerowe
Wirusy komputeroweWirusy komputerowe
Wirusy komputerowe
 
왜 게임에 빠질까 Chap 13, Bonus A, B
왜 게임에 빠질까 Chap 13, Bonus A, B왜 게임에 빠질까 Chap 13, Bonus A, B
왜 게임에 빠질까 Chap 13, Bonus A, B
 
Urogenitalni trakt
Urogenitalni traktUrogenitalni trakt
Urogenitalni trakt
 
Struktura racunara
Struktura racunaraStruktura racunara
Struktura racunara
 

Similaire à Personnaliser l'affichage de vos colonnes avec la mise en forme

Les dernières avancées HTML5 & CSS3 en action !
Les dernières avancées HTML5 & CSS3 en action !Les dernières avancées HTML5 & CSS3 en action !
Les dernières avancées HTML5 & CSS3 en action !
Microsoft Technet France
 
Les dernières avancées html5 & css3 en action !
Les dernières avancées html5 & css3 en action !Les dernières avancées html5 & css3 en action !
Les dernières avancées html5 & css3 en action !
davrous
 
HTML 5 et CSS3, créez, animez et enrichissez vos sites Web
HTML 5 et CSS3, créez, animez et enrichissez vos sites WebHTML 5 et CSS3, créez, animez et enrichissez vos sites Web
HTML 5 et CSS3, créez, animez et enrichissez vos sites Web
Microsoft
 
Développement Web
Développement WebDéveloppement Web
Développement Web
mastertic
 
HTML5 en Entreprise
HTML5 en EntrepriseHTML5 en Entreprise
HTML5 en Entreprise
le.genie.logiciel
 
Développement Web
Développement WebDéveloppement Web
Développement Web
mastertic
 
technologie web - part2
technologie web - part2technologie web - part2
technologie web - part2
Benoît Simard
 
HTML & CSS
HTML & CSSHTML & CSS
HTML & CSS
Hamid Tasra
 
developpement web HTML & CSS web Sémantique
developpement web HTML & CSS web Sémantiquedeveloppement web HTML & CSS web Sémantique
developpement web HTML & CSS web Sémantique
YounesOuladSayad1
 
CSS 3
CSS 3CSS 3
Normes de base du Web GTI780 & MTI780 ETS A09
Normes de base du Web  GTI780 & MTI780  ETS   A09Normes de base du Web  GTI780 & MTI780  ETS   A09
Normes de base du Web GTI780 & MTI780 ETS A09
Claude Coulombe
 
Visual Basic 9.0 – Visual Studio 2008 Quoi De Neuf 2.0
Visual Basic 9.0 – Visual Studio 2008 Quoi De Neuf 2.0Visual Basic 9.0 – Visual Studio 2008 Quoi De Neuf 2.0
Visual Basic 9.0 – Visual Studio 2008 Quoi De Neuf 2.0
Gregory Renard
 
Visual Basic 9.0 – Visual Studio 2008 Quoi De Neuf 2.0
Visual Basic 9.0 – Visual Studio 2008 Quoi De Neuf 2.0Visual Basic 9.0 – Visual Studio 2008 Quoi De Neuf 2.0
Visual Basic 9.0 – Visual Studio 2008 Quoi De Neuf 2.0
Gregory Renard
 
CSS
CSSCSS
CSS
adil h
 
seance3-1 CSS.ppt
seance3-1 CSS.pptseance3-1 CSS.ppt
seance3-1 CSS.ppt
AmineReal
 
HTML5 & CSS3
HTML5 & CSS3HTML5 & CSS3
HTML5 & CSS3
JDerrien
 
SPS Montréal 2018 - La passerelle de données locales
SPS Montréal 2018 - La passerelle de données localesSPS Montréal 2018 - La passerelle de données locales
SPS Montréal 2018 - La passerelle de données locales
Nicolas Georgeault
 
SEBLOD CCK Joomladay 2011 to Lyon in France
SEBLOD CCK Joomladay 2011 to Lyon in FranceSEBLOD CCK Joomladay 2011 to Lyon in France
SEBLOD CCK Joomladay 2011 to Lyon in France
Lapoux Sébastien
 

Similaire à Personnaliser l'affichage de vos colonnes avec la mise en forme (20)

Les dernières avancées HTML5 & CSS3 en action !
Les dernières avancées HTML5 & CSS3 en action !Les dernières avancées HTML5 & CSS3 en action !
Les dernières avancées HTML5 & CSS3 en action !
 
Les dernières avancées html5 & css3 en action !
Les dernières avancées html5 & css3 en action !Les dernières avancées html5 & css3 en action !
Les dernières avancées html5 & css3 en action !
 
HTML 5 et CSS3, créez, animez et enrichissez vos sites Web
HTML 5 et CSS3, créez, animez et enrichissez vos sites WebHTML 5 et CSS3, créez, animez et enrichissez vos sites Web
HTML 5 et CSS3, créez, animez et enrichissez vos sites Web
 
Formulaires
FormulairesFormulaires
Formulaires
 
Développement Web
Développement WebDéveloppement Web
Développement Web
 
HTML5 en Entreprise
HTML5 en EntrepriseHTML5 en Entreprise
HTML5 en Entreprise
 
Développement Web
Développement WebDéveloppement Web
Développement Web
 
technologie web - part2
technologie web - part2technologie web - part2
technologie web - part2
 
HTML & CSS
HTML & CSSHTML & CSS
HTML & CSS
 
Association 2 0
Association 2 0Association 2 0
Association 2 0
 
developpement web HTML & CSS web Sémantique
developpement web HTML & CSS web Sémantiquedeveloppement web HTML & CSS web Sémantique
developpement web HTML & CSS web Sémantique
 
CSS 3
CSS 3CSS 3
CSS 3
 
Normes de base du Web GTI780 & MTI780 ETS A09
Normes de base du Web  GTI780 & MTI780  ETS   A09Normes de base du Web  GTI780 & MTI780  ETS   A09
Normes de base du Web GTI780 & MTI780 ETS A09
 
Visual Basic 9.0 – Visual Studio 2008 Quoi De Neuf 2.0
Visual Basic 9.0 – Visual Studio 2008 Quoi De Neuf 2.0Visual Basic 9.0 – Visual Studio 2008 Quoi De Neuf 2.0
Visual Basic 9.0 – Visual Studio 2008 Quoi De Neuf 2.0
 
Visual Basic 9.0 – Visual Studio 2008 Quoi De Neuf 2.0
Visual Basic 9.0 – Visual Studio 2008 Quoi De Neuf 2.0Visual Basic 9.0 – Visual Studio 2008 Quoi De Neuf 2.0
Visual Basic 9.0 – Visual Studio 2008 Quoi De Neuf 2.0
 
CSS
CSSCSS
CSS
 
seance3-1 CSS.ppt
seance3-1 CSS.pptseance3-1 CSS.ppt
seance3-1 CSS.ppt
 
HTML5 & CSS3
HTML5 & CSS3HTML5 & CSS3
HTML5 & CSS3
 
SPS Montréal 2018 - La passerelle de données locales
SPS Montréal 2018 - La passerelle de données localesSPS Montréal 2018 - La passerelle de données locales
SPS Montréal 2018 - La passerelle de données locales
 
SEBLOD CCK Joomladay 2011 to Lyon in France
SEBLOD CCK Joomladay 2011 to Lyon in FranceSEBLOD CCK Joomladay 2011 to Lyon in France
SEBLOD CCK Joomladay 2011 to Lyon in France
 

Plus de Samuel Lévesque

What do you get from share point hybrid
What do you get from share point hybridWhat do you get from share point hybrid
What do you get from share point hybrid
Samuel Lévesque
 
Groupe d'usagers sp québec ged - 12 décembre 2017
Groupe d'usagers sp québec   ged - 12 décembre 2017Groupe d'usagers sp québec   ged - 12 décembre 2017
Groupe d'usagers sp québec ged - 12 décembre 2017
Samuel Lévesque
 
Groupe d'usagers sp québec septembre 2015
Groupe d'usagers sp québec   septembre 2015Groupe d'usagers sp québec   septembre 2015
Groupe d'usagers sp québec septembre 2015
Samuel Lévesque
 
Groupe d'usagers sp québec - octobre 2017
Groupe d'usagers sp québec - octobre 2017Groupe d'usagers sp québec - octobre 2017
Groupe d'usagers sp québec - octobre 2017
Samuel Lévesque
 
Groupe d'usagers sp québec novembre 2016
Groupe d'usagers sp québec   novembre 2016Groupe d'usagers sp québec   novembre 2016
Groupe d'usagers sp québec novembre 2016
Samuel Lévesque
 
Groupe d'usagers sp québec novembre 2015
Groupe d'usagers sp québec   novembre 2015Groupe d'usagers sp québec   novembre 2015
Groupe d'usagers sp québec novembre 2015
Samuel Lévesque
 
Groupe d'usagers sp québec mai 2016
Groupe d'usagers sp québec   mai 2016Groupe d'usagers sp québec   mai 2016
Groupe d'usagers sp québec mai 2016
Samuel Lévesque
 
Groupe d'usagers sp québec janvier 2017
Groupe d'usagers sp québec   janvier 2017Groupe d'usagers sp québec   janvier 2017
Groupe d'usagers sp québec janvier 2017
Samuel Lévesque
 
Groupe d'usagers sp québec janvier (montreal) étude de cas - l'intranet de ...
Groupe d'usagers sp québec   janvier (montreal) étude de cas - l'intranet de ...Groupe d'usagers sp québec   janvier (montreal) étude de cas - l'intranet de ...
Groupe d'usagers sp québec janvier (montreal) étude de cas - l'intranet de ...
Samuel Lévesque
 
Groupe d'usagers sp québec - février 2016
Groupe d'usagers sp québec - février 2016Groupe d'usagers sp québec - février 2016
Groupe d'usagers sp québec - février 2016
Samuel Lévesque
 
Groupe d'usagers sp québec - avril 2017
Groupe d'usagers sp québec - avril 2017Groupe d'usagers sp québec - avril 2017
Groupe d'usagers sp québec - avril 2017
Samuel Lévesque
 
Grics 2017 - construisez votre intranet avec microsoft office 365 sans code
Grics   2017 - construisez votre intranet avec microsoft office 365 sans codeGrics   2017 - construisez votre intranet avec microsoft office 365 sans code
Grics 2017 - construisez votre intranet avec microsoft office 365 sans code
Samuel Lévesque
 
Programme de reconnaissance MVP
Programme de reconnaissance MVPProgramme de reconnaissance MVP
Programme de reconnaissance MVP
Samuel Lévesque
 
Construisez votre intranet avec microsoft office 365 sans code a os canadia...
Construisez votre intranet avec microsoft office 365 sans code   a os canadia...Construisez votre intranet avec microsoft office 365 sans code   a os canadia...
Construisez votre intranet avec microsoft office 365 sans code a os canadia...
Samuel Lévesque
 

Plus de Samuel Lévesque (14)

What do you get from share point hybrid
What do you get from share point hybridWhat do you get from share point hybrid
What do you get from share point hybrid
 
Groupe d'usagers sp québec ged - 12 décembre 2017
Groupe d'usagers sp québec   ged - 12 décembre 2017Groupe d'usagers sp québec   ged - 12 décembre 2017
Groupe d'usagers sp québec ged - 12 décembre 2017
 
Groupe d'usagers sp québec septembre 2015
Groupe d'usagers sp québec   septembre 2015Groupe d'usagers sp québec   septembre 2015
Groupe d'usagers sp québec septembre 2015
 
Groupe d'usagers sp québec - octobre 2017
Groupe d'usagers sp québec - octobre 2017Groupe d'usagers sp québec - octobre 2017
Groupe d'usagers sp québec - octobre 2017
 
Groupe d'usagers sp québec novembre 2016
Groupe d'usagers sp québec   novembre 2016Groupe d'usagers sp québec   novembre 2016
Groupe d'usagers sp québec novembre 2016
 
Groupe d'usagers sp québec novembre 2015
Groupe d'usagers sp québec   novembre 2015Groupe d'usagers sp québec   novembre 2015
Groupe d'usagers sp québec novembre 2015
 
Groupe d'usagers sp québec mai 2016
Groupe d'usagers sp québec   mai 2016Groupe d'usagers sp québec   mai 2016
Groupe d'usagers sp québec mai 2016
 
Groupe d'usagers sp québec janvier 2017
Groupe d'usagers sp québec   janvier 2017Groupe d'usagers sp québec   janvier 2017
Groupe d'usagers sp québec janvier 2017
 
Groupe d'usagers sp québec janvier (montreal) étude de cas - l'intranet de ...
Groupe d'usagers sp québec   janvier (montreal) étude de cas - l'intranet de ...Groupe d'usagers sp québec   janvier (montreal) étude de cas - l'intranet de ...
Groupe d'usagers sp québec janvier (montreal) étude de cas - l'intranet de ...
 
Groupe d'usagers sp québec - février 2016
Groupe d'usagers sp québec - février 2016Groupe d'usagers sp québec - février 2016
Groupe d'usagers sp québec - février 2016
 
Groupe d'usagers sp québec - avril 2017
Groupe d'usagers sp québec - avril 2017Groupe d'usagers sp québec - avril 2017
Groupe d'usagers sp québec - avril 2017
 
Grics 2017 - construisez votre intranet avec microsoft office 365 sans code
Grics   2017 - construisez votre intranet avec microsoft office 365 sans codeGrics   2017 - construisez votre intranet avec microsoft office 365 sans code
Grics 2017 - construisez votre intranet avec microsoft office 365 sans code
 
Programme de reconnaissance MVP
Programme de reconnaissance MVPProgramme de reconnaissance MVP
Programme de reconnaissance MVP
 
Construisez votre intranet avec microsoft office 365 sans code a os canadia...
Construisez votre intranet avec microsoft office 365 sans code   a os canadia...Construisez votre intranet avec microsoft office 365 sans code   a os canadia...
Construisez votre intranet avec microsoft office 365 sans code a os canadia...
 

Personnaliser l'affichage de vos colonnes avec la mise en forme

  • 1. SharePoint Saturday Montreal#SPSMontreal Personnaliser l'affichage de vos colonnes avec la mise en forme et les extensions du SPFx Dans le passé, plusieurs techniques pouvaient êtres utilisées pour personnaliser l'affichage de vos colonnes : JSLink, JavaScript dans une WebPart Éditeur de contenu, code serveur, etc... Ces façons de faire ne sont plus supportées dans les sites modernes. Samuel Lévesque Architecte SharePoint @sharepointerie http://sharepointerie.com
  • 2. SharePoint Saturday Montreal#SPSMontreal Objectifs • Présenter différents scénarios de personnalisation supporté dans l’environnement moderne de SharePoint Online; • Présenter les avantages et inconvénients. Public cible : Développeur / Super-utilisateurs Niveau : 200
  • 3. SharePoint Saturday Montreal#SPSMontreal Sommaire de la présentation Pourquoi ? Comment ? Recommandations et démos
  • 4. SharePoint Saturday Montreal#SPSMontreal Historique – Personnaliser l'affichage de colonnes SP2010 : XSL/XSLT JavaScript incorporée (WebParts éditeur de contenu) Balises HTML dans les champs calculé SP2013 : Client side rendering (CSR) JSLINK SPO : 2016 → Site d’équipe moderne → Fin de la prise en charge du JavaScript incorporée Juin 2017 → Fin de la prise en charge des balises HTML dans les champs calculés Septembre 2017 → SPFx Extension → Field Customizer
  • 5. SharePoint Saturday Montreal#SPSMontreal Comparatif HTML dans un champ calculé JavaScript incorporée Client side rendering (JSLINK) Mise en forme (JSON) Personnalisateur de champ (SPFx Extension) Déploiement simple et rapide Supporté dans l’experience moderne Code personnalisé ? Limitation sur le type de colonne Flexibilité Mise en forme conditionnelle Liens d'action *
  • 6. SharePoint Saturday Montreal#SPSMontreal Scénarios possibles • Afficher un tableau de bord exécutif (KPI) • Afficher des indicateurs de gestion de projet • Afficher différentes compagnies avec un lien vers le symbole boursier • Afficher vos contacts avec un lien pour envoyer un courriel (mailto) • etc.
  • 8. SharePoint Saturday Montreal#SPSMontreal Sommaire de la présentation Pourquoi ? Comment ? Recommandations et démos
  • 9. SharePoint Saturday Montreal#SPSMontreal Comment ? • Consiste à construire un objet JSON qui décrit les éléments affichés lorsqu’un champ est inclus dans une vue de liste, ainsi que les styles à appliquer à ces éléments. • La mise en forme de la colonne ne modifie pas les données dans l’élément de liste ou le fichier; elle change uniquement la façon dont elles apparaissent lorsque les utilisateurs parcourent la liste. • Toute personne pouvant créer et gérer des vues dans une liste peut utiliser la mise en forme pour configurer l’affichage des champs; • Nécessite des connaissances en JSON + HTML + CSS;
  • 10. SharePoint Saturday Montreal#SPSMontreal Syntaxe détaillé en JSON • elmType – Spécifie le type d'élément : div, span, a, img, svg, path, button • txtContent - Propriété facultative qui spécifie le contenu du texte de l'élément spécifié par elmType. @currentField permet d’évaluer la valeur du champ actuel. • style - Propriété facultative qui spécifie les attributs de style à appliquer à l'élément spécifié par elmType. Attributs de style limité. • attributes - Propriété facultative qui spécifie des attributs supplémentaires à ajouter à l'élément : href, rel, src, class, target, title, role, iconName, d, aria • children - Propriété facultative qui spécifie les éléments enfants de l'élément spécifié par elmType • class – Spécifie la classe prédéfinie pour le style et l'action • operator - Spécifie le type d'opération à effectuer comme =, -, +, <, >, <=, etc… • operands - Spécifie les paramètres ou les opérations d'une expression
  • 11. SharePoint Saturday Montreal#SPSMontreal Exemple JSON { "elmType": "div", "txtContent": "@currentField" } Le format de colonne le plus simple est celui qui place la valeur du champ dans un élément <div /> JSON
  • 12. SharePoint Saturday Montreal#SPSMontreal Exemple JSON Cet exemple applique la couleur rouge du champ en cours lorsque la valeur à l'intérieur de la colonne DueDate (Nom interne) d'un élément est antérieure à la date / heure actuelle. { "elmType": "div", "txtContent": "@currentField", "style": { "color": { "operator": "?", "operands": [ { "operator": "<=", "operands": [ "[$DueDate]", "@now" ] }, "#ff0000", "" ] } } } JSON Résultat
  • 13. SharePoint Saturday Montreal#SPSMontreal Exemple JSON Le format de colonne le plus simple est celui qui place la valeur du champ dans un élément <div /> { "elmType": "a", "txtContent": "@currentField", "attributes": { "target": "_blank", "href": { "operator": "+", "operands": [ "http://finance.yahoo.com/quote/", "@currentField" ] } } } JSON Résultat
  • 14. SharePoint Saturday Montreal#SPSMontreal Comment? • Lors de la création d’une colonne • En modifiant une colonne existante
  • 15. SharePoint Saturday Montreal#SPSMontreal Plusieurs modèles disponibles https://github.com/SharePoint/sp-dev-column-formatting/tree/master/samples https://docs.microsoft.com/en-us/sharepoint/dev/declarative-customization/column-formatting
  • 16. SharePoint Saturday Montreal#SPSMontreal Column formatter 1.2 • Gratuit sur GitHub; • Rend la personnalisation de colonne plus facile pour un utilisateur sans connaissances JSON + HTML + CSS;
  • 18. SharePoint Saturday Montreal#SPSMontreal Sommaire de la présentation Pourquoi ? Comment ? Recommandations et démos
  • 20. SharePoint Saturday Montreal#SPSMontreal Recommandation 1 ) Penser à convertir vos solutions « Legacy » • JavaScript incorporée (WebParts éditeur de contenu) • Balises HTML dans les champs calculé • JSLINK Afin d’être supporté dans l’expérience moderne 2) Penser à adresser la personnalisation de champ dans votre gouvernance
  • 22. SharePoint Saturday Montreal#SPSMontreal Avantages • JSON est un format standard pour plusieurs développeurs; • Supporté par plusieurs outils et éditeurs; • Permet d’effectuer de la personnalisation tout en conservant SharePoint Out of the box; • Fonctionne avec les listes et bibliothèques modernes. Inconvénients Conclusion • Pas de code personnalisé; • Possible problème de gouvernance similaire aux Script Editor WebPart; • JSON + HTML + CSS pas si "conviviaux" pour un utilisateur moyen; • Ne fonctionne pas en mode "classique".
  • 24. SharePoint Saturday Montreal#SPSMontreal • Gestion des balises HTML dans les champs calculé de SharePoint • Column formatter (Solution) • Personnalisation des pages du site « modernes » • https://github.com/SharePoint/sp-dev-column- formatting/tree/master/samples • https://github.com/SharePoint/sp-dev-fx- extensions/tree/master/samples Références