Fast Forward button
The Fast forward button lets you go to the next mandatory question. The questions that are not mandatory are skipped
The button consists of 3 different parts: Button, Icon and Label.
Button
The Fast Forward button is created by using the <button> tag.
<button id="fastForwardButton" type="submit" ng-click="next($event, undefined, true)" ng-disabled="isGoalReached()" class="btn button" tooltip-placement="bottom" uib-tooltip-html="'Continue to the next mandatory question'" 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: next($event, undefined, true) is triggered. |
| Ng-disabled | Ng-disabled makes sure that the button is not active at the lest step of the consultation. |
| 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-fast-forward"></span>
To change the icon, simply modify the "glyphicon-fast-backward"
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 ng-class="(summary.type=='PANEL' || summary.type=='HIDDEN_PANEL') ? 'hidden-md' : ''" class="hidden-xs">{{translation.FAST_FORWARD}}</span>
It is possible to create a custom label.
Usage
Here is an example of the Fast Forward button. Put the following code in the consultation template:
<button id="fastForwardButton" ng-click="next($event, undefined, true)" type="submit" ng-disabled="isGoalReached()" class="btn button" tooltip-placement="bottom" uib-tooltip-html="'Continue to the next mandatory question'" tooltip-popup-delay="2000">
<span ng-class="(summary.type=='PANEL' || summary.type=='HIDDEN_PANEL') ? 'hidden-md' : ''" class="hidden-xs">{{translation.FAST_FORWARD}}</span>
<span class="fa fa-fast-forward"></span>
</button>