N°3542 Separate JS buttons from URL buttons

2026-02-13 07:24:13 +01:00 · 2021-03-18 15:38:04 +01:00
parent 82a5ab5aef
commit 8471bdeffe
13 changed files with 428 additions and 157 deletions
--- a/application/cmdbabstract.class.inc.php
+++ b/application/cmdbabstract.class.inc.php
@@ -1921,25 +1921,29 @@ HTML
 						// N°3227 button to open predefined queries dialog
 						$sPredefinedBtnId = 'predef_btn_'.$sFieldPrefix.$sAttCode.$sNameSuffix;
 						$sSearchQueryLbl = Dict::S('UI:Edit:SearchQuery');
-						$oPredefQueryButton = ButtonUIBlockFactory::MakeIconLink(
+						$oPredefQueryButton = ButtonUIBlockFactory::MakeIconAction(
 							'fas fa-search',
 							$sSearchQueryLbl,
 							null,
 							null,
-							null,
+							false,
 							$sPredefinedBtnId
 						);
-						$oPredefQueryButton->AddCSSClass('ibo-action-button');
+						$oPredefQueryButton->AddCSSClass('ibo-action-button')
+						->SetOnClickJsCode(
+							<<<JS
+	oACWidget_{$iId}.Search();
+JS
+						);
 						$oPredefQueryRenderer = new BlockRenderer($oPredefQueryButton);
 						$sAdditionalStuff = $oPredefQueryRenderer->RenderHtml();
+						$oPage->add_ready_script($oPredefQueryRenderer->RenderJsInline($oPredefQueryButton::ENUM_JS_TYPE_ON_INIT));
+
 						$oPage->add_ready_script(<<<JS
 // noinspection JSAnnotator
 oACWidget_{$iId} = new ExtKeyWidget('$iId', 'QueryOQL', 'SELECT QueryOQL WHERE is_template = \'yes\'', '$sSearchQueryLbl', true, null, null, true, true, 'oql');
 // noinspection JSAnnotator
 oACWidget_{$iId}.emptyHtml = "<div style=\"background: #fff; border:0; text-align:center; vertical-align:middle;\"><p>Use the search form above to search for objects to be added.</p></div>";
-$("#$sPredefinedBtnId").on('click', function () {
-	oACWidget_{$iId}.Search();
-});

 if ($('#ac_dlg_{$iId}').length == 0)
 {
@@ -1961,25 +1965,25 @@ JS
 						$sTestResId = 'query_res_'.$sFieldPrefix.$sAttCode.$sNameSuffix; //$oPage->GetUniqueId();
 						$sBaseUrl = utils::GetAbsoluteUrlAppRoot().'pages/run_query.php?expression=';
 						$sTestQueryLbl = Dict::S('UI:Edit:TestQuery');
-						$oTestQueryButton = ButtonUIBlockFactory::MakeIconLink(
+						$oTestQueryButton = ButtonUIBlockFactory::MakeIconAction(
 							'fas fa-play',
 							$sTestQueryLbl,
 							null,
 							null,
-							null,
+							false,
 							$sTestResId
 						);
-						$oTestQueryButton->AddCSSClass('ibo-action-button');
-						$oPage->add_ready_script(<<<JS
-$("#$sTestResId").on('click', function () {
-	var sQueryRaw = $("#$iId").val(),
-		sQueryEncoded = encodeURI(sQueryRaw);
-	window.open('$sBaseUrl' + sQueryEncoded, '_blank');
-});
+						$oTestQueryButton->AddCSSClass('ibo-action-button')
+						->SetOnClickJsCode(
+							<<<JS
+var sQueryRaw = $("#$iId").val(),
+sQueryEncoded = encodeURI(sQueryRaw);
+window.open('$sBaseUrl' + sQueryEncoded, '_blank');
 JS
 						);
 						$oTestQueryRenderer = new BlockRenderer($oTestQueryButton);
 						$sAdditionalStuff .= $oTestQueryRenderer->RenderHtml();
+						$oPage->add_ready_script($oTestQueryRenderer->RenderJsInline($oTestQueryButton::ENUM_JS_TYPE_ON_INIT));
 					} else {
 						$sAdditionalStuff = '';
 					}
--- a/application/dashboard.class.inc.php
+++ b/application/dashboard.class.inc.php
@@ -1115,7 +1115,7 @@ JS
 		$sPopoverMenuId = "ibo-dashboard-menu-popover-{$sId}";
 		$sName = 'UI:Dashboard:Actions';
 		$oToolbar = $oPage->GetTopBarLayout()->GetToolbar();
-		$oActionButton = ButtonUIBlockFactory::MakeLinkNeutral('', '', 'fas fa-ellipsis-v', $sName, '', $sMenuTogglerId);
+		$oActionButton = ButtonUIBlockFactory::MakeIconAction('fas fa-ellipsis-v', Dict::S($sName),$sName, '', false, $sMenuTogglerId);
 		$oActionButton->AddCSSClass('ibo-top-bar--toolbar-dashboard-menu-toggler');

 		$oToolbar->AddSubBlock($oActionButton);
--- a/application/displayblock.class.inc.php
+++ b/application/displayblock.class.inc.php
@@ -2185,8 +2185,11 @@ class MenuBlock extends DisplayBlock
 				}

 				$sTarget = isset($aAction['target']) ? $aAction['target'] : '';
-				$oActionButton = ButtonUIBlockFactory::MakeLinkNeutral($sUrl, $sLabel, $sIconClass, $sActionId, $sTarget);
+				$oActionButton = ButtonUIBlockFactory::MakeLinkNeutral($sUrl, $sLabel, $sIconClass, $sTarget, $sActionId);
 				$oActionButton->AddCSSClass('ibo-action-button');
+				if(empty($sLabel)){
+					$oActionButton->SetTooltip(Dict::S($sActionId));
+				}
 				$oActionsBlock->AddSubBlock($oActionButton);
 			}

@@ -2200,9 +2203,8 @@ class MenuBlock extends DisplayBlock
 			}

 			if ($this->m_sStyle == 'details') {
-				$oActionButton = ButtonUIBlockFactory::MakeLinkNeutral("{$sRootUrl}pages/UI.php?operation=search_form&do_search=0&class=$sClass{$sContext}", '', 'fas fa-search', 'UI:SearchFor_Class');
-				$oActionButton->SetTooltip(Dict::Format('UI:SearchFor_Class', MetaModel::GetName($sClass)))
-					->AddCSSClass('ibo-action-button');
+				$oActionButton = ButtonUIBlockFactory::MakeIconLink('fas fa-search', Dict::Format('UI:SearchFor_Class', MetaModel::GetName($sClass)), "{$sRootUrl}pages/UI.php?operation=search_form&do_search=0&class=$sClass{$sContext}", '','UI:SearchFor_Class');
+				$oActionButton->AddCSSClass('ibo-action-button');
 				$oActionsBlock->AddSubBlock($oActionButton);
 			}

@@ -2212,7 +2214,7 @@ class MenuBlock extends DisplayBlock
 				} else {
 					$sName = 'UI:Menu:Actions';
 				}
