VOLUME LXXIX              03/30/2021

Elegance in Motion - The Cascading Selection

Databasics

While the Ninox selection fields have always been a powerful tool in the Ninox toolbox, they’ve lacked a crucial component; the ability to dynamically adjust to the selections in other fields.  Up until now if you wanted to, for example display a list of cities in a drop-down field based on a previous selection of specific state, you would have to create a separate selection field for each state and then hide and/or display the proper city field based on the state. To capture all the states in the U.S. alone would require 50 selection fields!

Enter… The Dynamic Choice Field. This simple, elegant and enormously powerful new table object enables Ninox developers to populate Drop-Down Boxes, Radio Button Clusters and Selection Ribbons with a relevant palette of selectable options based on the contents of another field. And when you start chaining these Dynamic Choices together, you get a Cascade that adds a new level of sophistication and beauty to the Ninox user experience.

Check out the new training class on the Ninox Learning Channel by Nioxus and also log into your Nioxus member portal to download this week’s new template. These two assets will enable you to add Cascades to your Ninox solution quickly and easily.

Check out the Cascade today. It’s an important piece in the selection field puzzle and one that Ninox developers and users alike are sure to appreciate.

Creating a Custom Field Type in Ninox

Part 2: Communicating from Ninox to HTML

By Adam Davidson, Director of Product Management

This article is a continuation of an article in last week’s Newsletter. It is highly recommended that you read that article before reading this one.

Last week we created a slider with its value displayed above it using html and javascript. In this and the following article we give the slider a memory by establishing communication to and from a Ninox field.

