TagsInput example

Introduction

In this article we'll see how to integrate into the RD3 graphics engine a TagsInput type component, typically used to populate TO/CC/BCC email fields using this component.
Attached you can also find the example project for the FLUID graphics engine.
We want to obtain this result:

Definition in the IDE

First, a client library was created in the project called TagsInput and its properties were defined.

Then a form was added to the application to compose an email, and the library was dragged onto the CC field.

Client-side wrapper class

The tagger.js and tagger.css files were copied into the custom directory. A JavaScript file, TagsInput.js, containing the code of our wrapper class was also created.

Note: We did not change the Desktop.htm or Desktop_sm.htm files, because the TagsInput.js is loaded automatically, while the tagger.js and tagger.css files are loaded when the wrapper class is being defined.

The constructor in which the CustomElement class is extended has been defined in the JavaScript class.

Loading dependencies

We'll use the LoadRequirements static method in the CustomElement class to load dependent resources.

Creating the component

The Realize method was defined, in which the element is built through the classes and methods of the "native" library.
Because the native component does not fire any event when a tag is added or removed, we'll attach an observer to the DOM object to intercept the value change and send it to the server.

Since the component is used in a panel field, the GetDOMObj() method must be implemented.

Operation of the component

Every time the field receives a value from the server, the SetValue() method is invoked, overriding which the value is split and consequently the tags are created/deleted.

Finally, given that the native component does not manage the disabled status, we'll implement the SetEnabled(enabled) method to cover the object with a transparent div in order to prevent its use.