TYPO3 Module

TYPO3 Version 9 Backend Module use ajax

Mudule register

ext_tables.php

if (TYPO3_MODE === 'BE') {

	\TYPO3\CMS\Extbase\Utility\ExtensionUtility::registerModule(
		'Xp.CustomTemplate',
		'tools',
		'customtools',
		'',
		['Administration' => 'index, shell'],
		[
			'access' => 'systemMaintainer',
			'icon' => 'EXT:custom_template/Resources/Public/Icons/xp.svg',
			'labels' => 'LLL:EXT:custom_template/Resources/Private/Language/locallang_mod.xlf'
		]
	);
}

ajax register

Configuration/Backend/AjaxRoutes.php
http://www.domain.local/typo3/index.php?route=/ajax/run/shell&token=756af2eea1c2740b3b060265af5918f24ba9c455

<?php
return [
	'run_shell' => [
		'path' => '/run/shell',
		'target' => \Xp\CustomTemplate\Controller\AdministrationController::class. '::runShellAction'
	],
];

AdministrationController.php

public function runShellAction(
		ServerRequestInterface $request,
		ResponseInterface $response
	): ResponseInterface
	{
    // some code hier!
  }

JavaScript

custom_template/Resources/Public/JavaScript/AdministrationModule.js

define(['jquery'], function($) {
// hier can use $ - jQuery
});

JS im Fluid Template

Layout/Default includeRequireJsModules, includeCssFiles, includeJsFiles

<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers">
	<f:be.container
		pageTitle="custom_template: shell"
		includeRequireJsModules="{0: 'jquery'}"
		includeCssFiles="{0: '{f:uri.resource(path:\'Css/Backend/administration.css\')}'}"
		includeJsFiles="{0: '{f:uri.resource(path:\'JavaScript/runShell.js\')}'}"
		>
		<div class="administration">
			<f:flashMessages/>
			<f:render section="content"/>
		</div>
	</f:be.container>
</html>

Template: Shell.html includeRequireJsModules: TYPO3/CMS/CustomTemplate/AdministrationModule

<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers"
	  data-namespace-typo3-fluid="true">
<f:layout name="Backend/Ajax" />

<f:section name="content">
	<f:be.pageRenderer includeRequireJsModules="{0:'TYPO3/CMS/CustomTemplate/AdministrationModule'}" />
  // your other html code
</f:section>
</html>