TYPO3: How to add a css and JS on the backend

Question

How do i add css and javascript file(s) on the backend?

I would like to use those files for custom created content elements in order to make them more appealing for the user.

System: TYPO3 v9
Mode: Composer Mode
Target: Custom Content element

Dedradedric

Possible duplicate of How to include a custom CSS file in TYPO3 – Amalgam

@chris G not even close to duplicate. read the content again carefully – Dedradedric

Answer 1

In TYPO3 v9 you will have to do the following and on every mode

CSS

$GLOBALS['TBE_STYLES']['skins']['your_extension_key'] = array();
$GLOBALS['TBE_STYLES']['skins']['your_extension_key']['name'] = 'My Awesome Name';
$GLOBALS['TBE_STYLES']['skins']['your_extension_key']['stylesheetDirectories'] = array(
    'visual' => 'EXT:yourextension/Resources/Public/Css/Backend',
    'theme' => 'EXT:yourextension/Resources/Public/Css/Monokai'
);

The path here (CSS) is a directory, so it will read all the files in the pointed directory.

JS

$renderer = \TYPO3\CMS\Core\Utility\GeneralUtility::makeInstance(\TYPO3\CMS\Core\Page\PageRenderer::class);
$renderer->addJsFile('yourextension/Resources/Public/JavaScript/Backend.js', 'text/javascript', false, false, '', true,  '|', false, '');
$renderer->addJsFile('yourextension/Resources/Public/JavaScript/another.js', 'text/javascript', false, false,  '', false, '|', false, '');

Parameters:

addJsFile(
       $file, 
       $type = 'text/javascript'
       $compress = true,
       $forceOnTop = false,
       $allWrap = '',
       $excludeFromConcatenation = false,
       $splitChar = '|',
       $async = false,
       $integrity = ''
);

In large files, it might have some problems with the loading, but if anyone could confirm that, i would really appreciate it.

Additional information:

If you want to use TYPO3's jQuery (strongly recommended it in order to avoid conflicts) you should use the following as well:

require(["jquery"], function($) {
   //your awesome function
});

You could use a condition as well to make sure that it is loaded on the backend:

if (TYPO3_MODE === 'BE') {
   $renderer = \TYPO3\CMS\Core\Utility\GeneralUtility::makeInstance(\TYPO3\CMS\Core\Page\PageRenderer::class);
   ...
}

Dedradedric