Creating a Custom Field Type in Ninox

By Adam Davidson, Director of Product Management

This article is the first in a series of articles that will outline how to create an HTML slider and integrate it with Ninox to create a new field type. For this week, we will set up the slider and use some Javascript to display its current value as a number above the slider. In the ensuing articles we will connect the slider to Ninox to give it a memory and make it functionally a new field type.

First, insert the slider element into a formula field. See the code for this below:

							
					html("<input type='range' min='0' max='100' value='50'>")				
			

The input element is a self-closing tag; ie. we can omit the closing tag in the form of </input> for this element (adding the closing tag will still work). You can see that we have specified three attributes to the element. The “type” attribute specifies that this element will be a slider or “range” input element, while the min and max attributes specify the minimum and maximum values for the range. The “value” attribute sets the starting position for the slider. If you save a formula field with the above code you will see something like the following (the slider may look different for you based on your browser and OS):

The slider can be moved around but we cannot see its exact value, so we will add a number above the slider to display the value of the slider. To do this we need to use some Javascript. The way that javascript is attached to an HTML event is through events. In this case we will add an event attribute to the input element.
An event attribute is a type of attribute which takes javascript as a value. Common event attributes include onclick, onchange, onmouseover, and oninput. Javascript inserted through these attributes will be executed whenever the event is fired. For example javascript inserted into the onclick event will be executed whenever the user clicks on the element. We will insert Javascript into the oninput event attribute for the input element, since this event will fire whenever the user interacts with the slider.

							
					html("
	<div id='my_slider_val'>50</div>
	<input type='range' min='0' max='100' value='50'
		oninput='
			let sliderVal = getElementById(""my_slider_val"");
			let slider = event.target
			sliderVal.innerHTML = slider.value;
		'
	>
")				
			

In the above code a new element with tag-name “div” has been added above the input element. This element is where the value of the slider will be displayed. The content of the div element is 50 to start out with, since that is the starting value for the slider. The ‘div’ element type was chosen because it is a generic element that does not have any default styling. The div element here also has an ‘id’ attribute which is an identifier that will be used to locate the element from Javascript.

The Javascript in the “oninput” attribute starts with let sliderVal = getElementById(“”my_slider_val””). The function getElementById() looks through the HTML elements in the page and returns the first element it finds with the specified “id” attribute. The sliderVal variable now stores a Javascript Object which represents our HTML element. This object follows the HTML DOM (Document Object Model) standard, which provides a way for us to manipulate the html element in javascript.

While the first line gets the div element, the second line gets the input (slider) element. Since this javascript is being called from an event that was triggered by the input element itself, we can get a reference to this element with event.target instead of searching through the page with getElementById(). This assigns a DOM object representing the input element to the “slider” variable just as the first line assigns a DOM object representing the div element to the “sliderVal” variable.

The second line then changes the contents of the div element to the “value” of the input element. We can access attributes of an HTML element by reading the properties of its DOM object. Here we get the “value” attribute of the input element, which stores the current value of the slider, with “slider.value”. the value of the slider is assigned to a property of “sliderVal” called “innerHTML”. This property can be used to read or write the contents of an HTML element.

Running this code will give the following result: (In the example below the following adjustments have been made to the formula field: style > background color is set to white, style > Text align is set to center, Label Position is set to hidden, and the field has been expanded to show all the contents)

Now we have a functioning slider, and we can see the numeric value!  At this point, the slider has no memory and does not communicate with Ninox.  Next week we will see how we can establish communication between Ninox and this slider (or any HTML).