-				$oActionButton = ButtonUIBlockFactory::MakeLinkNeutral('', '', 'fas fa-ellipsis-v', $sName, '', $sMenuTogglerId);
+				$oActionButton = ButtonUIBlockFactory::MakeIconAction('fas fa-ellipsis-v', Dict::S($sName), $sName, '', false, $sMenuTogglerId);
 				// TODO Add Js
 				$oActionsBlock->AddSubBlock($oActionButton)
 					->AddSubBlock($oPage->GetPopoverMenu($sPopoverMenuId, $aActions));
--- a/lib/composer/autoload_classmap.php
+++ b/lib/composer/autoload_classmap.php
@@ -159,7 +159,9 @@ return array(
    'Combodo\\iTop\\Application\\UI\\Base\\Component\\Alert\\AlertUIBlockFactory' => $baseDir . '/sources/application/UI/Base/Component/Alert/AlertUIBlockFactory.php',
    'Combodo\\iTop\\Application\\UI\\Base\\Component\\Breadcrumbs\\Breadcrumbs' => $baseDir . '/sources/application/UI/Base/Component/Breadcrumbs/Breadcrumbs.php',
    'Combodo\\iTop\\Application\\UI\\Base\\Component\\Button\\Button' => $baseDir . '/sources/application/UI/Base/Component/Button/Button.php',
+    'Combodo\\iTop\\Application\\UI\\Base\\Component\\Button\\ButtonJS' => $baseDir . '/sources/application/UI/Base/Component/Button/ButtonJS.php',
    'Combodo\\iTop\\Application\\UI\\Base\\Component\\Button\\ButtonUIBlockFactory' => $baseDir . '/sources/application/UI/Base/Component/Button/ButtonUIBlockFactory.php',
+    'Combodo\\iTop\\Application\\UI\\Base\\Component\\Button\\ButtonURL' => $baseDir . '/sources/application/UI/Base/Component/Button/ButtonURL.php',
    'Combodo\\iTop\\Application\\UI\\Base\\Component\\CollapsibleSection\\CollapsibleSection' => $baseDir . '/sources/application/UI/Base/Component/CollapsibleSection/CollapsibleSection.php',
    'Combodo\\iTop\\Application\\UI\\Base\\Component\\CollapsibleSection\\CollapsibleSectionUIBlockFactory' => $baseDir . '/sources/application/UI/Base/Component/CollapsibleSection/CollapsibleSectionUIBlockFactory.php',
    'Combodo\\iTop\\Application\\UI\\Base\\Component\\Dashlet\\DashletBadge' => $baseDir . '/sources/application/UI/Base/Component/Dashlet/DashletBadge.php',
--- a/lib/composer/autoload_static.php
+++ b/lib/composer/autoload_static.php
@@ -389,7 +389,9 @@ class ComposerStaticInit0018331147de7601e7552f7da8e3bb8b
        'Combodo\\iTop\\Application\\UI\\Base\\Component\\Alert\\AlertUIBlockFactory' => __DIR__ . '/../..' . '/sources/application/UI/Base/Component/Alert/AlertUIBlockFactory.php',
        'Combodo\\iTop\\Application\\UI\\Base\\Component\\Breadcrumbs\\Breadcrumbs' => __DIR__ . '/../..' . '/sources/application/UI/Base/Component/Breadcrumbs/Breadcrumbs.php',
        'Combodo\\iTop\\Application\\UI\\Base\\Component\\Button\\Button' => __DIR__ . '/../..' . '/sources/application/UI/Base/Component/Button/Button.php',
+        'Combodo\\iTop\\Application\\UI\\Base\\Component\\Button\\ButtonJS' => __DIR__ . '/../..' . '/sources/application/UI/Base/Component/Button/ButtonJS.php',
        'Combodo\\iTop\\Application\\UI\\Base\\Component\\Button\\ButtonUIBlockFactory' => __DIR__ . '/../..' . '/sources/application/UI/Base/Component/Button/ButtonUIBlockFactory.php',
+        'Combodo\\iTop\\Application\\UI\\Base\\Component\\Button\\ButtonURL' => __DIR__ . '/../..' . '/sources/application/UI/Base/Component/Button/ButtonURL.php',
        'Combodo\\iTop\\Application\\UI\\Base\\Component\\CollapsibleSection\\CollapsibleSection' => __DIR__ . '/../..' . '/sources/application/UI/Base/Component/CollapsibleSection/CollapsibleSection.php',
        'Combodo\\iTop\\Application\\UI\\Base\\Component\\CollapsibleSection\\CollapsibleSectionUIBlockFactory' => __DIR__ . '/../..' . '/sources/application/UI/Base/Component/CollapsibleSection/CollapsibleSectionUIBlockFactory.php',
        'Combodo\\iTop\\Application\\UI\\Base\\Component\\Dashlet\\DashletBadge' => __DIR__ . '/../..' . '/sources/application/UI/Base/Component/Dashlet/DashletBadge.php',
--- a/sources/application/UI/Base/Component/Button/Button.php
+++ b/sources/application/UI/Base/Component/Button/Button.php
@@ -37,15 +37,6 @@ class Button extends UIBlock
 	public const DEFAULT_JS_TEMPLATE_REL_PATH = 'base/components/button/layout';

 	// Specific constants
-	/** @var string ENUM_TYPE_BUTTON */
-	public const ENUM_TYPE_BUTTON = 'button';
-	/** @var string ENUM_TYPE_SUBMIT */
-	public const ENUM_TYPE_SUBMIT = 'submit';
-	/** @var string ENUM_TYPE_RESET */
-	public const ENUM_TYPE_RESET = 'reset';
-	/** @var string DEFAULT_TYPE */
-	public const DEFAULT_TYPE = self::ENUM_TYPE_BUTTON;
-
 	/** @var string ENUM_ACTION_TYPE_REGULAR */
 	public const ENUM_ACTION_TYPE_REGULAR = 'regular';
 	/** @var string ENUM_ACTION_TYPE_ALTERNATIVE */
@@ -74,12 +65,6 @@ class Button extends UIBlock

 	/** @var string $sLabel */
 	protected $sLabel;
-	/** @var string $sType The HTML type of the button (eg. 'submit', 'button', ...) */
-	protected $sType;
-	/** @var string $sName The HTML name of the button, used by forms */
-	protected $sName;
-	/** @var string $sValue The HTML value of the button, used by forms */
-	protected $sValue;
 	/** @var string $sTooltip */
 	protected $sTooltip;
 	/** @var string $sIconClass */
@@ -88,8 +73,6 @@ class Button extends UIBlock
 	protected $sActionType;
 	/** @var string $sColor */
 	protected $sColor;
-	/** @var bool $bIsDisabled */
-	protected $bIsDisabled;
 	/** @var string $sJsCode */
 	protected $sJsCode;
 	/** @var string $sOnClickJsCode */
@@ -100,9 +83,6 @@ class Button extends UIBlock
 	 *
 	 * @param string $sLabel
 	 * @param string|null $sId
-	 * @param string $sName
-	 * @param string $sValue
-	 * @param string $sType
 	 * @param string $sTooltip
 	 * @param string $sIconClass
 	 * @param string $sActionType
@@ -111,24 +91,19 @@ class Button extends UIBlock
 	 * @param string $sOnClickJsCode
 	 */
 	public function __construct(
-		string $sLabel, string $sId = null, string $sName = '', string $sValue = '', string $sType = self::DEFAULT_TYPE,
-		string $sTooltip = '', string $sIconClass = '',
+		string $sLabel, string $sId = null,	string $sTooltip = '', string $sIconClass = '',
 		string $sActionType = self::DEFAULT_ACTION_TYPE, string $sColor = self::DEFAULT_COLOR, string $sJsCode = '',
 		string $sOnClickJsCode = ''
 	) {
 		parent::__construct($sId);

 		$this->sLabel = $sLabel;
-		$this->sName = $sName;
-		$this->sValue = $sValue;
-		$this->sType = $sType;
 		$this->sTooltip = $sTooltip;
 		$this->sIconClass = $sIconClass;
 		$this->sActionType = $sActionType;
 		$this->sColor = $sColor;
 		$this->sJsCode = $sJsCode;
 		$this->sOnClickJsCode = $sOnClickJsCode;
-		$this->bIsDisabled = false;
 		$this->aDataAttributes = ['role' => 'ibo-button'];
 	}

@@ -151,62 +126,6 @@ class Button extends UIBlock
 		return $this;
 	}

