European Sharepoint 2013 Hosting Blog
Articles about European Sharepoint Hosting Service
SharePoint Hosting – How To Trigger MS Flow From SPFx Web Part And Return Result Back To SPFx Web Part?
Sep 15th
In this article, we will learn how can we call MS Flow from the SPFx web part and have MS Flow return the result back to the SPFx web part.
There was a third-party API, which we were not able to access from the SPFx web part because of some security reasons. API was access
ible from MS Flow. So, we call API from MS Flow, triggered MS Flow from the SPFx web part, and return the result back to the SPFx web part.
Implementation – Set up MS Flow
Follow the below steps,
Step 1
Go to https://flow.microsoft.com/.
Step 2
Click on My Flows from the left panel and click on the New flow dropdown. Select the Instant cloud flow option as shown below screenshot.
Step 3
Now select When an HTTP request is received option and click on Create button.
Step 4
Now enter the request body in the JSON format for the parameters you need to pass from the SPFx web part.
Here I have copied sample JSON schema,
Step 5
Now click on the add action button and add HTTP action.
Step 6
We will use HTTP action to call our third-party API. Now select Method, add URI, add headers and body in HTTP action.
Step 7
Now click on add new action for compose as shown in the below screenshot.
Step 8
Now in a compose action, select body from HTTP action as shown in the below screenshot.
Step 9
Now add a new action for the response.
Step 10
In a response action, select values as below,
Step 11
Now save the flow. Once you save the flow, you will be able to see the URL in the first action. Copy this URL, we will use this URL in our SPFx web part to trigger flow:
Setup SPFx web part
Follow the below steps,
Here my web part’s name is Projects,
Step 1
In the props.ts file of your SPFx web part, declare a new property for context.
Step 2
Now in the projectsWebPart.ts file, assign current context to context property as below,
Step 3
Now in a projects.tsx file, we will trigger flow and get the response. So to call a flow, we will prepare a JSON string which we will use as a parameter while calling flow. In our flow above, we have two parameters, FromDate and ToDate. So we will generate a JSON string as below:
Step 4
Then we will create a header as below,
Step 5
Now we will use post request using context.httpClient.post and use the URL which we get from flow as API.
Here is the final code to trigger flow and get the result as a response,
Step 6
The above method will return the response from the MS Flow.
Conclusion
This is how we can trigger MS Flow from the SPFx web part and return the result back to SPFx we part. I hope this article will be helpful for you!
SharePoint Hosting – Copy Modern Page Within The Folder Using JSOM
Sep 9th
In this blog, we are going to discuss how to copy a modern page within the same folder of a site collection. You can do it manually or programmatically. Follow the below steps to copy a client-side page.
How to Copy a page manually?
Go to your site’s Site Pages. Select a page.
Click on “Three dots” to present the right side of a page as shown below. Then click on “Copy to”.
A pop-up will open, select the Folder, then click on “Copy here”.
How to Copy a Modern page programmatically using JavaScript
Follow the below JavaScript code to copy a modern page in the same folder of a site collection.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
var fileLibName = “home.aspx”; var newFileName = “Test.aspx "; var fileContentUrl = < enter your siteUrl > +"/_api/web/GetFileByServerRelativeUrl('" + fileName + "')/$value"; var restUrl = < enter your siteUrl > +"/_api/web/GetFolderByServerRelativeUrl('" + folderName + "')/Files/Add(url='" + newFileName + "',overwrite=true)"; $(function() { $.ajax({ url: < enter your siteUrl > +"/_api/contextinfo", type: 'POST', processData: false, headers: { "Accept": "application/json; odata=verbose", "X-RequestDigest": $('#__REQUESTDIGEST').val(), }, success: successHandler, error: errorHandler }) }) function successHandler(data, textStatus, jqXHR) { var digest = data.d.GetContextWebInformation.FormDigestValue; var xhr = new XMLHttpRequest(); xhr.open('GET', fileContentUrl, true); xhr.setRequestHeader('binaryStringResponseBody', true); xhr.responseType = 'arraybuffer'; xhr.onload = function(e) { if (this.status == 200) { var arrayBuffer = this.response; $.ajax({ url: restUrl, method: 'POST', data: arrayBuffer, processData: false, headers: { 'binaryStringRequestBody': 'true', 'Accept': 'application/json;odata=verbose;charset=utf-8', 'X-RequestDigest': digest } }).done(function(postData) { Console.log(“Copied successfully”); }).fail(function(jqXHR, errorText) { Console.log(“Error”); }); } } xhr.send(); } function errorHandler(xhr, ajaxOptions, thrownError) { var msg = "FAILED: " + xhr.responseText; console.log(msg); } |
The original page
The copied Page
We can conclude that this copy feature will help a user copying a page with all the contents present inside the page. Hence, we have done it programmatically to make this easier and more effective.
SharePoint Hosting – Common CSS for multiple SPFx Web Parts
Sep 2nd
A SharePoint Framework (SPFx) solution may contain multiple web parts. In real-world scenarios, it does include numerous web parts and extensions. In most cases, we need to apply a common look and feel to all of these components.
In this article, we will explore how to share a CSS between multiple SPFx components (e.g. web parts and extensions).
Why common CSS?
As we develop the SPFx web part (I am taking an example of the React-based web part), we keep adding multiple React components to it each handling a specific business component. Each component has got its own SCSS to apply styling to the component.
As we place SPFx components on the SharePoint page, they should have a common look and feel. E.g., a boxed border for all web parts, a web part heading, and text with a certain font, size, and color, etc. To render these common requirements, we should have a common CSS that can be shared by all React components and other web parts (and their React components) as well.
Development Approach
I have seen a common practice by various developers to write a common CSS (for e.g. common.css file) and upload it to Style library of SharePoint site.
This common.css file is then injected on each SharePoint site using SPFx extension application customizer using SPComponentLoader.loadCss something like below:
The SPFx web part component can then assume the existence of above pre-loaded CSS and use the css classes as below:
I will not argue here if it is the correct approach and I will leave it up to individuals by respecting their approach.
Shared CSS approach
We can have a folder named Shared and a file as shared.module.scss
Update the web part css to use the Shared css. (For e.g., src\webparts\commonCssDemo\components\CommonCssDemo.module.scss)
Update the web part’s render method to use the shared css class.
This shared CSS can be used by all components in the SPFx solution.
Benefits of Shared CSS
Below are the benefits of using shared CSS:
- All CSS can be controlled at a centralized location
- Lesser maintenance
- Individual web part/component does not need a CSS update
SharePoint Hosting – How To Create Item In Folder Of SharePoint List
Aug 26th
In this blog, we will learn how we can create items in a folder of the SharePoint list.
Follow the below steps to create an item in the folder.
Steps
Step 1
First, we will create JSON for the data parameter of POST call as below,
- Here path will be the server relative path of the list folder in which we want to create an item.
- In the above JSON, the list name is Projects and there is one folder created with the name Internal.
Step 2
We will also define 2 other variables for site URL and list name.
Here I have created a property for context and assign value to context property as below,
Step 3
Now we will create a URL for API as below,
Step 4
Now we will create a separate method to create an item, so we can also reuse it,
Step 5
As we are doing the POST call to create an item, we need a request digest. So, we will get a request digest from context as below.
We will import libraries to get the request digest as below,
Then we can get the request digest and use it in our POST call to create an item,
In the above code, we can see, after getting the value of the request digest we have to call our method to create the item. So we will call this method as below,
Conclusion
This is how we can create items in a folder of the SharePoint list. Hope this blog will be helpful!
SharePoint Hosting – The Underlying Connection Was Closed: An Unexpected Error Occurred
Aug 19th
SharePoint Provider Hosted
The underlying connection was closed: An unexpected error occurred on a send. Unable to read data from the transport connection: An existing connection was forcibly closed by the remote host. An existing connection was forcibly closed by the remote host.
Recently, I was getting this error while deploying the SharePoint Provider hosted app in the Azure app service.
Exact Error
The underlying connection was closed: An unexpected error occurred on a send. Innerer Exception System.IO.IOException: Unable to read data from the transport connection: An existing connection was forcibly closed by the remote host. —> System.Net.Sockets.SocketException: An existing connection was forcibly closed by the remote host
at System.Net.Sockets.Socket.Receive(Byte[] buffer, Int32 offset, Int32 size, SocketFlags socketFlags)
at System.Net.Sockets.NetworkStream.Read(Byte[] buffer, Int32 offset, Int32 size)
Then, I started debugging locally with username and password and still getting errors while generating token as shown,
Token request failed. Innerer Exception System.Net.WebException: The remote server returned an error: (401) Unauthorized.
at System.Net.HttpWebRequest.GetResponse()
at Microsoft.IdentityModel.S2S.Protocols.OAuth2.OAuth2WebRequest.GetResponse()
at Microsoft.IdentityModel.S2S.Protocols.OAuth2.OAuth2S2SClient.Issue(String securityTokenServiceUrl, OAuth2AccessTokenRequest oauth2Request)
The above error message gave me some hints and the issue is related to security protocol.
Solution: After a bit of research, I found that this error was happening only in older applications. This can be fixed by updating the security protocol.
We need to add the following code before doing authentication or generating tokens.
We can add this line of code just before the authentication part as shown.
Alternatively, for manual authentication (sample).
However, if you are creating the provider-hosted app with the latest version, then this issue has already been fixed.
SharePoint Hosting – Providing Everyone Access In SharePoint Online
Aug 12th
Most of the time we want to provide access to all the users not only internal users but externals as well in SharePoint online to do this is pretty straightforward by providing “Everyone” access in the SharePoint sites. But the problem arises when the “Everyone” group is not present but “Everyone except external users” is present to bring the Everyone group back we need to run a few PowerShell commands.
In this blog, we will understand how we can get the “Everyone” group in our SharePoint Online tenant by running Few commands.
Using SPO PowerShell
To install SPO PowerShell Use the below command,
Note
If SPO PowerShell is already installed using the below command to update the Module.
To enable “Everyone” in the tenant to use the below commands,
Using PnP PowerShell
We can even use PnP PowerShell to enable “Everyone” in the tenant to use the below command to Install PnP PowerShell.
To get a specific version of PnP.PowerShell you can use -RequiredVersion parameter with the version number.
If the PnP.PowerShell is already installed you can skip the above command and just run the below command to connect to Tenant admin and enable “Everyone”.
Outcome
Conclusion
In this blog, we understood that in order to provide access to all the users in Active Directory, be it an internal or external user, if “Everyone” is not present we need to run a few commands to enable it in the Tenant Level
