React Checkbox Control SPFx

-
Interface

Step 1
export interface ITechnologies{
    technology?:chkTechnology[],
    checkboxSlectedValues?:string
}
export interface chkTechnology{
    name:string,
    isChecked:boolean,
    lable:string,
    cssClass?:any
}


.tsx file

Step 2
import { Label } from 'office-ui-fabric-react/lib/Label'
import { Checkbox } from 'office-ui-fabric-react/lib/Checkbox';
import { ITechnologies, chkTechnology } from './ICheckBoxControlstates'



Step 3


public constructor(prop: ICheckBoxControlProps, any) {
    super(prop);
    this.state = {
      checkboxSlectedValues: "",
      technology: [
        {
          lable: "Sharepoint",
          name: "Sharepoint",
          isChecked: false,
          cssClass: styles.chkControl
        },
        {
          lable: "SPFx",
          name: "SPFx",
          isChecked: false,
          cssClass: styles.chkControl
        },
      ]
    }
  }

Step 4
private async _onTechnologyChecked(ev: React.FormEvent<HTMLElement>, technolgy: chkTechnology) {
    debugger;
    const castEvent = ev as React.ChangeEvent<HTMLInputElement>;
    const technology = this.state.technology.map(item => ({ ...item, isChecked: technolgy.name === item.name ? castEvent.target.checked : item.isChecked }));

    this.setState({
      technology,
      checkboxSlectedValues: technology.filter(item => item.isChecked).map(item => item.name).join(';'),
    })
  }





Step 5

<div className={styles.chkHeading}>
                <label className={styles.chkbixselecctedValuesLable && styles.chkHeadingLabel}>
                  <h2>CheckBox Control</h2>
                </label>
              </div>
              <div>
                {
                  this.state.technology.map(tech => (
                    <Checkbox
                      className={tech.cssClass}
                      label={tech.lable}
                      name={tech.name}
                      checked={tech.isChecked}
                      onChange={event => this._onTechnologyChecked(event, tech)} />
                  ))
                }
              </div>
              <div>
                <label className={styles.chkbixselecctedValuesLable}> Selected Values : </label>
                <Label>{this.state.checkboxSlectedValues}</Label>
              </div>


You Tube Link for more Dtails : SharePoint Shine












Comments

Post a Comment

Popular posts from this blog

Client Methods In Rest API

-
Put Request 1)If you strict to the Arcticture and you want to perform the update methods with out passing the function name in the end point then it will automatically invoke the Put method 2)If you want to update a item withe item id then Put is the Perfect approch 3)in Put request we have to pass the data as a body object and in Id as a query parameter 4)PUT is used to replace a resource, if that resource is exist then simply update it, but if that resource doesn't exist then create it 5)using PUT we will provide the resource identifier Post Request 1)A HTTP.POST method always creates a new resource on the server. Its a non-idempotent request i.e. if user hits same requests 2 times it would create another new resource if there is no constraint. 2)Here you are posting the resqust with body object 3)Post is used to create a resource and the returns the resource 4)POST will return the new resource identifier Patch A HTTP.PATCH method is used for partial modifications
Read more

My Interview Experience

-
 CTS Is thier any other way to host webjobs insted of Azure? What is the another way to send Email in online insted of timer job? What is the Default item limit with out top parameter? How can you pull the items more than 5000 thousand Threshhold value of list in online and 2016 and 2013 How to we get Personor Grup field How do we set Status icons in a list using Column Formating Explain about Timer job? What is Content Type? what if i add more colomuns in parent content type does this reflect in child Content Type? How can we set as default master? How do you move the document from one libray to another lib what class u used in your coding How to you run SP Security.reunwith elivated privilages in SharePoint Designer CGI How do Filter Managed Metadata filed falue in RestAPI How do you get multiple users in PersonorUser Group Fiels using Rest API, How do you get Description filed value in RestAPI can we write camel querries in Rest API how do you pass camel querry in Rest api What is t
Read more