[Issue Resolved]: Dropdown issue with multi-select option process in SPFx

Introduction

We implemented a customized Learning Management System (LMS) in SharePoint Online using SharePoint Framework (SPFx) for a Postal and Parcel company based out of Melbourne, Victoria, Australia. As part of the requirements, we implemented a multi-select dropdown in this SPFx webpart that will be used to see Training Information based on this dropdown selection. The requirement was to filter the Training Records based on the multi-selection of this dropdown.

Issue

When the user selects multiple options in the multi-select dropdown control, it does not behave properly. It selects the first option and then when we choose another option, in the back-end it adds the selected option to the array but in the output screen, it deselects the first option and selects the other option. So, in this blog, we will learn how to resolve this multi-select dropdown issue.

Scenario

• As per the requirement, we have two dropdowns that allow multiple option selections for the filter functionality.
• Below is one of the multi-select dropdown control for Training filtration :

 <div className={styles.InsideFilter}>  
  <label className={styles.Lable}>Select Training</label>  
     <Dropdown  
      placeholder=”Select”  
      multiSelect  
      selectKeys={this.state.selectedTraining}  
      onChanged={(e) => this.onTrainingChange(e)}  
      options={this.state.trainingDropdownOption}  
     />  
 </div>  

Below are the “dropdown” class properties:

• The “selectKeys” property contains all the selected options which a user has selected.
• The “options” property contains all the options which a user can select from the dropdown.
• The “onChanged” property contains a method that will execute whenever the user will select/ deselect an option.

Solution

• To resolve the multi-select dropdown selection issue, we added a map function to the array "selectedTraining" in the “selectKeys” property.
• This map function will add every selected element to the "selectedTraining" array in the "selectKeys" property.

 <div className={styles.InsideFilter}>  
 <label className={styles.Lable}>Select Training</label>  
     <Dropdown  
      placeholder=”Select”  
      multiSelect  
      selectKeys={this.state.selectedTraining.map((item) => item)}  
      onChanged={(e) => this.onTrainingChange(e)}  
      options={this.state.trainingDropdownOption}  
     />  
 </div>  

So, now when we select or deselect any option, it will affect the output screen immediately.

Conclusion

This is how we can use the multi-select drop-down control with multi-selection in SPFx web part. Hope this will help you. Good day!

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

Column formatting in SharePoint Modern List View

Requirement:

While working with one of SharePoint Modern UI project, there was requirement to display Reminder Date with red background color in  default List View, if it is due within next 7 days from today.

Challenge: 

JS link is the one way to meet the requirement. But in OOTB Modern List view, there isn't any option to reference JS link in Miscellaneous section which is available in Classic view.

Solution:

Using Column Formatting option, we've achieved the desired results. You can find this option while editing the column as shown in below screenshot.

Here, we need to write JSON code to format the field value. Here is code snippet to display "Reminder Date" field with red background and text color in white.

{

  "$schema": "http://columnformatting.sharepointpnp.com/columnFormattingSchema.json",

  "elmType": "div",

  "debugMode": true,

  "txtContent": "@currentField",

  "style": {

       "color":  "=if([$Reminder_x0020_Date] <= @now+604800000, if([$Reminder_x0020_Date]                            >= @now,'#ffffff',''), '')",

"background-color":"=if([$Reminder_x0020_Date]<= @now+604800000,if([$Reminder_x0020_Date] >= @now,'#ff0000',''), '')" }

}

Note: 604800000 is in millisecond, equals to 7 days.

Output: Date column will be rendered in default list view as per below screenshot.

Limitation:

• It will not work with SharePoint Online Classic View.
• If formatting of the column is based on value of another column from the list, than that column must be available in List View.

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