Hacker les smartforms

Cet article à pour vocation de présenter les astuces afin d’effectuer de simples hacks dans vos smartforms, comme :

  1. Insérer une vue au dessus des onglets
  2. Retirer le fond de la première vue
  3. Changer le style des onglets
  4. Afficher les onglets comme des étapes
  5. Personnaliser le style d’une cellule, d’un tableau, d’une vue
  6. Afficher un document SharePoint
  7. Changer la couleur de fond d’une vue
  8. Cacher les mots de passe
  9. Ajouter des barres de défilement dans une vue liste
  10. Mettre une image de fond dans un formulaire

Pour insérer du Javascript dans un smartforms K2, vous pouvez vous référer à l’article de Sergii “Injecter du JavaScript dans un K2 smartforms”.

1. Insérer une vue au dessus des onglets

Hack très pratique pour positionner la vue d’en-tête au dessus des onglets (en attendant que ce soit disponible nativement – c’est-à-dire sans hack – dans les smartforms).
Wiki UI Hacks - move tabs.png
Pour faire cela, insérer le code suivant dans un contrôle Literal (DataLabel par exemple) :

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20language%3D%22javascript%22%20type%3D%22text%2Fjavascript%22%3E%0A%24('.view%3Afirst').insertBefore(%22.tabs-top%22)%3B%0A%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />

2. Retirer le fond de la première vue

Un peu comme le hack numéro 1, le code suivant permet de retirer la couleur du fond de la première vue.
Wiki UI Hacks - remove bg.png
Pour faire cela, insérer le code suivant dans un contrôle Literal (DataLabel par exemple) :

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20language%3D%22javascript%22%20type%3D%22text%2Fjavascript%22%3E%0A%24('.view%3Afirst').addClass(%22firstView%22)%3B%0A%24('.firstView%20div.innerpanel%20div').css(%22box-shadow%22%2C%22none%22)%3B%0A%24('.firstView%20div.panel-body').css(%22background-color%22%2C%22white%22)%3B%0A%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />

3. Changer le style des onglets

Hack tout simple pour ajouter des bordures aux onglets.
Wiki UI Hacks - tabs.png
Pour faire cela, insérer le code suivant dans un contrôle Literal (DataLabel par exemple) :








<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cstyle%3E%0A.theme-entry%20.tab-box%20ul.tab-box-tabs%0A%20%7B%0A%20%20%20border-bottom%3A%202px%20solid%20%239BA5B3%20!important%3B%0A%20%7D%0A.theme-entry%20.tab-box.tabs-top%20ul.tab-box-tabs%20a.tab.selected%0A%20%7B%0A%20%20%20border%3A%202px%20solid%20%239BA5B3%20!important%3B%0A%20%7D%0A%3C%2Fstyle%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;style&gt;" title="&lt;style&gt;" />







4. Afficher des onglets comme des étapes

Ce hack permet de créer un formulaire à remplir en plusieurs des étapes en modifiant simplement l’aspect des onglets.
multi step form.png
Pour faire cela, insérer le code suivant dans un contrôle Literal (DataLabel par exemple) :









