Learn step by step how to create a product addition form using Kuika’s Number Input element, where users can enter numerical data without errors by defining constraints such as decimal places, negative values, and maximum amounts.
The “Number Input” element is a basic input element that allows users to enter numerical values within the application. It supports various data types—such as integers, decimal values, and negative numbers—thereby catering to a wide range of use cases. It controls numerical inputs. Thanks to its structure, it enhances data accuracy and helps prevent invalid entries.
First, create your table in the “Tables” section of the “Data Sources” panel as shown on the screen. Add a “Label” element and type “Product Name” in the “Value” field. Drag the “Text Input” element below it. Add another “Label” element below that. Type “Product Quantity” into the “Value” field. Drag the “Number Input” element onto the page. Update the default quantity in the “Value” field and set the placeholder to “1” in the “Placeholder” field. Set the scale to “0” in the “DecimalScale” field. To prevent negative numbers from being entered, set the “AllowNegative” setting to off. To ensure there is no distinction in the net quantity, set the “ThousandSeparator” field to off. Set the maximum quantity to “50” in the “Max” field. Then, add a “Button” element to your page. In the “Value” field, enter “Add Product” as the button text. To perform the save operation, use “Add Action” to add the “Save Record” action to the button. Select the table in the action. In the “Opened Columns” field, select all columns. Define the “CreatedDate,” “ProductName,” “Quantity,” and “Id” fields.
When the application is tested, you’ll see a simple screen for adding products that includes fields for the product name and quantity, with the quantity field configured using a “Number Input” element.
