Comment intégrer et afficher du contenu HTML personnalisé dans les Suitelets NetSuite ?

Pour afficher du contenu HTML personnalisé au sein d’un Suitelet NetSuite, procédez comme suit :

Il est recommandé d’étudier les implications en matière de sécurité et de performances de toute solution HTML personnalisée.

Lorsque vous utilisez des bibliothèques externes (par exemple, jQuery, Mustache.js), assurez-vous de respecter les exigences légales et les conditions de licence.

Tout code JavaScript présent sur la page HTML doit être appelé à l’aide de la fonction « ready » de jQuery ou d’un écouteur d’événement DOMContentLoaded équivalent, afin de garantir que la page est entièrement chargée.

1. Téléchargez le fichier .html dans le « File Cabinet » de NetSuite.

2. Dans votre Suitelet, chargez le fichier .html et affichez son contenu sur la page.

javascript
/**
 * @NApiVersion 2.x
 * @NScriptType Suitelet
 */
define(['N/file'], function(file) {
    function onRequest(context) {
        if (context.request.method === 'GET') {
            var fileID = 'YOUR_FILE_ID'; // Replace with the actual file ID from the File Cabinet
            var fileObj = file.load({id: fileID});
            var html = fileObj.getContents();
            context.response.write(html);
        }
    }
    return {
        onRequest: onRequest
    };
});

Pour afficher du code HTML avec l’en-tête standard de NetSuite :

Pour inclure l’en-tête standard de NetSuite dans votre code HTML personnalisé, placez le contenu HTML à l’intérieur d’un formulaire NetSuite.

javascript
/**
 * @NApiVersion 2.x
 * @NScriptType Suitelet
 */
define(['N/file', 'N/ui/serverWidget'], function(file, serverWidget) {
    function onRequest(context) {
        if (context.request.method === 'GET') {
            var fileID = 'YOUR_FILE_ID'; // Replace with the actual file ID from the File Cabinet
            var fileObj = file.load({id: fileID});
            var html = fileObj.getContents();

            var form = serverWidget.createForm({title: ''}); // An empty title can be used if no form title is desired
            var htmlHeader = form.addField({
                id: 'custpage_header',
                type: serverWidget.FieldType.INLINEHTML,
                label: 'HTML Content' // A label is required for addField in SuiteScript 2.x
            });
            htmlHeader.defaultValue = html;
            context.response.writePage(form);
        }
    }
    return {
        onRequest: onRequest
    };
});

Pour transmettre des paramètres au fichier HTML :

Pour transmettre dynamiquement des valeurs de votre Suitelet au code HTML intégré, définissez des espaces réservés dans votre fichier HTML et remplacez-les dans le script de votre Suitelet.

Exemple HTML :

html
var taskList = ${taskList};

Code Suitelet permettant de remplacer les espaces réservés :

javascript
html = html.replace("${taskList}", JSON.stringify(projectTaskNameMap));

Veillez à bien distinguer les valeurs de type chaîne de caractères des autres valeurs afin d’éviter tout problème.

Pour transmettre votre propre formulaire HTML via une requête POST :

Si vous préférez utiliser un formulaire HTML personnalisé plutôt que le bouton de soumission de NetSuite, définissez ce formulaire dans votre code HTML en spécifiant correctement les attributs enctype et action. L’attribut action doit pointer vers l’URL externe de votre Suitelet.

html
<form id="timeEntryHiddenForm" enctype="UTF-8" name="timeEntryHiddenForm" action="https://system.na1.netsuite.com/app/site/hosting/scriptlet.nl?script4&deploy2" method="post">