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

At the beginning of the Templates Component CSS file libs/integrations/invox-dialogs/invox-templates-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 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.

How to create templates

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

How to remove templates

1. Select the template 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 templates

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