* Copyright (C) 2024 Frédéric France * * This program is free software; you can redistribute it and/or modify * it under the terms of the GNU General Public License as published by * the Free Software Foundation; either version 3 of the License, or * (at your option) any later version. * * This program is distributed in the hope that it will be useful, * but WITHOUT ANY WARRANTY; without even the implied warranty of * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the * GNU General Public License for more details. * * You should have received a copy of the GNU General Public License * along with this program. If not, see . */ // Load Dolibarr environment require '../../../../../../main.inc.php'; /** * @var DoliDB $db * @var HookManager $hookmanager * @var Translate $langs * @var User $user */ // Protection if external user if ($user->socid > 0) { accessforbidden(); } // Includes require_once DOL_DOCUMENT_ROOT . '/admin/tools/ui/class/documentation.class.php'; // Load documentation translations $langs->load('uxdocumentation'); // $documentation = new Documentation($db); $group = 'ExperimentalUx'; $experimentName = 'ExperimentalUxInputAjaxFeedback'; $experimentAssetsPath = $documentation->baseUrl . '/experimental/experiments/input-feedback/assets/'; $js = [ '/includes/ace/src/ace.js', '/includes/ace/src/ext-statusbar.js', '/includes/ace/src/ext-language_tools.js', ]; $css = [ $experimentAssetsPath . 'feddback-01.css' ]; // Output html head + body - Param is Title $documentation->docHeader($langs->trans($experimentName, $group), $js, $css); // Set view for menu and breadcrumb $documentation->view = [$group, $experimentName]; // Output sidebar $documentation->showSidebar(); ?>
showBreadCrumb(); ?>

trans($experimentName); ?>

showSummary(); ?>

Input Feedback (Experimental)

This experimental feature provides visual feedback on input fields based on their processing state. Currently, it is only available in this documentation and may be integrated into the develop branch of Dolibarr in the future.

How It Works

  • Processing: The .processing-feedback class is applied while an action is being processed.
  • Success: Once successfully completed, the .success-feedback class is applied.
  • Failure: In case of an error, the .fail-feedback class is applied.

Live Demo

', 'document.getElementById(\'btn-process-success\').addEventListener(\'click\', function () { let input = document.getElementById(\'test-input-01\'); input.classList.add(\'processing-feedback\'); setTimeout(() => { input.classList.remove(\'processing-feedback\'); input.classList.add(\'success-feedback\'); setTimeout(() => { input.classList.remove(\'success-feedback\'); }, 1000); }, 1500); }); document.getElementById(\'btn-process-fail\').addEventListener(\'click\', function () { let input = document.getElementById(\'test-input-01\'); input.classList.add(\'processing-feedback\'); setTimeout(() => { input.classList.remove(\'processing-feedback\'); input.classList.add(\'fail-feedback\'); setTimeout(() => { input.classList.remove(\'fail-feedback\'); }, 1000); }, 1500); });', '', ); echo $documentation->showCode($lines, 'html'); ?>
docFooter(); ?>