VOLUME LXXXI              04/20/2021

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(event.target.value!=='" + '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='https://api.ninox.com/v1/teams/'+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>
	</div>
")

				
			

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 event.target (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. 

Have you ever wished you could use Ninox to fill out forms?

Ninox FormsPLUS is Coming Soon!

Diffferent Table View Functions

By David Gyenes, Director of IT

Many of you have asked the question, “How do I make a table visible or different for multiple users?” The answer is that you cannot change the table view itself, but you can create your own table view. If you create a form view and create a record, then you can block it so that no one else can create another record.

In the next step, you will need to use both the view element and the select statement to select the desired table. You can specify that a view will show for a specific user or user group, then you can create a different view for another user or user group. You can also create some fields (text, number, date, drop down) to make the table searchable for the user. You can create a drop-down field to select and show a different view that has different columns as well, depending upon what the user would like to see. You can hide/show them based on the selection.


Also, if you bind these search fields to the browser then it would not affect another user’s screen. So, it doesn’t have to be the default table view in Ninox, you can just build your own!

This Week in the Learning Lab

Join us this Thursday the 15th at 12pm EDT where we will be discussing conditional styling at field level and table view as well as an open Q&A session!

Check Out Our Templates

Did you know that Nioxus has built over 150 templates which are available to all Standard, Deluxe and Premier Nioxus members?

Nioxus University YouTube Channel

Nioxus has created nearly 100 videos and over 200 hours of content teaching you how to use and optimize Ninox, as well as our supplementary products: CalendarPLUS, ReportsPLUS and DocumentsPLUS!

Just Jim

By Jim Harris, Stargazer

We had so much fun last week at our first Bring Your Pet to the Ninox Learning Lab that we will be doing it again this Thursday. If you want your pet to be included this time, please send your pictures to Terri@nioxus.com or Jim@nioxus.com. Additionally, we will finally be discussing conditional styling at field level and table view along with a Q&A. Come on by for Ninox tips, tricks and shortcuts and say “hi” to your friends here!

As we have been focusing on our pets, I thought that I would discuss a new type of high-tech hound that uses Artificial Intelligence (AI) technology to “hear” and “see” its environment and even can go for walks! It seems to do everything except have accidents on your floor! Meet AlphaDog, a robotic response to two of China’s rapidly growing obsessions: pets and technology.

At first glance Alpha Dog remined me of the deck of a lawn mower, minus the wheels. AlphaDog has four metal legs and is more stable than a real dog. It is able to predict the friction and height of the ground to adjust its height, adjust the stride frequency, and adapt to the environment as it navigates going up a set of stairs. It can move at a speed of almost 15 kilometers an hour and spins on the spot (no pun intended) like a riled-up puppy.

Wouldn’t it be great if this four-legged friend could benefit the visually impaired and disabled? The possibilities are endless. Future software updates will include “barking” and they will eventually add human voices so that you can carry on a conversation with your “pet”. They may even introduce “personalities” to the dog’s toolkit to make them even more canine-like. Imagine the look on intruder’s faces when they come face to face with this 5G security mutt!

In the first month of sales, more than 1,800 AlphaDogs have jumped off of the shelves, even with the price tag of 16,000 yuan ($2,400). The majority of orders are from computer developers, tech geeks and also kids who really love it. That about covers all of us here at Nioxus! I can’t wait to see you this coming Thursday for learning, humor and fun.

I want to leave you with a quote from Mark Twain in memory of my sweet dog Angel: “Heaven goes by favor. If it went by merit, you would stay out and your dog would go in”

Jim@nioxus.com

click to view image

Copyright 2021 © All Rights Reserved.

All logos, trademarks and names are the protected property of Nioxus Corporation or their respective owners.

“Ninox,” “Ninox Database” and the blue Ninox owl eye logo are the property of Ninox Berlin and are used with permission.

en_USEN