Skip to content

sc-radio-list

go-to-typical-definition

sc-radio-list-field-Example-1-Image-2

1 Purpose

This document is a user guide for the sc-radio-list component as of version 5.12.

sc-radio-list places a radio list field on a form, allowing the user to select one value from a list.

The sc-radio-list definition provides fields for setting the properties of a radio list field and is fully described below.

2 Definition

sc-radio-list is defined by a set of name/value pair fields consisting of:

  • Required system fields
  • Required customizable fields
  • Optional customizable fields

Note:

  1. Default values for fields described in the tables below are shown in bold text.

2.1 Required System Fields

Field Valid Values Description
componentName sc-radio-list The component name.

Example:
"componentName": "sc-radio-list"

2.2 Required Customizable Fields

Field Valid Values Description
name Any value written in camel case. Defines the name of the radio list field in the document and database.

Example:
"name": "testScRadioList"
radioList Array of values An array of one or more values.

Example:
See Example 1 below in Section 4 Examples

2.3 Optional Customizable Fields

Field Valid Values Description
defaultValue One of the listed values. The radio list field displays with the default value selected.

Example:
"defaultValue": "Mother"
Defaults to no value selected.
disableSave true Changing the sc-radio-list field value (i.e. selecting or deselecting a radio button) does not trigger the Save icon to flash.
Exiting the form without saving changes to the sc-radio-list field value does not trigger a warning message to display.
In the Angular version of the sc-radio-list component, clicking the Save icon will not save the sc-radio-list field value to the document.
In the AngularJS version of the sc-radio-list component, clicking the Save icon will save the sc-radio-list field value to the document.

Example:
"disableSave": true
false Default value.
Changing the sc-radio-list field value (i.e. selecting or deselecting a radio button) does trigger the Save icon to flash.
Exiting the form without saving changes to the sc-radio-list field value does trigger a warning message to display.
In both the Angular and AngularJS versions of the sc-radio-list component, clicking the Save icon will save the sc-radio-list field value to the document.
enabled false The radio list field is greyed out.
A Stop icon appears on mouseover.
A value cannot be selected.

Example:
"enabled": false
true Default value.
The radio list field is not greyed out.
A Stop icon does not appear on mouseover.
A value can be selected.
fullWidth true The radio list field displays full width on the form.

Example:
"fullWidth": true
false Default value.
The radio list field does not display full width on the form.
label Any value Defines the name of the radio list field on the form i.e. the field label.

Example:
"label": "Test sc-radio-list"
Defaults to the radio list field displays without a field label on the form.
mandatory true The radio list field displays as mandatory (i.e. label in red text with an asterisk).
Saving without selecting a value, a message prompts the user to select a value for the radio list field.

Example:
mandatory": true
false Default value.
The radio list field displays as optional (i.e. label in black text).
Saving without selecting a value, a message does not prompt the user to select a value for radio list field.
visible false The radio list field is not visible on the form.

Example:
"visible": false
true Default value.
The radio list field is visible on the form.

3 Typical Definition

Below is a typical sc-radio-list definition, defined with its required fields plus any optional field whose value is typically other than its default value.

{
    "componentName": "sc-radio-list",
    "label": "Test sc-radio-list",
    "name": "testScRadioList",
    "fullWidth":true,
    "radioList": [
           "Father",
           "Mother",
           "Son",
           "Daughter",
           "Brother",
           "Sister"
    ]
}

One or more of the optional fields shown below can be included in the above definition should a value other than their default value be required.

    "mandatory": true,
    "defaultValue": "Mother",
    "disableSave":true,
    "enabled":false,
    "visible":false

4 Examples

Example 1

A sc-radio-list definition defined with the typically needed fields plus the "mandatory" field.

        {
            "componentName": "sc-radio-list",
            "label": "Test sc-radio-list",
            "name": "testScRadioList",
            "radioList": [
                "Father",
                "Mother",
                "Son",
                "Daughter",
                "Brother",
                "Sister"
            ],
            "fullWidth": true,
            "mandatory": true
        }

Resulting field on the form:

sc-radio-list-field-Example-1-Image-1

Resulting field on the form after selecting a radio list value:

sc-radio-list-field-Example-1-Image-2

Resulting field in document and database after saving the document:

"testScRadioList": "Daughter"