SPFX – Configure the WebPart using the Property Pane Configuration

Sathish Nadarajan
 
Solution Architect
March 8, 2021
 
Rate this article
 
Views
3302

The Property Pane is used to configure our WebPart based on the requirement.  The Property pane properties are defined in propertyPaneSettings.

The property pane looks as below.

And the default code for the method getPropertyPaneConfiguration is as below.

protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
    return {
      pages: [
        {
          header: {
            description: null
          },
          groups: [
            {
              //groupName: strings.BasicGroupName,
              groupFields: [
                PropertyPaneTextField('description', {
                  label: strings.DescriptionFieldLabel
                })
              ]
            }
            
          ]
        }
      ]
    };
  }

And the requirement is On this WebPart, I need to introduce a text box in which the users can enter a number.  The webpart should retrieve only those many values from the list.  Now, we are going to introduce a new Text Box in the Property Pane.

The first step is to introduce a Props in the WebPartProps interface.

export interface IDisplayLargeListWebPartProps {
  description: string;
  numberofItems:number;
}

Then Update the getPropertyPaneConfiguration Method.

protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
    return {
      pages: [
        {
          header: {
            description: null
          },
          groups: [
            {
              //groupName: strings.BasicGroupName,
              groupFields: [
                PropertyPaneTextField('description', {
                  label: strings.DescriptionFieldLabel
                }),
                PropertyPaneTextField('numberofItems', {
                  label: "Number of Items"
                })
              ]
            }
          ]
        }
      ]
    };
  }

This will render a new text box as below.

 

 

Now, we can get the value from this prop “numberofItems” and pass to our component props.  While rendering the component, we can pass the new property.

public render(): void {
    debugger;
    const element: React.ReactElement<IDisplayLargeListProps> = React.createElement(
      DisplayLargeList,
      {

        description: this.properties.description,
        numberofItems:this.properties.numberofItems
      }
    );

    ReactDom.render(element, this.domElement);
  }

On the component props file, we need to add the property numberofItems.

export interface IDisplayLargeListProps {
  description: string;
  numberofItems:number;
}

And on the component, we can use this property as below.

private getAllLargeListItems = async (): Promise<any> => {
    try {

      let allLargeListItems: any[] = [];
      
      let numberofItems = this.props.numberofItems;
      
      let largeListItems = await sp.web.lists.getByTitle('LargeList').items.select('Title').top(numberofItems).get();

      largeListItems.forEach(item => {
        allLargeListItems.push({
          Id: item.ID,
          name: item.Title, 
        });
      });

      return allLargeListItems;
    }
    catch (error) {

    }
  }

Similarly we can have any kind of controls within the Property Pane.

The following field types are supported:

  • Button
  • Checkbox
  • Choice group
  • Dropdown
  • Horizontal rule
  • Label
  • Link
  • Slider
  • Textbox
  • Multi-line Textbox
  • Toggle
  • Custom

Happy Coding

Sathish Nadarajan

Author Info

Sathish Nadarajan
 
Solution Architect
 
Rate this article
 
Sathish is a Microsoft MVP for SharePoint (Office Servers and Services) having 15+ years of experience in Microsoft Technologies. He holds a Masters Degree in Computer Aided Design and Business ...read more
 

How to Get All Items from SharePoint List and Display it in Custom HTML table with Sorting using AngularJS

Ahamed Fazil Buhari
 
Senior Developer
October 10, 2016
 
Rate this article
 
Views
18252

Hello everyone, in this article we will look into the approach on how to get all the SharePoint List Items and showing that in a Custom page using HTML table. Here we’re using two important things from AngularJS, one is $scope object and another one is $http service. To know more about $scope object and other basic stuffs in AngularJS, please refer my previous article – Basics of AngularJS in SharePoint

About $http service: HTTP is a service that Angular provides, and it is an object with methods we can use to make HTTP calls. The methods are named after the HTTP methods, so the methods on this object are GET, POST, PUT, and DELETE.

 var MainController = function ($scope, $http) {
     $scope.user = $http.get('url/users/547226'); //wrong way, bcz its async so we won’t get the result immediately.
 };
 
 

Making use of Promise

As the name implies, the promise object is an object that promises to give us some result in the future, and that output might be the data that we need, or the result might be an error if the server was unreachable or unavailable or some issue. We need to call a then method on my promise and pass the then method a function that will be called in the future.

 var MainController = function ($scope, $http) {
     var promise = $http.get('/users/547226'); 
 	promise.then(function(response){
 		$scope.user = response.data;
 });
 };
 OR
 var MainController = function ($scope, $http) {
     var onSuccess = function(response) {
 	$scope.user = response.data;
     };
     var onError = function(reason) {
 	$scope.error = “Something went wrong”;
     };
 
     $http.get('/users/547226')
 	.then(onSuccess, onError); 
 };
 

