Dynamic Multi Selection Checkbox In SharePoint Framework (SPFx)

This blogs explains the step by step procedure to create a multi select checkbox using Sharepoint framework client side webpart (SPFx). I am using "Office UI Fabric React" controls to style the buttons. The values are stored as a semicolon separated in SharePoint list.

Code Usage

I have created a React component and named it as "Dialog.tsx" as shown below.

Import the below node modules to your solution. Here, I have used UrlQueryParameterCollection to retrieve the ListItemId which is passed as a querystring parameter.

import * as React from 'react';
import { ISpFxRichTextEditorProps } from '../ISpFxRichTextEditorProps';
import { PrimaryButton, DefaultButton, DialogType, Dialog, DialogFooter, TextField, Label } from 'office-ui-fabric-react';
import * as $ from "jquery";
import { UrlQueryParameterCollection } from '@microsoft/sp-core-library';

Declare the state variables as shown below.

export interface IDialogState {
hideDialog: boolean;
spanID:string;
dialogID: string;
standard:string;
isDraggable: boolean;
typeOfWorkTemparr:any[];
typeArr:any[];
}

Declare global arrays to hold the value.

var typeofworkarr=[];
var multiTypeOfWorkChkBox=[];

Bind events in constructor class as shown below

public constructor(props: ISpFxRichTextEditorProps) {
super(props);
this.HandleTypeOfArray=this.HandleTypeOfArray.bind(this);
}

Initiate the state variables and populate the type of work values on load.

public state: IDialogState = {
hideDialog: this.props.dialogOpen,
isDraggable: false,
spanID: this.props.spanID,
dialogID: this.props.id,
standard: this.props.standard,
/** Type of Work Values */
typeOfWorkTemparr: [{
name: 'Revision',
key: 'Revision',
label: 'Revision',
isChecked: false
}, {
name: 'Design',
key: 'Design',
label: 'Design',
isChecked: false
}, {
name: 'Maintainence',
key: 'Maintainence',
label: 'Maintainence',
isChecked: false
}, {
name: 'Scan Print',
key: 'Scan Print',
label: 'Scan Print',
isChecked: false
}, {
name: 'Locate Print',
key: 'Locate Print',
label: 'Locate Print',
isChecked: false
}, {
name: 'File Print On Drive',
key: 'File Print On Drive',
label: 'File Print On Drive',
isChecked: false
}, {
name: 'Plot/Print',
key: 'Plot/Print',
label: 'Plot/Print',
isChecked: false
}],
typeArr: []
};

Get the values of Dialog Label and sub text label from parent component.

private labelId: string = getId('dialogLabel');
private subTextId: string = getId('subTextLabel');

Declare the Render function as shown below

public render() {
const {
hideDialog
} = this.state;
let inputchkbox;
let inputcontrols;
let selectBox;
/* input control starts here*/
if (this.state.spanID == "spnTypeOfWork") {
inputchkbox = this.state.typeOfWorkTemparr.map((item, i) => {
return ( < Label key = {
item.key
} > < input type = "checkbox"
ref = {
'ref_' + i
}
id = {
item.name
}
name = {
item.name
}
onChange = {
this.HandleTypeOfArray
}
value = {
item.name
}
checked = {
item.isChecked
}
/> {
item.name
} < /Label>)
});
}
/* input control ends here*/
/* select control starts here*/
if (this.state.spanID == "spnTypeOfWork") {
selectBox = < div > {
inputchkbox
} < /div>;
}
/* select control ends here*/
return ( < div > < Dialog hidden = {
hideDialog
}
onDismiss = {
this.closeDialog
}
dialogContentProps = {
{
type: DialogType.normal,
title: this.props.value,
subText: "",
styles: {
title: {
backgroundColor: "blue",
height: 10,
marginBottom: 10,
paddingBottom: 22
}
}
}
}
modalProps = {
{
titleAriaId: this.labelId,
subtitleAriaId: this.subTextId,
isBlocking: false,
styles: {
main: {
height: 350,
width: 500
}
},
}
} > {
selectBox
} < DialogFooter > < PrimaryButton onClick = {
this.saveDialog
}
text = "Save" / > < DefaultButton onClick = {
this.closeDialog
}
text = "Cancel" / > < /DialogFooter> < /Dialog> < /div> );
}

