{"id":3611,"date":"2017-08-21T14:39:54","date_gmt":"2017-08-21T14:39:54","guid":{"rendered":"https:\/\/answers.gurussolutions.com\/answers\/how-to-inject-custom-css-into-a-netsuite-record-form-header-2\/"},"modified":"2026-07-28T18:25:55","modified_gmt":"2026-07-28T18:25:55","slug":"comment-inserer-du-css-personnalise-dans-len-tete-dun-formulaire-denregistrement-netsuite","status":"publish","type":"qa_entry","link":"https:\/\/answers.gurussolutions.com\/fr\/answers\/comment-inserer-du-css-personnalise-dans-len-tete-dun-formulaire-denregistrement-netsuite\/","title":{"rendered":"Comment ins\u00e9rer du CSS personnalis\u00e9 dans l&rsquo;en-t\u00eate d&rsquo;un formulaire d&rsquo;enregistrement 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":"Utilisez un script d'\u00e9v\u00e9nement utilisateur et un champ HTML int\u00e9gr\u00e9 pour ajouter de mani\u00e8re dynamique une feuille de style personnalis\u00e9e aux formulaires d'enregistrement NetSuite.","ga_short_answer":"Pour ajouter un fichier CSS personnalis\u00e9 \u00e0 l\u2019en-t\u00eate d\u2019un formulaire d\u2019enregistrement NetSuite, h\u00e9bergez ce fichier CSS dans le \u00ab File Cabinet \u00bb en veillant \u00e0 ce qu\u2019il soit accessible au public. Cr\u00e9ez ensuite un script d\u2019\u00e9v\u00e9nement utilisateur avec une fonction `beforeLoad` qui ajoute un champ HTML en ligne. La valeur par d\u00e9faut de ce champ contiendra du code JavaScript qui cr\u00e9e et ins\u00e8re un \u00e9l\u00e9ment de lien vers une feuille de style dans l\u2019en-t\u00eate du formulaire.","ga_scenario":"Les utilisateurs de NetSuite ont souvent besoin de personnaliser la mise en page des formulaires d\u2019enregistrement afin d\u2019am\u00e9liorer l\u2019exp\u00e9rience utilisateur ou de respecter des directives de marque sp\u00e9cifiques. L\u2019interface standard de NetSuite ne propose pas de m\u00e9thode directe pour ajouter des fichiers CSS personnalis\u00e9s \u00e0 l\u2019en-t\u00eate des formulaires d\u2019enregistrement individuels. Ce sc\u00e9nario r\u00e9pond au besoin de charger dynamiquement une feuille de style personnalis\u00e9e lors de l\u2019acc\u00e8s \u00e0 un formulaire d\u2019enregistrement.","ga_solution":"1. H\u00e9bergez le fichier CSS personnalis\u00e9 : t\u00e9l\u00e9chargez votre fichier CSS personnalis\u00e9 ainsi que toutes les images associ\u00e9es dans le dossier de fichiers NetSuite. Assurez-vous que la disponibilit\u00e9 du fichier est d\u00e9finie sur \u00ab Disponible sans connexion \u00bb afin de permettre l\u2019acc\u00e8s public.\n2. Cr\u00e9ez un script d\u2019\u00e9v\u00e9nement utilisateur : d\u00e9veloppez un nouveau script d\u2019\u00e9v\u00e9nement utilisateur dans SuiteScript 2.x. Ce script s\u2019ex\u00e9cutera lors de l\u2019\u00e9v\u00e9nement `beforeLoad`\ndu formulaire d\u2019enregistrement cible.\n```\njavascript\n\/**\n * @NApiVersion 2.x\n * @NScriptType UserEventScript\n *\/\ndefine([], function() {\n    function beforeLoadTestInject(context) {\n        var form = context.form;\n        var cssScriptField = form.addField({\n            id: 'custpage_cssfield',\n            type: 'inlinehtml',\n            label: 'Custom CSS Injector'\n        });\n        cssScriptField.defaultValue = \"<script type=\"text\/javascript\">var linkElement = document.createElement('link');linkElement.rel = 'stylesheet';linkElement.href = 'https:\/\/system.sandbox.netsuite.com\/core\/media\/media.nl?id=577&c=05801&h=F4390276d84372784aa&_xt.css';document.getElementsByTagName('head')[0].insertBefore(linkElement,document.getElementsByTagName('head')[0].firstChild);<\/script>\";\n    }\n    return {\n        beforeLoad: beforeLoadTestInject\n    };\n});\n```\nLe script ci-dessus cr\u00e9e un champ HTML en ligne (`custpage_cssfield`\n) sur le formulaire d\u2019enregistrement. Le `defaultValue`\nde ce champ contient un extrait de code JavaScript. Ce code JavaScript cr\u00e9e dynamiquement un \u00e9l\u00e9ment `<link>`\ndestin\u00e9 \u00e0 une feuille de style et l\u2019ins\u00e8re en tant que premier \u00e9l\u00e9ment enfant au sein de la section `<head>`\ndu document HTML. Cela garantit que le CSS personnalis\u00e9 se charge d\u00e8s le d\u00e9but du processus de rendu de la page. Il est important de noter que cette m\u00e9thode implique une manipulation directe du Mod\u00e8le d\u2019objet de document (DOM), ce que la documentation NetSuite d\u00e9conseille formellement, en recommandant l\u2019utilisation des API SuiteScript pour les interactions avec l\u2019interface utilisateur. De plus, NetSuite a indiqu\u00e9 que les champs HTML int\u00e9gr\u00e9s dans les formulaires d\u2019enregistrement standard, en dehors des Suitelets, sont susceptibles d\u2019\u00eatre d\u00e9pr\u00e9ci\u00e9s dans une prochaine version. Par cons\u00e9quent, cette approche doit \u00eatre consid\u00e9r\u00e9e comme une solution \u00e0 court terme et utilis\u00e9e avec prudence, car elle peut entra\u00eener un comportement inattendu ou n\u00e9cessiter des ajustements dans les futures versions de NetSuite.","ga_source_author":"","ga_source_author_email":"","ga_date_original":"2017-08-21T10:39:54-04:00","ga_date_verified":"2026-07-05","ga_source_subject":"How do I add a custom CSS file in the header section of a Netsuite record?","ga_ans_id":"ANS-1872","ga_publish_decision":"publish_with_edits","ga_staleness_risk":"high","ga_review_priority":"spot_check","ga_tier2_verdict":"partially_outdated","ga_tier2_concerns":"The script uses SuiteScript 1.0 syntax, whereas SuiteScript 2.x (including 2.1) is the current standard, meaning the function signature for `beforeLoad` has changed from `(type, form)` to `(context)`.; The solution involves direct Document Object Model (DOM) manipulation (`document.createElement`, `document.getElementsByTagName`), which NetSuite documentation explicitly advises against, stating that the NetSuite UI should be accessed only through SuiteScript APIs.; NetSuite documentation indicates that 'Inline HTML fields on Form pages, except Suitelet Forms, will be deprecated in a future release,' suggesting this approach for standard record forms via user event scripts is not a long-term solution.","ga_final_category":"SuiteScript Development","footnotes":""},"ga_category":[108,23,108],"ga_audience":[10],"ga_difficulty":[92],"class_list":["post-3611","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\/3611","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\/3611\/revisions"}],"predecessor-version":[{"id":5531,"href":"https:\/\/answers.gurussolutions.com\/fr\/wp-json\/wp\/v2\/qa_entry\/3611\/revisions\/5531"}],"wp:attachment":[{"href":"https:\/\/answers.gurussolutions.com\/fr\/wp-json\/wp\/v2\/media?parent=3611"}],"wp:term":[{"taxonomy":"ga_category","embeddable":true,"href":"https:\/\/answers.gurussolutions.com\/fr\/wp-json\/wp\/v2\/ga_category?post=3611"},{"taxonomy":"ga_audience","embeddable":true,"href":"https:\/\/answers.gurussolutions.com\/fr\/wp-json\/wp\/v2\/ga_audience?post=3611"},{"taxonomy":"ga_difficulty","embeddable":true,"href":"https:\/\/answers.gurussolutions.com\/fr\/wp-json\/wp\/v2\/ga_difficulty?post=3611"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}