In my experience one of the more time consuming and frequently performed operations in enterprise applications is the entry of descriptions. I’ve had to make many description entries and I’ve noticed that most of the time the description was the same or similar to other entries in the database. When a description I was entering didn’t match an existing description it almost always consisted of a new combination of terms that already existed in the database. Based on this experience it seems to me there is an opportunity here to help the user with this tedious task and also improve the quality of the data entered.
I believe a Blazor component that uses the data in the database could help the users make new entries. Here’s how I think it should behave.
- Provide a select list of unique entries from the database filtered by the user’s input.
- Suggest the first entry on the list via gray characters needed to complete the input.
- When the user’s input filters the list to zero, use only the last term to find matching terms in the database and suggest (via gray characters) the first term found for the final entry.
- When the user presses the enter key the suggestion will be applied to the input.
I created a component called InputHelperBCA that implements these behaviors. Here’s what the component looks like implementing items 1 and 2 above.
The suggestion (gray characters) is achieved by putting two spans (line 23) after the input (line 13) then using CSS (lines 54 to 74) to adjust their positions and opacity.
The first span contains the same value as the input and its purpose is to ensure the correct horizontal placement of the second span. To prevent interference with the input the first span is hidden behind the input by having its z-index value (zero on line 65) less than the input’s z-index (ten on line 56). Line 64 “white-space: pre;” preserves any leading spaces in the rendered html that might be present in the “Output” property. The second span contains the suggestion (gray characters) and is at the same z-index (ten on line 73) as the input but is in front of the input since its html comes after the input html.
After pressing the enter key the suggestion is applied, implementing behavior number three from the list above.
The HandleKeyDown method implements behavior number three by detecting the Enter key down (line 311) and sets the input equal to the combination of the Output property and the Suggestion property (line 323).
The Output property value is similar to the Input property value but was needed due to the timing of the Input property updates via binding and the need to avoid updating the Input property on every character input to prevent the loss of characters when typing fast.
After an initial suggestion is accepted the InputHelperBCA continues to make suggestions even though nothing in the database matches the value in the input. It does this by making suggestions based solely on the characters appearing in the final term (characters appearing after the last space character) of the input as described in behavior three.
In this case the final term the user has entered is “f” and the suggestion is “filter”. If the user presses enter at this point the suggestion will be accepted and become part of the input. This process can be repeated without limit in the InputHelperBCA.
I believe the InputHelper component can significantly reduce description entry time and maybe even part number entry time. It can also reduce user fatigue by reducing the number of keystrokes required.. Data quality would also be improved by producing more consistent input since the new input would be mostly based on existing data. Better data will make searches more productive and reduce errors, all good things for the business.
This was a fun component to work on and I learned a few things in the process. For instance when using Blazor server side, avoid updating the property bound to the input and updating the Value parameter on every input. This combination can introduce enough lag in the process that characters can be lost during fast typing. The solution for this component was to update the property bound to the input (Input in this case) as little as possible and only update the Value parameter when the component loses focus.