-	/**
-	 * @return string
-	 */
-	public function GetType()
-	{
-		return $this->sType;
-	}
-
-	/**
-	 * @param string $sType
-	 *
-	 * @return $this
-	 */
-	public function SetType(string $sType)
-	{
-		$this->sType = $sType;
-		return $this;
-	}
-
-	/**
-	 * @return string
-	 */
-	public function GetName()
-	{
-		return $this->sName;
-	}
-
-	/**
-	 * @param string $sName
-	 *
-	 * @return $this
-	 */
-	public function SetName(string $sName)
-	{
-		$this->sName = $sName;
-		return $this;
-	}
-
-	/**
-	 * @return string
-	 */
-	public function GetValue()
-	{
-		return $this->sValue;
-	}
-
-	/**
-	 * @param string $sValue
-	 *
-	 * @return $this
-	 */
-	public function SetValue(string $sValue)
-	{
-		$this->sValue = $sValue;
-		return $this;
-	}

 	/**
 	 * @return string
@@ -285,25 +204,6 @@ class Button extends UIBlock
 		return $this;
 	}

-	/**
-	 * @return bool
-	 */
-	public function IsDisabled()
-	{
-		return $this->bIsDisabled;
-	}
-
-	/**
-	 * @param bool $bIsDisabled
-	 *
-	 * @return $this
-	 */
-	public function SetIsDisabled(bool $bIsDisabled)
-	{
-		$this->bIsDisabled = $bIsDisabled;
-		return $this;
-	}
-
 	/**
 	 * @return string
 	 */
