Bind dropdown list in property pane spfx

Prerequisite:

Make sure installation of spfx is already done and we are using pnp to access the SharePoint lists from current site so make sure pnp is also installed.

How to bind property pane Dropdown list in Client side webpart in SharePoint Framework.

We have a scenario suppose that we have to bind a dropdown list with current site’ s lists/libraries.

 Just need to follow below instruction step by step  

1.       Create a Solution  .

2.       Add a Webpart to the solution.

3.       Declare the property pane  “PropertyPaneDropdown” for dropdown list.

import {

  BaseClientSideWebPart,

  IPropertyPaneConfiguration,

  PropertyPaneDropdown,

} from '@microsoft/sp-webpart-base';

4.       Come to the property pane under “getPropertyPaneConfiguration”.

5.       Define your own group of property pane or leave  the default and add under existing group fields.

protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {

    return {

      pages: [

        {

          header: {

            description: strings.PropertyPaneDescription

          },

          groups: [

            {

              groupName: strings.BasicGroupName,

              groupFields: [

                PropertyPaneDropdown('dropdownLists', {

                  label: "Lists",

                  options:this._dropdownOptions,

                  disabled:this.listsDropdownDisabled

                })

              ]

            }

          ]

        }

      ]

    };

  }

6.       Declare Interface “IPropertyPaneDropdownOption”  and “IODataList” to map the dropdown list with the list

                  

                        export interface IPropertyPaneDropdownOption

{

  key:string;

text:string;

}

export interface IODataList

{

  Id:string;

 Title:string;

}

7.       Define two variables for dropdown option and to disable the dropdown while lists loading just below the .

      

export default class HellowWebpartWebPart extends BaseClientSideWebPart<IHellowWebpartWebPartProps> {

         private _dropdownOptions: IPropertyPaneDropdownOption[];

  private listsDropdownDisabled: boolean = true;

8.       Now override the existing method onPropertyPaneConfigurationStart() and paste the below code

protected onPropertyPaneConfigurationStart(): void

