Blog

All Blog Posts  |  Next Post  |  Previous Post

Unobtrusive suggestions while editing in VCL Delphi apps

Bookmarks: 

Thursday, January 5, 2023

TMS Software Delphi  Components

We are happy to inform the first TMS VCL UI Pack update (v11.0.1.0) for 2023 is here for Delphi developers. Already some time in development, it brings an exciting new feature we wanted to cover in more detail in this blog article.

As Delphi developers, we are used to auto completion when typing code and the code completion is offered via a dropdown from where the IDE suggest matching completion text based on the context, i.e. token at cursor:

TMS Software Delphi  Components

We offer a similar experience in our syntax highlighting code editor TAdvMemo.

Auto completion for regular text
But also when there is a need to let users enter text other than software code, we can accelerate the typing of this text via a similar process of auto completion. For regular text entry, we have extended the TAdvRichEditor with such unobtrusive code completion. To make the friction during entry as small as possible, the dropdown with suggestions is replaced by a light gray suggestion of what the user could type. When the user agrees, he can press the Tab key and the suggested text is automatically entered. 

Seeing it in action will make this clear much faster:

TMS Software Delphi  Components

There are various ways to fine-tune how the suggested completion behaves.  First of all, there is the new AutoCompletion property:

TMS Software Delphi  Components

From here it can be enabled, the text color for the suggested text can be chosen, the suggestion can be based on case sensitive or non-case sensitive comparison with a series of predefined words or series of words. And finally, it can be defined after what number of entered characters, a suggestion is searched and shown. 

Other than this, TAdvRichEditor now also has a new event OnAutoComplete. This event is triggered when AutoCompletion.Enabled = true and a new word of at least AutoCompletion.NumChars characters is entered. The signature of this event is:

TAutoCompleteEvent = procedure(Sender: TObject; WordBefore, WordsBefore: string; var ACompletion: string) of object;

It passes the word found at the caret position, all the words on the line where the suggestion is requested for and via the variable parameter ACompletion, the suggested word or words can be returned. This makes it possible to dynamically check the context and do smart suggestions. 

Here is an example of such implementation that will suggest the formatted current day when the user types 'tod':

procedure TForm1.AdvRichEditor1AutoComplete(Sender: TObject; WordBefore,
  WordsBefore: string; var ACompletion: string);
begin
  if Uppercase(WordBefore) = 'TOD' then
    ACompletion := 'Today ' + FormatDateTime('mmm D, YYYY', Now);
end;

Single line editing

As such automatic suggestions can also be useful for single line editing, we did a further trivial extension for TAdvRichEditor to allow only single line entry by a new property WantReturn: boolean that can be set to false. Just set the height of the TAdvRichEditor to a single text line height and AdvRichEditor.WantReturn to false, and it can be used as a single line editor. With the AdvRichEditor.Text property, the text for the control can be get or set, just like with a regular TEdit control.

TMS Software Delphi  Components

Future ideas

To make more accurate suggestions automatically, a possible strategy could be to use an NLP AI engine and make this feed the most likely suggestion based on the context of the text. It's an area we are researching further. Or maybe you have other useful ideas for making this even better? We are eager to learn how we can further improve our components to provide even more efficient & productive user-interfaces for your end-users. Let us know your thoughts!









Bruno Fierens


Bookmarks: 

This blog post has received 2 comments.


1. Friday, January 6, 2023 at 12:27:55 AM

Is there a demo project for the "Auto completion for regular text" example you show above?

Aschbacher Peter


2. Friday, January 6, 2023 at 2:43:55 PM

There is no demo project for this. The above screenshots were taken from just a TAdvRichEditor with AdvRichEditor.AutoCompletion.Enabled = true and a few words added to AdvRichEditor.AutoCompletion.Words. In addition, the event handler code for OnAutoComplete that is in this blog article.

Bruno Fierens




Add a new comment

You will receive a confirmation mail with a link to validate your comment, please use a valid email address.
All fields are required.



All Blog Posts  |  Next Post  |  Previous Post