--- a/sources/application/UI/Base/Component/Button/ButtonJS.php
+++ b/sources/application/UI/Base/Component/Button/ButtonJS.php
@@ -0,0 +1,161 @@
+<?php
+/**
+ * Copyright (C) 2013-2021 Combodo SARL
+ *
+ * This file is part of iTop.
+ *
+ * iTop is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * iTop 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 Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ */
+
+namespace Combodo\iTop\Application\UI\Base\Component\Button;
+
+
+/**
+ * Class Button
+ *
+ * @author Stephen Abello <stephen.abello@combodo.com>
+ * @package Combodo\iTop\Application\UI\Base\Component\Button
+ * @since 3.0.0
+ */
+class ButtonJS extends Button
+{
+	// Overloaded constants
+	public const DEFAULT_HTML_TEMPLATE_REL_PATH = 'base/components/button/buttonjs';
+
+	// Specific constants
+	/** @var string ENUM_TYPE_BUTTON */
+	public const ENUM_TYPE_BUTTON = 'button';
+	/** @var string ENUM_TYPE_SUBMIT */
+	public const ENUM_TYPE_SUBMIT = 'submit';
+	/** @var string ENUM_TYPE_RESET */
+	public const ENUM_TYPE_RESET = 'reset';
+	/** @var string DEFAULT_TYPE */
+	public const DEFAULT_TYPE = self::ENUM_TYPE_BUTTON;
+
+	/** @var string $sType The HTML type of the button (eg. 'submit', 'button', ...) */
+	protected $sType;
+	/** @var string $sName The HTML name of the button, used by forms */
+	protected $sName;
+	/** @var string $sValue The HTML value of the button, used by forms */
+	protected $sValue;
+	/** @var bool $bIsDisabled */
+	protected $bIsDisabled;
+
+	/**
+	 * ButtonJS constructor.
+	 *
+	 * @param string $sLabel
+	 * @param string|null $sId
+	 * @param string $sName
+	 * @param string $sValue
+	 * @param string $sType
+	 * @param string $sTooltip
+	 * @param string $sIconClass
+	 * @param string $sActionType
+	 * @param string $sColor
+	 * @param string $sJsCode
+	 * @param string $sOnClickJsCode
+	 */
+	public function __construct(
+		string $sLabel, string $sId = null, string $sName = '', string $sValue = '', string $sType = self::DEFAULT_TYPE,
+		string $sTooltip = '', string $sIconClass = '',
+		string $sActionType = self::DEFAULT_ACTION_TYPE, string $sColor = self::DEFAULT_COLOR, string $sJsCode = '',
+		string $sOnClickJsCode = ''
+	) {
+		parent::__construct( $sLabel,$sId, $sTooltip, $sIconClass,
+		$sActionType, $sColor, $sJsCode, $sOnClickJsCode);
+
+		$this->sName = $sName;
+		$this->sValue = $sValue;
+		$this->sType = $sType;
+		$this->bIsDisabled = false;
+	}
+	
+	/**
+	 * @return string
+	 */
+	public function GetType()
+	{
+		return $this->sType;
+	}
+
+	/**
+	 * @param string $sType
+	 *
+	 * @return $this
+	 */
+	public function SetType(string $sType)
+	{
+		$this->sType = $sType;
+		return $this;
+	}
+
+	/**
+	 * @return string
+	 */
+	public function GetName()
+	{
+		return $this->sName;
+	}
+
+	/**
+	 * @param string $sName
+	 *
+	 * @return $this
+	 */
+	public function SetName(string $sName)
+	{
+		$this->sName = $sName;
+		return $this;
+	}
+
+	/**
+	 * @return string
+	 */
+	public function GetValue()
+	{
+		return $this->sValue;
+	}
+
+	/**
+	 * @param string $sValue
+	 *
+	 * @return $this
+	 */
+	public function SetValue(string $sValue)
+	{
+		$this->sValue = $sValue;
+		return $this;
+	}
+
+
+	/**
+	 * @return bool
+	 */
+	public function IsDisabled()
+	{
+		return $this->bIsDisabled;
+	}
+
+	/**
+	 * @param bool $bIsDisabled
+	 *
+	 * @return $this
+	 */
+	public function SetIsDisabled(bool $bIsDisabled)
+	{
+		$this->bIsDisabled = $bIsDisabled;
+		return $this;
+	}
+
+}
--- a/sources/application/UI/Base/Component/Button/ButtonUIBlockFactory.php
+++ b/sources/application/UI/Base/Component/Button/ButtonUIBlockFactory.php
@@ -51,7 +51,7 @@ class ButtonUIBlockFactory extends AbstractUIBlockFactory
 	 * @return \Combodo\iTop\Application\UI\Base\Component\Button\Button
 	 */
 	public static function MakeNeutral(string $sLabel, string $sName, ?string $sId = null): Button {
-		$oButton = new Button($sLabel, $sId);
+		$oButton = new ButtonJS($sLabel, $sId);
 		$oButton->SetActionType(Button::ENUM_ACTION_TYPE_REGULAR)
 			->SetColor(Button::ENUM_COLOR_NEUTRAL)
 			->SetName($sName);
@@ -284,6 +284,32 @@ class ButtonUIBlockFactory extends AbstractUIBlockFactory
 		return static::MakeForAction($sLabel, Button::ENUM_COLOR_NEUTRAL, Button::ENUM_ACTION_TYPE_ALTERNATIVE, $sValue, $sName,
 			$bIsSubmit, $sId);
 	}
