New Control - ViewPicker - Fixing Issue 1439

[NishkalankBezawada]

Q	A
Bug fix?	[ ]
New feature?	[x]
New sample?	[ ]
Related issues?	fixes #1439

What's in this Pull Request?

Added a new control 'ViewPicker' which enables to select the list views just like ListPicker, SitePicker, FieldPicker controls

Properties used

Property	Type	Required	Description
context	BaseComponentContext	yes	The context object of the SPFx loaded webpart or customizer.
className	string	no	If provided, additional class name to provide on the dropdown element.
disabled	boolean	no	Whether or not the view picker control is disabled.
filter	string	no	Filter views from Odata query.
label	string	no	Label to use for the control.
listId	string	no	The List Id of the list.
placeholder	string	no	Placeholder label to show in the dropdown.
orderBy	Enum	no	How to order the set of views (By ID or Title).
selectedView	string OR string[]	no	Keys(View Ids) of the selected item(s). If you provide this, you must maintain selection state by observing onSelectionChanged events and passing a new value in when changed.
multiSelect	boolean	no	Optional mode indicates if multi-choice selections is allowed. Default to false.
showBlankOption	boolean	no	Whether or not to show a blank option. Default to false.
viewsToExclude	string[]	no	Defines view titles which should be excluded from the view picker control.
webAbsoulteUrl	string	no	Absolute Web Url of target site (user requires permissions)
onSelectionChanged	(newValue: string OR string[]): void	no	Callback function when the selected option changes.

Screens

Below is the implementation of the control

    <ViewPicker context={this.props.context}
        listId={"9f3908cd-1e88-4ab3-ac42-08efbbd64ec9"}
        placeholder={'Select list view(s)'}
        orderBy={orderBy.Title}
        multiSelect={true}
        onSelectionChanged={this.onViewPickerChange} />

• The onSelectionChanged change event returns the selected view(s) and can be implemented as follows in your webpart:

  private onViewPickerChange = (views: string | string[]) => {
    console.log("Views:", views);
  }

Below is the screen of the control from workbench

Below is the screen of the control in single selection mode

Below is the screen of the control in multi selection mode

Below are the sample screen of the list views.

//Nishkalank Bezawada

[joelfmrodrigues]

@NishkalankBezawada we merged a PR that makes the test control much simpler, but this means that your PR now has conflicts.
Could you please sync your branch and resolve the ControlsTest conflicts? In summary, the visibility of each control is now controlled by a switch that is associated with a state property, and the controls are only displayed if the user toggles the switch. Should be easy to update by just copying the test control you added and adding it again to the latest version of the ControlsTest.tsx file

Let me know if you run into issues

[NishkalankBezawada]

Hello @joaojmendes

I have now merged the conflicts on my repo.

Thanks,
Nishkalank

[NishkalankBezawada]

Hello @joelfmrodrigues,

As per your suggestion, i have modified the component, and added my control to it. It works with my branch now.

Thanks,
Nishkalank

[joelfmrodrigues]

@NishkalankBezawada Sorry for the very long delay that the entire process took and for all the updates you did along it. This is now merged 🙂

[NishkalankBezawada]

@NishkalankBezawada Sorry for the very long delay that the entire process took and for all the updates you did along it. This is now merged 🙂

Thanks @joelfmrodrigues This was long awaited one ☺️.