I am trying to clear PnP People piker control programmatically in SharePoint online spfx webpart, I am using a simple form with save and cancel button, which save data in List, on the Cancel button I want to clear PeoplePicker value
<PeoplePicker
context={this.props.context}
personSelectionLimit={1}
groupName=""
showtooltip={false}
onChange={(value) => this.getPeoplePickerItems(value, "col")}
showHiddenInUI={false}
defaultSelectedUsers={this.state.ApprovarSelected}
principalTypes={[PrincipalType.User]}
ensureUser={true}
/>
OnChange Event
private getPeoplePickerItems(items: any[], col) {
if (items.length > 0) {
this.state.ListItem.Approvar = { id: items[0].id, secondaryText: items[0].secondaryText, text: items[0].text };
}
else {
this.state.ListItem.Approvar = { id: '', secondaryText: '', text: '' };
}
}
Cancel button
public onClickCancel() {
this.setState({ ApprovarSelected:[]});
}
I am changing state while clicking on the Cancel button, but somehow it is not working, can anyone help me with this?
Thanks.
I got the solution,
Add ref={c => { this.ppl = c }} in PeoplePicker control and write below code on cancel button.
this.ppl.onChange([]);
It works for me.
Related
I have to make a select menu in react but there is an extra couple functions it needs to have that I haven’t been able to find on the first 50 links of google. (I’m not googling the right thing obviously cause idk what it’s called).
Details:
A select menu that, once an item is selected, carries the item far below the select menu so that the item can be manipulated further. For example, I want to select multiple ingredients and then have them displayed on the same page, in order of selection, and then be able to enter an amount in a text field that is next to the ingredient that has been selected.
Process:
Select paprika (remove paprika from select menu because there is no need to select it again) > see paprika appear far below select menu > enter amount of paprika in text field tied to back end > repeat for other ingredients.
Any help would be greatly appreciated. Even if you just tell me what to google.
Thank you all,
Matt
I tried to write this up in JSFiddle but it was tripping out on me.... Here should be an Almost working example with the same approach that Joss mentioned. I think you'll be able to get the idea from it
class Demo extends React.Component {
constructor(props) {
super(props);
this.state = {
selected: [],
};
}
select(e) {
const { value } = e.currentTarget;
let { selected } = this.state;
if(selected.contains(value)) {
selected = selected.filter((val) => val !== value);
} else {
selected.push(value);
}
this.setState({
selected,
});
}
render() {
const ret = []; //Just using this to map over to create options
for(i = 0; i < 5; i++) {
ret.push(i);
}
return (
<div className="container">
{ ret.map((i)=>(
<div
onclick={this.select}
value={i}
className={this.state.selected.contains(i) ? 'selected' : null}>
{i}
</div>
)}
</div>
);
}
}
ReactDOM.render(
<Demo />,
document.getElementById('container')
);
I would have an array stored in state that would contain all selected ingredients, which would be updated each time a new ingredient is selected (using onChange). I would then simply use this array to influence what is displayed on the rest of the page.
I have a topBar with a button that toggles the Side Menu.
I have registered a navigationButtonPressed action as below
navigationButtonPressed({ buttonId }) {
switch (buttonId) {
case 'sideMenuButtonId':
Navigation.mergeOptions(this.props.componentId, {
sideMenu: {
left: {
visible: true
}
}
});
break
default:
break
}
}
But in this case, the button only makes the sideMenu visible, and Im trying to use it so it toggles the menu open and closed.
So i replaced the above with a variable approach seen below..
var sideMenuVisible = false
navigationButtonPressed({ buttonId }) {
switch (buttonId) {
case 'sideMenuButtonId':
sideMenuVisible = !sideMenuVisible
Navigation.mergeOptions(this.props.componentId, {
sideMenu: {
left: {
visible: sideMenuVisible
}
}
});
break
default:
break
}
}
Which works fine if the user only uses the button to open and closed the sideMenu, but the user can also open/close the menu by swiping to open the menu as well as tapping out the menu to close it.
Is there a way to check the visibility of the sideMenu so I can properly use an action to open/close the menu on command?
It can done much more simple.
Think you should create it as a state, because the component have to know, it should be rerendered, when the state change.
So something like
state = { isOpen: false };
toggleSidebar = () => {
this.setState({ isOpen: !isOpen })
}
And now, you should call the toggleSidebar function when you click the button
I have an iOS app developed using Xamarin. Now I am trying to migrate it to iOS 11. My problem is that none of the BarButtonItems in navigation bars are visible in any controller, yet they are functional and I can tap them.
some of those button items are set in storyboard, by adding Navigation Item into the controller. titles of those button items are also invisible. even the standard back button.
the other bar button items are set in code by SetRightBarButtonItem or SetLeftBarButtonItem. I have both custom icon buttons and system item buttons. an example for system item button is:
this.NavigationItem.SetLeftBarButtonItem(new UIBarButtonItem(UIBarButtonSystemItem.Stop, (sender, e) => { ... }), true);
and another with custom icon button:
this.NavigationItem.SetRightBarButtonItem(new UIBarButtonItem(UIImage.FromBundle("gear"), UIBarButtonItemStyle.Plain, (sender, e) => { ... }), true);
These navigation bar button items have been working without problems for a long time. how can I fix them with the new navigation bar structure in iOS 11? (I do not enable large titles in navigation bars)
Just do something like this.
var button = new UIBarButtonItem(UIImage.FromBundle("gear"),UIBarButtonItemStyle.Plain, (sender, e) => { ... });
button.SetTitleTextAttributes(new UITextAttributes()
{
TextColor = UIColor.Blue,
TextShadowColor = UIColor.Clear
}, UIControlState.Normal);
this.NavigationItem.SetRightBarButtonItem(button, true);
Is there a way to display a modal dialog when user selects a tab in TabStrip component? The code below displays window.confirm, can not get modal dialog to display.
onTabSelected(e : any){
if (!window.confirm("Continue with navigation?")) {
e.prevented = true;
}
}
The dialog is not a direct substitute for window.confirm, because it cannot block the UI thread. To substitute the window.confirm with the Kendo UI dialog, you can prevent all tab selection, and wait for the dialog result:
onTabSelected(e: any) {
e.prevented = true;
this.dialogService.open({
content: "Continue with navigation?",
actions: [
{ text: "No" },
{ text: "Yes", primary: true }
]
}).result.subscribe((result) => {
if (result.primary) {
// change tab through code
this.tabStrip.selectTab(e.index);
}
});
}
See this plunkr for a working demo.
Ended up canceling the tab selection event, showing modal dialog, and resubmitting event based on the user answer.
How to bind a button that open jPlayer in fullscren mode ?
I have a custom user button in my html:
<a onClick="javascript:$('#top_video_player').jPlayer('fullScreen');event.preventDefault();" class="button" href="#">Open in big Screen</a>
But this don't work.
I also try:
$('#top_video_player').jPlayer('option','fullScreen',true)
or
$('#top_video_player').jPlayer('option',{fullScreen:true})
also try to add class .jp-full-screen to my button ( tag ) - no effect too ):
But failed again - nothing happened
In my jPlayer initialization i bind it to "enter" button and it works - but i also need to bind another html button:
keyBindings: {
play: {
key: 32, // space
fn: function(f) {
if(f.status.paused) {
f.play();
} else {
f.pause();
}
}
},
fullScreen: {
key: 13, // enter
fn: function(f) {
if(f.status.video || f.options.audioFullScreen) {
f._setOption("fullScreen", !f.options.fullScreen);
}
}
}
},
Thanks in advance.
I have managed to do it by using:
$('#top_video').data('jPlayer')._setOption('fullScreen', true);
where 'top_video' - jplayer div id