From 02d928be26c9975ebe24ea83ee187afbe3e362ff Mon Sep 17 00:00:00 2001 From: guidozam Date: Sat, 23 Mar 2024 19:12:55 +0100 Subject: [PATCH 1/2] Added choice radio button handling --- src/controls/dynamicForm/DynamicForm.tsx | 12 +++-- .../dynamicForm/dynamicField/DynamicField.tsx | 51 +++++++++++++++---- .../dynamicField/IDynamicFieldProps.ts | 2 + 3 files changed, 53 insertions(+), 12 deletions(-) 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..ad7d5e6b1 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); }} + label={label} + required={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; } From bf5356f80f9559a28b4e53d3a8a2a852f4cf4e93 Mon Sep 17 00:00:00 2001 From: guidozam Date: Wed, 3 Jul 2024 09:28:05 +0200 Subject: [PATCH 2/2] Removed duplicate label --- src/controls/dynamicForm/dynamicField/DynamicField.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/controls/dynamicForm/dynamicField/DynamicField.tsx b/src/controls/dynamicForm/dynamicField/DynamicField.tsx index ad7d5e6b1..6f8efa480 100644 --- a/src/controls/dynamicForm/dynamicField/DynamicField.tsx +++ b/src/controls/dynamicForm/dynamicField/DynamicField.tsx @@ -210,8 +210,6 @@ export class DynamicField extends React.Component { this.onChange(option, true); }} - label={label} - required={true} disabled={disabled} />; }