  {

    //Bind DropDown List in Peropert pane

    this.listsDropdownDisabled = !this._dropdownOptions;

    if (this._dropdownOptions)

    {

      return;

    }

      this.context.statusRenderer.displayLoadingIndicator(this.domElement, '_dropdownOptions');

      pnp.sp.web.lists.get()

      .then((listOptions: IODataList[]): void =>

      {

          var options: Array<IPropertyPaneDropdownOption> = new Array<IPropertyPaneDropdownOption>();

          listOptions.map((list: IODataList) => {

          options.push( { key: list.Id, text: list.Title });

      });

        this._dropdownOptions=options

        this.listsDropdownDisabled = false;

        this.context.propertyPane.refresh();

        this.context.statusRenderer.clearLoadingIndicator(this.domElement);

        this.render();

      });

  }

9.       Start terminal and run gulp bundle

10.   Now run the gulp serve –nobrowser command in terminal

11.   Open workbench on the site open direct link https://tenant.sharepoint.com/sites/demo/_layouts/15/workbench.aspx

12.   Add client side webpart on the bench.

13.   Click on Edit properties

14.   You see on  right side in properties will be dropdown list bind with current site’s lists/libraries

Happy coding  !!!

The Future of AI Agent Technology: Trends, Use Cases, and What Comes Next

The Future of AI Agent: What It Means for Work and Innovation

The Future of AI Agent is unfolding rapidly, redefining how businesses automate tasks, scale decision-making, and deliver personalized experiences. As autonomous systems become more capable, they will transform industries by combining reasoning, tool use, and collaboration at scale.

What Is an AI Agent and Why It Matters

An AI agent is a goal-driven system that can perceive context, reason about tasks, take actions (often via tools or APIs), and learn from feedback. Unlike simple chatbots, modern agents orchestrate multi-step workflows, integrate with enterprise data, and adapt to changing objectives.

• Autonomous execution: Plan, act, and verify with minimal human oversight.
• Tool integration: Trigger APIs, databases, SaaS apps, and internal systems.
• Memory and learning: Improve performance from outcomes and feedback.

Key Trends Shaping the Future

• Multi-agent collaboration: Specialized agents (researcher, planner, builder, reviewer) will coordinate to solve complex, cross-functional tasks.
• Enterprise-grade governance: Policy, permissioning, and auditability will become standard for safe and compliant deployments.
• Agentic UX: Interfaces will shift from point-and-click to goal-setting, where users describe outcomes and agents execute.
• Real-time reasoning: Agents will adapt to streaming data from apps, sensors, and user interactions.
• Offline and on-device: Edge models will enable private, low-latency decisions without sending data to the cloud.

High-Impact Use Cases

Customer Support and Success

Agents can triage tickets, retrieve knowledge, generate replies, and escalate with full context. They reduce resolution time and maintain consistent tone and policy compliance.

Software Engineering Copilots

Development agents can generate specs, write tests, open pull requests, run CI checks, and request reviews. A reviewer agent can verify performance and security before merging.

Sales and Marketing Automation

Agents qualify leads, personalize outreach, schedule meetings, and update CRM entries. They can run experiments and optimize campaigns across channels.

Operations and Finance

Agents reconcile invoices, flag anomalies, generate reports, and enforce spend policies using rule checks and anomaly detection.

Architecture of Modern AI Agents

• Planner: Breaks goals into actionable steps.
• Executor: Calls tools, APIs, and services.
• Critic/Verifier: Checks outputs against constraints and metrics.
• Memory: Stores context, preferences, and outcomes for future runs.
• Guardrails: Enforces policies, PII handling, and compliance requirements.

Design Principles for Reliable Agent Systems

• Goal clarity: Define objectives, constraints, and success metrics before execution.
• Deterministic tools: Prefer idempotent, well-typed APIs with explicit error handling.
• Human-in-the-loop: Require approvals for high-risk actions (payments, code merges, customer escalations).
• Observability: Log steps, decisions, tool calls, and outcomes for auditing and debugging.
• Evaluation: Use sandboxed simulations and benchmark tasks to measure reliability and safety.

Examples You Can Implement Today

Example 1: Knowledge Assistant for Support

• Goal: Reduce average handle time.
• Flow: Planner identifies intent → Executor searches KB and tickets → Critic checks policy → Draft reply for human review.
• Tools: Search API, ticketing system, style/policy checker.

Example 2: PR Creation and Review Agent

• Goal: Automate routine fixes.
• Flow: Detect issue → Generate patch and tests → Open PR → Reviewer agent validates with CI → Human approves.
• Tools: Repo API, test runner, CI logs, security scanner.

Example 3: Finance Reconciliation Agent

• Goal: Catch discrepancies early.
• Flow: Ingest statements → Match transactions → Flag anomalies → Summarize for accounting.
• Tools: Banking API, rules engine, alerting system.

Risks and How to Mitigate Them

• Hallucinations: Use retrieval augmentation, citations, and verifier agents.
• Security: Apply least-privilege credentials, scoped tokens, and secret rotation.
• Compliance: Redact PII, maintain audit trails, and configure data residency.
• Runaway actions: Set budgets, step limits, and approval gates.

Measuring Agent Performance

• Task success rate: Percentage of goals completed within constraints.
• Cost and latency: Spend per task and average time to completion.
• Quality: Human ratings, policy adherence, and error rates.
• Trust signals: Coverage of tests, number of verified steps, and rollback frequency.

What’s Next for the Future of AI Agent

Agent ecosystems will become interoperable, enabling secure marketplaces of specialized agents that compose and negotiate with each other. With stronger reasoning, transparent governance, and robust evaluations, organizations will move from pilot projects to production-scale automation that compounds productivity across teams.

The winners will focus on clear goals, safe architectures, measurable outcomes, and continuous iteration—turning agents from demos into dependable digital teammates.

Add ,Edit and Delete in GridView with People picker and DateTime Picker control

Add ,Edit and Delete in GridView with People picker and DateTime Picker control

using System;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using Microsoft.SharePoint;
using Microsoft.SharePoint.WebControls;
using System.Data;
using System.IO;
using System.Collections;
namespace CustomPageForLibrary.Layouts.CustomPageForLibrary
{
    public partial class TaskFormForLirary : LayoutsPageBase
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                DropDownBind();
                BindData();
             
             
            }
        }
        protected void GridView1_RowEditing(object sender, GridViewEditEventArgs e)
        {
           
            GridView1.EditIndex = e.NewEditIndex;
            BindData();
        }
        protected void GridView1_RowUpdating(object sender, GridViewUpdateEventArgs e)
        {
            int i = e.RowIndex;

            //using (SPSite site = new SPSite("siteurl"))
            using (SPSite site = new SPSite(SPContext.Current.Web.Url))
            {
                site.AllowUnsafeUpdates = true;
                using (SPWeb web = site.OpenWeb())
                {
                    web.AllowUnsafeUpdates = true;
                    SPList list = web.Lists["MOMListt"];
                    int id = Convert.ToInt32(GridView1.DataKeys[e.RowIndex].Value);
                    SPListItem item = list.GetItemById(id);
               
                  //  item["Meeting"] = new SPFieldLookupValue(Convert.ToInt32(txtMeetingId.Text),txtMeetingName.Text);
                    item["Minutes"] = ((TextBox)GridView1.Rows[i].FindControl("txtMinutes")).Text;
                    PeopleEditor ppAuthor = ((PeopleEditor)GridView1.Rows[i].FindControl("ActionByUser"));
                    PickerEntity ActionUser = (PickerEntity)ppAuthor.ResolvedEntities[0];
                    SPUser actionByUser = Web.EnsureUser(ActionUser.Key);
                    item["Actionby"] = actionByUser;
                    if (((DateTimeControl)GridView1.Rows[i].FindControl("targetdateuser")).SelectedDate.Date.ToString() != "" || ((DateTimeControl)GridView1.Rows[i].FindControl("targetdateuser")).SelectedDate.Date.ToString() !=null)
                    {
                    item["TargetDate"] = ((DateTimeControl)GridView1.Rows[i].FindControl("targetdateuser")).SelectedDate.Date;
                    }
                    item["Status"] = ((DropDownList)GridView1.Rows[i].FindControl("DropDownList1")).SelectedItem.Text;
                    CheckBox chk = ((CheckBox)GridView1.Rows[i].FindControl("Assigned"));
                    string blActive = "";
                    if (chk.Checked == true)
                    {
                        blActive = "True";
                        item["assignedtask"] = blActive;
                    }
                    else
                    {
                        blActive = "False";
                        item["assignedtask"] = blActive;
                    }
                    item["Issues"] = TextBox7.Text;
                    item.Update();
                    web.AllowUnsafeUpdates = false;
                }
                site.AllowUnsafeUpdates = false;

            }
            GridView1.EditIndex = -1;
            BindData();
        }
        protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
        {
            DataRowView drview = e.Row.DataItem as DataRowView;
            if (e.Row.RowType == DataControlRowType.DataRow)
            {
                if ((e.Row.RowState & DataControlRowState.Edit) > 0)
                {
                    SPSite site = new SPSite(SPContext.Current.Web.Url);
                    SPWeb web = site.OpenWeb();
                    PeopleEditor pplEditor = ((PeopleEditor)e.Row.FindControl("ActionByUser"));
                    ArrayList alApprover = new ArrayList();
                    PickerEntity pentApprover = new PickerEntity();
                    char[] delimiterChars = { '#' };
                    string text = drview[2].ToString();
                    string[] words = text.Split(delimiterChars);
                    pentApprover.Key = words[1];
                    alApprover.Add(pentApprover);
                    pplEditor.UpdateEntities(alApprover);
                    DateTimeControl dtc = ((DateTimeControl)e.Row.FindControl("targetdateuser"));
                    dtc.SelectedDate=Convert.ToDateTime(drview[3].ToString());
                    DropDownList dpEmpdept = (DropDownList)e.Row.FindControl("DropDownList1");
                    DataTable dt = GetStatus();
                    dpEmpdept.DataSource = GetStatus();
                    dpEmpdept.DataTextField = "DepName";
                    dpEmpdept.DataValueField = "DepName";
                    dpEmpdept.DataBind();
                    dpEmpdept.SelectedValue = drview[4].ToString();
                    CheckBox chkb = (CheckBox)e.Row.FindControl("Assigned");
                    if (drview[5].ToString() == "True")
                    { chkb.Checked = true; }
                    else { chkb.Checked = false; }
             
                }
            }
            if (e.Row.RowType == DataControlRowType.Footer)
            {
                DropDownList dp = (DropDownList)e.Row.FindControl("DropDownList14");
                dp.DataSource = GetStatus();
                dp.DataTextField = "DepName";
                dp.DataValueField = "DepName";
                dp.DataBind();
            }
        }
        private DataTable GetStatus()
        {
           
            DataTable dt = new DataTable();
            dt.Columns.Add("DepName");
            DataRow rw1 = dt.NewRow();
            rw1[0] = "Open";
            dt.Rows.Add(rw1);
            DataRow rw2 = dt.NewRow();
            rw2[0] = "Closed";
            dt.Rows.Add(rw2);
            return dt;
        }
        protected void GridView1_RowCancelingEdit(object sender, GridViewCancelEditEventArgs e)
        {
            GridView1.EditIndex = -1;

            BindData();

        }
        protected void GridView1_RowDeleting(object sender, GridViewDeleteEventArgs e)
        {
            int i = e.RowIndex;
           // BindData();
        }
        public void BindData()
        {
            using (SPSite s = new SPSite(SPContext.Current.Web.Url))
            {
                using (SPWeb sw = s.OpenWeb())
                {
                    SPList sl = sw.Lists["MOMListt"];
                    SPQuery query=new SPQuery();
                    if (txtMeetingId.Text != "")
                    {
                        query.Query = @"<Where>" +
          "<Eq>" +
             "<FieldRef Name='Meeting' LookupId='True' />" +
             "<Value Type='Lookup'>" + Convert.ToInt32(txtMeetingId.Text) + "</Value>" +
          "</Eq>" +
       "</Where>";
                    }
                    SPListItemCollection itemCollection = sl.GetItems(query);
                    DataTable ResTable = new DataTable();
                    ResTable.Columns.Add(new DataColumn("ID"));
                    ResTable.Columns.Add(new DataColumn("Minutes"));
                    ResTable.Columns.Add(new DataColumn("Actionby"));
                    ResTable.Columns.Add(new DataColumn("TargetDate"));
                    ResTable.Columns.Add(new DataColumn("Status"));
                    ResTable.Columns.Add(new DataColumn("TaskAssigned"));
               
                    foreach (SPListItem item in itemCollection)
                    {
                        DataRow dr = ResTable.NewRow();
                        dr["ID"] = item["ID"].ToString();
                        dr["Minutes"] = item["Minutes"];
                        dr["ActionBy"] = item["Actionby"].ToString();
                        dr["TargetDate"] = item["TargetDate"];
                        dr["Status"] = item["Status"].ToString();
                        dr["TaskAssigned"] = item["assignedtask"].ToString();
                        ResTable.Rows.Add(dr);
                    }
                    if (ResTable.Rows.Count > 0)
                    {
                        GridView1.DataSource = ResTable;
                        GridView1.DataBind();
                     
                    }
                    else
                    {
                        DataRow dr = ResTable.NewRow();
                        dr["ID"] = "";
                        dr["Minutes"] = "";
                        dr["ActionBy"] = "";
                        dr["TargetDate"] = "";
                        dr["Status"] = "";
                        dr["TaskAssigned"] = "";
                        ResTable.Rows.Add(dr);
                        GridView1.DataSource = ResTable;
                        GridView1.DataBind();
                    }
                 
                }
            }
        }
     
       
        public void DropDownBind()
        {
            using (SPSite site = new SPSite(SPContext.Current.Web.Url))
            {
                using (SPWeb web = site.OpenWeb())
                {
                    DataSet ds = new DataSet();
                    SPList list = web.Lists["Board Events"];
                    SPListItem item = list.Items.GetItemById(Convert.ToInt32(Request.QueryString["Mid"].ToString()));
                    txtMeetingName.Text = item["Title"].ToString();
                    txtMeetingId.Text = item["ID"].ToString();
                 
                }
            }
        }
     
        protected void GridView1_RowCommand(object sender, GridViewCommandEventArgs e)
        {
            if (e.CommandName == "Add")
            {
                using (SPSite site = new SPSite(SPContext.Current.Web.Url))
                {
                    site.AllowUnsafeUpdates = true;
                    using (SPWeb web = site.OpenWeb())
                    {
                        web.AllowUnsafeUpdates = true;
                        SPList list = web.Lists["MOMListt"];
                        SPListItem item = list.Items.Add();
                        item["Meeting"] = new SPFieldLookupValue(Convert.ToInt32(txtMeetingId.Text), txtMeetingName.Text);
                        item["Minutes"] = ((TextBox)GridView1.FooterRow.FindControl("txtMinuteFooter")).Text;
                        PeopleEditor ppAuthor = ((PeopleEditor)GridView1.FooterRow.FindControl("ActionBy"));
                        PickerEntity ActionUser = (PickerEntity)ppAuthor.ResolvedEntities[0];
                        SPUser actionByUser = Web.EnsureUser(ActionUser.Key);
                        item["Actionby"] = actionByUser;
                        item["TargetDate"] = ((DateTimeControl)GridView1.FooterRow.FindControl("targetdate")).SelectedDate.Date;
                        item["Status"] = ((DropDownList)GridView1.FooterRow.FindControl("DropDownList14")).SelectedItem.Text;
                        CheckBox chk = ((CheckBox)GridView1.FooterRow.FindControl("AssignedFilter"));
                        string blActive = "";
                        if (chk.Checked == true)
                        {
                            blActive = "True";
                            item["assignedtask"] = blActive;
                        }
                        else
                        {
                            blActive = "False";
                            item["assignedtask"] = blActive;
                        }
                        if (TextBox7.Text != "")
                        {
                            item["Issues"] = TextBox7.Text;
                        }
                        item.Update();
                        web.AllowUnsafeUpdates = false;
                    }
                    site.AllowUnsafeUpdates = false;
               
                }
                BindData();
            }
            else if (e.CommandName == "Delete")
         {
             using (SPSite site = new SPSite(SPContext.Current.Web.Url))
           {
                site.AllowUnsafeUpdates = true;
                using (SPWeb web = site.OpenWeb())
                {
                    web.AllowUnsafeUpdates = true;
                 
                    SPList taskList = web.Lists["Tasks"];
                    SPQuery query = new SPQuery();
                    query.Query = @"<Where>" +
         "<Eq>" +
            "<FieldRef Name='MinuteofMeetingId'/>" +
            "<Value Type='Number'>" + Convert.ToInt32(e.CommandArgument.ToString()) + "</Value>" +
         "</Eq>" +
      "</Where>";

                    SPListItemCollection itemcollection = taskList.GetItems(query);

                    for (int i = itemcollection.Count - 1; i >= 0; i--)
                    {
                        SPListItem item = itemcollection[i];
                        item.Delete();
                    }
                    SPList list = web.Lists["MOMListt"];
                    list.Items.DeleteItemById(Convert.ToInt32(e.CommandArgument.ToString()));
                    web.AllowUnsafeUpdates = false;
                }
                site.AllowUnsafeUpdates = false;
           }
             BindData();
             
        }
         

        }
     

       
    }
}


