Custom Navigation Buttons
A survey displays a set of navigation buttons for respondents to start and end the survey, switch between survey pages, or preview answers. This example demonstrates how to add a custom navigation button that performs any required action.
Configure a Custom Navigation Button
To add a custom button to your survey, call the
addNavigationItem method on a
SurveyModel instance. This method accepts an
IAction object whose properties configure the button. Assign a unique string value to the
id property and a button caption to the
title property. Use the
action property to specify the function this button should execute. This demo adds a custom "Clear Page" button that clears question values on the current page.
Position a Custom Navigation Button
Navigation buttons are ordered according to their
visibleIndex values. The following table lists the
visibleIndex values of built-in buttons:
To insert a custom button before, after, or between two other buttons, assign a corresponding
visibleIndex value to this button. If you do not specify
visibleIndex, your button will be added to the end.
You can also position a button using CSS. Navigation buttons are
<input> elements wrapped in
<div> elements. Create a CSS class that positions a
<div> the way you need and assign the class name to the
css property of the
IAction object when you add the button. In this demo, the "Clear Page" button is aligned to the left using the
.nav-button CSS class.
Customize Button Appearance Using CSS
To give your custom button a distinct appearance, create one or several CSS classes for the inner
<input> element. Assign space-separated class names to the
innerCss property of the
IAction object. Include the
.sd-btn class name if you don't want to configure the entire button appearance from scratch. This demo shows how to override background and font colors for a custom button in normal and hover states.