Added choice radio button handling

src/controls/dynamicForm/DynamicForm.tsx

@@ -32,7 +32,7 @@ import "@pnp/sp/lists";
 import "@pnp/sp/content-types";
 import "@pnp/sp/folders";
 import "@pnp/sp/items";
-import { IInstalledLanguageInfo } from "@pnp/sp/presets/all";
+import { ChoiceFieldFormatType, IInstalledLanguageInfo } from "@pnp/sp/presets/all";
 import { cloneDeep, isEqual } from "lodash";
 import { ICustomFormatting, ICustomFormattingBodySection, ICustomFormattingNode } from "../../common/utilities/ICustomFormatting";
 import SPservice from "../../services/SPService";
@@ -418,7 +418,7 @@ export class DynamicForm extends React.Component<
         if (field.newValue !== null && field.newValue !== undefined) {
 
           let value = field.newValue;
-          
+
           if (["Lookup", "LookupMulti", "User", "UserMulti", "TaxonomyFieldTypeMulti"].indexOf(fieldType) < 0) {
             objects[columnInternalName] = value;
           }
@@ -1066,6 +1066,7 @@ export class DynamicForm extends React.Component<
         let showAsPercentage: boolean | undefined;
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         const selectedTags: any = [];
+        let choiceType: ChoiceFieldFormatType | undefined;
 
         let fieldName = field.InternalName;
         if (fieldName.startsWith('_x') || fieldName.startsWith('_')) {
@@ -1085,6 +1086,10 @@ export class DynamicForm extends React.Component<
           field.Choices.forEach((element) => {
             choices.push({ key: element, text: element });
           });
+
+          // Store the choice type for Choice fields
+          // This represent the format of the choice field (Dropdown or Radio Buttons)
+          choiceType = field.FormatType;
         }
         if (field.FieldType === "MultiChoice") {
           field.MultiChoices.forEach((element) => {
@@ -1300,7 +1305,8 @@ export class DynamicForm extends React.Component<
           minimumValue: minValue,
           maximumValue: maxValue,
           showAsPercentage: showAsPercentage,
-          customIcon: customIcons ? customIcons[field.InternalName] : undefined
+          customIcon: customIcons ? customIcons[field.InternalName] : undefined,
+          choiceType: choiceType
         });
 
         // This may not be necessary now using RenderListDataAsStream

src/controls/dynamicForm/dynamicField/DynamicField.tsx

@@ -1,5 +1,5 @@
 import '@pnp/sp/folders';
-import { sp } from '@pnp/sp/presets/all';
+import { ChoiceFieldFormatType, sp } from '@pnp/sp/presets/all';
 import '@pnp/sp/webs';
 import * as strings from 'ControlStrings';
 import { ActionButton } from '@fluentui/react/lib/Button';
@@ -23,6 +23,8 @@ import styles from '../DynamicForm.module.scss';
 import { IDynamicFieldProps } from './IDynamicFieldProps';
 import { IDynamicFieldState } from './IDynamicFieldState';
 import CurrencyMap from "../CurrencyMap";
+import { ChoiceGroup, IChoiceGroupOption } from '@fluentui/react';
+
 
 export class DynamicField extends React.Component<IDynamicFieldProps, IDynamicFieldState> {
 
@@ -81,7 +83,8 @@ export class DynamicField extends React.Component<IDynamicFieldProps, IDynamicFi
       maximumValue,
       minimumValue,
       customIcon,
-      orderBy
+      orderBy,
+      choiceType
     } = this.props;
 
     const {
@@ -177,18 +180,46 @@ export class DynamicField extends React.Component<IDynamicFieldProps, IDynamicFi
         }
 
       case 'Choice':
-        return <div className={styles.fieldContainer}>
-          <div className={`${styles.labelContainer} ${styles.titleContainer}`}>
-            <Icon className={styles.fieldIcon} iconName={customIcon ?? "CheckMark"} />
-            {labelEl}
-          </div>
-          <Dropdown
+        let choiceControl: any = undefined;
+
+        // If the choiceType is dropdown
+        if (choiceType === ChoiceFieldFormatType.Dropdown) {
+          choiceControl = <Dropdown
             {...dropdownOptions}
             defaultSelectedKey={valueToDisplay ? undefined : defaultValue}
             selectedKey={typeof valueToDisplay === "object" ? valueToDisplay?.key : valueToDisplay}
             onChange={(e, option) => { this.onChange(option, true); }}
             onBlur={this.onBlur}
-            errorMessage={errorText} />
+            errorMessage={errorText} />;
+        }
+        // If the choiceType is radio buttons
+        else if (choiceType === ChoiceFieldFormatType.RadioButtons) {
+          // Parse options into radio buttons
+          const optionsGroup: IChoiceGroupOption[] =
+            options.map((option) => {
+              return {
+                key: option.key.toString(),
+                text: option.text,
+                checked: option.key.toString() === valueToDisplay
+              };
+            });
+
+          // Create radio group
+          choiceControl = <ChoiceGroup
+            defaultSelectedKey={valueToDisplay ? undefined : defaultValue}
+            selectedKey={typeof valueToDisplay === "object" ? valueToDisplay?.key : valueToDisplay}
+            options={optionsGroup}
+            onChange={(e, option) => { this.onChange(option, true); }}
+            disabled={disabled}
+            />;
+        }
+
+        return <div className={styles.fieldContainer}>
+          <div className={`${styles.labelContainer} ${styles.titleContainer}`}>
+            <Icon className={styles.fieldIcon} iconName={customIcon ?? "CheckMark"} />
+            {labelEl}
+          </div>
+          {choiceControl}
           {descriptionEl}
         </div>;
 

src/controls/dynamicForm/dynamicField/IDynamicFieldProps.ts

@@ -1,6 +1,7 @@
 import { BaseComponentContext } from '@microsoft/sp-component-base';
 import { IDropdownOption } from "@fluentui/react/lib/Dropdown";
 import { IFilePickerResult } from '../../filePicker';
+import { ChoiceFieldFormatType } from '@pnp/sp/fields';
 
 export type DateFormat = 'DateTime' | 'DateOnly';
 export type FieldChangeAdditionalData = IFilePickerResult;
@@ -91,4 +92,5 @@ export interface IDynamicFieldProps {
   showAsPercentage?: boolean;
   customIcon?: string;
   orderBy?: string;
+  choiceType?: ChoiceFieldFormatType;
 }