diff --git a/src/controls/dynamicForm/DynamicForm.tsx b/src/controls/dynamicForm/DynamicForm.tsx index 3105fe554..f71197498 100644 --- a/src/controls/dynamicForm/DynamicForm.tsx +++ b/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 diff --git a/src/controls/dynamicForm/dynamicField/DynamicField.tsx b/src/controls/dynamicForm/dynamicField/DynamicField.tsx index 777535718..6f8efa480 100644 --- a/src/controls/dynamicForm/dynamicField/DynamicField.tsx +++ b/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 { @@ -81,7 +83,8 @@ export class DynamicField extends React.Component -
- - {labelEl} -
- { 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 = { this.onChange(option, true); }} + disabled={disabled} + />; + } + + return
+
+ + {labelEl} +
+ {choiceControl} {descriptionEl}
; diff --git a/src/controls/dynamicForm/dynamicField/IDynamicFieldProps.ts b/src/controls/dynamicForm/dynamicField/IDynamicFieldProps.ts index cc9c186dc..f05c619c3 100644 --- a/src/controls/dynamicForm/dynamicField/IDynamicFieldProps.ts +++ b/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; }