.then – This method is called when the function is ready. Let’s explain the $http service with an example. Consider that we have a SharePoint list as shown below,

clip_image002

Here, I’ve created custom page and added this below HTML element in it.

 <div id="appDiv" ng-app="myapp">
     <div id="controllerDiv" ng-controller="MyController">
         {{error}}
 	Order By:
         <select ng-model="customOrderBy">
             <option value="Title">Asc - Title</option>
             <option value="-Title">Desc - Title</option>
             <option value="People_x0020_using">Asc - Ppl using</option>
             <option value="-People_x0020_using">Desc - Ppl using</option>
         </select>
         <br />
         <table id="userDetails" border="1px solid">
             <thead>
                 <tr>
                     <th>Phone Title</th>
                     <th>No. of ppl using</th>
                 </tr>
             </thead>
             <tbody>
                 <tr ng-repeat="ppl in people | orderBy:customOrderBy">
                     <td>{{ppl.Title}}</td>
                     <td>{{ppl.People_x0020_using | number}}</td>
                 </tr>
             </tbody>
         </table>
     </div>
 </div>
 

In my previous article I’ve explained about some very common directives like ng-app, ng-controller, ng-model in AngularJS. Here we’ve another useful directives ng-repeat and filter.

ng-repeat: ng-repeat="ppl in people" , ng-repeat is a lot like foreach loop in C#.

filters: In addition to directives, Angular also has the concept of filters. A filter is something that we invoke and pipe data through, by using the symbol | and then the name of the filter (number, currency, lowercase, uppercase etc.)

Basic format: expression | filterName:parameter

Name 
currency{{amount | currency:”USD$”}}
date{{startDate | date:’short’}}
filterppl in people | filter:Title
json{{ ppl | json }}
limitToppl in people | limitTo:10
lowercase, uppercase{{ ppl.name || uppercase }}
number{{ count | number }}
orderByppl in people | filter: searchTerm| orderBy: ‘Title’

Added the below script in my JS file,

 (function () { //IIFE 
 
     //Creating a Module
     var app = angular.module("myapp", []);
 
     var MyController = function ($scope, $http) {
 
         var json_listdata = {};
 
         var onSuccess = function (response) {
             //this result will be in json format, so we are getting the 'value' from the 'response.data'
             var json_values = response.data.value;
      //we assign it simply like shown below
 	     $scope.people = json_values;
             /*or we can iterate through all the items and assign it to our own jsom obj
             $.each(json_values, function (key, val) {
                 var jsonObj_Values = {};
                 jsonObj_Values["Title"] = val.Title;
                 jsonObj_Values["People Using"] = val.People_x0020_using;
 
                 json_listdata[val.ID] = jsonObj_Values;
             });
             //assigning the value into angular $scope element 
             $scope.people = json_listdata;
      */
         };
 
         var onError = function (reason) {
             $scope.error = "Could not fetch, something went wrong";
         };
 
         function getSPListItems() {
             var getURLVal = _spPageContextInfo.webAbsoluteUrl + "/_api" + "/web/lists/getbytitle('Phone')/Items?$select=*";
             //getURLVal, this only tells from which list and what items under what condition it should be fetched
             //$http.get
             $http.get(getURLVal)
 	          .then(onSuccess, onError);
         }
 
         getSPListItems();
 
     };
 
     //Registering the controller in the module
     app.controller("MyController", MyController);
 
 }());
 

And the output will be shown as below,

clip_image004

Based upon the Order By: dropdown value, the ordering in the table will differ. I hope, you got some idea about $http service and ng-repeat from this article.

Happy Coding

Ahamed

Author Info

Ahamed Fazil Buhari
 
Senior Developer
 
Rate this article
 
Ahamed is a Senior Developer and he has very good experience in the field of Microsoft Technologies, especially SharePoint, Azure, M365, SPFx, .NET and client side scripting - JavaScript, TypeScript, ...read more
 

How to achieve the Cross domain WebAPI (Get/Post) call using Ajax request

Tarun Kumar Chatterjee
 
Net – Technology Specialist
November 5, 2015
 
Rate this article
 
Views
17873

In this article let me show you the details steps to create a WebAPI and the hosted WebAPI will be invoked from a separate client application. While both the applications are in different domain there would have some issue at the time of Post, here I am trying to cover all those as well. Hope, it would help you guys.

Here are the detail steps I have followed to get the job done.

Start Visual Studio and create a new ASP.NET Web Application project.

