How to apply styles dynamically In SPFx web part?

Introduction:

We implemented an intranet portal for a Real Estate Agency based out of Bellevue, Washington, United States. We came across a requirement to apply styles dynamically in the custom SPFx webpart based on the color selected in the property panel of the SPFx webpart. Let's see how this functionality can be achieved.

Requirement:

We need to apply the color of text based on the color selected in the property panel. In the property panel, we have added a textbox, where users can add a color code or a color name that they want as the text color.

Implementation:

We have applied the class name for the div where we are showing texts. In the CSS file, we need to define the color of the text using variables. 

The CSS will be as below:

 .ProjectTitle{  
      color: var(--projectTitleColor);  
 }  

And our HTML will be as below:

 <div className="ProjectTitle">  
      Intranet Portal       
 </div>  

As we can see, in the CSS we have used a variable for applying the color. Now we will assign the value to this variable. First, we will get the value from the text box of the property panel as below:

 var colorName = this.props.TextColor;  

Now we will use colorName variable, to assign a color to the style’s variable. 

 let div = document.createElement('style');  
 div.innerHTML = ':root {-- projectTitleColor: ' + colorName + ' }';  
 document.getElementsByTagName('head')[0].append(div);  

So here we created a new element for style and appended this element in the head element of the page.

Whatever value we assign to the variable – projectTitleColor, it will assign to the color style in the CSS file. Here in this example, we have used a CSS file, but you can also use the same steps for SCSS file as well.

Conclusion:

This is how we can apply dynamic styles. Hope this helps you!

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

How to download the InfoPath form template (XSN file) when the Library/List contains more than 5000 items?

Introduction

We implemented the migration of the InfoPath forms from SharePoint On-Premises to the SharePoint Online environment for a Postal and Parcel company based out of Melbourne, Victoria, Australia.  The first step towards migration is to download the XSN file and then we can update it as per SharePoint Online version. We can download the XSN file from SharePoint Designer but when we have more than 5000 items the SharePoint Designer does not let us navigate to the directory where the InfoPath form is stored.

So in this blog, we will learn about how to download the InfoPath form template (XSN file) when the library/List has more than 5000 items. 

Scenario 

• When we have to modify an InfoPath Form of a SharePoint list/library we download the InfoPath Form Template (XSN file) using SharePoint Designer. 
• We modify that file in InfoPath Designer and then we republish it to the SharePoint List/Library. 

Issue 

• In such situation,  when we try to navigate to the InfoPath form directory we face the restriction of SharePoint Designer as shown below. 

Solution 

• To resolve this issue, we used a different approach to download the InfoPath form template (XSN file). 

Steps to download the InfoPath form template (XSN file)

Step 1:

First, open the List/Library settings from where we need the InfoPath Form (XSN file) as shown below.  

Step 2:

• In the "Settings" click on the “Advance Settings” tab as shown below. 

Step 3:

• Now, Select “No” in the “Allow management of content types?” option. 
• When we choose this option, the “Edit Template” option will appear after the Template URL as shown below. 

By clicking on the “Edit Template”, the InfoPath form template (XSN file) will be downloaded and will be opened in the InfoPath Designer directly. 

Conclusion

This is how we can download the InfoPath form template (XSN file). Hope this helps you.

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

[Issue Resolved]: How to resolve hidden Query Fields issue in the InfoPath form?

Introduction: 

We implemented the migration of the InfoPath forms from SharePoint on-premises to the SharePoint online environment for a Postal and Parcel company based out of Melbourne, Victoria, Australia. We encountered an issue of hidden Query Fields in the process of changing the InfoPath data connections as per the SharePoint online environment.  

In this blog, we will learn about the issue and its solution that we faced while creating a new data connection to the InfoPath form. 

Scenario: 

• In this migration process, we have to create/update the data connections for the SharePoint list/library which are required for the InfoPath forms. 
  
• We faced the below issue while converting the data connections of InfoPath forms from SharePoint on-premises to SharePoint Online.  

Problem: 

• In InfoPath designer, we have to create data connections of SharePoint libraries to use it in the form. 
  
• Generally, when we create a new data connection it contains two fields: query fields and data fields. 
  
• The issue was when we created a new data connection in the InfoPath form the query fields were hidden as shown below. 

• For connecting to the “User Information List” of SharePoint online, we detected this below issue while creating the data connection.

 

Solution: 

• This issue occurred because the InfoPath form template was the "InfoPath 2007 Web browser Form Template" type. 
•  If we want to use the form to SharePoint Online environment, we need to update its type to "InfoPath 2010 Web browser Form Template". 

Steps to resolve the issue: 

Open the InfoPath form template in InfoPath designer and click on the “save as” button. 

Now choose the “InfoPath 2010 Web browser Form Template” type from the "Save as type" dropdown and save it.

 

Once we update the type of form template the issue will be resolved and we will able to create and use data connection properly. 

Conclusion: 

This is how we can resolve the hidden Query Fields issue in the InfoPath form. Hope this will help you. Good day! 

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