HTML Code///////////////////////////////////////////////////////////////////////////////////////////////
<%@ Assembly Name="$SharePoint.Project.AssemblyFullName$" %>
<%@ Import Namespace="Microsoft.SharePoint.ApplicationPages" %>
<%@ Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register Tagprefix="Utilities" Namespace="Microsoft.SharePoint.Utilities" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register Tagprefix="asp" Namespace="System.Web.UI" Assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" %>
<%@ Import Namespace="Microsoft.SharePoint" %>
<%@ Assembly Name="Microsoft.Web.CommandUI, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TaskFormForLirary.aspx.cs" Inherits="CustomPageForLibrary.Layouts.CustomPageForLibrary.TaskFormForLirary" DynamicMasterPageFile="~masterurl/default.master" %>

<asp:Content ID="PageHead" ContentPlaceHolderID="PlaceHolderAdditionalPageHead" runat="server">
<style type="text/css">
        #DivContent
        {
            margin-top: 30px;
            width: 85%;
            border: .1em;
            border-style: none;
            padding: 15px;
        }
        table
        {
            width: 100%;
        }
        .ControlTD
        {
            width: 20%;
            text-align: left;
        }
        .TextTD
        {
            width: 25%;
            font-size: 12px;
            text-align: left;
            color: #00A1DE;
        }
        .RFVTD
        {
            width: 10%;
            text-align: left;
        }
        p
        {
            text-align: center;
            font-size: 22px;
            color: #3C8A2E;
        }
    </style>
    <script language="javascript" type="text/javascript">

        function ValidateGrid(x) {

            var gridView = document.getElementById('<%=GridView1.ClientID %>');

            var selectedRowIndex = x.parentNode.parentNode.rowIndex;

            var txtName = gridView.rows[parseInt(selectedRowIndex)].cells[0].children[0];

             var pplpicker = gridView.rows[parseInt(selectedRowIndex)].cells[1].children[0];

            if (txtName.value == "" || pplpicker.value=="")
            {

                alert('Please input all required fields');

                return false;

            }

        }

    </script>
