/

The “Percent” element is a special input element that allows users to enter numerical values in percentage format within the application. As the user enters a value, the input is automatically formatted and a percentage symbol is added. This makes percentage-based data entries clearer, more consistent, and error-free.
First, click “Actions” in the “Data Sources” section, then click “New SQL Action” and create the SQL query. Test it and click the “Create” button.
Next, go to the “UI Design” module and use “Add Action” to link your action to the page. Add a “Label” element to the page. Type “Pizza” inside it and set the font to “Heading 2” in the “Style” field of the “Styling” panel. Add another “Label” element below it. Below that, add a “Percent” and a “Gallery View” element. Select the data source for the “Gallery View” element using the “DataSource” field. Drag and drop the “Row” group—which contains the selected “Percent” and “Label” elements—into the “Gallery View.” In the “Label” element, define “Name” as the “Field to display” in the “Value” field. Click the “Percent” element and set the “Step” field to “1” to specify the increment for the up and down arrows. In the “Value” field, select “PercentValue” as the “Field to display.” Define the preview text using “Placeholder.” Set the value scale to “0” in the “DecimalScale” field.
When the application is tested, the percentage distribution of the ingredients defined under the “Pizza” heading is presented to the user in a visual and readable format. Each ingredient is listed in separate fields, and the percentage of that ingredient in the recipe is displayed next to it. This screen provides a preview structure where the recipe ingredients are presented in a simple and easy-to-understand manner.