I discovered creating a decimal input component was more complicated than I originally thought. The complexity came when I decided it would be good to show formatted values. Specifically displaying currency with a currency symbol and parentheses (to denote negative values) as well as showing the percent symbol with percentages. Showing formatted values is not possible inside of the html input element when the type is set to number. The only way I could find to show formatted values was …
This week’s component is an input that only accepts signed integer values. Try as the user might to enter invalid data, such as characters, as soon as they leave the input the value reverts back to the last valid integer. The InputIntegerBCA component also sports Min and Max parameters to further restrict what the user can enter. If a Min value is not specified then the default value is the greatest negative signed integer value of -231 or -2,147,483,648. If …
Text area inputs are better at handling large blocks of text, but you might want to put a limit on just how much text the users can enter. It’s probably a good idea to also let the user know what the limit is and how close they are coming to that limit. To achieve this I’ve added a number-of-characters-remaining counter to the InputTextAreaBCA component. To use the feature all the developer has to do is enter the character limit in …
The ChecklistInlineBCA component provides an inline list of checkboxes and the associated labels. The width of the checkbox and label combination varies with the length of the label string to produce a flowing horizontally oriented list that wraps to fit the page. Most of the time this configuration fits into my user interfaces better than the standard vertical or stacked list of checkboxes. I think it’s also more user friendly than a dropdown list of checkboxes since the user does …