Configurez l’instance du composant de liste de tickets afin que votre utilisateur puisse l’intégrer sur son site web pour accéder directement à la liste de tous les tickets à partir de son site web.
Avant de commencer
Vous devez disposer de la configuration suivante pour configurer l’instance du composant de liste de tickets :
Rôle requis : sn_embeddable_core.emb_admin
Procédure
-
Accédez à la .
-
Sur la page d’accueil, sélectionnez Créer un module ou utilisez le module existant.
Pour plus d’informations sur la création d’un nouveau module, reportez-vous à la section
Créer un module.
-
Sur la page du module, dans l’onglet Composants, ajoutez une instance de composant de liste de tickets à un groupe existant ou nouveau.
- Facultatif :
Activez l’option Afficher l’aperçu statique pour afficher une représentation visuelle d’un composant lorsqu’un aperçu en direct n’est pas disponible.
Remarque : Lorsque cette option est activée, les changements apportés aux propriétés globales ou aux propriétés de composant n’apparaissent pas dans l’onglet Aperçu en temps réel.
-
Configurez les propriétés d’instance du composant de liste de tickets.
-
Sélectionnez l’onglet Règles CORS pour configurer les règles CORS.
-
Sélectionnez l’onglet Composants .
Si un message s’affiche sur le périmètre de l’application, remplacez le périmètre par Composants Web pour que le Service clientèle puisse modifier l’enregistrement.
-
Sélectionnez Obtenir du code intégré.
Une fenêtre contextuelle apparaît pour afficher à la fois le code global et le code de composant.
-
Dans l’onglet Code global, examinez le code généré et sélectionnez Copier le code global.
Le code global ne doit être ajouté qu’une seule fois à votre page Web tierce.
import { init, login, logout, startGuestSession } from 'https://demo.servicenow.com/uxasset/externals/sn_embeddable_core/index.jsdbx';
await init({
theme: 'fad87d2ca304121029a4d1aed31e610f', /* sys_id of the theme to use for the embeddable components in your website */
baseURL: 'https://demo.servicenow.com', /* Base URL of the instance to be used for the embeddable components in your website */
authCallback: getTokenCallBack, /* Function which returns the auth token for the current user, required for auth setup */
module: '591800ffc1243610f87714367ed47c6a', /* Demo module */
pageName: document.title, /* Uses the browser's document title as the page name in User analytics experience */
guestTokenCallback: getGuestJWTTokenCallBack, /* Function which returns the guest token for the current user, required for guest validation setup */
cacheComponents: [] /* Pre-caches resources for improved performance. Update component list as per your usage */
});
function getTokenCallBack() {
var idToken; /* Get the id token for the current user */
return Promise.resolve(idToken);
}
function getGuestJWTTokenCallBack() {
var guestToken; /* Get the guest token for the current user */
return Promise.resolve(guestToken);
}
/* Uncomment below function to handle guest session */
// await startGuestSession();
/* Uncomment below functions to handle login and logout once the user logs into your website */
// await login();
// await logout();
- Facultatif :
Dans l’onglet Code de composant, faites glisser le commutateur Activer le gestionnaire d’événements pour gérer les événements déclenchés par les interactions de l’utilisateur sur la page Web.
-
Dans l’onglet Code de composant, examinez le code généré et sélectionnez Copier le code de composant.
Ce code généré inclut également des gestionnaires d’événements.
<!--
Module: Demo module
Group: Group 1
Instance: Case list 1
-->
<sn-embedx-case-list
table="sn_customerservice_case"
limit="20"
list-title="List of Cases"
query="state=10"
columns="number,short_description,sys_updated_on,state">
</sn-embedx-case-list>
<!--
The component also includes the following additional properties:
hide-header
hide-last-refreshed-text
hide-record-count
hide-search
hide-refresh
show-filters
hide-when-empty
disable-column-resizing
hide-errors
view
-->
<script type="module">
import { getEmbeddables, setEvents, setProperties } from 'https://demo.servicenow.com/uxasset/externals/sn_embeddable_core/index.jsdbx';
const snEmbedxCaseList = document.querySelector('sn-embedx-case-list');
getEmbeddables(["sn-embedx-case-list"]);
const eventHandlers = {
'SN_EMBEDX_CASE_LIST#RECORD_SELECTED' : (e) => {
// This event is dispatched when a record is selected.
var {table, record_sys_id} = e.detail.payload;
// the logic to construct the URL for the Case View component. Add your portal URL here.
const caseViewURL = '/caseview?emb_table='+table+'&emb_recordid='+record_sys_id;
// Redirect to the Case View component page
open(caseViewURL,'_self');
},
'SN_EMBEDX_CASE_LIST#COMPONENT_READY' : (e) => {
// This event is dispatched when a component is ready and usable.
},
'SN_EMBEDX_CASE_LIST#COMPONENT_ERROR' : (e) => {
// This event is dispatched when a property validation or internal error occurs.
var {errorMessage, errorType} = e.detail.payload;
console.log(errorMessage, errorType);
}
};
setEvents(snEmbedxCaseList, eventHandlers);
</script>