</asp:Content>

<asp:Content ID="Main" ContentPlaceHolderID="PlaceHolderMain" runat="server">

<div id="DivContent">
        <p>
            Minutes of Meeting</p>
            <div><div>&nbsp; Meeting&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
               <%-- <asp:DropDownList ID="DropDownList2" runat="server" style="margin-left: 0px" Width="309px">
                </asp:DropDownList>--%>
                <asp:Label ID="txtMeetingName" runat="server"  Font-Bold="true">
                </asp:Label><asp:Label ID="txtMeetingId" runat="server"
                     ForeColor="White"></asp:Label>
                   
                </div></div>
                <asp:UpdatePanel ID="Panel" runat="server" >
            <ContentTemplate>
            <br />
            <br />
         <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="ID"
    EnableModelValidation="True" ShowFooter="True" OnRowEditing="GridView1_RowEditing" OnRowCancelingEdit="GridView1_RowCancelingEdit" OnRowCommand="GridView1_RowCommand" OnRowDeleting="GridView1_RowDeleting" OnRowUpdating="GridView1_RowUpdating" OnRowDataBound="GridView1_RowDataBound"  >
    <Columns>
        <asp:TemplateField HeaderText="Minutes">
            <EditItemTemplate>
                <asp:TextBox ID="txtMinutes" runat="server" Text='<%#Eval("Minutes")%>' TextMode="MultiLine" Width="350px" Height="70px"></asp:TextBox>
            </EditItemTemplate>
            <ItemTemplate>
                <asp:Label ID="Label1" runat="server" Text='<%#Eval("Minutes")%>'></asp:Label>
            </ItemTemplate>
            <FooterTemplate>
         <asp:TextBox ID="txtMinuteFooter" runat="server" TextMode="MultiLine" Width="350px" Height="70px"></asp:TextBox>
     
        </FooterTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Action By">
            <EditItemTemplate>
                <SharePoint:PeopleEditor ID="ActionByUser" runat="server" MultiSelect="false" Width="200px" AllowEmpty="false"  />
            </EditItemTemplate>
            <ItemTemplate>
                <asp:Label ID="Label2" runat="server" Text='<%#Eval("ActionBy")%>'></asp:Label>
            </ItemTemplate>
            <FooterTemplate>
                 <SharePoint:PeopleEditor ID="ActionBy" runat="server" MultiSelect="false" Width="200px" AllowEmpty="false"  />
        </FooterTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Target Date" ItemStyle-Width="150px">
            <EditItemTemplate>
           
                <SharePoint:DateTimeControl EnableViewState="true" ID="targetdateuser" runat="server"
                        DateOnly="true" />
            </EditItemTemplate>
            <ItemTemplate>
                <asp:Label ID="Label3" runat="server" Text='<%#Eval("TargetDate")%>'></asp:Label>
            </ItemTemplate>
            <FooterTemplate>
                 <SharePoint:DateTimeControl EnableViewState="true" ID="targetdate" runat="server"
                        DateOnly="true" />
        </FooterTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Status">
            <EditItemTemplate>
                <asp:DropDownList ID="DropDownList1" runat="server">
             
               
                </asp:DropDownList>
            </EditItemTemplate>
            <ItemTemplate>
                <asp:Label ID="Label4" runat="server" Text='<%#Eval("Status")%>'></asp:Label>
            </ItemTemplate>
            <FooterTemplate>
         <asp:DropDownList ID="DropDownList14" runat="server">
             
                </asp:DropDownList>
        </FooterTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Assigned Task">
            <EditItemTemplate>
               <asp:CheckBox ID="Assigned" runat="server">
             
                </asp:CheckBox>
            </EditItemTemplate>
            <ItemTemplate>
              <asp:Label ID="Label5" runat="server" Text='<%#Eval("TaskAssigned")%>'></asp:Label>
           
           
            </ItemTemplate>
            <FooterTemplate>
         <asp:CheckBox ID="AssignedFilter" runat="server" >
                </asp:CheckBox>
        </FooterTemplate>
        </asp:TemplateField>
        <asp:TemplateField ShowHeader="False">
            <EditItemTemplate>
                <asp:LinkButton ID="LinkButton11" runat="server" CausesValidation="true" OnClientClick='javascript:return ValidateGrid(this);'
                    CommandName="Update" Text="Update" CommandArgument='<%#Eval("ID")%>'></asp:LinkButton>
                &nbsp;<asp:LinkButton ID="LinkButton2" runat="server" CausesValidation="False"
                    CommandName="Cancel" Text="Cancel"></asp:LinkButton>
            </EditItemTemplate>
            <ItemTemplate>
                <asp:LinkButton ID="LinkButton1" runat="server" CausesValidation="False"
                    CommandName="Edit" Text="Edit"></asp:LinkButton>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField ShowHeader="False">
            <ItemTemplate>
         
                <asp:LinkButton ID="LinkButton2s" runat="server" CausesValidation="False"
                    CommandName="Delete" Text="Delete" CommandArgument='<%#Eval("ID")%>'></asp:LinkButton>

            </ItemTemplate>
            <FooterTemplate>
             <asp:LinkButton ID="LinkButton21" runat="server"
                    CommandName="Add" Text="Add" CausesValidation="true" OnClientClick='javascript:return ValidateGrid(this);'></asp:LinkButton>
            </FooterTemplate>
        </asp:TemplateField>

    </Columns>
 
