Reference tables, also referred to as type tables or lookup tables, are typically small tables containing slow changing or static data like a list of countries, address types (billing, mailing, shipping), or phone number types (home, mobile, work). There tends to be many reference tables in well normalized enterprise application databases. Some are static so no UI is needed to maintain them. Others require some occasional updates. For this last group it’s good to have a UI available for the …
I’ve made all the component and example code that I have produced for the blog available through the Blazor Component Authority demonstration application. With the app it’s possible to look at live examples and see the code next to it. I think this makes it much easier to find what you’re looking for and also see how to apply it. I have a few more improvements planned for the demonstration application but I didn’t want to delay releasing what I …
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 …
If having more than one button at a time running a task is problem then the buttons need to be mutually disabled. The ButtonBusyBCA component has a method named SetAvailability to help accomplish mutually disabling the buttons. Calling SetAvailability(false) will disable the button so it’s just a matter of creating references to the buttons. Then calling SetAvailability on the references in the methods handling the button clicks. Here’s an example of the markup. The button references The methods handling the …
Users repeatedly clicking a button can result in multiple submissions, which is not a good thing. The best practice is to disable the button and display a busy indicator until the task has completed. The ButtonBusyBCA component provides these features to lighten your load. Button filling the full width of a row A button with a fixed width …
This is a simple but useful component to display a value along with a label. It contains three elements commonly used together. A div wrapping the whole component, a label, and a paragraph. It also provides a placeholder to display a character or string in case the value to display is null. This feature is fairly important because without it the overall height of the component would be reduced when the value is null, empty, or whitespace potentially producing an …
In my last post I decided on a few features for a text input component I’ll name InputTextBCA. I plan to append most if not all the components I design with BCA for Blazor Component Authority. I’ve had the experience of trying to use two different libraries of components on the same page and ran into a naming ambiguity error which forced me to use a fully qualified name. I didn’t like doing that. It seemed a bit noisy to …