<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cstyle%3E.tab-box-tabs%0A%7B%0Apadding%3A%200%3B%0Alist-style-type%3A%20none%3B%0Afont-family%3A%20arial%3B%0Afont-size%3A%2012px%3B%0Aclear%3A%20both%3B%0Aline-height%3A%201em%3B%0Amargin%3A%200%20-1px%3B%0Atext-align%3A%20center%3B%0Aborder%3A%20none%20!important%3B%0Aheight%3A%2034px%20!important%3B%0Abackground%3Anone%20!important%3B%0A%7D%0A.tab-box-tabs%20li%20a%0A%7B%0Aborder%3A%20none%20!important%3B%0Aline-height%3A%20initial%20!important%3B%0Abackground-color%3A%20transparent%20!important%3B%0A%7D%0A.tab-box-tabs%20li%20a%20span%0A%7B%0Abackground-color%3A%20transparent%20!important%3B%0Abackground-image%3A%20none%20!important%3B%0Aborder-style%3A%20none%20!important%3B%0A%7D%0A.tab-box-tabs%20li%20a%20span%20span%0A%7B%0Afloat%3A%20left%3B%0Apadding%3A%2010px%2030px%2010px%2040px%3B%0Abackground%3A%20%236B6B6B%3B%0Acolor%3A%20%23fff%20!important%3B%0Aposition%3A%20relative%3B%0Aborder-top%3A%201px%20solid%20%23636F80%3B%0Aborder-bottom%3A%201px%20solid%20%23636F80%3B%0Amargin%3A%200%201px%3B%0Aline-height%3A%20normal%20!important%3B%0Amin-width%3A%20100px%3B%0A%7D%0A.tab-box-tabs%20li%20a%20span%20span%3Abefore%0A%7B%0Acontent%3A%20''%3B%0Aborder-left%3A%2016px%20solid%20%23fff%3B%0Aborder-top%3A%2016px%20solid%20transparent%3B%0Aborder-bottom%3A%2016px%20solid%20transparent%3B%0Aposition%3A%20absolute%3B%0Atop%3A%200%3B%0Aleft%3A%200%3B%0A%7D%0A.tab-box-tabs%20li%20a%20span%20span%3Aafter%0A%7B%0Acontent%3A%20''%3B%0Aborder-left%3A%2016px%20solid%20%236B6B6B%3B%20%2F*not%20selected%20color*%2F%0Aborder-top%3A%2016px%20solid%20transparent%3B%0Aborder-bottom%3A%2016px%20solid%20transparent%3B%0Aposition%3A%20absolute%3B%0Atop%3A%200%3B%0Aleft%3A%20100%25%3B%0Az-index%3A%2020%3B%0A%7D%0A.tab-box-tabs%20li%20a.selected%20span%20span%0A%7B%0Abackground%3A%20%23636F80%3B%20%2F*selected%20color*%2F%0Acolor%3A%20white%20!important%3B%0A%7D%0A.tab-box-tabs%20li%20a.selected%20span%20span%3Aafter%0A%7B%0Aborder-left-color%3A%20%23636F80%3B%20%2F*selected%20color*%2F%0A%7D%0A.tab-box%20.tab-box-body%0A%7B%0Aborder%3A%200%20!important%3B%0A%7D%0A%3C%2Fstyle%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;style&gt;" title="&lt;style&gt;" />









5. Personnaliser le style d’une cellule, d’un tableau ou d’une vue

De temps en temps, nous voudrions qu’un élément particulier de notre affichage soit mis en avant parmi les autres.
Le code suivant insert une balise <span> avec un ID qui sert de référence pour appliquer des modifications sur le parent <td> ou <table> ou <div.row>.

Exemple 1 : changer la couleur d’une cellule (qui contient un tableau)

Wiki UI Hacks - cell bg color.png
Pour faire cela, insérer le code suivant dans un contrôle Literal (DataLabel par exemple) :

<span id='backgroundcolor'></span>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20language%3D%22javascript%22%20type%3D%22text%2Fjavascript%22%3E%0A%20%20%24('%23backgroundcolor').closest('td').css('background-color'%2C'whiteSmoke')%3B%0A%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />
Exemple 2 : Centrer une vue


Pour faire cela, insérer le code suivant dans un contrôle Literal (DataLabel par exemple) :

<span id='centeralign'></span>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20language%3D%22javascript%22%20type%3D%22text%2Fjavascript%22%3E%0A%24('%23centeralign').closest('div.row').css('text-align'%2C'center')%3B%0A%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />

6. Afficher un document SharePoint

Vous devez avoir au moins l’un des deux points suivants afin d’utiliser les avantages de WOPI frame :

  • Office365 – SharePoint Online
  • SharePoint on-premise + un autre serveur hébergeant Office Web Apps