</asp:GridView>
    </ContentTemplate>
    </asp:UpdatePanel>
<div>
    <table>
        <tr>
            <td valign="top">Pending Issues :</td><td>
                <asp:TextBox ID="TextBox7" runat="server" TextMode="MultiLine" Height="84px" Width="534px"></asp:TextBox></td>

        </tr>

    </table>

</div>
        <br />
        <p>
            &nbsp;</p>
    </div>

</asp:Content>

<asp:Content ID="PageTitle" ContentPlaceHolderID="PlaceHolderPageTitle" runat="server">
Application Page
</asp:Content>

<asp:Content ID="PageTitleInTitleArea" ContentPlaceHolderID="PlaceHolderPageTitleInTitleArea" runat="server" >
My Application Page
</asp:Content>

How to get and set TextField value in react

How to get and set TextField value in react spfx webpart ?

1.      Add React Webpart

2.      Once your webpart is ready then open .tsx file from component folder and  Import react component module  in your webpart

import {Label, TextField} from 'office-ui-fabric-react';

3.      Check below code step by step to get and set textfield state in react

import * as React from 'react';
import styles from './ReactDemo.module.scss';
import { IReactDemoProps } from './IReactDemoProps';
import { escape } from '@microsoft/sp-lodash-subset';

//step1 import fabric react module, add label and textfield refrence
import {Label,TextField} from 'office-ui-fabric-react';
//step2 create a interface for controls
export interface IControls
{
  FirstName:string;
  LastName:string;
}
//step3 replace IControls Interface with {}
export default class ReactDemo extends React.Component<IReactDemoProps,IControls> {
  //step4 add a constructor
constructor(props)
{
  //step5 define the super method
  super(props);
  //step6 intialize control state to set the default value on page load
  this.state={
    FirstName:"Mohammed",
    LastName:"Waseem"
  };

  //step9 bind event onchange
  this.FirstNameonchanged=this.FirstNameonchanged.bind(this);
  this.LastNameOnChanged=this.LastNameOnChanged.bind(this);
}

//step7 and 10 add controls in render method
  public render(): React.ReactElement<IReactDemoProps> {
    return (
      <div className={ styles.reactDemo }>
        <div className={ styles.container }>
          <div className={ styles.row }>
            <div className={ styles.column }>
              <Label className={styles.label}>FirstName</Label>
              <TextField value={this.state.FirstName} onChanged={this.FirstNameonchanged}></TextField>
              <Label className={styles.label}>LastName</Label>
              <TextField value={this.state.LastName} onChanged={this.LastNameOnChanged}></TextField>
            </div>
          </div>
        </div>
      </div>
    );
  }


Result1: default value on page load