Reload the container on componemtDidMount.

/* Initiate load containers */
public componentDidMount(): void {
if(this.state.spanID == "spnTypeOfWork"){
this.ReLoadTypeOfWorkContainer();
}
}
/** Type of Area Selection Starts */
/** Load Area container based on values */
public ReLoadTypeOfWorkContainer() {
try {
let queryParms = new UrlQueryParameterCollection(window.location.href);
let itemID: number = parseInt(queryParms.getValue("ListItemID"));
if (itemID != null && itemID > 0) {
/*Set Priority values on page load*/
this.SetTypeofWorkOnLoad();
} else {
/*Reset Type of work values based on selection*/
let typeofWorkArrValues = this.state.typeOfWorkTemparr
$.each(multiTypeOfWorkChkBox, function (index, value) {
typeofWorkArrValues = [];
typeofWorkArrValues = value;
});
this.setState({ typeOfWorkTemparr: typeofWorkArrValues });
}
} catch (error) {
console.log("Error in ReLoadTypeOfWorkContainer : " + error);
}
}
/* Handle Type of Array section */
public HandleTypeOfArray(event: any):void{
try{
if (event.target.checked == false) {
for (var i = 0; i < typeofworkarr.length; i++) {
if (typeofworkarr[i] === event.target.value) {
typeofworkarr.splice(i, 1);
}
}
}
if (event.target.checked) {
if (typeofworkarr.indexOf(event.target.value) == -1) {
typeofworkarr.push(event.target.value)
}
}
else {
for (var i = 0; i < typeofworkarr.length; i++) {
if (typeofworkarr[i] === event.target.value) {
typeofworkarr.splice(i, 1);
}
}
}
let typeofworkArr = this.state.typeOfWorkTemparr
typeofworkArr.forEach(types => {
if (types.name === event.target.value) {
types.isChecked = event.target.checked
}
})
multiTypeOfWorkChkBox.push(typeofworkArr);
this.setState({ typeOfWorkTemparr: typeofworkArr });
}catch(error){
console.log("Error in HandleTypeOfArray : " + error);
}
}
/** Type of Area Ends */

This function is to update the checkbox selection by retrieving the previously selected checkbox data from SharePoint list.

/**Set Type of work on Load */
private SetTypeofWorkOnLoad(): void {
try {
var finalArray=[];
if ($("#" + this.state.spanID).html() !== "") {
var htmlstring = this.RemovedPtagString($("#" + this.state.spanID).html()).split(',');
var tempPriorArr = htmlstring;
let prioritArrValues = this.state.typeOfWorkTemparr
$.each(prioritArrValues, function (index, item) {
if (tempPriorArr.indexOf(item.name) > -1) {
item.isChecked = true;
}
});
this.setState({ typeOfWorkTemparr: prioritArrValues });
}
} catch (error) {
console.log("Error in SetValuesOnLoad : " + error);
}
}
}

This function is to close the dialog window.

/*Close dialog window*/
private closeDialog = (): void => {
this.setState({ hideDialog: true });
this.props.onUpdate();
}

Save the selected data and send it to parent callback function as shown below.

/*Save operation based on span id selection*/
private saveDialog = (): void => {
if(this.state.spanID == "spnTypeOfWork"){
this.SaveTypeOfWork();
}
}
/*save type of work on save button click */
private SaveTypeOfWork(){
try {
let queryParms = new UrlQueryParameterCollection(window.location.href);
let itemID: number = parseInt(queryParms.getValue("ListItemID"));
if (itemID != null && itemID > 0) {
typeofworkarr = [];
let prioritArrValues = this.state.typeOfWorkTemparr
$.each(prioritArrValues, function (index, item) {
if (item.isChecked == true) {
typeofworkarr.push(item.name);
}
});
this.setState({ checkboxesarr: prioritArrValues });
}
let tempvariable: string = '';
typeofworkarr.forEach(element => {
tempvariable = tempvariable + "<p>" + element + "</p>";
});
var txtValue = tempvariable.indexOf(',') == 0 ? tempvariable.substr(1) : tempvariable;
$("#" + this.state.spanID).html(txtValue);
this.setState({ hideDialog: true });
this.props.onUpdate(this.props.value);
} catch (error) {
console.log("Error in SaveTypeOfWork" + error);
}
}

