Resolved: [Something went wrong.] SharePoint Modern SPFx web part is not rendering in Internet Explorer 11 browser

Introduction:

Recently working with Modern SPFx web part, we were facing issue specific to only IE11 browser and the same web-part is rendered correctly in Chrome, Firefox, Edge, and Safari browsers.

Error:

We were getting error - “Something went wrong” only in IE11 browser.

We tried to debug the written code using console and have addressed multiple errors like “undefined” and “syntax errors” by adding polyfill JS and fixed those issues, but still getting the same issue in IE 11.

After detailed analysis of the code, we have found that SPFx generates class in backend JS (ES6) as you can see in the below screenshot.

What is ES6?

ES6 refers to version 6 of the ECMA (European Computer Manufacturers Association) Script programming language. ECMA Script is the standardized name for JavaScript, and version 6 is the next version after version 5, which was released in 2011. It is a major enhancement to the JavaScript language, and adds many more features intended to make large-scale software development easier.

ECMAScript, or ES6, was published in June 2015. It was subsequently renamed to ECMAScript 2015. Web browser support for the full language is not yet completed, though major portions are supported. So, All major web browsers support some features of ES6. However, it is possible to use software known as a transpire to convert ES6 code into ES5, which has better supported on mostly all browsers.

Root cause:

This Modern SPFx web part generates ES6 features keyword like class, arrows, Destructuring, Unicode, promises, let, const, etc. Those ES6 features do not support in IE11 browser.

Solution:

In our SPFx web-part solution, we have “tsconfig.json” file and In that file, we have “target” property in “compilerOptions” object. We have set value “es6” in the “target” property. Thus, SPFx generates class, arrows, unicode, const, etc. keywords according to ES6 feature and those are not supported in IE 11 browser.

To resolve this issue, we need to downgrade “target” property from “es6” to “es5” value in “complierOptions” object.

After doing this change in “tsconfig.json” file, rebuild the web-part and deploy latest package on App catalog. SPFx webpart will be working in IE 11 browser.

Below table shows which browser supports which ECMAScript feature.

Browser	ES5 (Browser Version)	ES6 (Browser Version)	ES7 (Browser Version)
Chrome	Yes (23)	Yes (23)	Yes (68)
Firefox	Yes (21)	Yes (54)	No
IE	Yes (9*)	No	No
Edge	Yes (10)	Yes (14)	No
Safari	Yes (6)	Yes (10)	No
Opera	Yes (15)	Yes (38)	Yes (55)

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

Power Automate | Steps to manually trigger a flow from a SharePoint Library OR List

Introduction:

In this blog, we will learn how we can manually trigger a Power Automate workflow on any SharePoint List Item or Document. The flow will be triggered whenever the user needs any action to be carried out.

Following are the detailed steps to create a flow. 

Step 1:  Create a new flow by clicking Create and select Instant flow. The instant flows are the one those are manually triggered.

 

Step 2:  Provide a name to the Flow and specify the trigger action you want to carry out. For the given example, we have chosen for a selected file trigger for a SharePoint file.

Step 3:  For the Action, mention the Site Address and Library Name where you want the Flow to be executed.

                             

Step 4:  Select an action you want to perform for the Flow and then Save it. For this example, we have added a Send an email action along with it. So it would send a mail every time the flow runs.

                                                     

Now, to execute the flow through SharePoint Library, Follow the below steps for a selected file.

Go to the SharePoint Library you've mentioned while creating the Flow.

Step 1:  Click the Ellipse button on any file in Library.

                  

Step 2:  Select Automate and select the flow that we've created.

                                        

Step 3: Select Run Flow.

 

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

How to clear Office UI Fabric multi-select dropdown in SPFx webpart with React Framework?

Scenario:

We implemented a webpart using SharePoint Framework (SPFx) that includes the filter functionality. As per the requirement, we have one dropdown that allows multiple options selection for filter functionality. Now when user clicks on the "Clear Filter" button, it should clear the selection of options from the dropdown.

Below is our dropdown control with multiple items selection:

 <Dropdown  
  multiSelect  
  className="multiSelectDrodpown"  
  options={currentObj.state.dropdownOptions}  
  defaultSelectedKeys={this.state.selectedOptions}  
  onChanged={(val) => currentObj.filterData(val)}           
 ></Dropdown>  

Note:

• dropdownOptions state contains all the options which will be display in multi select dropdown control.
• selectedOptions is the state which contains the options which are currently selected.

Problem Statement:

• When we select the values from the multi-select dropdown control, we pass those values to defaultSelectedKeys parameter of the multi-dropdown control to show the selected values. 
• But when we clear the value of the state which we are using in defaultSelectedKeys parameter(selectedOptions state in our scenario), it does not clear the selection of multi-select dropdown.

Solution:

• To resolve this issue, we need to use the "key" parameter of the office fabric UI dropdown control and set the unique number as the value on click event of the "Clear Filter" button.
• Using a new value for key parameter means, it renders fresh control each time.
• Here, we use randomIndex state to set a new key value to generate a random number. Below is an example to use key attribute:

 <Dropdown  
  multiSelect  
  className="multiSelectDrodpown"  
  options={currentObj.state.dropdownOptions}  
  defaultSelectedKeys={this.state.selectedOptions}  
  onChanged={(val) => currentObj.filterData(val)}     
  key={this.state.randomIndex}        
 ></Dropdown>  

• Now, when user clicks the "Clear Filter" button, it will update randomIndex state and set a new random number as its value.
• Here, we are using Math.floor and Math.random()  function to generate random numbers.

 private async clearFields() {  
      await this.setState({    
          randomIndex: Math.floor(Math.random() * 6) + 1          
       });  
 }  

Conclusion:

This is how we can clear the value of multi-select dropdownlist in SharePoint Framework (SPFx).

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