VOLUME LXXX              04/13/2021

Creating a Custom Field Type in Ninox

Part 3: Communicating from HTML to Ninox

By Adam Davidson, Director of Product Management

This article is the third and final article in a series outlining the steps necessary to create a custom HTML field type in Ninox. If you have not, please go back and read parts one and two before proceeding to read this one.

Last week, communication from Ninox to the HTML input element was established by inserting the ‘Slider Value’ Ninox field into the string being passed to the html() function.  This week, communication in the other direction, from the HTML slider to the ‘Slider Value’ field in Ninox, will be configured.  

Since the HTML cannot directly communicate with Ninox through the browser, we will do this by way of the Ninox API.  The Ninox API allows us to make a request to the server to do anything you might do in the Ninox application.  View all the records in a table, create a new record with specified field values, update the fields of an existing record, delete a record etc.  If you have not already, I recommend reading David’s article on API basics before proceeding.  It will also be useful to take a look at the Ninox REST API documentation.

In order to proceed you will need to get access to one of your Ninox API keys.  In this article the API key will be referenced from a hidden text field in the Formula Code for security.

The end goal is to update the value of the ‘Slider Value’ field via API when the user changes the value of the slider.  This means we will need to use our good old friend from PART 1, events.  

In PART 1 the oninput event was used to update the number above the slider whenever the user changes the value of the slider.  This is great for real-time display, but the oninput event fires every time the slightest movement is made to the slider, and sending out API requests at such a high frequency would cause issues.  All that is needed is to update the value when the user lifts their finger off the mouse when they drop the slider at the desired value.  Thankfully, there is another event, onchange which fires exactly at this time.  Another function can be inserted into the script tag and called from an ‘onchange’ attribute in the input element.

				
					html(" <script>function updateSliderValue(){let sliderVal=document.getElementById('my_slider_val2');let slider=event.target
sliderVal.innerHTML=slider.value}
async function updateNinox(){let slider=event.target;slider.disabled=!0;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:{'Slider Value':slider.value}}];const response=await fetch(url,{method:'POST',headers:{'Content-Type':'application/json','Authorization':'Bearer '+'" + 'API KEY' + "'},body:JSON.stringify(data)});slider.disabled=!1}</script> <div id='my_slider_val2'>" + text('Slider Value') + "</div>
	<input type='range' min='0' max='100' value='" + text('Slider Value') + "' oninput='updateSliderValue()' onchange='updateNinox()'>
")
				
			

In the HTML above, the updateNinox() function is called from the ‘onchange’ attribute of the slider.  This function has the ‘async’ keyword to enable it to wait for the response from the Ninox server without stopping other processes.

In updateNinox(), we start by disabling the slider while the request is being sent, by setting its disabled attribute to true. The next section gets all of the information needed to locate the current record. Because API requests can be sent from anywhere, they require a complete address to the data that is being updated. For Ninox, we need the team ID, database ID, table ID, and record ID to locate the record we are currently in. This information is available in the url of the current page, and could be hard coded into the HTML, but getting them from the url each time makes the code more transportable to other tables, databases, or teams.
The whole url is accessed with location.href, and stored in the currentUrl variable. This could also be done with the new urlOf(this) ninox function, and inserted into the HTML string. The team ID, database ID, and table id are all extracted from currentUrl by splitting the url with the split() string method. The record Id is inserted from Ninox, since it is a little harder to extract it from the url (it is concatenated to the table ID after ‘/node/’ in the url).
Once the necessary information is extracted from the current url, the url of the API request is constructed using that information, and stored in the ‘url’ variable. Then the data to send to the Ninox API is stored in ‘data’. Take a look at the Ninox REST API Documentation to see how to format the body of the request, and the url of the request.
The actual request is sent out using the fetch() function. There are a couple different ways to send out API calls from javascript in the browser, but fetch is a fairly straightforward way to do so. The fetch function takes two parameters here; the url, and a config object. In the config object, the HTTP method is specified as ‘POST’ (the Ninox API uses the POST method for both creating and updating records). Two headers are specified, the first of which specifies that the body of the request will be in JSON format, and the second of which gives the API key for Authorization. The body of the request consists of the data that we created above. The “JSON.stringify()” function takes a json object and converts it into a string, since this is how the data must be sent via HTTP request.