  //step8 to set the state value on changed in textfield
  private FirstNameonchanged(firstname:any)
  {
    this.setState({FirstName:firstname});
    console.log("FirstName state value is : "+this.state.FirstName);
  }
  private LastNameOnChanged(lastname:any)
  {
    this.setState({LastName:lastname});
    console.log("LastName state value is:"+this.state.LastName);
  }
}

Result 2 :Changed value

How to get and set People Picker value in react spfx webpart

How to get and set People Picker value in react spfx webpart ?

1.      Add React Webpart as ReactDemo

2.      Open IReactDemoProps.ts file from webpart component folder and  add webpartcontext in webpart interface

import { WebPartContext } from "@microsoft/sp-webpart-base";

// add WebPartContext context on webpart

export interface IReactDemoProps {

                description: string;

                context:WebPartContext;

}

3.      then open .tsx file from component folder

Check below code step by step to add people picker control

import * as React from 'react';

import styles from './ReactDemo.module.scss';

import { IReactDemoProps } from './IReactDemoProps';

import { escape } from '@microsoft/sp-lodash-subset';

//step1 import fabric react, pnp-spfx,pnp  module and, add label and button refrence

import {Label,PrimaryButton} from 'office-ui-fabric-react';

//if this modules is not installed then use the command to install 'npm install @pnp/spfx-controls-react --save'