Remove HTML <P> tag from HTML string,

/*Remove p tag from html string */
private RemovedPtagString(removedPString): string {
let newString;
try {
let item = removedPString.replace(/<p[^>]*>/g, "").replace(/<\/p>/g, ",");
item = item.replace(",,", ",");
newString = item.indexOf(",") == 0 ? item.substring(1) : item;
newString = newString.slice(0, -1);
} catch (error) { console.log("Error in removedPtagString : " + error ); }
return newString;
}

Using "DialogBox.tsx" component in parent.

Import "DialogBox.tsx" reusable component in your parent file as shown below.

Note

I have placed the DialoBox.tsx file under ReactDialogBox folder and hence the below path.

If you are not using Folder structure you can directly import the child component without giving the folder name.

import DialogBox from './ReactDialogBox/DialogBox';

Declare the state variable in your parent state as shown below.

export interface ISpFxRichTextEditorState {
clicked: boolean;
listName: string;
dialogTitle: string;
spanID: string;
DialogId: string;
standard:string;
isValidArea:string;
toolpriorityinput:string;
Safety:string;
}

Declare the props in your parent props as shown below.

export interface ISpFxRichTextEditorProps {
id?:string;
value?:string;
dialogOpen?:boolean;
spanID?:string;
listName?:string;
standardText?:string;
onUpdate?:any;
standard?:string;
}

In the parent constructor class, declare the below state variables

constructor(props: ISpFxRichTextEditorProps, state: ISpFxRichTextEditorState) {
super(props);
this.state = {
clicked: false,
listName: "",
dialogTitle: "",
spanID: "",
DialogId: "",
standard:"",
isValidArea:"",
toolpriorityinput:"",
Safety:""
};
}

Call the dialog box in your render method of parent component.

public render(){
return (
<div>
<div className="width3">
<div className="modal-area">
<div className="modal-heading">
<span>
<b>Type of Work</b>
{/* <span className="mandatary">*</span> */}
</span>
<span
className="add-area float-right document-icons-area "
onClick={() =>
this.handleClick(
"TypeWork",
"Select Type of Work",
"spnTypeOfWork",
"typeWorkDlgId"
)
}
>
<Icon
iconName="CalculatorAddition"
className="ms-IconExample"
/>
<label>Add</label>
</span>
</div>
<div className="modal-adding">
<div id="spnTypeOfWork" />
</div>
<div className="modal-box">
{this.state.clicked ? (
<DialogBox
id={this.state.DialogId}
value={this.state.dialogTitle}
dialogOpen={false}
onUpdate={this.onUpdate}
spHttpClient={this.props.spHttpClient}
siteUrl={this.props.siteUrl}
listName={this.state.listName}
spanID={this.state.spanID}
standardText={this.state.standard}
/>
) : null}
</div>
</div>
</div>
</div>
);
}

Handle click event as shown below.

/* Open dialog on click event */
private handleClick(
listName: string,
dialogTitle: string,
spanID: string,
DlgId: string
): void {
this.setState({
clicked: true,
listName: listName,
dialogTitle: dialogTitle,
spanID: spanID,
DialogId: DlgId
});
}

"onUpdate" function acts as call back from child component to parent component, which usually transfers the data from child to parent.

In the below function, I am storing the selected check box values in state variable named "Safety".

/*Dialog on update function*/
private onUpdate = dlgOutput => {
try{
this.setState({
clicked: false
});
this.setState({Safety:$("#spnTypeOfWork").html()});
}catch(error){
console.log("Error in onUpdate function : " + error);
}
}

To replace <p> tag with semicolon use the below code.

Before - <p>Test</p><p>Sample</p>

After - Test;Sample;

public ReplaceParaWithSemiColon(stringValue):string{
try{
if(stringValue !== ""){
if(stringValue.indexOf('<p>') >-1 ){
stringValue = stringValue.replace(/<p>/g, "").replace(/<\/p>/g,";");
stringValue = stringValue.substr(0, stringValue.length - 1);
}
}
return stringValue;
}catch(error){
console.log("Error in ReplaceParaWithSemiColon : " + error);
}
}

