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 IT Italy. 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 IT Italy. 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.
Today we continue our journey into monitoring automation in NetEye. In my previous post we discussed the possibility of automating Business Processes. As you may remember, for those of us working on NetEye Cloud monitoring dozens of clients, it's important Read More
When performance degradation occurs within a complex system, understanding the root cause can be extremely challenging. If the issue happens sporadically, this difficulty increases even more. This is because modern systems involve numerous components that interact in complex ways. For Read More
At first glance, rebuilding an RPM may sound like a purely mechanical task: take a patch, rebuild the package, ship it. In reality, that small fix goes through a much longer journey that touches reliability, security, trust, and long-term maintainability. Read More
Introduction to NetApp and S3 NetApp offers a unified data storage system. NetApp's ONTAP operating system supports a combination of file, block, and object protocols. We can use common storage (disk array), such as NetApp AFF or FAS, and operate Read More
A safer way to run privileged Windows checks with SystemRunner If you’ve been monitoring Windows for a while, you’ve probably seen this pattern: some checks must run as LocalSystem (S-1-5-18), and the “quick fix” is to run the Icinga Agent Read More