Advanced settings for the Embedded Classification Tool (version 1.7)

The following is an appendix of the Embedded Classification Tool (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.

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 Tool components

The ECT library is able to manage multiple instances of Embedded Coding Tool and/or Embedded Browser in the same page.

Below you can find an example of using 3 Embedded Coding Tool:

<!-- 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>

Using multiple instances of an ECT component, the ECT.Handler.configure() set the same settings and callbacks for all the ECT components.
But, if you need, you can overwrite some setting properties for a single ECT component. 

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

Arguments:

  • iNo (string): the “identifier” of the ECT component (set in data-ctw-ino)
  • overwriteSettings is an object which defines some overwritable properties
  • force (boolean): set to true for forcing the refresh of the Embedded Coding Tool's configuration. Use it only if you are overwriting the configuration at a later time and not during the initial configuration. This argument is optional (the default value is false), you can call the function with only two arguments: ECT.Handler.overwriteConfiguration(iNo, overwriteSettings);

The overwriteSettings is a subset of the Settings object used during configuration.
If you are using an Embedded Coding Tool, you are able to overwrite these Settings properties:

  • language
  • popupMode
  • simplifiedMode
  • disableHierarchy
  • wordsAvailable
  • chaptersAvailable
  • chaptersFilter
  • subtreesFilter
  • flexisearchAvailable
  • searchByCodeOrURI
  • hierarchyTitle
  • height

If you are using an Embedded Browser, you are able to overwrite these Settings properties:

  • language
  • browserSearchAvailable
  • browserAdvancedSearchAvailable
  • browserHierarchyAvailable
  • browserHierarchyRootURIs
  • browserURI
  • includeDiagnosticCriteria
  • hierarchyTitle
  • height

Example of overwriting 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' });

In the above example, we overwrite these properties:

  • The Embedded Coding Tool 1 is set for using the English language and it is configured for searching only in chapters 18 and 19, and for don't display the related words on the left of the search results
  • The Embedded Coding Tool 2 is set for using the Spanish language and it is configured for searching only in chapter 23 External causes
  • The Embedded Coding Tool 3 is set for using the French language and it is configured for searching only in chapter 26 Traditional Medicine

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