+
+	/**
+	 * @param string $sIconClasses
+	 * @param string $sTooltipText
+	 * @param string|null $sName
+	 * @param string|null $sValue
+	 * @param bool $bIsSubmit
+	 * @param string|null $sId
+	 *
+	 * @return \Combodo\iTop\Application\UI\Base\Component\Button\ButtonJS
+	 */
+	public static function MakeIconAction(
+		string $sIconClasses,
+		string $sTooltipText = '',
+		string $sName = null,
+		string $sValue = null,
+		bool $bIsSubmit = false,
+		?string $sId = null
+	) {
+		$oButton =  static::MakeForAction('', Button::ENUM_COLOR_NEUTRAL, Button::ENUM_ACTION_TYPE_ALTERNATIVE, $sValue, $sName,
+			$bIsSubmit, $sId);
+		$oButton->SetIconClass($sIconClasses);
+		$oButton->SetTooltip($sTooltipText);
+
+		return $oButton;
+	}
 	//----------------------------------------------------------------------------------------------
 	// Link buttons, mostly used outside forms, to redirect somewhere whilst keeping a button aspect
 	//----------------------------------------------------------------------------------------------
@@ -294,30 +320,25 @@ class ButtonUIBlockFactory extends AbstractUIBlockFactory
 	 * @param string $sURL
 	 * @param string|null $sLabel
 	 * @param string|null $sIconClasses
-	 * @param string|null $sName See Button::$sName
 	 * @param string|null $sTarget
 	 * @param string|null $sId
 	 *
 	 * @return \Combodo\iTop\Application\UI\Base\Component\Button\Button
 	 */
 	public static function MakeLinkNeutral(
-		string $sURL, ?string $sLabel = null, ?string $sIconClasses = null, ?string $sName = null, ?string $sTarget = null,
+		string $sURL, ?string $sLabel = '', ?string $sIconClasses = null, ?string $sTarget = null,
 		?string $sId = null
 	): Button {
+		if (empty($sTarget)) {
+			$sTarget = ButtonURL::DEFAULT_TARGET;
+		}
 		$sType = empty($sIconClasses) ? Button::ENUM_ACTION_TYPE_REGULAR : Button::ENUM_ACTION_TYPE_ALTERNATIVE;
-		$oButton = static::MakeForAction($sLabel, Button::ENUM_COLOR_NEUTRAL, $sType, null, $sName, false, $sId);
+		$oButton = static::MakeForLink($sLabel, $sURL,Button::ENUM_COLOR_NEUTRAL, $sType,  $sTarget, $sId);

 		if (!empty($sIconClasses)) {
 			$oButton->SetIconClass($sIconClasses);
 		}

-		if (!empty($sURL)) {
-			if (empty($sTarget)) {
-				$sTarget = "_self";
-			}
-			$oButton->SetOnClickJsCode("window.open('{$sURL}', '{$sTarget}');");
-		}
-
 		return $oButton;
 	}