import { PeoplePicker, PrincipalType } from "@pnp/spfx-controls-react/lib/PeoplePicker";

import pnp from 'sp-pnp-js';

//step2 create a interface for controls

export interface IControls

{

  pplControl:any;

}

export interface IPeoplePickerControl

{

  id:string;

  secondaryText:string;

  text:string;

}

//step3 replace IControls Interface with {}

export default class ReactDemo extends React.Component<IReactDemoProps,IControls> {

  //step4 add a constructor

constructor(props)

{

  //step5 define the super method

  super(props);

  //step6 intialize control state to set the default value on page load

  this.state={

    pplControl:[]

  };

  //step9 bind event onchange

  this.PeoplePickerItems=this.PeoplePickerItems.bind(this);

  this.ButtonClick=this.ButtonClick.bind(this);

}

//step7 and 10 add controls in render method

  public render(): React.ReactElement<IReactDemoProps> {

pnp.setup({

  spfxContext:this.props.context

});

    return (

      <div className={ styles.reactDemo }>

        <div className={ styles.container }>

          <div className={ styles.row }>

            <div className={ styles.column }>

              <Label className={styles.label}>People Picker</Label>

              <PeoplePicker

                context={this.props.context}

                titleText="People Picker"

                personSelectionLimit={3}

                groupName={""} // Leave this blank in case you want to filter from all users

                showtooltip={false}

                isRequired={true}

                disabled={false}

                selectedItems={this.PeoplePickerItems}

                showHiddenInUI={false}

                principalTypes={[PrincipalType.User]}

                resolveDelay={1000}

                />

                <PrimaryButton className={styles.button} onClick={this.ButtonClick} >Get People Picker Value</PrimaryButton>

            </div>

          </div>

        </div>

      </div>

    );

  }

  //step8 to set the state value on changed in people picker control

  private PeoplePickerItems(items: any[])

  {

    this.setState({pplControl:items});

  }

//get people picker value on button click

  private ButtonClick()

  {

   let pplValue:IPeoplePickerControl[]=this.state.pplControl;

   pplValue.forEach(ppl=>

    {

           //get user’s id

                alert(ppl.id);

    });

  }

}

Result:è