Once the request is sent, the “await” keyword in front of fetch ensures that the function halts until the response is received from the server before executing the next line of code. Once the fetch() call returns the Ninox server’s response, the slider is re-enabled.
Here is the final slider with two way communication:

There are many customizations you can make to the appearance of the slider which can be found here.

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

Ninox FormsPLUS is Coming Soon!

Single and Multi-Dynamic Choices

By David Gyenes, Director of IT

With the launch of the new Ninox v3.3.0, we now have an excellent feature where we can finally create dynamic choices. Andy has covered parts of this topic already, but I would like to discuss specifically how to handle them and how to refer to records.

Most people probably use the “Link” (relationship) field as a single choice. When we are not actually linking one table to another, for example a customer to an invoice, I prefer to use the dynamic choice field. For values you simply use the “select Table Name” and for the Value Name, you pick the field that you want to be displayed in the drop down, like ‘Customer Name’.

In this situation we cannot refer to the actual record itself immediately. What we get as result is the Record ID number. A single dynamic choice is simple, we get one number. I use the number(‘Dynamic Single Choice’) to get the ID. How do I get the record?

				
					let xRecID := number(‘Dynamic Single Choice');
let xRec := record(‘Table Name', xRecID)
				
			

From this point, I can call any fields using the xRec.‘Field Name’ from this record.

The question is how can we get the record IDs for a multi choice field? It will be a shocking revelation. Use the numbers(‘Dynamic Multi Choice’). Notice the “s” at the end. This will list all selected choices as numbers. Do you want to add to it with code? Let’s say we have options 1-5. Two and three are selected:

				
					let xSelection := numbers(‘Dynamic Multi Choice'); => this returns [2,3]
let xNewArray := array(xSelection, [4]) => this will return [2,3,4]
				
			

How do we take an item away from the array? Let’s take a look at an example. The original array will have three items in it and we will take away one of them.

				
					let xArray := [“One”, “Two”, “Three”];
let xArrayCnt := cnt(xArray);
for i in range(0, xArrayCnt) do
    if item(xArray, i) != “Two” then
        item(xArray, i)
    end
end
				
			

This will give us a result of [“One”, “Three”]

Now you and your app end-users can have complete control over the selectable options that appear in choice and multiple choice fields.

This Week in the Learning Lab

Join us this Thursday the 15th at 12pm EDT for 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

The first annual Bring your Pet to the Learning Lab Day is quickly approaching and even Team Nioxus is getting in on the action! It is not too late to submit your precious pal by sending in your pics to Terri@nioxus.com or to me at Jim@nioxus.com. I am excited to show you my new puppy, Milo, our seven-month-old beagle who has brought much joy and happiness to our home.

W.C. Fields once said “Never work with kids or animals” but he had only half of that quote correct. There are great benefits to bringing your pet to work and now it is even easier since many of us are able to work from home.

According to an article by Rover, “For the foreseeable future, we’re going to be spending a lot more time in close quarters with our beloved animals. And that’s good news for pet parents. Rover surveyed pet parents who are now working from home because of the coronavirus outbreak and discovered that:
· 54% said they feel less anxious because they have their pet with them.
· Two-thirds said they feel happier working from home because they have the company of their pet.
· The majority of pet parents (70%) said working from home helps them get more exercise by walking or playing with their pet.
· The majority (86%) of pet parents said spending time with their pets helps alleviate stress from today’s news.
· Pet parents are most likely to turn to their pets to reduce or relieve stress from news of current events. 40% say they turn to their dog or cat, compared to a significant other (23%) or family member (13%).

It has been shown that having pets in workplace tends to make the employees much more relaxed and stress drops considerably. Having a pet-friendly business is a positive thing all around. Employees do tend to have lower absences and more important, they tend to work longer hours. Also, they don’t have to worry about their little darling or having to pay someone to keep an eye out on their extremely important family member.”

At the next Learning Lab, not only will we have a quick slide show of your submitted pets, but we will be taking your questions about all topics Ninox. So, join us and get free support and at the same time say hello to friends and enjoy. You just never know what fun tips, tricks and shortcuts will be revealed at a Ninox Learning Lab. We have lots of fun, don’t we? Free Registration for the Ninox Learning Lab by clicking HERE.

Jim

Jim's Comic Strip Corner

click to view comic

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