Added choice radio button handling (#1798)

* Added choice radio button handling

* Removed duplicate label

* Update src/controls/dynamicForm/dynamicField/DynamicField.tsx

Co-authored-by: Michaël Maillot <[email protected]>

* Update src/controls/dynamicForm/dynamicField/DynamicField.tsx

Co-authored-by: Michaël Maillot <[email protected]>

* Update src/controls/dynamicForm/dynamicField/DynamicField.tsx

Co-authored-by: Michaël Maillot <[email protected]>

* Updated choice field initialization

* Update src/controls/dynamicForm/dynamicField/DynamicField.tsx

Co-authored-by: Michaël Maillot <[email protected]>

* Updated condition

---------

Co-authored-by: Michaël Maillot <[email protected]>

Author: GuidoZam

src/controls/dynamicForm/DynamicForm.tsx

@@ -33,7 +33,7 @@ import "@pnp/sp/content-types";
 import "@pnp/sp/folders";
 import "@pnp/sp/items";
 import { IFolder } from "@pnp/sp/folders";
-import { IInstalledLanguageInfo, IItemUpdateResult, IList, ITermInfo } from "@pnp/sp/presets/all";
+import { IInstalledLanguageInfo, IItemUpdateResult, IList, ITermInfo, ChoiceFieldFormatType } from "@pnp/sp/presets/all";
 import { cloneDeep, isEqual } from "lodash";
 import { ICustomFormatting, ICustomFormattingBodySection, ICustomFormattingNode } from "../../common/utilities/ICustomFormatting";
 import SPservice from "../../services/SPService";
@@ -1148,6 +1148,7 @@ export class DynamicFormBase 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('_')) {
@@ -1167,11 +1168,20 @@ export class DynamicFormBase extends React.Component<
             field.Choices.forEach((element) => {
               choices.push({ key: element, text: element });
             });
+
+            if (field.FormatType === 1) {
+              choiceType = ChoiceFieldFormatType.RadioButtons;
+            }
+            else {
+              choiceType = ChoiceFieldFormatType.Dropdown;
+            }
           }
           if (field.FieldType === "MultiChoice") {
             field.MultiChoices.forEach((element) => {
               choices.push({ key: element, text: element });
             });
+
+            choiceType = ChoiceFieldFormatType.Dropdown;
           }
 
           // Setup Note, Number and Currency fields
@@ -1461,6 +1471,7 @@ export class DynamicFormBase extends React.Component<
             showAsPercentage: showAsPercentage,
             customIcon: customIcons ? customIcons[field.InternalName] : undefined,
             useModernTaxonomyPickerControl: useModernTaxonomyPicker,
+            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,11 +23,10 @@ import { IDynamicFieldProps, IDynamicFieldStyleProps, IDynamicFieldStyles } from
 import { IDynamicFieldState } from './IDynamicFieldState';
 import CurrencyMap from "../CurrencyMap";
 import { ModernTaxonomyPicker } from '../../modernTaxonomyPicker';
-import { classNamesFunction, IProcessedStyleSet, styled } from '@fluentui/react';
+import { classNamesFunction, IProcessedStyleSet, styled, ChoiceGroup, IChoiceGroupOption } from '@fluentui/react';
 import { getFluentUIThemeOrDefault } from '../../../common/utilities/ThemeUtility';
 import { getFieldStyles } from './DynamicField.styles';
 
-
 const getClassNames = classNamesFunction<IDynamicFieldStyleProps, IDynamicFieldStyles>();
 
 export class DynamicFieldBase extends React.Component<IDynamicFieldProps, IDynamicFieldState> {
@@ -95,6 +94,7 @@ export class DynamicFieldBase extends React.Component<IDynamicFieldProps, IDynam
       itemsQueryCountLimit,
       customIcon,
       orderBy,
+      choiceType,
       useModernTaxonomyPickerControl
     } = this.props;
 
@@ -190,22 +190,50 @@ export class DynamicFieldBase extends React.Component<IDynamicFieldProps, IDynam
           </div>;
         }
 
-      case 'Choice':
-        return <div className={styles.fieldContainer}>
-          <div className={`${styles.labelContainer} ${styles.titleContainer}`}>
-            <Icon className={styles.fieldIcon} iconName={customIcon ?? "CheckMark"} />
-            {labelEl}
-          </div>
-          <Dropdown
+      case 'Choice': {
+        let choiceControl: JSX.Element = 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 {
+          // 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>;
-
+}
       case 'MultiChoice':
         return <div className={styles.fieldContainer}>
           <div className={`${styles.labelContainer} ${styles.titleContainer}`}>

src/controls/dynamicForm/dynamicField/IDynamicFieldProps.ts

@@ -2,6 +2,7 @@ import { BaseComponentContext } from '@microsoft/sp-component-base';
 import { IDropdownOption } from "@fluentui/react/lib/Dropdown";
 import { IStyle, IStyleFunctionOrObject, Theme } from '@fluentui/react';
 import { IFilePickerResult } from '../../filePicker';
+import { ChoiceFieldFormatType } from '@pnp/sp/fields';
 
 export type DateFormat = 'DateTime' | 'DateOnly';
 export type FieldChangeAdditionalData = IFilePickerResult;
@@ -96,6 +97,7 @@ export interface IDynamicFieldProps {
   itemsQueryCountLimit?: number;
   customIcon?: string;
   orderBy?: string;
+  choiceType?: ChoiceFieldFormatType;
   /** Used for customize component styling */
   styles?:IStyleFunctionOrObject<IDynamicFieldStyleProps, IDynamicFieldStyles>;
 }