Skip to main content

Terminology integration

Medblocks UI supports searching on SNOMED using the mb-search component. Snomed


The VSCode extension automatically renders mb-search as the Search component for all coded text elements.


This can directly be used in your code like below:

<mb-filter value="<272379006 | Event (event) |" label="Events"></mb-filter>

You can use any SNOMED Expression Constraint Language (ECL) query in the mb-filter element. For more examples on how to use ECL, please refer to the official examples.

Dependency Injection

The mb-search component has a dependency on the terminology server, which has to be an Axios like instance. This has to be injected through an event-based mechanism. The axios instance can include other configuration options like Authentication headers and interceptors too.

<div id="container">
value="<272379006 | Event (event) |"
<script src=""></script>
var container = document.getElementById("container");
var hermes = axios.create({
baseURL: "",
container.addEventListner("mb-dependency", (event) => {
if (e.detail.key === "hermes") {
e.detail.value = hermes;


By default mb-search works with the hermesPlugin and uses the Hermes API for SNOMED CT search and the default behavior of combining the active filters is to OR them. This can, however, be customized by setting the plugin property on mb-search. The plugin should implement the SearchPlugin interface as below:

interface SearchPlugin {
/**Search function to execute the search and return the results**/
search: (options: SearchOptions) => Promise<SearchResult[]>
/**How should the constraints provided in mb-filter add up?**/
getConstraints: (filters: string[])=> string | undefined

interface SearchOptions {
/**The text in the search box**/
searchString: string;
/**Axios instance provided by dependency injection**/
axios: AxiosInstance;
/**The final constraint query obtained by calling getConstraints**/
constraint?: string;
/**Maximum number of search results to show**/
maxHits?: number;

interface SearchResult {
/**The code of the returned search term**/
value: string;
/**The label/term for the search term**/
label?: string;
/**Should there be a star next to it? (useful for preferred terms)**/
star?: boolean;

For an example implementation using Hermes, refer to this.