Select the Empty project template.

Select the Web API checkbox.

clip_image002

clip_image003

In Model folder add a Class named as “Person”

 public class person
     {
         public string name { get; set; }
         public string surname { get; set; }
     }
 

Add a TestController class within the Controller folder and use the below code snippet

 public class TestController : Controller
     {
         //
         // GET: /Test/
         public ActionResult Index()
         {
             return View();
         }
 
         [HttpPost]
         public string PostData(person objperson)
         {
             return objperson.name;
         }
 
         [HttpGet]
         public string GetData1(string person)
         {
             return "Response From CROSS domain";
         }
         [HttpGet]
         public string GetData2(string person1, string person2)
         {
             return "Response From CROSS domain";
         }
 	}
 

In Gloabal.asax we have Application_Start method & there add the following code

 GlobalConfiguration.Configuration.Formatters.Insert(0, new JsonMediaTypeFormatter());

Build the WebAPI solution, by default it is running in 37167 port in my case.

New let me create a basic client Web application which will invoke Get and Post methods of the WebAPI I have just created

clip_image005

clip_image006

Add a web form named as “TestClient.aspx” and use the below code snippet

 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
     <script>
 
         $(document).ready(function () {
 
             var error;
             $("#Save").click(function () {
 
                 var person = new Object();
                 person.name = "Tarun";
                 person.surname = "Chatterjee";
 
                 $.support.cors = true;
 
                 $.ajax({
                     url: 'http://localhost:37167/api/Test/Postdata',
                     data: JSON.stringify(person),
                     contentType: 'application/json; charset=utf-8',
                     dataType: "json",
                     type: "POST",
                     crossDomain: true,
                     success: function (dataReceived) {
                         if (dataReceived) {
                             alert("Welcome " + dataReceived);
                         } else {
                             alert("Authentication failed")
                         }
                     },
                     error: function (e) {
                         alert(e);
                     }
 
                 });
 
             });
 
 
             $("#Get1").click(function () {
                 var person = new Object();
                 var name = "Tarun";
 
 
                 var jsonString = { person: name };
 
                 $.ajax({
                     type: 'GET',
                     url: 'http://localhost:37167/api/test/',
                     contentType: "application/json",
                     dataType: 'jsonp',
                     crossDomain: true,
                     data: jsonString,
                     success: function (dataReceived) {
                         if (dataReceived) {
                             alert("Welcome " + dataReceived);
                         } else {
                             alert("Authentication failed")
                         }
                     },
                     error: function (e) {
                         alert(e);
                     }
                 });
             });
             $("#Get2").click(function () {
                 var person = new Object();
                 var name1 = "Tarun";
                 var name2 = "Chatterjee";
 
 
                 var jsonString = { person1: name1, person2: name2 };
 
                 $.ajax({
                     type: 'GET',
                     url: 'http://localhost:37167/api/test/',
                     contentType: "application/json",
                     dataType: 'jsonp',
                     crossDomain: true,
                     data: jsonString,
                     success: function (dataReceived) {
                         if (dataReceived) {
                             alert("Welcome " + dataReceived);
                         } else {
                             alert("Authentication failed")
                         }
                     },
                     error: function (e) {
                         alert(e);
                     }
                 });
             });
         });
     </script>
 </head>
 <body>
     <form id="form1" runat="server">
         <input type="button" id="Save" value="Save Data" />
         <input type="button" id="Get1" value="Get Data with 1 Parameters" />
         <input type="button" id="Get2" value="Get Data with 2 Parameters" />
     </form>
 </body>
 </html>
 

Now, run the WebAPI and Client application simultaneously.

HttpGet works fine in both IE & Chrome. The problem I have with HttpPost method in chrome but not in IE.

While trying to request HttpPost method it is throwing me the below error:

OPTIONS http://localhost:37167/api/Test/Postdata send @ jquery.min.js:4m.extend.ajax @ jquery.min.js:4(anonymous function) @ TestClient.aspx:21m.event.dispatch @ jquery.min.js:3r.handle @ jquery.min.js:3

TestClient.aspx:1 XMLHttpRequest cannot load http://localhost:37167/api/Test/Postdata. Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://localhost:37238’ is therefore not allowed access. The response had HTTP status code 405.

To resolve the issue I have followed the below steps:

Run the below commands in Package Manager Console

PM> Install-Package NuGet.Core

PM> Install-Package Microsoft.AspNet.WebApi.Cors

clip_image008