Complete code of a child component "DialogBox.tsx" is depicted below

import * as React from 'react';
import { ISpFxRichTextEditorProps } from '../ISpFxRichTextEditorProps';
import { PrimaryButton, DefaultButton, DialogType, Dialog, DialogFooter, TextField, Label } from 'office-ui-fabric-react';
import * as $ from "jquery";
import { UrlQueryParameterCollection } from '@microsoft/sp-core-library';
export interface IDialogState {
hideDialog: boolean;
spanID:string;
dialogID: string;
standard:string;
isDraggable: boolean;
typeOfWorkTemparr:any[];
typeArr:any[];
}
/*Type of Work Array Global Declarations*/
var typeofworkarr=[];
var multiTypeOfWorkChkBox=[];
export default class DialogBox extends React.Component<ISpFxRichTextEditorProps, any>
{
public constructor(props: ISpFxRichTextEditorProps) {
super(props);
this.HandleTypeOfArray=this.HandleTypeOfArray.bind(this);
}
public state: IDialogState = {
hideDialog: this.props.dialogOpen,
isDraggable: false,
spanID: this.props.spanID,
dialogID: this.props.id,
standard:this.props.standard,
typeOfWorkTemparr:[{
name: 'Revision',
key: 'Revision',
label: 'Revision',
isChecked: false
},
{
name: 'Design',
key: 'Design',
label: 'Design',
isChecked: false
},
{
name: 'Maintainence',
key: 'Maintainence',
label: 'Maintainence',
isChecked: false
},
{
name: 'Scan Print',
key: 'Scan Print',
label: 'Scan Print',
isChecked: false
},
{
name: 'Locate Print',
key: 'Locate Print',
label: 'Locate Print',
isChecked: false
},
{
name: 'File Print On Drive',
key: 'File Print On Drive',
label: 'File Print On Drive',
isChecked: false
},
{
name: 'Plot/Print',
key: 'Plot/Print',
label: 'Plot/Print',
isChecked: false
}
],
typeArr :[]
};
private labelId: string = getId('dialogLabel');
private subTextId: string = getId('subTextLabel');
public render() {
const { hideDialog } = this.state;
let inputchkbox;
let inputcontrols;
let selectBox;
/* input control ends here*/
if (this.state.spanID == "spnTypeOfWork") {
inputchkbox = this.state.typeOfWorkTemparr.map((item, i) => {
return (<Label key={item.key}>
<input type="checkbox" ref={'ref_' + i} id={item.name} name={item.name} onChange={this.HandleTypeOfArray} value={item.name} checked={item.isChecked} />
{item.name}
</Label>)
});
}
/* input control ends here*/
/* select control starts here*/
if(this.state.spanID == "spnTypeOfWork"){
selectBox = <div>{inputchkbox}</div>;
}
/* select control ends here*/
return (
<div>
<Dialog
hidden={hideDialog}
onDismiss={this.closeDialog}
dialogContentProps={{
type: DialogType.normal,
title: this.props.value,
subText: "",
styles: { title: { backgroundColor: "blue", height: 10, marginBottom: 10, paddingBottom: 22 } }
}}
modalProps={{
titleAriaId: this.labelId,
subtitleAriaId: this.subTextId,
isBlocking: false,
styles: { main: { height: 350, width: 500 } },
}}>
{selectBox}
<DialogFooter>
<PrimaryButton onClick={this.saveDialog} text="Save" />
<DefaultButton onClick={this.closeDialog} text="Cancel" />
</DialogFooter>
</Dialog>
</div>
);
}
/* Initiate load containers */
public componentDidMount(): void {
if(this.state.spanID == "spnTypeOfWork"){
this.ReLoadTypeOfWorkContainer();
}
}
/** Type of Area Selection Starts */
/** Load Area container based on values */
public ReLoadTypeOfWorkContainer() {
try {
let queryParms = new UrlQueryParameterCollection(window.location.href);
let itemID: number = parseInt(queryParms.getValue("ListItemID"));
if (itemID != null && itemID > 0) {
/*Set Priority values on page load*/
this.SetTypeofWorkOnLoad();
} else {
/*Reset Type of work values based on selection*/
let typeofWorkArrValues = this.state.typeOfWorkTemparr
$.each(multiTypeOfWorkChkBox, function (index, value) {
typeofWorkArrValues = [];
typeofWorkArrValues = value;
});
this.setState({ typeOfWorkTemparr: typeofWorkArrValues });
}
} catch (error) {
console.log("Error in ReLoadTypeOfWorkContainer : " + error);
}
}
/* Handle Type of Array section */
public HandleTypeOfArray(event: any):void{
try{
if (event.target.checked == false) {
for (var i = 0; i < typeofworkarr.length; i++) {
if (typeofworkarr[i] === event.target.value) {
typeofworkarr.splice(i, 1);
}
}
}
if (event.target.checked) {
if (typeofworkarr.indexOf(event.target.value) == -1) {
typeofworkarr.push(event.target.value)
}
}
else {
for (var i = 0; i < typeofworkarr.length; i++) {
if (typeofworkarr[i] === event.target.value) {
typeofworkarr.splice(i, 1);
}
}
}
let typeofworkArr = this.state.typeOfWorkTemparr
typeofworkArr.forEach(types => {
if (types.name === event.target.value) {
types.isChecked = event.target.checked
}
})
multiTypeOfWorkChkBox.push(typeofworkArr);
this.setState({ typeOfWorkTemparr: typeofworkArr });
}catch(error){
console.log("Error in HandleTypeOfArray : " + error);
}
}
/** Type of Area Ends */
/*Close dialog window*/
private closeDialog = (): void => {
this.setState({ hideDialog: true });
this.props.onUpdate();
}
/*Save operation based on span id selection*/
private saveDialog = (): void => {
if(this.state.spanID == "spnTypeOfWork"){
this.SaveTypeOfWork();
}
}
/*save proirity on save button click */
private SaveTypeOfWork(){
try {
let queryParms = new UrlQueryParameterCollection(window.location.href);
let itemID: number = parseInt(queryParms.getValue("ListItemID"));
if (itemID != null && itemID > 0) {
typeofworkarr = [];
let prioritArrValues = this.state.typeOfWorkTemparr
$.each(prioritArrValues, function (index, item) {
if (item.isChecked == true) {
typeofworkarr.push(item.name);
}
});
}
let tempvariable: string = '';
typeofworkarr.forEach(element => {
tempvariable = tempvariable + "<p>" + element + "</p>";
});
var txtValue = tempvariable.indexOf(',') == 0 ? tempvariable.substr(1) : tempvariable;
$("#" + this.state.spanID).html(txtValue);
this.setState({ hideDialog: true });
this.props.onUpdate(this.props.value);
} catch (error) {
console.log("Error in SaveTypeOfWork" + error);
}
}
/*Other Functions*/
/*Remove p tag from html string */
private RemovedPtagString(removedPString): string {
let newString;
try {
let item = removedPString.replace(/<p[^>]*>/g, "").replace(/<\/p>/g, ",");
item = item.replace(",,", ",");
newString = item.indexOf(",") == 0 ? item.substring(1) : item;
newString = newString.slice(0, -1);
} catch (error) { console.log("Error in removedPtagString : " + error ); }
return newString;
}
/**Set Type of work on Load */
private SetTypeofWorkOnLoad(): void {
try {
var finalArray=[];
if ($("#" + this.state.spanID).html() !== "") {
var htmlstring = this.RemovedPtagString($("#" + this.state.spanID).html()).split(',');
var tempPriorArr = htmlstring;
let prioritArrValues = this.state.typeOfWorkTemparr
$.each(prioritArrValues, function (index, item) {
if (tempPriorArr.indexOf(item.name) > -1) {
item.isChecked = true;
}
});
this.setState({ typeOfWorkTemparr: prioritArrValues });
}
} catch (error) {
console.log("Error in SetTypeofWorkOnLoad : " + error);
}
}
}

