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 …
Sometimes we want to bind a value in an element with a property in the component and also have the element’s onchange event trigger a method in the component. Why would we want to do this? Because sometimes we need to save the user’s input and also use it to do something else like filter a list or trigger a method in the parent component. To both bind to a property and call a method with the onchange event, 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 …
Here’s an expanded list of component features I’ll try to incorporate into all the BCA components. Obviously all these features are not applicable to every component, but I’ll attempt to include all I can. My hope is that using this checklist will help me produce a first class component library by updating this feature list and the existing components as I discover new features. So if you use any of the components from this blog and later find one lacking …
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 …