@@ -325,27 +346,22 @@ class ButtonUIBlockFactory extends AbstractUIBlockFactory
 	 * @param string $sIconClasses
 	 * @param string $sTooltipText
 	 * @param string|null $sURL
-	 * @param string|null $sName
 	 * @param string|null $sTarget
 	 * @param string|null $sId
 	 *
-	 * @return \Combodo\iTop\Application\UI\Base\Component\Button\Button
+	 * @return \Combodo\iTop\Application\UI\Base\Component\Button\ButtonURL
 	 */
 	public static function MakeIconLink(
-		string $sIconClasses, string $sTooltipText, ?string $sURL = null, ?string $sName = null, ?string $sTarget = null,
+		string $sIconClasses, string $sTooltipText, ?string $sURL = '', ?string $sTarget = null,
 		?string $sId = null
 	) {
-		$oButton = static::MakeForAction('', Button::ENUM_COLOR_NEUTRAL, Button::ENUM_ACTION_TYPE_ALTERNATIVE, null, $sName, false, $sId);
+		if (empty($sTarget)) {
+			$sTarget = ButtonURL::DEFAULT_TARGET;
+		}
+		$oButton = static::MakeForLink('', $sURL,Button::ENUM_COLOR_NEUTRAL, Button::ENUM_ACTION_TYPE_ALTERNATIVE, $sTarget, $sId);
 		$oButton->SetIconClass($sIconClasses);
 		$oButton->SetTooltip($sTooltipText);

-		if (!empty($sURL)) {
-			if (empty($sTarget)) {
-				$sTarget = "_self";
-			}
-			$oButton->SetOnClickJsCode("window.open('{$sURL}', '{$sTarget}');");
-		}
-
 		return $oButton;
 	}
 	
@@ -363,7 +379,7 @@ class ButtonUIBlockFactory extends AbstractUIBlockFactory
 		string $sIconClasses, string $sTooltipText, ?string $sURL = null, ?string $sName = null, ?string $sTarget = null,
 		?string $sId = null
 	) {
-		$oButton = static::MakeIconLink($sIconClasses, $sTooltipText, $sURL, $sName, $sTarget, $sId);
+		$oButton = static::MakeIconLink($sIconClasses, $sTooltipText, $sURL,  $sTarget, $sId);
 		$oButton->SetColor(Button::ENUM_COLOR_DESTRUCTIVE);
 		$oButton->SetTooltip($sTooltipText);
 		return $oButton;
@@ -384,7 +400,7 @@ class ButtonUIBlockFactory extends AbstractUIBlockFactory
 	 * @param bool $bIsSubmit
 	 * @param string|null $sId
 	 *
-	 * @return \Combodo\iTop\Application\UI\Base\Component\Button\Button
+	 * @return \Combodo\iTop\Application\UI\Base\Component\Button\ButtonJS
 	 * @internal
 	 */
 	protected static function MakeForAction(
@@ -396,7 +412,7 @@ class ButtonUIBlockFactory extends AbstractUIBlockFactory
 		bool $bIsSubmit = false,
 		?string $sId = null
 	): Button {
-		$oButton = new Button($sLabel, $sId);
+		$oButton = new ButtonJS($sLabel, $sId);
 		$oButton->SetActionType($sActionType)
 			->SetColor($sColor);

@@ -410,9 +426,39 @@ class ButtonUIBlockFactory extends AbstractUIBlockFactory

 		// Set as submit button if necessary
 		if ($bIsSubmit === true) {
-			$oButton->SetType(Button::ENUM_TYPE_SUBMIT);
+			$oButton->SetType(ButtonJS::ENUM_TYPE_SUBMIT);
 		}

 		return $oButton;
 	}
+
+	/**
+	 * Internal helper
+	 *
+	 * @internal
+	 *
+	 * @param string $sLabel
+	 *
+	 * @param string $sURL
+	 * @param string $sColor See Button::$sColor
+	 * @param string $sActionType See Button::$sActionType
+	 * @param string|null $sTarget
+	 * @param string|null $sId
+	 *
+	 * @return \Combodo\iTop\Application\UI\Base\Component\Button\ButtonURL
+	 */
+	protected static function MakeForLink(
+		string $sLabel,
+		string $sURL,
+		string $sColor,
+		string $sActionType,
+		string $sTarget = null,
+		?string $sId = null
+	): Button {
+		$oButton = new ButtonURL($sLabel, $sURL, $sId, $sTarget);
+		$oButton->SetActionType($sActionType)
+			->SetColor($sColor);
+		
+		return $oButton;
+	}
 }
