От ссылки к кнопке: преобразование ссылок Oracle APEX в кнопку для улучшения UX с помощью JS.

Сначала вы добавляете столбец в свой отчет, затем переходите к классу CSS и добавляете свой класс «myLink» со значком «fa fa-eye».

Теперь перейдите в CSS Inline и добавьте следующий CSS, чтобы ваша ссылка выглядела как кнопка.

/* blur is what we will work on as example here */

.blur {
   filter: blur(4px); /* Apply a blur effect to the text */
  }

/* Make your link look like a button */ 
span.myLink {
  display: inline-block;
  padding: 0.5em 1em;
  background-color: #007bff;
  color: #fff;
  text-decoration: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease-in-out; /* add transition for smoother effect */
}

span.myLink:hover {
  background-color: #0056b3; /* change background color on hover */
}

Затем добавьте следующий код JS в файл «Выполнить при загрузке страницы».

var links = document.getElementsByClassName('myLink');
for (var i = 0; i < links.length; i++) {
  links[i].addEventListener('click', function(event) {
    event.preventDefault(); 
    var td = this.closest('td'); // get the nearest parent td element
    var prevTd = td.previousElementSibling; // get the previous sibling td element
    var span = prevTd.getElementsByClassName('blur'); // get the span element with class "blur"
    if (span.length > 0) {
        span[0].classList.add('blurgone');  // add the "blurgone" class to the first span element
      span[0].classList.remove('blur'); // remove the "blur" class from the first span element
      
      this.classList.remove('fa-eye'); // remove the "fa-eye" class from the link
      this.classList.add('fa-eye-slash'); // add the "fa-eye-slash" class to the link
    } else {
      span = prevTd.getElementsByClassName('blurgone'); // get the span element with class "blurgone"
      if (span.length > 0) {
            span[0].classList.add('blur'); // add the "blur" class to the first span element
        span[0].classList.remove('blurgone'); // remove the "blurgone" class from the first span element
      
        this.classList.remove('fa-eye-slash'); // remove the "fa-eye-slash" class from the link
        this.classList.add('fa-eye'); // add the "fa-eye" class to the link
      }
    }
  });
}

Метод `addEventListener()` позволяет нам прикрепить прослушиватель событий к элементам DOM, таким как ссылки или кнопки. Когда указанное событие происходит в элементе, выполняется функция, указанная в качестве второго аргумента для `addEventListener()`.

В этом случае мы используем `addEventListener()`, чтобы прикрепить прослушиватель событий «щелчок» ко всем ссылкам с классом «myLink». При нажатии на ссылку выполняется функция, указанная во втором аргументе addEventListener().

Внутри функции прослушивателя событий мы сначала предотвращаем поведение ссылки по умолчанию, используя `event.preventDefault()`. Это предотвратит поведение ссылки по умолчанию при переходе на новую страницу при нажатии.

Затем мы используем JavaScript для управления DOM и изменения внешнего вида ссылки, чтобы она больше походила на кнопку. В частности, мы получаем ближайший родительский элемент td и предыдущий дочерний элемент td. Затем мы используем `getElementsByClassName()`, чтобы выбрать элемент `span` с классом "blur" или "blurgone", в зависимости от его текущего состояния.

Если элемент `span` существует и имеет класс «blur», мы удаляем класс «blur» и добавляем класс «blurgone», и наоборот. Мы также соответствующим образом обновляем классы значка ссылки. Это изменяет внешний вид ссылки, чтобы она выглядела так, как будто она включается и выключается, как кнопка.