Transformations Component

The Transformations Component is a modal window that allows transformations management. Transformations map spoken words to abbreviated or alternative text (e.g. saying "Electrocardiograma" → writes "ECG"). 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 - Transformations Component -->
<script type="text/javascript" src="libs/integrations/invox-dialogs/invox-transformations-component.min.js" charset="UTF-8"></script>
<link rel="stylesheet" href="libs/integrations/invox-dialogs/invox-transformations-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 transformationsDialog = INVOXMDComponent_Transformations.create("invox-dialogs-container");
   

   Copy to clipboard

3. Show component

transformationsDialog.show();

4. Hide component (optional)

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

transformationsDialog.hide();

5. Remove component (optional)

transformationsDialog.remove();

Public methods

create

const transformationsDialog = INVOXMDComponent_Transformations.create("invox-dialogs-container");

show

transformationsDialog.show();

hide

transformationsDialog.hide();

remove

transformationsDialog.remove();

Customize design

At the beginning of the Transformations Component CSS file libs/integrations/invox-dialogs/invox-transformations-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. Search bar — Search transformations by name.
5. Edit button — Modify the selected transformation.
6. Spoken word — The word that is spoken during dictation.
7. Written word — The text that will be written instead.
8. Close button — Close the dialog.
9. New button — Create a new transformation.
10. Resize handle — Drag to resize the dialog.

How to create transformations

1. Click on the “New” button to navigate to the creation view.
2. Fill gaps of the new transformation.
3. Click on the “Save” button to save changes.

How to remove transformations

1. Select the transformation 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 transformations

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