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

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 needed, you can also use the manual binding approach for multiple ECT instances, as described 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 uniquely identified by its own data-ctw-ino value.
The example below shows 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