Consultation basics

Bookmark button

The Bookmark button lets you save the consultation. When clicking on the Bookmark button, you will be asked to save a .html file on your system. When opening the .html file with a browser, the consultation will continue from where you have saved.

The button consists of 3 different parts: Button, Icon and Label.

Button

The Bookmark button is created by using the <button> tag.

<button id="bookmarkButton" type="button"
ng-click="createBookmark($event)" class="btn button" tooltip-placement="bottom"
uib-tooltip-html="'{{translation.QUICK_GUIDE_BUTTON_BOOKMARK}}'" tooltip-popup-delay="2000">

The following attributes are mandatory:

ID The button tag is needed to create the button
Type The type defines the DOM element.
Ng-click The ng-click triggers a function when the button is clicked. In this case, the function: createBookmark($event) is triggered.
Class The class is needed to give the proper CSS style to the button.
Tooltip-placement  The position of the tooltip.
Uib-tooltip-html The text of the tooltip.
Tooltip-popup-delay Adds a delay to trigger the tooltip.

It is possible to add more classes/attributes to the button.

Icon

In order to improve usability, every button has an icon to help the user identify the functionality of the button. To add the icon, put the following code inside the <button> tag:

<span class="fa fa-bookmark"></span>

To change the icon, simply modify the "fa-bookmark"

Label

The label is created in the language file so that multiple languages have the right label. To add the label, put the following code inside the <button> tag:

<span class="hidden-xs"> {{translation.BOOKMARK}}</span>

It is possible to create a custom label.

Usage

Here is an example of the Bookmark button. Put the following code in the consultation template:

<button id="bookmarkButton" type="button"
ng-click="createBookmark($event)" class="btn button" tooltip-placement="bottom"
uib-tooltip-html="'{{translation.QUICK_GUIDE_BUTTON_BOOKMARK}}'" tooltip-popup-delay="2000">
<span class="fa fa-bookmark"></span>
<span class="hidden-xs">{{translation.BOOKMARK}}</span>
</button>