{"id":3892,"date":"2017-08-21T15:44:49","date_gmt":"2017-08-21T15:44:49","guid":{"rendered":"https:\/\/answers.gurussolutions.com\/answers\/how-to-embed-and-display-custom-html-content-in-netsuite-suitelets-2\/"},"modified":"2026-07-28T18:26:13","modified_gmt":"2026-07-28T18:26:13","slug":"comment-integrer-et-afficher-du-contenu-html-personnalise-dans-les-suitelets-netsuite","status":"publish","type":"qa_entry","link":"https:\/\/answers.gurussolutions.com\/fr\/answers\/comment-integrer-et-afficher-du-contenu-html-personnalise-dans-les-suitelets-netsuite\/","title":{"rendered":"Comment int\u00e9grer et afficher du contenu HTML personnalis\u00e9 dans les Suitelets NetSuite ?"},"content":{"rendered":"","protected":false},"template":"","meta":{"_kad_blocks_custom_css":"","_kad_blocks_head_custom_js":"","_kad_blocks_body_custom_js":"","_kad_blocks_footer_custom_js":"","_kadence_starter_templates_imported_post":false,"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","ga_subtitle":"Ce guide explique en d\u00e9tail comment int\u00e9grer des fichiers HTML personnalis\u00e9s dans les Suitelets NetSuite, les afficher, transmettre des param\u00e8tres et traiter les soumissions de formulaires.","ga_short_answer":"Pour afficher du code HTML personnalis\u00e9 dans un Suitelet NetSuite, t\u00e9l\u00e9chargez le fichier HTML dans le \u00ab File Cabinet \u00bb. Chargez le fichier \u00e0 l\u2019aide de N\/file.load(), r\u00e9cup\u00e9rez son contenu avec getContents(), puis ins\u00e9rez-le dans la r\u00e9ponse. Pour inclure l\u2019en-t\u00eate NetSuite, cr\u00e9ez un formulaire avec N\/ui\/serverWidget.createForm(), ajoutez un champ INLINEHTML, d\u00e9finissez sa valeur par d\u00e9faut (defaultValue), puis ins\u00e9rez le formulaire dans la page.","ga_scenario":"Les utilisateurs de NetSuite ont souvent besoin d\u2019afficher des interfaces utilisateur personnalis\u00e9es ou du contenu enrichi qui d\u00e9passe les capacit\u00e9s standard des formulaires SuiteScript. Cela implique g\u00e9n\u00e9ralement d\u2019int\u00e9grer un fichier HTML personnalis\u00e9 au sein d\u2019un Suitelet afin de tirer pleinement parti des fonctionnalit\u00e9s HTML, CSS et JavaScript, tout en continuant \u00e0 interagir avec le backend de NetSuite.","ga_solution":"Pour afficher du contenu HTML personnalis\u00e9 au sein d\u2019un Suitelet NetSuite, proc\u00e9dez comme suit :\n\nIl est recommand\u00e9 d\u2019\u00e9tudier les implications en mati\u00e8re de s\u00e9curit\u00e9 et de performances de toute solution HTML personnalis\u00e9e.\nLorsque vous utilisez des biblioth\u00e8ques externes (par exemple, jQuery, Mustache.js), assurez-vous de respecter les exigences l\u00e9gales et les conditions de licence.\nTout code JavaScript pr\u00e9sent sur la page HTML doit \u00eatre appel\u00e9 \u00e0 l\u2019aide de la fonction \u00ab ready \u00bb de jQuery ou d\u2019un \u00e9couteur d\u2019\u00e9v\u00e9nement DOMContentLoaded \u00e9quivalent, afin de garantir que la page est enti\u00e8rement charg\u00e9e.\n\n1. T\u00e9l\u00e9chargez le fichier .html dans le \u00ab File Cabinet \u00bb de NetSuite.\n2. Dans votre Suitelet, chargez le fichier .html et affichez son contenu sur la page.\n\n```\njavascript\n\/**\n * @NApiVersion 2.x\n * @NScriptType Suitelet\n *\/\ndefine(['N\/file'], function(file) {\n    function onRequest(context) {\n        if (context.request.method === 'GET') {\n            var fileID = 'YOUR_FILE_ID'; \/\/ Replace with the actual file ID from the File Cabinet\n            var fileObj = file.load({id: fileID});\n            var html = fileObj.getContents();\n            context.response.write(html);\n        }\n    }\n    return {\n        onRequest: onRequest\n    };\n});\n```\n\nPour afficher du code HTML avec l\u2019en-t\u00eate standard de NetSuite :\n\nPour inclure l\u2019en-t\u00eate standard de NetSuite dans votre code HTML personnalis\u00e9, placez le contenu HTML \u00e0 l\u2019int\u00e9rieur d\u2019un formulaire NetSuite.\n\n```\njavascript\n\/**\n * @NApiVersion 2.x\n * @NScriptType Suitelet\n *\/\ndefine(['N\/file', 'N\/ui\/serverWidget'], function(file, serverWidget) {\n    function onRequest(context) {\n        if (context.request.method === 'GET') {\n            var fileID = 'YOUR_FILE_ID'; \/\/ Replace with the actual file ID from the File Cabinet\n            var fileObj = file.load({id: fileID});\n            var html = fileObj.getContents();\n\n            var form = serverWidget.createForm({title: ''}); \/\/ An empty title can be used if no form title is desired\n            var htmlHeader = form.addField({\n                id: 'custpage_header',\n                type: serverWidget.FieldType.INLINEHTML,\n                label: 'HTML Content' \/\/ A label is required for addField in SuiteScript 2.x\n            });\n            htmlHeader.defaultValue = html;\n            context.response.writePage(form);\n        }\n    }\n    return {\n        onRequest: onRequest\n    };\n});\n```\n\nPour transmettre des param\u00e8tres au fichier HTML :\n\nPour transmettre dynamiquement des valeurs de votre Suitelet au code HTML int\u00e9gr\u00e9, d\u00e9finissez des espaces r\u00e9serv\u00e9s dans votre fichier HTML et remplacez-les dans le script de votre Suitelet.\n\nExemple HTML :\n```\nhtml\nvar taskList = ${taskList};\n```\n\nCode Suitelet permettant de remplacer les espaces r\u00e9serv\u00e9s :\n```\njavascript\nhtml = html.replace(\"${taskList}\", JSON.stringify(projectTaskNameMap));\n```\n\nVeillez \u00e0 bien distinguer les valeurs de type cha\u00eene de caract\u00e8res des autres valeurs afin d\u2019\u00e9viter tout probl\u00e8me.\n\nPour transmettre votre propre formulaire HTML via une requ\u00eate POST :\n\nSi vous pr\u00e9f\u00e9rez utiliser un formulaire HTML personnalis\u00e9 plut\u00f4t que le bouton de soumission de NetSuite, d\u00e9finissez ce formulaire dans votre code HTML en sp\u00e9cifiant correctement les attributs `enctype` et `action`. L\u2019attribut `action` doit pointer vers l\u2019URL externe de votre Suitelet.\n\n```\nhtml\n<form id=\"timeEntryHiddenForm\" enctype=\"UTF-8\" name=\"timeEntryHiddenForm\" action=\"https:\/\/system.na1.netsuite.com\/app\/site\/hosting\/scriptlet.nl?script4&deploy2\" method=\"post\">\n```","ga_source_author":"","ga_source_author_email":"","ga_date_original":"2017-08-21T08:44:49-07:00","ga_date_verified":"2026-07-05","ga_source_subject":"Using HTML in a Suitelet","ga_ans_id":"ANS-0233","ga_publish_decision":"publish_with_edits","ga_staleness_risk":"high","ga_review_priority":"spot_check","ga_tier2_verdict":"partially_outdated","ga_tier2_concerns":"The functions `nlapiLoadFile()` and `nlapiCreateForm()` are from SuiteScript 1.0 and are no longer the current recommended API for new development; SuiteScript 2.x uses `N\/file.load()` and `N\/ui\/serverWidget.createForm()` respectively.; The method to retrieve file content in SuiteScript 2.x is `fileObj.getContents()`, not `getValue()`.; The method `htmlHeader.setDefaultValue()` for setting the value of a form field is outdated; in SuiteScript 2.x, the `defaultValue` property is used (e.g., `field.defaultValue = html`).; The syntax for adding fields to a form and specifying the field type has changed from a string literal (`'inlinehtml'`) to an enum (`serverWidget.FieldType.INLINEHTML`) in SuiteScript 2.x.; The `response` object in SuiteScript 2.x Suitelets is typically accessed as `context.response` within the `onRequest` entry point.","ga_final_category":"SuiteScript Development","footnotes":""},"ga_category":[108,23,108],"ga_audience":[10],"ga_difficulty":[92],"class_list":["post-3892","qa_entry","type-qa_entry","status-publish","hentry","ga_category-developpement-suitescript","ga_category-suitescript-development","ga_audience-developer-suitescript","ga_difficulty-niveau-intermediaire"],"taxonomy_info":{"ga_category":[{"value":108,"label":"D\u00e9veloppement SuiteScript"},{"value":23,"label":"SuiteScript Development"},{"value":108,"label":"D\u00e9veloppement SuiteScript"}],"ga_audience":[{"value":10,"label":"Developer\/SuiteScript"}],"ga_difficulty":[{"value":92,"label":"Niveau interm\u00e9diaire"}]},"featured_image_src_large":[],"author_info":[],"comment_info":"","_links":{"self":[{"href":"https:\/\/answers.gurussolutions.com\/fr\/wp-json\/wp\/v2\/qa_entry\/3892","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/answers.gurussolutions.com\/fr\/wp-json\/wp\/v2\/qa_entry"}],"about":[{"href":"https:\/\/answers.gurussolutions.com\/fr\/wp-json\/wp\/v2\/types\/qa_entry"}],"version-history":[{"count":1,"href":"https:\/\/answers.gurussolutions.com\/fr\/wp-json\/wp\/v2\/qa_entry\/3892\/revisions"}],"predecessor-version":[{"id":5813,"href":"https:\/\/answers.gurussolutions.com\/fr\/wp-json\/wp\/v2\/qa_entry\/3892\/revisions\/5813"}],"wp:attachment":[{"href":"https:\/\/answers.gurussolutions.com\/fr\/wp-json\/wp\/v2\/media?parent=3892"}],"wp:term":[{"taxonomy":"ga_category","embeddable":true,"href":"https:\/\/answers.gurussolutions.com\/fr\/wp-json\/wp\/v2\/ga_category?post=3892"},{"taxonomy":"ga_audience","embeddable":true,"href":"https:\/\/answers.gurussolutions.com\/fr\/wp-json\/wp\/v2\/ga_audience?post=3892"},{"taxonomy":"ga_difficulty","embeddable":true,"href":"https:\/\/answers.gurussolutions.com\/fr\/wp-json\/wp\/v2\/ga_difficulty?post=3892"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}