Complete code of a parent component "Parent.tsx" is depicted below,

import * as React from 'react';
import { ISpFxRichTextEditorProps } from './ISpFxRichTextEditorProps';
import { ISpFxRichTextEditorState } from './ISpFxRichTextEditorState';
import { UrlQueryParameterCollection } from '@microsoft/sp-core-library';
import { css, DefaultButton, IButtonProps, IStyle, Label, PrimaryButton, DialogType, Dialog, DialogFooter, format, Icon, TextField } from 'office-ui-fabric-react';
import DialogBox from './ReactDialogBox/DialogBox';
export default class SpFxRichTextEditor extends React.Component<ISpFxRichTextEditorProps, ISpFxRichTextEditorState> {
constructor(props: ISpFxRichTextEditorProps, state: ISpFxRichTextEditorState) {
super(props);
this.state = {
clicked: false,
listName: "",
dialogTitle: "",
spanID: "",
DialogId: "",
standard:"",
isValidArea:"",
toolpriorityinput:"",
Safety:""
};
}
/* Open dialog on click event */
private handleClick(
listName: string,
dialogTitle: string,
spanID: string,
DlgId: string
): void {
this.setState({
clicked: true,
listName: listName,
dialogTitle: dialogTitle,
spanID: spanID,
DialogId: DlgId
});
}
public render(){
return (
<div>
<div className="width3">
<div className="modal-area">
<div className="modal-heading">
<span>
<b>Type of Work</b>
{/* <span className="mandatary">*</span> */}
</span>
<span
className="add-area float-right document-icons-area "
onClick={() =>
this.handleClick(
"TypeWork",
"Select Type of Work",
"spnTypeOfWork",
"typeWorkDlgId"
)
}
>
<Icon
iconName="CalculatorAddition"
className="ms-IconExample"
/>
<label>Add</label>
</span>
</div>
<div className="modal-adding">
<div id="spnTypeOfWork" />
</div>
<div className="modal-box">
{this.state.clicked ? (
<DialogBox
id={this.state.DialogId}
value={this.state.dialogTitle}
dialogOpen={false}
onUpdate={this.onUpdate}
spHttpClient={this.props.spHttpClient}
siteUrl={this.props.siteUrl}
listName={this.state.listName}
spanID={this.state.spanID}
standardText={this.state.standard}
/>
) : null}
</div>
</div>
</div>
</div>
);
}
/*Dialog on update function*/
private onUpdate = dlgOutput => {
try{
this.setState({
clicked: false
});
this.setState({Safety:$("#spnTypeOfWork").html()});
}catch(error){
console.log("Error in onUpdate function : " + error);
}
}
/*Replace semicolon with paragraph */
public ReplaceSemiColon(stringValue):string{
try{
var htmlString='';
var temp = [];
if(stringValue !== ""){
if(stringValue.indexOf(';') > -1){
temp = stringValue.split(';')
$.each(temp,function(index,value){
htmlString = htmlString + "<p>" + value + "</p>"
});
}
}
return htmlString;
}catch(error){
console.log("Error in ReplaceSemiColon : " + error);
}
}
/*Replace paragraph with semicolon */
public ReplaceParaWithSemiColon(stringValue):string{
try{
if(stringValue !== ""){
if(stringValue.indexOf('<p>') >-1 ){
stringValue = stringValue.replace(/<p>/g, "").replace(/<\/p>/g,";");
stringValue = stringValue.substr(0, stringValue.length - 1);
}
}
return stringValue;
}catch(error){
console.log("Error in ReplaceParaWithSemiColon : " + error);
}
}
}

Below are the sample styles used to create a multi selection check box.

CSS

.ms-Dialog-header .ms-Dialog-title {
background-color:#da291c;
color: #fff;
padding: 8px;
height: 40px;
box-sizing: border-box;
line-height: 1;
font-weight: bold;
font-size: 20px;
}
.ms-Dialog-header .ms-Button {
color: #fff;
position: relative;
top: -6px;
float: right;
right: 0px;
min-width:0em;
}
.ms-Dialog-header .ms-Button:hover,.ms-Dialog-header .ms-Button:active, .ms-Dialog-header .ms-Button:focus {
background: none !important;
}
.ms-Dialog-header {
margin-right: 40px;
}
.modal-heading {
border: 1px solid #ccc;
padding: 10px;
background: #f1f1f1;
}
.modal-adding {
border: 1px solid #ccc;
background: #fff;
padding: 10px;
min-height: 100px;
}
.ms-Button-flexContainer {
float: left;
}

Output

Please feel free to share your comments.

I hope this helps!!!!!