VOLUME LXXVIII               03/23/2021

A New Way to Build Many-to-Many Relationships

Databasics

New features are always exciting and Ninox version 3.3.0 is packed with them. But every once in a while, a product enhancement comes along that is more than a feature; it is a completely new way of doing things. And that’s what we have with the new Dynamic Multiple-Choice object in Ninox.

First – a little background. Until now, to create a many-to-many relationship in Ninox, we used a design strategy called Triangulation whereby we created a cross-reference table that effectively controlled the relationship between the two other “many” tables. This triangulation design is shown below:

Using that third point in the triangle (the ‘Employees Cross-Reference Table’ in the Exhibit 1) we are able to construct data models and applications that allow many records in one table to be related to many records in another. So, for example, where a company employed many people and each person could potentially have multiple employers, triangulation was the answer. But now, there is a new way; a simpler way to deliver this sophisticated database construct and it appears in the form of the Dynamic Multiple-Choice field in the new Ninox 3.3.0. Here’s how it works…

Imagine two tables in a database, one named “Employer” and the other named “Employee”. Each table contains multiple records and each record in each respective table may potentially be linked to many records in the other table (A company may have multiple employees and a person may work more than one job for more than one employer).

With the new Dynamic Choice field, we can represent the many options in each of these two tables as a single Multiple-Choice field. This field effectively replaces that third point in the triangle; the cross-reference table that used to be mandatory to affect this type of relationship. Look at Exhibit 2 to see this powerful new table object in action.

As you can see, a Many-to-Many relationship can now exist between two tables, and two tables only!

To learn more about this exciting and game-changing capability in Ninox Version 3.3, check out this week’s training video at the Ninox Learning Channel by Nioxus at YouTube and then join us this Thursday – March 25th – at noon EDT as we explore this and the many other new capabilities in the newest Ninox.

Creating a Custom Field Type in Ninox

Part 1: Setup

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).

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

Ninox FormsPLUS is Coming Soon!

This Week in the Learning Lab

Be sure to join us for this week’s Learning Lab! This week we’ll be taking an in depth look at Ninox 3.3.0.

This week’s Learning Lab will be on the 25th at 12pm EDT!

Check Out Our Templates

Did you know that Nioxus has built over 145 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 big day for our Beginners API class was a big hit this week at the Learning Lab. We covered the basics with HTML, API, and a little of CSS. Did this wet your whistle, and do you want MORE? Look for a second, more advanced API class later on this year. The beauty of API is that there is a ton more that you will be able to do without having to worry about Zapier integration.

Most of you are still asking questions about the Next Ninox v3.3.0 which was launched last Wednesday. If you are one of these folks then joining us on Thursday, March 25th is your lucky day at the Learning Lab. We will be devoting the entire class to Next Ninox v3.3.0 with an OPEN Q&A! I know I don’t want to miss it! You might even see me put my hand up.

Many of you are still learning the core basics of Ninox, but as they say, you have to start at the beginning. We love newbies at the Learning Lab. There is no such thing as a bad question. In fact, if you ask a really, really good question, regardless of your level of expertise, then you can score extra Gold Stars from our GSP program. Hint Hint Hint… just saying 🙂

Have a great week and see you on Thursday! Please keep sending me suggestions and cartoons! We like that kind of thing around here.

Jim

Jim@nioxus.com

Jim's Comic Strip Corner

click to view comic

Dynamic Multiple Choice Fields

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