Templates Component

The Templates Component is a modal window that allows templates 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 - Templates Component -->
<script type="text/javascript" src="libs/integrations/invox-dialogs/invox-templates-component.min.js" charset="UTF-8"></script>
<link rel="stylesheet" href="libs/integrations/invox-dialogs/invox-templates-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 templatesDialog = INVOXMDComponent_Templates.create("invox-dialogs-container");
   

   Copy to clipboard

3. Show component

templatesDialog.show();

4. Hide component (optional)

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

templatesDialog.hide();

5. Remove component (optional)

templatesDialog.remove();

Public methods

create

const templatesDialog = INVOXMDComponent_Templates.create("invox-dialogs-container");

show

templatesDialog.show();

hide

templatesDialog.hide();

remove

templatesDialog.remove();

Customize design

Uses the same CSS variables as the Dictionary Component. See invox-templates-component.css for the full list.

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 templates by name.
5. Use button — Insert the template into the current writing target.
6. Edit button — Modify the selected template.
7. List selector — Filter by my templates or all templates.
8. Template name — Template title.
9. Template preview — First lines of the template content.
10. Shared indicator — Indicates the template is shared with users of the same speciality.
11. No pause required indicator — Indicates the template can be inserted without pausing dictation.
12. Close button — Close the dialog.
13. New button — Create a new template.
14. Resize handle — Drag to resize the dialog.