How to create a new ZendForm element for Icinga Web 2
In one of the latest releases of the EventHandler module for NetEye 4 we introduce, for the first time, a completely customized form element. In order to satisfy certain EventHandler usage constraints, we needed to create a drop-down element that allows the user to enter a custom value in addition to choosing one of the automatically proposed options.
To create such a field we had to extend the ZendForm component library. Even though this is not a complex task, we found it to be less intuitive than we had expected. With the experience gained, I will now give you a short guide on how to create your own custom form element for ZendForm and Icinga Web 2.
Define a namespace where you can group all the new form elements you want to develop.
Extend the ZendForm class that is most similar to the element you are going to create. For example our aim was to create an advanced selection box, so we extended the Zend SelectElement class.
Define the graphical structure and the validators for your new element.
<?php
namespace Icinga\Module\Path\To\Your\Custom\Element\Directory;
class CustomSelect extends \Zend_Form_Element_Select
{
public function init()
{
// This way you can skip the validation of the element $this->setRegisterInArrayValidator(false);
$this->clearValidators();
parent::init();
}
public function render(\Zend_View_Interface $view = null)
{
$options = $this->getMultiOptions();
$value = $this->getValue();
if ($value !== null && !array_key_exists($value, $options)) {
// An example of some custom manipulation you can do
// before rendering the element
$selectAttribs = $this->getAttribs();
$selectAttribs['data-custom-value'] = $value;
$this->setAttribs($selectAttribs);
}
return parent::render($view);
}
}
Obviously, you can attach a jQuery plugin or effect to your new element.
How can you use your custom selection box in an Icinga Web 2 form now that you have created it?
You need to register the new form element namespace, as we did in the following code snippet:
As you can see the first argument passed to addPrefixPath represents the namespace, the second is the full path to the element’s class and the third defines which kind of class you are loading.
Once you explicitly load the new form-element class, you can use it as usual within an Icinga Form class:
Hi, I'm Valentina and I'm a Frontend Developer at Wuerth Phoenix. I started out my career applying my Cryptography skills to coding, but really quickly fell in love with the web. I have been making websites and applications since 2012 and I still can't get enough of it. Along the way I found a passion for front-end development, and I use this passion to create interfaces that solve problems. When I'm not creating beautiful solutions, I enjoy cooking or doing sport, while listening to beautiful music.
Author
Valentina Da Rold
Hi, I'm Valentina and I'm a Frontend Developer at Wuerth Phoenix. I started out my career applying my Cryptography skills to coding, but really quickly fell in love with the web. I have been making websites and applications since 2012 and I still can't get enough of it. Along the way I found a passion for front-end development, and I use this passion to create interfaces that solve problems. When I'm not creating beautiful solutions, I enjoy cooking or doing sport, while listening to beautiful music.
Icinga Director is a powerful configuration tool included in NetEye that streamlines the process of defining and managing monitoring configurations. However, you may encounter issues with duplicate addresses and spaces in hostnames, which can lead to confusion and monitoring inaccuracies. Read More
In today’s digital landscape, ensuring optimal performance and availability of applications is critical. Monitoring tools like Elastic Synthetics Journey Monitor and Alyvix offer unique capabilities tailored to diverse needs. Understanding where each tool excels can help you choose the best Read More
In this blog post, we'll explore the power of custom branding in NetEye reports. The reporting module offers the ability to filter specific hosts and services while also enabling the configuration of custom thresholds to visually emphasize unmet SLAs. Users Read More
Scenario NetEye 4 is a comprehensive monitoring platform which natively supports Business Processes. A Business Process is an abstract view of a customer’s business from the Application point of view. Usually, it’s a collection of Icinga 2 checks aggregated by Read More
On February 3rd and 4th, 2024, we attended FOSDEM, a major event where thousands of free and open-source software developers from around the world gather to exchange ideas and collaborate. This year I dedicated much of the second day to Read More