Dictionary Component

The Dictionary Component is a modal window that allows word management. This high-level component is designed to be integrated quickly and easily in your web application.

Getting started

1. Import resources

<!-- Invox Dictation SDK - API -->
<script type="text/javascript" src="libs/invox.min.js" charset="UTF-8"></script>

<!-- Invox Dictation SDK - Dictionary Component -->
<script type="text/javascript" src="libs/integrations/invox-dialogs/invox-dictionary-component.min.js" charset="UTF-8"></script>
<link rel="stylesheet" href="libs/integrations/invox-dialogs/invox-dictionary-component.css">

1. Import resources

Import the resources in the head of your index.html.

• invox.min.js: contains the API of INVOX Medical.
• invox-dictionary-component.min.js: contains the Dictionary Component integration.
• invox-dictionary-component.css: contains the styles of the Dictionary Component integration.

   <!-- INVOX Medical SDK - API -->
   <script type="text/javascript" src="libs/invox.min.js" charset="UTF-8"></script>

   <!-- INVOX Medical SDK - Dictionary Component -->
   <script type="text/javascript" src="libs/integrations/invox-dialogs/invox-dictionary-component.min.js" charset="UTF-8"></script>
   <link rel="stylesheet" href="libs/integrations/invox-dialogs/invox-dictionary-component.css">

2. Initialize component

1. Create a container in the DOM. You can use the same container for all dialog components:

   <div id="invox-dialogs-container"></div>
   

   Copy to clipboard
2. Create the component:

   const dictionaryDialog = INVOXMDComponent_Dictionary.create("invox-dialogs-container");
   

   Copy to clipboard

3. Show component

dictionaryDialog.show();

4. Hide component (optional)

The dialog can also be closed by pressing ESC or clicking the Close button.

dictionaryDialog.hide();

5. Remove component (optional)

dictionaryDialog.remove();

Public methods

create

const dictionaryDialog = INVOXMDComponent_Dictionary.create("invox-dialogs-container");

show

dictionaryDialog.show();

hide

dictionaryDialog.hide();

remove

dictionaryDialog.remove();

Customize design

At the beginning of the Dictionary Component CSS file libs/integrations/invox-dialogs/invox-dictionary-component.css you can find the :root selector with some variables for easy customization.

Feel free to modify this stylesheet to adjust the component to your web design.

How to use

1. Help button — Displays the help view.
2. Fullscreen button — Enlarges the view to full screen.
3. Close button — Closes the dialog.
4. List selector — Filter by user items, speciality items, or all items.
5. Search bar — Search items by name.
6. Shared item icon — Indicates the word is shared with users of the same speciality.
7. Edit button — Modify the selected word.
8. Close button — Close the dialog.
9. New button — Create a new word.
10. Resize handle — Drag to resize the dialog.

How to create words

1. Click on the “New” button to navigate to the creation view.
2. Fill the gap with the new word.
3. Click on the “Save” button to save changes.

How to remove words

1. Select the word you want to remove.
2. Click on the “Edit” button to navigate to the edition view.
3. Click on the “Remove” button.
4. Click again on the “Remove” button to confirm.

How to edit words

1. Select the word you want to edit.
2. Click on the “Edit” button to navigate to the edition view.
3. Edit the word…
4. Click on the “Save” button to save changes.