--- a/sources/application/UI/Base/Component/Button/ButtonURL.php
+++ b/sources/application/UI/Base/Component/Button/ButtonURL.php
@@ -0,0 +1,115 @@
+<?php
+/**
+ * Copyright (C) 2013-2021 Combodo SARL
+ *
+ * This file is part of iTop.
+ *
+ * iTop is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * iTop 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 Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ */
+
+namespace Combodo\iTop\Application\UI\Base\Component\Button;
+
+
+/**
+ * Class Button
+ *
+ * @author Stephen Abello <stephen.abello@combodo.com>
+ * @package Combodo\iTop\Application\UI\Base\Component\Button
+ * @since 3.0.0
+ */
+class ButtonURL extends Button
+{
+	// Overloaded constants
+	public const DEFAULT_HTML_TEMPLATE_REL_PATH = 'base/components/button/buttonurl';
+
+	// Specific constants
+	/** @var string ENUM_TARGET_BLANK */
+	public const ENUM_TARGET_BLANK = '_blank';
+	/** @var string ENUM_TARGET_SELF */
+	public const ENUM_TARGET_SELF= '_self';
+	/** @var string ENUM_TARGET_PARENT */
+	public const ENUM_TARGET_PARENT= '_parent';
+	/** @var string ENUM_TARGET_TOP */
+	public const ENUM_TARGET_TOP= '_top';
+	/** @var string DEFAULT_TARGET */
+	public const DEFAULT_TARGET = self::ENUM_TARGET_SELF;
+
+
+	/** @var string $sURL */
+	protected $sURL;
+	/** @var string $sTarget */
+	protected $sTarget;
+
+	/**
+	 * ButtonURL constructor.
+	 *
+	 * @param string $sLabel
+	 * @param string $sURL
+	 * @param string|null $sId
+	 * @param string $sTarget
+	 * @param string $sTooltip
+	 * @param string $sIconClass
+	 * @param string $sActionType
+	 * @param string $sColor
+	 * @param string $sJsCode
+	 * @param string $sOnClickJsCode
+	 */
+	public function __construct(
+		string $sLabel, string $sURL, string $sId = null, string $sTarget = self::DEFAULT_TARGET,  string $sTooltip = '', string $sIconClass = '',
+		string $sActionType = self::DEFAULT_ACTION_TYPE, string $sColor = self::DEFAULT_COLOR, string $sJsCode = '',
+		string $sOnClickJsCode = '')
+	{
+		parent::__construct($sLabel, $sId, $sTooltip, $sIconClass,
+			$sActionType, $sColor, $sJsCode, $sOnClickJsCode);
+		$this->sURL = $sURL;
+		$this->sTarget = $sTarget;
+	}
+
+	/**
+	 * @return string
+	 */
+	public function GetURL(): string
+	{
+		return $this->sURL;
+	}
+
+	/**
+	 * @param string $sURL
+	 * 
+	 * @return $this
+	 */
+	public function SetURL(string $sURL)
+	{
+		$this->sURL = $sURL;
+		return $this;
+	}
+
+	/**
+	 * @return string
+	 */
+	public function GetTarget(): string
+	{
+		return $this->sTarget;
+	}
+
+	/**
+	 * @param string $sTarget
+	 * 
+	 * @return $this
+	 */
+	public function SetTarget(string $sTarget)
+	{
+		$this->sTarget = $sTarget;
+		return $this;
+	}
+}
--- a/templates/base/components/button/buttonjs.html.twig
+++ b/templates/base/components/button/buttonjs.html.twig
@@ -0,0 +1,20 @@
+<button id="{{ oUIBlock.GetId() }}"
+        class="ibo-button ibo-is-{{ oUIBlock.GetActionType() }} ibo-is-{{ oUIBlock.GetColor() }} {{ oUIBlock.GetAdditionalCSSClassesAsString() }}{% if oUIBlock.IsHidden() %} ibo-is-hidden{% endif %}"
+        {% if oUIBlock.GetDataAttributes() %}
+            {% for sName, sValue in oUIBlock.GetDataAttributes() %}
+                data-{{ sName }}="{{ sValue }}"
+            {% endfor %}
+        {% endif %}
+        type="{{ oUIBlock.GetType() }}"
+        name="{{ oUIBlock.GetName() }}"
+        value="{{ oUIBlock.GetValue() }}"
+        {% if oUIBlock.IsDisabled() %} disabled {% endif %}
+        {% if oUIBlock.GetTooltip() is not empty %} data-tooltip-content="{{ oUIBlock.GetTooltip() }}" {% endif %}
+>
+    {% if oUIBlock.GetIconClass() is not empty %}
+        <span class="ibo-button--icon {{ oUIBlock.GetIconClass() }}"></span>
+    {% endif %}
+    {% if oUIBlock.GetLabel() is not empty %}
+        <span class="ibo-button--label">{{ oUIBlock.GetLabel() }}</span>
+    {% endif %}
+</button>
--- a/templates/base/components/button/buttonurl.html.twig
+++ b/templates/base/components/button/buttonurl.html.twig
@@ -0,0 +1,18 @@
+<a id="{{ oUIBlock.GetId() }}"
+        class="ibo-button ibo-is-{{ oUIBlock.GetActionType() }} ibo-is-{{ oUIBlock.GetColor() }} {{ oUIBlock.GetAdditionalCSSClassesAsString() }}{% if oUIBlock.IsHidden() %} ibo-is-hidden{% endif %}"
+        {% if oUIBlock.GetDataAttributes() %}
+            {% for sName, sValue in oUIBlock.GetDataAttributes() %}
+                data-{{ sName }}="{{ sValue }}"
+            {% endfor %}
+        {% endif %}
+        href="{{ oUIBlock.GetURL() }}"
+        target="{{ oUIBlock.GetTarget() }}"
+        {% if oUIBlock.GetTooltip() is not empty %} data-tooltip-content="{{ oUIBlock.GetTooltip() }}" {% endif %}
+>
+    {% if oUIBlock.GetIconClass() is not empty %}
+        <span class="ibo-button--icon {{ oUIBlock.GetIconClass() }}"></span>
+    {% endif %}
+    {% if oUIBlock.GetLabel() is not empty %}
+        <span class="ibo-button--label">{{ oUIBlock.GetLabel() }}</span>
+    {% endif %}
+</a>
--- a/templates/base/components/button/layout.html.twig
+++ b/templates/base/components/button/layout.html.twig
@@ -5,10 +5,6 @@
                        data-{{ sName }}="{{ sValue }}"
                {% endfor %}
        {% endif %}
