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.

Méthode 1 - Inclure un widget directement dans le template HTML

Vous pouvez directement appeler un widget depuis le code HTML du widget. Pour cela vous devez passer en paramètre le nom du widget.

<div>
    <widget id="widget-cool-clock"></widget>
</div>

Vous pouvez rajouter des options dans les paramètres dans l'appel de votre widget. Voici un exemple :

<widget id="widget-cool-clock" options='{"zone": "America/Los_Angeles","title": "San Diego, CA"}'></widget>

Note : les options peuvent être stockées dans une variable coté client script ou server script.

Méthode 2 - Charger le widget depuis le server script

Vous pouvez utiliser la méthode $sp.getWidget() pour charger un widget depuis le server script. Voici un exemple d'utilisation :

data.widget = $sp.getWidget("widget-sc-cat-item");

Méthode 3 - Charger le widget depuis un client script

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.

api.controller=function($scope, spUtil) {
    spUtil.get($scope.data.search_widget).then(function(response){
			$scope.searchWidget = response;
	});
})

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.

<sp-widget widget="searchWidget"></sp-widget>