Il existe 3 moyens d’intégrer des widgets dans du code HTML :
- Directement depuis le code HTML
- En chargeant le widget depuis le server script et en l’appelant depuis le code HTML
- En chargeant le widget dans le client script et en le stockant dans une variable
Il est recommandé d’utiliser la dernière méthode car le widget est chargé de manière asynchrone, après que le widget parent ait été chargé. Cela permet donc d’éviter de bloquer le chargement du widget parent et d’améliorer l’expérience utilisateur.
L’exemple ci-dessous illustre la troisième méthode, à savoir la méthode de chargement depuis un le client script, afin d’offrir de meilleurs performance.
Étape 1 - Dans le client script
Dans le script ci-dessou, l’id du widget est enregistré dans un champ du formulaire de configuration du portail, et appelé dynamiquement depuis le server script, et stocké dans la variable data.search_widget.
Cela permet de pouvoir configurer le widget utilisé pour la barre de recherche par exemple.
api.controller=function($scope, spUtil) {
spUtil.get($scope.data.search_widget).then(function(response){
$scope.searchWidget = response;
});
})
Étape 2 - Dans le code html
<sp-widget widget="searchWidget"></sp-widget>
Une fois que vous avez chargé le widget, vous pouvez l’appeler en utilisant un widget standard de ServiceNow “sp-widget” et en spécifiant dans l’attribut “widget” la variable contenant le widget chargé dynamiquement.
