Articles about European Sharepoint Hosting Service
SharePoint 2013 Hosting – HostForLIFE.eu :: Office UI Fabric Choice Group Integration in SharePoint Framework (SPFx)
In this blog, we will learn how to integrate an Office UI Fabric ChoiceGroup control in the SharePoint Framework (SPFx).
The ChoiceGroup component, also known as radio buttons, lets users select one option from two or more choices. Each option is represented by one ChoiceGroup button; a user can select only one ChoiceGroup in a button group. The below steps explain how to integrate choice group control in your SPFx solution, and how to store values to state variable on change.
Steps Involved
Install “office-ui-fabric-react” from the node package manager as shown below.
|
1 |
PS C:\XXXX\SPFxSolutions\SpFxRichTextEditor>npm install --save office-ui-fabric-react |
Import “office-ui-fabric-react” to your .tsx file as shown below.
In this blog, I have used class file (ProjectTaskConstants.ts) to hold all the values to be populated in choice group as shown below
ProjectTaskContants.ts
|
1 2 3 4 5 6 7 8 9 10 11 |
import { ChoiceGroup } from 'office-ui-fabric-react'; export default class ProjectTaskConstants{ static get StatusOptions(){ const statusOptions: IChoiceGroupOption[] = [ { key: "Open", text: "Open" }, { key: "Closed", text: "Closed" }, { key: "On hold", text: "On hold" } ]; return statusOptions; } } |
Import ProjectTaskContants.ts file to your .tsx file as shown below
|
1 |
import ProjectTaskConstants from '../ProjectTaskConstants'; |
Instantiate the class file as shown below:
|
1 2 |
/*This to get all the constant values*/ public Constants = new ProjectTaskConstants(); |
Usage
In Render method, use the control as shown below:
OnChange event:
|
1 2 3 4 5 |
public onStatusChange(ev: React.FormEvent<HTMLInputElement>, option: any): void { this.setState({ Status: option.key }); } |
In the above example, I have used “Status” state variable of type string.
To disable the choice group:
| Print article | This entry was posted by Peter on December 19, 2019 at 12:29 am, and is filed under European SharePoint 2013 Hosting. Follow any responses to this post through RSS 2.0. Both comments and pings are currently closed. |