wopi.png

6.1 Ajouter l’IFrame

Pour faire cela, insérer l’Expression suivant dans un contrôle Literal (DataLabel par exemple) :wopi expression.png

Concatenate ( <iframe id="wopiframe" src='https://demok2.sharepoint.com/_layouts/15/WopiFrame.aspx?sourcedoc=, Url Encode ( Link to Item Data Label ) , &action=embedview' frameborder='0' width='100%' height='1580px'></iframe> )

Où :

  • demok2.sharepoint.com – est votre SharePoint URL
  • Link to Item Data Label  contient la valeur “Link to Item” du document de la bibliothèque SharePoint.
6.2 Ajouter le bouton Refresh

Pour profiter d’un bouton de rechargement en haut de l’IFrame, ajouter le code suivant:

<button onclick="loadWOPI()">Reload</button>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%3E%0Afunction%20loadWOPI()%0A%7B%0A%20var%20iframe%20%3D%20document.getElementById('wopiframe')%3B%0A%20iframe.src%20%3D%20iframe.src%3B%0A%7D%0A%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />

7. Changer la couleur de fond d’une vue

Un peu comme le hack numéro 1, le code suivant permet de changer la couleur du fond d’une vue.
Wiki UI Hacks - change bg.png
Pour faire cela, insérer le code suivant dans un contrôle Literal (DataLabel par exemple) où le (2) est la position de la vue à changer :



<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cstyle%3Ediv.row%3Anth-of-type(2)%20.panel%20%3E%20.panel-body%7Bbackground-color%3Ared%3B%7D%3C%2Fstyle%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;style&gt;" title="&lt;style&gt;" />


Merci à http://codecodecode.ninja/ pour ce hack

8. Cacher les mots de passe

Vous souhaitez présenter un contrôle de saisie de mot de passe qui n’affiche pas ce dernier, rien de plus simple :

mdp

Pour faire cela, insérer le code suivant dans un contrôle Literal (DataLabel par exemple), où TextBox est le champ Name de votre TextBox mot de passe.

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%3E%20%24('input%5Bname%3D%22Text%20Box%22%5D').get(0).type%20%3D%20'password'%20%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />

9. Ajouter des barres de défilement dans une vue liste

Vous souhaitez ajouter des barres de défilement dans une vue liste pour facilité la saisie et l’affichage, rien de plus simple :

scroll

  1. Changer la propriété Name de la vue dans le formulaire.
  2. Puis, comme pour les autres hacks, il suffit d’ajouter un data label literal sur votre formulaire et de passer le texte suivant :

<style>.theme-entry .view div[name=”MaListe“] .grid-body{overflow: auto;max-height: 400px;}.theme-entry .view div[name=”MaListe“] .grid-body .grid-column-headers, .theme-entry .view div[name=”MaListe“] .grid-body .grid-body-content{min-width: 1000px;width: 150%}</style>

MaListe est le nom de votre vue dans le formulaire et les valeurs en gras sont vos préférences d’affichage.

L’article dédié ici.

9. Ajouter des barres de défilement dans une vue liste

Vous souhaitez ajouter une image de fond à votre formulaire, rien de plus simple ; )

Pour faire cela, insérer le code suivant dans un contrôle Literal (DataLabel par exemple) :

<script>document.body.style.backgroundImage = “url(‘https://…’)”;document.body.style.backgroundSize = “100%”;</script>

C’est tout pour cette fois, cheers !

N’hésitez pas de poster vos hacks dans les commentaires si vous souhaitez les partager.

benjamin

Technical Specialist @t K2 France ----- Twitter : @benjaminbertram ----- LinkedIn : Benjamin Bertram

3 thoughts to “Hacker les smartforms”

  1. Je me disais que ce post était intéressant, à mettre dans les favoris, et en arrivant à la fin de page je me vois que c’est toi 🙂
    bah du coup je ne suis plus surpris :p

Laisser un commentaire

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

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.