SharePoint Framework Property Controls

Developers have started use of SharePoint framework for developing the client side web parts in SharePoint online(Office 365). Some of the code block is getting repeated across multiple client side web parts like selecting the list, date time selection, color picker, term set picker. Developers have noticed this to the PNP community. Hence Microsoft came up with reusable controls which are similar to our ASP.net concept of user controls. This controls can be added to the web part easily and can be used as custom property in property pane. I didn't find all steps in single blog so decided to summaries here starting from creating the client side web parts.

Step 1 : Set up your development environment by following steps.

Step 2 :  Build your SharePoint Client side web part

Step 3 : Install the following dependency to your project

Make sure that node.js command prompt is running and it is referring to your project. Execute the below command.

npm install @pnp/spfx-property-controls --save --save-exact

 Step 4 : Update the configuration file of your project

Go to Config folder, under that open config.json file and add the following line to the localizedresource property.

"PropertyControlStrings": "./node_modules/@pnp/spfx-property-controls/lib/loc/{locale}.js"

"localizedResources": {

    "CustomucwebpartWebPartStrings": "lib/webparts/customucwebpart/loc/{locale}.js",

    "PropertyControlStrings": "./node_modules/@pnp/spfx-property-controls/lib/loc/{locale}.js"

  }

Step 5 : Adding control to your web part

There are around 6 controls currently available.

1. PropertyFieldColorPicker
2. PropertyFieldDateTimePicker
3. PropertyFieldListPicker
4. PropertyFieldPeoplePicker
5. PropertyFieldSpinButton
6. PropertyFieldTermPicker

we will use PropertyFieldColorPicker control. Import the following module to your web part file.

import { 

  PropertyFieldColorPicker, 

  PropertyFieldColorPickerStyle 

} from '@pnp/spfx-property-controls/lib/PropertyFieldColorPicker';

Add the new property in web part name it color of type string

export interface ICustomucwebpartWebPartProps {

  description: string;

  color: string; 

}

Add the custom property control to the group fields of the web part property configuration.

 PropertyFieldColorPicker('color', {

                  label: 'Color',

                  selectedColor: this.properties.color,

                  onPropertyChange: this.onPropertyPaneFieldChanged,

                  properties: this.properties,

                  disabled: false,

                  alphaSliderHidden: false,

                  style: PropertyFieldColorPickerStyle.Full,

                  iconName: 'Precipitation',

                  key: 'colorFieldId'

                })   

To test the web part, display the property value in Render method.

 <p class="${ styles.description }">${escape(this.properties.color)}</p>      

Now run the gulp serve to test property locally.

Add the web part on workbench page then click on edit and in property pane you will see the color property with color picker option available. You can select the color and same value will be displayed in the web part body.

Enjoy coding !!!

Reference:

SharePoint framework property control

PowerShell Start SharePoint incremental crawl

Many times we have scenario where we want to start the incremental crawl after updating some data in SharePoint using power shell, here we can use the below script.


Get-SPEnterpriseSearchCrawlContentSource -SearchApplication "Search Service Application" | where-object { ($_.CrawlStatus -eq "idle") } | foreach { $_.StartIncrementalCrawl() }

Enjoy coding !!!

Read file from FTP location using Powershell

To read the file from the FTP, we can use below script:

$webclient = New-Object System.Net.WebClient
$webclient.Credentials = New-Object System.Net.NetworkCredential('ftp username','ftp password')

$uri = New-Object System.Uri('ftp path')

$webClient.DownloadFile($uri, 'local path') 

Setting Header and Footer as Image while creating PDF using iTextSharp

I have requirement in SharePoint 2013 project to create the PDF dynamically from the HTML having header and footer on every page. I have used open source iTextSharp dll to achieve the same, There are many samples available to add image to pdf using iTextSharp, however there is one specific scenario where you are creating the PDF by specifying the HTML and that too it should have header and footer on each page. Normally header and footer will be only appear once in case of HTML.

Following few tips you should consider while achieving this functionality:

1. You have specified the margin Top and margin Bottom while creating the document object of iTextSharp.

Document doc = new Document(PageSize.A4, 10, 10, 150, 150)

here the last two parameters are top and bottom margin.

2. You need to implement the event handler, In which you will override the OnEndPage event of the class by deriving it from PdfPageEventHelper class.

public override void OnEndPage(PdfWriter writer, iTextSharp.text.Document document)

