Create file on SFTP server using Web Service and Rest API from SharePoint Online

Sometimes, we need to deal with third party tools/applications from SharePoint Online. To deal with third party tools/applications, we may need a medium like SFTP server to pass data from SharePoint Online to third party tools/applications. In this blog, we are going to showcase - how to create xml/text file on SFTP server from SharePoint Online.

First, let's understand what's SFTP server and how it can be used to transfer data from SharePoint Online.

What is SFTP server?

SFTP - Secure File Transfer Protocol server, is popular method of transferring files between two remote systems over a secure connection. In this blog, we will see how to transfer data from one remote server (SharePoint Online) to another remote server (Workday).

Create file on SFTP server using Rest API & Web Service in SharePoint Online:

We can follow below steps to create file on SFTP server:

Step 1: Create a page in SharePoint Online and add custom button using HTML and JavaScript file. On Custom button click event, JavaScript file would call web service to create file on SFTP server.

Step 2: Create a web service (c#) using Visual studio.

• Install “SSH.NET” package to deal with the SFTP server.
• Find below code to connect SFTP server.

var client = new SftpClient("Server URL", "User Name", "Password");
client.Connect();

• Then, stores incoming data into memory.

byte[] bArray = Encoding.UTF8.GetBytes(dataURL);
var memory = new MemoryStream(bArray);

• Now, Upload/Create a file on SFTP server.

client.UploadFile(memory, "/Folder path /File Name", null);

• At the end, close the connection with SFTP server.

client.Disconnect();
client.Dispose();

• The complete code for SFTP server integration is as below:

[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]   
public string UploadFileToFTP(string data)
{
     var client = new SftpClient("Server URL", "User Name", "Password");
     client.Connect();
     byte[] bArray = Encoding.UTF8.GetBytes(dataURL);
     var memory = new MemoryStream(bArray);
     client.UploadFile(memory, "/Folder path /File Name", null);
     client.Disconnect();
     client.Dispose();
}

Step 3: Publish this web service on Microsoft Azure platform.

Step 4: Add following code to JavaScript reference file in SharePoint Online. In this step, we would get data from SharePoint Online list and pass data to web service to create file on SFTP server.

function MoveFileToSFTP()
{
     var DataURL = "'ServerURL'/FTPFileUpload.asmx/UploadFileToFTP";
     var request = new XMLHttpRequest();
     var Data = JSON.stringify(data);
     var params = "data="+Data+"";
     request.open('POST', DataURL, true);
     request.onreadystatechange = function() {
        var responsetext = request.responseText;
 if (request.readyState==4)
 {
    alert("File has been created successfully on SFTP server.");
 }
     };
     request.setRequestHeader("Content-type", "application/x-www-  form-urlencoded");
     request.setRequestHeader("Content-length", params.length);
     request.setRequestHeader("Connection", "close");
     request.send(params);
}

This way, we can upload files to SFTP from SharePoint Online programmatically.

If you have any questions you can reach out our SharePoint Consulting team here.

Resolution: Open term is not allowed in PnP Taxonomy Picker control

Requirement:
We need to create a custom modern form which includes taxonomy picker control allowing Open Term. User should be allowed to add fill-in values - inserting new term on the fly.

Approach:
To meet above requirements, i've used PnP Taxonomy Picker control for SPFx.
https://sharepoint.github.io/sp-dev-fx-controls-react/controls/TaxonomyPicker/

Steps to add in Solution:
Import modules as below:

• import { TaxonomyPicker, IPickerTerms } from "@pnp/spfx-controls-react/lib/TaxonomyPicker";

Use taxonomy picker control as below:
<TaxonomyPicker allowMultipleSelections={true}
                termsetNameOrID="Countries"
                panelTitle="Select Term"
                label="Taxonomy Picker"
                context={this.props.context}
                onChange={this.onTaxPickerChange}
                isTermSetSelectable={false} />

Limitation:
A limitation with this control is, it does not allow to fill-in values.

Resolution:
Finally, i've utilized another control that allows to add a new term is delaware Digital Workplace React Fabric Taxonomy picker.
https://www.npmjs.com/package/@dlw-digitalworkplace/react-fabric-taxonomypicker

Use below command to install npm package in your solution.

• npm i @dlw-digitalworkplace/react-fabric-taxonomypicker

Import module as below:

• import { TaxonomyPicker } from "@dlw-digitalworkplace/react-fabric-taxonomypicker";

Use taxonomy picker control as below:

<TaxonomyPicker
  title="Select your demo data"
  absoluteSiteUrl={this.props.absoluteSiteUrl}
  label="Demo picker"
  termSetId={this.props.termSetId}
  rootTermId={this.props.rootTermId}
  itemLimit={this.props.itemLimit}
  allowAddTerms={true}
  lcid={this.props.lcid}
  showTranslatedLabels={this.props.showTranslatedLabels}
  isLoading={false}
/>

Now, when user types in new term and press enter key, it will automatically create a new term in your selected term set id.

If you have any questions you can reach out our SharePoint Consulting team here.