-        type="{{ oUIBlock.GetType() }}"
-        name="{{ oUIBlock.GetName() }}"
-        value="{{ oUIBlock.GetValue() }}"
-        {% if oUIBlock.IsDisabled() %} disabled {% endif %}
        {% if oUIBlock.GetTooltip() is not empty %} data-tooltip-content="{{ oUIBlock.GetTooltip() }}" {% endif %}
 >
    {% if oUIBlock.GetIconClass() is not empty %}
--- a/test/VisualTest/Backoffice/RenderAllUiBlocks.php
+++ b/test/VisualTest/Backoffice/RenderAllUiBlocks.php
@@ -23,6 +23,7 @@
 namespace Combodo\iTop\Test\VisualTest\Backoffice;

 use Combodo\iTop\Application\UI\Base\Component\Alert\AlertUIBlockFactory;
+use Combodo\iTop\Application\UI\Base\Component\Button\Button;
 use Combodo\iTop\Application\UI\Base\Component\Button\ButtonUIBlockFactory;
 use Combodo\iTop\Application\UI\Base\Component\CollapsibleSection\CollapsibleSection;
 use Combodo\iTop\Application\UI\Base\Component\Html\Html;
@@ -100,8 +101,8 @@ $oPageContentLayout->AddMainBlock(new Html('<hr/>'));
 //////////
 // Buttons
 //////////
-$oButtonsTitle = new Html('<h2 id="title-buttons">Buttons examples</h2>');
-$oPage->AddUiBlock($oButtonsTitle);
+$oButtonsJSTitle = new Html('<h2 id="title-buttons">ButtonsJS examples</h2>');
+$oPage->AddUiBlock($oButtonsJSTitle);
 $oPageContentLayout->AddMainBlock(ButtonUIBlockFactory::MakeNeutral('Neutral', 'neutral'));
 $oPageContentLayout->AddMainBlock(ButtonUIBlockFactory::MakeNeutral('Neutral dis.', 'neutral')->SetIsDisabled(true));
 $oPageContentLayout->AddMainBlock(ButtonUIBlockFactory::MakeForPrimaryAction('Primary'));
@@ -122,9 +123,13 @@ $oPageContentLayout->AddMainBlock(ButtonUIBlockFactory::MakeForAlternativeValida
 $oPageContentLayout->AddMainBlock(ButtonUIBlockFactory::MakeForAlternativeValidationAction('Alt. validation dis.')->SetIsDisabled(true));
 $oPageContentLayout->AddMainBlock(ButtonUIBlockFactory::MakeForAlternativeDestructiveAction('Alt. destructive'));
 $oPageContentLayout->AddMainBlock(ButtonUIBlockFactory::MakeForAlternativeDestructiveAction('Alt. destructive dis.')->SetIsDisabled(true));
-$oPageContentLayout->AddMainBlock(ButtonUIBlockFactory::MakeLinkNeutral(utils::GetAbsoluteUrlAppRoot(), 'Link neutral'));
-$oPageContentLayout->AddMainBlock(ButtonUIBlockFactory::MakeLinkNeutral(utils::GetAbsoluteUrlAppRoot(), 'Link neutral dis.')->SetIsDisabled(true));
-$oPageContentLayout->AddMainBlock(ButtonUIBlockFactory::MakeIconLink('fas fa-thumbs-up', 'Icon link button'));
+
+$oButtonsURLTitle = new Html('<h2 id="title-buttons">ButtonsURL examples</h2>');
+$oPage->AddUiBlock($oButtonsURLTitle); 
+$oPageContentLayout->AddMainBlock(ButtonUIBlockFactory::MakeLinkNeutral('#', 'Link neutral'));
+$oPageContentLayout->AddMainBlock(ButtonUIBlockFactory::MakeIconLink('fas fa-thumbs-up', 'Icon link button', '#'));
+$oPageContentLayout->AddMainBlock(ButtonUIBlockFactory::MakeLinkNeutral('#', 'Link primary')->SetColor(Button::ENUM_COLOR_PRIMARY));
+$oPageContentLayout->AddMainBlock(ButtonUIBlockFactory::MakeIconLink('fas fa-thumbs-up', 'Icon link button primary', '#')->SetColor(Button::ENUM_COLOR_PRIMARY));

 $oPageContentLayout->AddMainBlock(new Html('<hr/>'));