First, let’s clean up the formula code by inserting the javascript into a function in a < script > element.

							
					html("
	<script>
		function updateSliderValue() {
			let sliderVal = document.getElementById('my_slider_val2');
			let slider = event.target
			sliderVal.innerHTML = slider.value;
		}
	</script>
	<div id='my_slider_val2'>50</div>
	<input type='range' min='0' max='100' value='50' oninput='updateSliderValue()'>
")				
			

A script element is a place to insert Javascript that can be used throughout the HTML document. Any functions or variables declared in script elements are global objects and can be called from many places, including from inside event attributes.  Here, a function called updateSliderValue is declared containing the code from Part 1, and the function is called from the oninput attribute.

Next, let’s create a place to store the value of the slider in Ninox.  HTML has memory only while it is loaded in the page.  In order for the slider to remember its position even when the Ninox record is closed, we need a more long term place to store the value.  a Ninox field is a perfect place to do this.  Create a number field called “Slider Value” in the Ninox record.  Eventually this field can be hidden as it is just the storage location for the slider, but to see how two-way communication works between Ninox and HTML, leave it visible for now.  Enter the default value as 50, the min as 0, and the max as 100 for this number field to keep it consistent with the HTML input element.

There are two directions of communication that need to be established for the Slider to function.  First, The slider must receive information from Ninox.  In other words, when the slider loads, it must display the value that is stored in the ‘Slider Value’ field, and the value of the slider must update whenever the ‘Slider Value’ field changes.  

To do this, the field value can be inserted into the HTML string being passed to the html() function.  This will ensure that the HTML re-renders to the current value whenever ‘Slider Value’ changes. 

							
					html("
	<script>
		function updateSliderValue() {
			let sliderVal = document.getElementById('my_slider_val2');
			let slider = event.target
			sliderVal.innerHTML = slider.value;
		}
	</script>
	<div id='my_slider_val2'>" + text('Slider Value') + "</div>
	<input type='range' min='0' max='100' value='" + text('Slider Value') + "' oninput='updateSliderValue()'>
")				
			

Now, instead of passing the same string to the html() function every time, the input to the function is dynamic.  ” + text(‘Slider Value’) + ” inserts the current value of the Slider Value field into the string in two locations.  Both spots previously held the value “50”, since that was the starting position for the slider.  Now the Starting value for the slider is determined by whatever value is in the ‘Slider Value’ Ninox field.  

Changing the value of the Ninox field changes the position of the slider, and closing and opening the record does not reset the default value for the slider.

It is important to note that an entirely new input element is being created every time the Ninox field is updated.  The string passed to the html() function changes to reflect the new value in ‘Slider Value’ and replaces the existing html with the new html.

This communication only travels in one direction.  Dragging the slider to a new position does not change the value of ‘Slider Value’.  In Part 3, communication in the other direction will be established via the Ninox API.

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

Ninox FormsPLUS is Coming Soon!

This Week in the Learning Lab

Join us this week for the Learning Lab where we’ll be discussing Bindings/the Bindary! This week’s Learning Lab will be on Thursday the 1st 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

Last week’s Learning Lab was another was another record-breaking session with over 100 attendees!!! We continue to skyrocket into 2021.

We have had some very special events such as API, HTML, CSS, Ninox v3.3.0 and more. We have also had some very special surprise guests. You just never know who is going to show up at a Nioxus Learning Lab!

Let us know if there are any other special classes or great topics that you would like to have this year.

As we continue to grow, we would like to have just one registered e-mail for each attendee and a proper name so that we can keep track of your very valuable Gold Stars that you can redeem for free services, products and Nioxus Swag.

We are eager and excited to participate in your exploration and learning of Ninox. If you ever have a question during the learning Lab please post it in the Q&A area so that we can answer it live one on one for you. You can even electronically raise your hand if you want to speak… don’t be shy! You know that you want to have fun with us! Also let me tell you a little secret… great questions or great answers often get extra Gold Stars! We LOVE participation at the Learning Lab.

Has anyone noticed that there is a place at the top right and bottom right of our website at www.nioxus.com so that you can toggle from English to German manually? Give it a try. We will be adding Spanish, French and Italian in the upcoming months. And lastly, if you have not done so already, be sure to check out the new 800 series at the Ninox and Nioxus Product Training Channel on our Youtube channel.

See you Thursday at high noon EDT!

Jim

Jim@nioxus.com

Jim's Comic Strip Corner

click to view comic

Using Dialog and Alert

By David Gyenes, Director of IT

It seems like many people either don’t use or don’t know the capability of the alert() and dialog() functions and that this may be the reason why they don’t use these functions. These are great user feedback tools that can come in very handy. Giving feedback to the user is important. You can use these functions well in buttons or formulas “on click” option. Also, we can use these functions in trigger after update IF the field is bound to global variable (Browser) or to the record (Browser). NOTE: these functions don’t work in trigger after update if the field is bound to the server.

When you just want to notify the user that one or multiple information is missing to run the desired function, you can use the alert() to have a Pop-Up notification on the screen. The user would be able to click on OK only. This means for the alert() function, we only can specify the “body” parameter.

Comparing the alert() to the dialog() we have more options. Not only do we have more options, but we can also specify / customize more. We can set header, body and buttons for the Pop-Up window.

The header is not mandatory and we can leave it empty then actually it would not be displayed (ex.: dialog(“”, “This is body text”, [“OK”, Cancel”]) ).

The body can be empty as well and it would still be displayed.

Buttons can be tricky. How many can we use? As many as the screen can handle in one row. Can you use the icons to create short buttons? Yes, you can use icons as well!

We now have learned the main parts of these tools. How can we further customize them? Well, we can use variables in them and not just text. All (header, body, button) can include parameter Example:

							
					Let xCustomer := ‘Customer Name';
let answer := dialog(“DELETE WARNING”, “Would you like to delete record ” + xCustomer, [“Yes”, “No”])
				
			

Or

							
					Let xNumber := 5;
let answer := dialog(“ADDING RECORD”, “How many record are you adding?“, [“1”, xNumber, “X”])				
			

Let’s make your user experience even better. Have fun playing with these!

Cascading Selection Field

Play Video

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