Format Builder: Difference between revisions

From nuBuilderForte
Jump to navigation Jump to search
mNo edit summary
 
(16 intermediate revisions by 3 users not shown)
Line 1: Line 1:
Back to [[Documentation]]
= Introduction =
The Format Builder will allow you to create custom formats for [[Objects#nuDate|nuDate]] and [[Objects#nuNumber|nuNumber]].
The Format Builder will allow you to create custom formats for [[Objects#nuDate|nuDate]] and [[Objects#nuNumber|nuNumber]].


To create a Format we need to do 2 thing.
To create a Format we need to do 2 things.
#Choose the Data Type.
#Choose the Data Type.
#Build the Format.
#Build the Format.
Line 7: Line 10:


=Building a nuDate=
=Building a nuDate=
To build a date format, click on a combination of the following options.
To build a date format, click on a combination of the following options.
Entering a Date with the keyboard requires the user to enter the date in the exact format.


eg. ''mask - '''result''' ''(2007-13-01 15:20:01)
eg. ''mask - '''result''' ''(2007-13-01 15:20:01)
Line 25: Line 31:
.. and some punctuation.
.. and some punctuation.


=Building a nuNumber=
To build a nuNumber format you will need to provide up to 4 things.
1. A Currency sign (not essential)
2. A Separator that will separate a large number into thousands. (not essential)
3. A Decimal point character (only essential if Decimal Places is greater than 0)
4. Number of Decimal Places.


=Building a nuNumber=
To build a number format, click on 1 of 4 punctuation types.


#1000.
Changing these will change the display of the Format field.
#1000,
#1,000.
#1.000,


All of these 4 fields are [[Objects#nuScroll|nuScroll]] Input Objects (with default values that can be scrolled through but will also accept other characters.)


*To the left of these choices is a [[Objects#nuScroll|nuScroll]] Object that will allow you to add a currency sign.
= Mask =
*To the right of these choices is a [[Objects#nuScroll|nuScroll]] Object that will allow you select the number of decimal places.
* [https://forums.nubuilder.cloud/viewtopic.php?f=19&t=10820#p23069 Forum Post] - Input field mask / validation


= Default =
* Specify whether a nuDate or nuNumber Format should be used as default when creating an Object.


This prefix and suffix of the Format will be added when a punctuation type is selected.
= Number as Text =
* [https://forums.nubuilder.cloud/viewtopic.php?f=19&t=10940&p=23754#p23752 Forum Post]
* The need:
<pre>
user types "2" and then it auto formats to "+2.00"
user types "-2" and then it auto formats to "-2.00"
user types "1.5" and it auto formats to "+1.50"
</pre>
* Use a Text format for '''Input Type (and class)'''
* In the database, a VARCHAR column type is used
* Adding an '''onblur''' JavaScript event to the object's '''Custom Code''' will format the number accordingly when the field loses focus:
<pre>
let v = $(this).val();
let num = parseFloat($(this).val());
let fixed = num.toFixed(2);
fixed = fixed > 0 ? '+' + fixed : fixed;
$(this).val(fixed).change();
</pre>
* [[Media:TextNumber_cust_code.png|Screenshot]]

Latest revision as of 10:45, 30 May 2025

Back to Documentation

Introduction

The Format Builder will allow you to create custom formats for nuDate and nuNumber.

To create a Format we need to do 2 things.

  1. Choose the Data Type.
  2. Build the Format.


Building a nuDate

To build a date format, click on a combination of the following options.

Entering a Date with the keyboard requires the user to enter the date in the exact format.

eg. mask - result (2007-13-01 15:20:01)

  • yy - 17
  • yyyy - 2017
  • pp - am or pm
  • dd - 21
  • ddd - Tue
  • dddd - Tuesday
  • mm - 03
  • mmm - Mar
  • mmmm - March
  • hh - 15
  • nn - 20
  • ss - 01

.. and some punctuation.

Building a nuNumber

To build a nuNumber format you will need to provide up to 4 things.


1. A Currency sign (not essential)

2. A Separator that will separate a large number into thousands. (not essential)

3. A Decimal point character (only essential if Decimal Places is greater than 0)

4. Number of Decimal Places.


Changing these will change the display of the Format field.

All of these 4 fields are nuScroll Input Objects (with default values that can be scrolled through but will also accept other characters.)

Mask

Default

  • Specify whether a nuDate or nuNumber Format should be used as default when creating an Object.

Number as Text

user types "2" and then it auto formats to "+2.00"
user types "-2" and then it auto formats to "-2.00"
user types "1.5" and it auto formats to "+1.50"
  • Use a Text format for Input Type (and class)
  • In the database, a VARCHAR column type is used
  • Adding an onblur JavaScript event to the object's Custom Code will format the number accordingly when the field loses focus:
let v = $(this).val();
let num = parseFloat($(this).val());
let fixed = num.toFixed(2);
fixed = fixed > 0 ? '+' + fixed : fixed;
$(this).val(fixed).change();