Blazor Component Authority

I’m dedicated to giving you the very best in Blazor component design, advice, and examples. Please reach out if you want to know more!

News

• Text Area Component
  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 MaximumLength property. If the developer does not specify the MaximumLength then it defaults to 8000 characters. I chose 8000 since that is the maximum for MS SQL Server VARCHAR(n). Any integer value could be used instead of 8000 up to the signed 32 bit integer maximum value of 2,147,483,647 which seems to be 1 more than what MS SQL Server VARCHAR(max) type can handle. The number-of-characters-remaining feature is an HTML <small> element so that it appears smaller than the other text in the component. There is also a property named ClassRemaining so the developer can style the number-of-characters-remaining feature however they like. The InputTextAreaBCA component markup and code. For the InputTexBasetBCA that the InputTextAreaBCA inherits from see this previous […]
• Inline Checklist
  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 not have to click to see the list. The downside is it can take up more space, which may not work well in a densely packed UI.  ChecklistInlineBCA is a generic component that requires two type parameters. OptionType – The type of objects in the OptionsList IdPropertyType – The option ID property type Since ChecklistInlineBCA is a generic component it requires at least these two string parameters. IdPropertyName – The name of the option ID property  DescriptionPropertyName – If the source table has it and the data in it is easy for the users to read I like to use the short description property name. Otherwise the name of the OptionList description property. Optionally one other string parameter can be […]
• Component Feature Checklist
  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 a feature you need you might want to come back to the blog to see if I’ve added it. If you find I haven’t included a feature you need please leave a comment detailing what you’re looking for and I’ll try to accomodate you. HTML elements that commonly appear together. Example: Enclosing div, label, and input. Parameters Value  Provides the means to set or read the components value via binding The type is dependent on the component Placeholder Provides the means to show a message in an input when the input is null Type string Label The text that will be displayed in the label element Type string Title The title (tooltip) attribute of the enclosing div.  Type string Id […]
• Mutually Disabled Buttons
  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 button clicks
• Busy Button
  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

About Me

Blazor for the uninitiated