Yes/No Panel API

Owned by Cindy Li
Last updated: Sept 02, 2015 by Alan HarnumVersion comment
2 min read

Yes/No Panel Overview

Provides a means to create panels that select and only select one of two choices, such as yes or no. This component is not intended to be used on its own, but provided as a base grade to another component that will use it's capabilities for creating such panels. An UI example of one of these panels:

On This Page
See Also
Still need help?

Join the infusion-users mailing list and ask your questions there.

Adding a Yes/No Panel to a Component/Grade

To mixin the Yes/No Panel into your Component/Grade:

 

fluid.defaults("my.component", {
    gradeNames: ["gpii.firstDiscovery.panel.yesNo", "autoInit"]
});

Grades

The base grades used by the Yes/No Panel:

Model

Path

Description

Values

Default

value

The corresponding boolean value of the selected choice.

true when the selected choice is yes;

false when the selected choice is no.

Booleanundefined
choiceThe selected choice.Stringundefined

Options

Name

Description

Values

Default

controlValues

An object that contains a "choice" element that determines choice values assigned to HTML radio buttons.

Object

"choice" value is an array with two elements.

controlValues: {
    choice: ["yes", "no"]
}


Selectors

One of the options that can be provided to the First Discovery Editor is a set of CSS-based selectors identifying where in the DOM different elements can be found. The value for the option is itself a Javascript object containing name/value pairs:

 

selectors: {
    selector1Name: "selector 1 string",
    selector2Name: "selector 2 string",
      ...
}

Selector Name

Description

Default

choiceRow

The row of each choice. It often contains choiceLabel and choiceInput.

".gpiic-fd-yesNo-choiceRow"
choiceLabelThe label for each choice button".gpiic-fd-yesNo-choiceLabel"
choiceInputThe <input> tag for each choice button".gpiic-fd-yesNo-choiceInput"
instructionsThe container to display the panel instruction.".gpiic-fd-yesNo-instructions"

Dependencies

<script type="text/javascript" src="src/lib/infusion/infusion-custom.js"></script>
<script type="text/javascript" src="src/js/msgLookup.js"></script>
<script type="text/javascript" src="src/js/tooltip.js"></script>
<script type="text/javascript" src="src/js/panels.js"></script>