3. You need add the image in header and footer using OnEndPage event only.

               PdfPTable footerTbl = new PdfPTable(1);

                footerTbl.TotalWidth = document.PageSize.Width;

                Image logo = Image.GetInstance(new Uri(string.Format("{0}/SiteCollectionImages/Footer.JPG", SiteCollectionUrl)));

                logo.SetAbsolutePosition(0, 0);

                PdfPCell cell = new PdfPCell(logo);

                cell.HorizontalAlignment = Element.ALIGN_RIGHT;

                cell.PaddingRight = 20;

                cell.Border = 0;

                footerTbl.AddCell(cell);

                footerTbl.WriteSelectedRows(0, -1, 0, 90, writer.DirectContent);

                PdfPTable headerTbl = new PdfPTable(1);

                headerTbl.TotalWidth = document.PageSize.Width;

                Image logo1 = Image.GetInstance(new Uri(string.Format("{0}/SiteCollectionImages/header.jpg", SiteCollectionUrl)));

                logo1.ScalePercent(90);

                logo1.SetAbsolutePosition(0, 0);

                PdfPCell cell1 = new PdfPCell(logo1);

                cell1.HorizontalAlignment = Element.ALIGN_RIGHT;

                cell1.Border = 0;

                headerTbl.AddCell(cell1);

                headerTbl.WriteSelectedRows(0, -1, 0, (document.PageSize.Height - 10), writer.DirectContent);

4. Specify the event handler in PdfWriter.

Rename column name in SharePoint online List View

To rename the Column name in SharePoint Online List view, use the following jQuery


<script type="text/javascript"
    src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js">
</script>
<script type="text/javascript">
    $(document).ready(function () {      
        renameColumnName('Title');
    });
    function renameColumnName(c) {
        $(".ms-formlabel h3 nobr").filter(function () {
            var thisText = $.trim($(this).clone().children().remove().end().text());
            return thisText.indexOf(c) === 0 && thisText.length === c.length;
        }).html('Title1');
    }
</script>

In the rename Column name function first we need to find out the title column and then using HTML function of jQuery we are replacing it.

JavaScript parseInt function fails in IE8 for string "08" and "09"

We have used the java script function parseInt to parse the strings, however on the 9 th sept it started failing, I debugged the script and observed the following things :

var dt = parseInt("09");  // gives result as 0
var dt = parseInt("08");   // gives result as 0
var dt = parseInt("07");  // gives result as 7

solution is specify base 10

var dt = parseInt("09", 10);  // gives result as 9
var dt = parseInt("08", 10);   // gives result as 8
var dt = parseInt("07", 10 );  // gives result as 7

Reason : Both parseInt('08') and parseInt('09') return zero because the function tries to determine the correct base for the numerical system used. In Javascript numbers starting with zero are considered octal and there's no 08 or 09 in octal, hence the problem.

Getting the value of XElement containing xlink and colon

Recently I faced one problem while reading the value of attribute for the XElement, I have XML in following format :


<document>
<figure xmlns:xlink="http://www.w3.org/1999/xlink" id="F1" xlink:href="image#F1.1" class="figure">
  <label>Fig. 1.</label>
  <caption> XYZ</caption>
</figure>
</document>


I have written following code to get the value of the href attribute of figure.

XDocument _xDocument = XDocument.Load(XXXXX);
// XXXXX - specify the path here

List<XElement> imageElements = _xDocument.Descendants("Figure").ToList(); 

foreach (XElement imageElement in imageElements)
{
    if (imageElement.Attribute("xlink:" + "href") != null)
     {
        string href = imageElement.Attribute("xlink:" + "href").Value;
     }
}

But I end up with the following exception :

The ':' character, hexadecimal value 0x3A, cannot be included in a name.


   at System.Xml.ValidateNames.ThrowInvalidName(String s, Int32 offsetStartChar, Int32 offsetBadChar)
   at System.Xml.ValidateNames.ParseNCNameInternal(String s, Boolean throwOnError)
   at System.Xml.XmlConvert.VerifyNCName(String name)
   at System.Xml.Linq.XName..ctor(XNamespace ns, String localName)
   at System.Xml.Linq.XNamespace.GetName(String localName, Int32 index, Int32 count)
   at System.Xml.Linq.XNamespace.GetName(String localName)
   at System.Xml.Linq.XName.Get(String expandedName)
   at System.Xml.Linq.XName.op_Implicit(String expandedName)

The solution for this is to use XNamespace as below:

XNamespace xlink = "http://www.w3.org/1999/xlink";

if (imageElement.Attribute(xlink  + "href") != null)
{
  string href = imageElement.Attribute(xlink + "href").Value;
}

Issue resolved yipee :)