Add the below class in App_Start folder

 using System;
 using System.Collections.Generic;
 using System.Linq;
 using System.Net;
 using System.Net.Http;
 using System.Threading;
 using System.Threading.Tasks;
 using System.Web;
 
 namespace CrossDomainWebAPI.App_Start
 {
     public class CorsHandler : DelegatingHandler
     {
         const string Origin = "Origin";
         const string AccessControlRequestMethod = "Access-Control-Request-Method";
         const string AccessControlRequestHeaders = "Access-Control-Request-Headers";
         const string AccessControlAllowOrigin = "Access-Control-Allow-Origin";
         const string AccessControlAllowMethods = "Access-Control-Allow-Methods";
         const string AccessControlAllowHeaders = "Access-Control-Allow-Headers";
 
         protected override Task<HttpResponseMessage> SendAsync(HttpRequestMessage request, CancellationToken cancellationToken)
         {
             bool isCorsRequest = request.Headers.Contains(Origin);
             bool isPreflightRequest = request.Method == HttpMethod.Options;
             if (isCorsRequest)
             {
                 if (isPreflightRequest)
                 {
                     HttpResponseMessage response = new HttpResponseMessage(HttpStatusCode.OK);
                     response.Headers.Add(AccessControlAllowOrigin, request.Headers.GetValues(Origin).First());
 
                     string accessControlRequestMethod = request.Headers.GetValues(AccessControlRequestMethod).FirstOrDefault();
                     if (accessControlRequestMethod != null)
                     {
                         response.Headers.Add(AccessControlAllowMethods, accessControlRequestMethod);
                     }
 
                     string requestedHeaders = string.Join(", ", request.Headers.GetValues(AccessControlRequestHeaders));
                     if (!string.IsNullOrEmpty(requestedHeaders))
                     {
                         response.Headers.Add(AccessControlAllowHeaders, requestedHeaders);
                     }
 
                     TaskCompletionSource<HttpResponseMessage> tcs = new TaskCompletionSource<HttpResponseMessage>();
                     tcs.SetResult(response);
                     return tcs.Task;
                 }
                 else
                 {
                     return base.SendAsync(request, cancellationToken).ContinueWith<HttpResponseMessage>(t =>
                     {
                         HttpResponseMessage resp = t.Result;
                         resp.Headers.Add(AccessControlAllowOrigin, request.Headers.GetValues(Origin).First());
                         return resp;
                     });
                 }
             }
             else
             {
                 return base.SendAsync(request, cancellationToken);
             }
         }
     }
 }
 

In the TestController class add the following attribute:

[EnableCors(origins: "*", headers: "*", methods: "*")]

Now build the WebAPI solution and run. It throws me the following error:

clip_image010

To resolve the error we need to run the below commands from package manager console

Update-Package Microsoft.AspNet.WebApi –reinstall

uninstall-Package Microsoft.AspNet.WebApi.Cors –Force

Install-Package Microsoft.AspNet.WebApi.Cors.ko -Version 5.0.0

And now all of my dll dependencies are resolved.

Finally run the WebAPI and Client application in Chrome and HttpPost method was working properly.

Here is my web.config code.

 <?xml version="1.0" encoding="utf-8"?>
 <!--
   For more information on how to configure your ASP.NET application, please visit
   http://go.microsoft.com/fwlink/?LinkId=301879
   -->
 <configuration>
   <appSettings>    
   </appSettings>
   <system.web>
     <compilation debug="true" targetFramework="4.5" />
     <httpRuntime targetFramework="4.5" />
   </system.web>
   
   <runtime>
     <assemblyBinding xmlns="urn:schemas-microsoft-com:asm.v1">
       <dependentAssembly>
         <assemblyIdentity name="System.Web.Cors" publicKeyToken="31bf3856ad364e35" culture="neutral" />
         <bindingRedirect oldVersion="0.0.0.0-5.2.3.0" newVersion="5.2.3.0" />
         
       </dependentAssembly>
     </assemblyBinding>
   </runtime>
 <system.webServer>
     <handlers>
       <remove name="ExtensionlessUrlHandler-Integrated-4.0" />
       <remove name="OPTIONSVerbHandler" />
       <remove name="TRACEVerbHandler" />
       <add name="ExtensionlessUrlHandler-Integrated-4.0" path="*." verb="*" type="System.Web.Handlers.TransferRequestHandler" preCondition="integratedMode,runtimeVersionv4.0" />
     </handlers>
   </system.webServer></configuration>  
 

Happy Coding

Tarun Kumar Chatterjee

Category : .Net, WebAPI

Author Info

Tarun Kumar Chatterjee
 
Net – Technology Specialist
 
Rate this article
 
Tarun has been working in IT Industry for over 12+ years. He holds a B-tech degree. He is passionate about learning and sharing the tricks and tips in Azure, .Net ...read more
 

Leave a comment