ViewPicker - New control added for 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	What is it used for?
context (Mandatory)	Context of the current web part
className (Not mandatory)	If provided, additional class name to provide on the dropdown element.
deferredValidationTime (Not mandatory)	Custom Field will start to validate after users stop typing for deferredValidationTime milliseconds. Default value is 200.
disabled (Not mandatory)	Whether the property pane field is enabled or not.
filter (Not Mandatory)	Filter views from Odata query
label (mandatory)	Property field label displayed on top
listId (Not mandatory)	The List Id of the list where you want to get the views.
placeholder (Not mandatory)	Input placeholder text. Displayed until option is selected.
orderBy (Not mandatory)	Specify the property on which you want to order the retrieve set of views. orderBy viewId and by title
selectedView (Not Mandatory)	Initial selected view of the control.
showBlankOption (mandatory)	Whether or not to show a blank option. Default false.
viewsToExclude (Not mandatory)	Defines view titles which should be excluded from the view picker control.
webAbsoluteUrl (Not mandatory)	Absolute Web Url of target site (user requires permissions).
onViewPickerPropertyChange (Mandatory)	Defines a change function to raise when the selected value changed.
onViewsRetrieved (Not mandatory)	Callback that is called before the dropdown is populated.

Screens

Below is the implementation of the control

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

• The onViewPickerPropertyChange change event returns the selected view(s) and can be implemented as follows:

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

Below is the screen of the control from workbench

Below are the sample screen of the list views.

Below are the views which are fetched in the control

//Nishkalank Bezawada

[AJIXuMuK]

Thank you @NishkalankBezawada for the great addition!

[AJIXuMuK]

Sorry - reverted back the merge.
I will provide review details

[AJIXuMuK]

Also please add documentation in docs folder similarly to all other controls

[NishkalankBezawada]

Hey Alex @AJIXuMuK, Thanks for update and comments. Shall i create a new PR to add the documentation for this control. Kindly suggest.

Thanks,
Nishkalank

[NishkalankBezawada]

Hello Again @AJIXuMuK , I have done the necessary changes and have created a new PR - 1519

But this shows me the branch i used has conflicts, and i am not able to resolve it since i dont have write access. Kindly help in this issue.

Thanks,
Nishkalank