Creating a Custom Field Type in Ninox

BONUS: Custom Password Field

By Adam Davidson, Director of Product Management

The code:

					html("<style>.password_field_container{display:flex;flex-direction:row}.password_field_container input{background-color:rgb(247,248,252);border-color:rgb(233,236,244);border-width:1px;border-style:solid}.password_field_container button{margin-left:10px;border-width:0;font-weight:700;width:200px}</style> <script>function passwordOnInput(){if(!=='" + 'Password Storage' + "'){let button=document.getElementById('password_button');button.disabled=!1}}
async function passwordButtonClick(){let password=document.getElementById('password_field').value;let currentUrl=location.href;let tmId=currentUrl.split('teams/')[1].split('/')[0];let dbId=currentUrl.split('database/')[1].split('/')[0];let tbId=currentUrl.split('module/')[1].split('/')[0];let recId='" + text(Id) + "';let url=''+tmId+'/databases/'+dbId+'/tables/'+tbId+'/records';let data=[{id:recId,fields:{'Password Storage':password}}];const response=await fetch(url,{method:'POST',headers:{'Content-Type':'application/json','Authorization':'Bearer '+'" + apiKey() + "'},body:JSON.stringify(data)})}</script> <div class='password_field_container'>
		<input id='password_field' type='password' value='" + 'Password Storage' + "' oninput='passwordOnInput()'>
		<button disabled id='password_button' onclick='passwordButtonClick()'>Set Password</button>


The results:

In some circumstances, it may be necessary to store sensitive information (Social Security Numbers, passwords etc.) in Ninox.  This Article outlines a way that HTML in formula fields can be used to obscure sensitive text information as it is entered into Ninox by end users.

To accomplish this, the method outlined in three main parts of the series on creating a custom field type will be used.  By combining Ninox code, HTML and HTTP calls to the Ninox API in a formula field we can create the password field and establish communication to and from Ninox. 

First, the necessary fields must be set up in Ninox.  Create a new text field called ‘Password Storage’ (or anything you would like) and enter ‘false’ into the ‘display field only if’ function.  Set ‘Allowed to write’ and ‘Allowed to read’ to ‘admin’ and not ‘editor’ for this field.  This will be the place where the password is stored.  

Now, store your API key somewhere secure, and accessible from a formula function.  In the previous three articles the API key was stored in a hidden field.  A better place to place this would be in a function in your global script.  In the code below, a global function called ‘apiKey()’  returns the API key.  

Next, create a Formula field and name it whatever you like.  In this example it will be called ‘password’.  Insert the code on the left into the formula:

The HTML in the above formula function creates an input with type=’password’ which obscures the input that is entered, and a button to submit the new password.  The ‘style’ element contains CSS code to format how these elements are displayed.  I will not explain the CSS code in this article as the focus is on functionality, but more information on CSS can be found here.

There are two functions that are defined in the <script> element: passwordOnInput() and passwordButtonClick().  These functions are called from the input’s ‘oninput’ attribute, and the button’s ‘onclick’ attribute respectively.  The ‘oninput’ event is triggered whenever the user inputs or deletes characters in the input text field.  The ‘onclick’ event is triggered (you guessed it) when the button is clicked.  

The passwordOnInput() function simply enables the button to submit the password if the password has been changed from the stored value in ‘Password Storage’. an ‘if’ statement is used to determine whether the value in (which is the DOM object for the input element) matches the value in Ninox’s ‘Password Storage’ field.

The passwordButtonClick() function sets the value of ‘Password Storage’ via the ninox API.  To see a more detailed explanation of how this function works, check out the article in last week’s newsletter (PART 3) as this code is nearly identical to the code there.

The results of this HTML are shown to the left.  The password storage field has been un-hidden to show the value changing when the button is clicked.