Advanced settings for the Embedded Classification Tools (version 1.8)

The following is an appendix of the Embedded Classification Tools (ECT) documentation, please refer to the original documentation before reading it.

Manual binding

In order to make an ECT component work, when the DOM of your web application is fully loaded, the ECT library searches in your HTML the proper elements added for the Embedded Coding Tool (or the Embedded Browser) and binds it with the ECT component. This behaviour is fully automated if the settings property autoBind is set to true (this is the default value).
For some reason, if you need or prefer to manually manage the binding of the ECT component, please set the settings property autoBind to false and use the ECT.Handler.bind function when you need.

Manual binding is recommended when ECT is used in a JavaScript framework. Binding the ECT only after the framework has mounted the component is safer.

By default, when the DOM of your web application is fully loaded, the ECT library automatically scans the page for the HTML elements associated with the Embedded Coding Tool (or the Embedded Browser) and binds them to their corresponding components.
This automatic behavior is enabled when the autoBind setting is set to true (which is the default).
If you prefer to control the binding process manually, set the autoBind setting to false and call the ECT.Handler.bind function whenever you want to initialize the component(s).

Manual binding is especially recommended when using ECT inside a JavaScript framework (like Angular).
In these environments, ensuring that the framework has fully mounted or rendered the component before binding ECT helps avoid timing issues and ensures a more reliable initialization.

ECT.Handler.bind(iNo);

Argument:

iNo (string): the “identifier” of the ECT component (set in data-ctw-ino)

Example:

const mySettings = {
    apiServerUrl: "https://icd11restapi-developer-test.azurewebsites.net",   
    autoBind: false // set autoBind to false
};

ECT.Handler.configure(mySettings);

ECT.Handler.bind("1"); // call bind() after configure()

Try out the code playgrounds and play around with the live examples using the manual binding:

If necessary, you can also use the Manual binding configuration for the multiple instances of ECT components explained in the next section.

Multiple instances of Embedded Classification Tools components

The ECT library supports multiple instances of the Embedded Coding Tool and/or the Embedded Browser on the same page.
Each instance is identified by its own data-ctw-ino value.
Below is an example showing three independent Embedded Coding Tool instances:

<!-- Embedded Coding Tool 1 -->
<input type="text" class="ctw-input" autocomplete="off" data-ctw-ino="1" > 
<div class="ctw-window" data-ctw-ino="1"></div>  

<!-- Embedded Coding Tool 2 -->
<input type="text" class="ctw-input" autocomplete="off" data-ctw-ino="2" > 
<div class="ctw-window" data-ctw-ino="2"></div>  

<!-- Embedded Coding Tool 3 -->
<input type="text" class="ctw-input" autocomplete="off" data-ctw-ino="3" > 
<div class="ctw-window" data-ctw-ino="3"></div>

When multiple instances are present, the ECT.Handler.configure() call applies the same global settings and callbacks to all ECT components.
However, if needed, you can override specific settings for an individual instance. This allows running multiple ECT instances on the same page: each connected to different API server, using different ICD classifications and minor versions, targeting different languages, or searching with different configurations or filters.
You have full flexibility to configure each instance according to your needs.

To override settings for a specific instance, use:

ECT.Handler.overwriteConfiguration(iNo, overwriteSettings, force);

Arguments:

iNo (string): the “identifier” of the ECT component (as defined in data-ctw-ino)
overwriteSettings: an object containing the settings you want to override for this specific instance
force (boolean, optional): set to true to force a refresh of the instance's configuration. This is only needed when overriding settings after the initial configuration. Default value: false. You may omit this argument ECT.Handler.overwriteConfiguration(iNo, overwriteSettings);

The overwriteSettings object is a subset of the main Settings object used during configuration.

For the Embedded Coding Tool, you can override the following Settings;

apiServerUrl
apiSecured
source
minorVersion
language
popupMode
simplifiedMode
disableHierarchy
wordsAvailable
chaptersAvailable
chaptersFilter
subtreesFilter
flexisearchAvailable
searchByCodeOrURI
hierarchyTitle
height

For the Embedded Browser, you can override the following Settings;

apiServerUrl
apiSecured
source
minorVersion
language
browserSearchAvailable
browserAdvancedSearchAvailable
browserHierarchyAvailable
browserHierarchyRootURIs
browserURI
includeDiagnosticCriteria
hierarchyTitle
height

Example: Overwriting Settings for 3 Embedded Coding Tool

// configure all the Embedded Coding Tool
ECT.Handler.configure(mySettings, myCallbacks);

// overwrite configuration only for the Embedded Coding Tool 1
ECT.Handler.overwriteConfiguration("1", { language: "en", chaptersFilter: '18;19', wordsAvailable: false });

// overwrite configuration only for the Embedded Coding Tool 2
ECT.Handler.overwriteConfiguration("2", { language: "es", chaptersFilter: '23' });

// overwrite configuration only for the Embedded Coding Tool 3
ECT.Handler.overwriteConfiguration("3", { language: "fr", chaptersFilter: '26' });

Explanation of the example

Embedded Coding Tool 1: uses English, searches only in chapters 18 and 19, and hides the related words panel.
Embedded Coding Tool 2: uses Spanish and searches only in chapter 23 (External causes).
Embedded Coding Tool 3: uses French and searches only in chapter 26 (Traditional Medicine).

Try out the Playground and play around with the example of 3 Embedded Coding Tool