hi, I have groups on my tenant (Hr, Luxury, Retail, Manufacturing) and I would like to add some members that I am going to search with the people picker. How can I do?
Dear @engineer98,
Do you need to add users via the pnpjs specifically? You can try the following approach:
pnp.sp.web.siteGroups.getByName("My Group").users
.add("i:0#.f|membership|email@domain.com").then(function(d){
console.log(d)
});
in particular, I have groups that I have created on my azure, when I select the value from a dropdown, I display the group members in a list. Through the people picker I can search for all the users of my site and with the add button I should add them to the specific group selected from the dropdown.I am attaching the code below
constructor(props: ISolutionsMappingWebPartProps, state: ISolutionsMappingWebPartState) {
super(props);
this.state = { users: [], items: [], addUsers: [] };
}
public async componentDidMount(): Promise<void> {
// get all the items from a sharepoint list
var reacthandler = this;
sp.web.lists
.getByTitle("Settore")
.items.select("Title")
.get()
.then(function (data) {
for (var k in data) {
items.push({ key: data[k].Title, text: data[k].Title });
}
reacthandler.setState({ items });
console.log('List Items', items);
return items;
});
}
private async getUsers(groupName: string) {
let grp = await sp.web.siteGroups.getByName(groupName)();
const users = await sp.web.siteGroups.getById(grp.Id).users();
this.setState({ users: users })
console.log('Group users', users);
}
private async getUserProfileUrl(loginName: string) {
const userPictureUrl = await sp.profiles.getUserProfilePropertyFor(loginName, 'PictureURL');
return userPictureUrl;
}
private _getPeoplePickerItems(user: any[]) {
console.log('User', user);
//this.setState({ users: user[0].id });
}
private async _addusertogroup() {
sp.web.siteGroups.getByName('HR').users
.add("i:0#.f|membership|diego.maradona@giannibernaudo.onmicrosoft.com")
.then(function (result) {
console.log('User added',result)
});
}
<div className="ms-Grid-row">
<div className="ms-Grid-col ms-sm12">
<Text content="Settore" size="medium" weight="semibold" />
</div>
</div>
<div className="ms-Grid-row">
<div className="ms-Grid-col ms-sm6">
<Stack tokens={stackTokens}>
<Dropdown
defaultSelectedKey={"HR"}
placeholder="Select an option"
options={this.state.items}
styles={dropdownStyles}
onChange={(e, selectedOption) => {
this.getUsers(selectedOption.key.toString());
}}
/>
</Stack>
</div>
</div>
<div className="ms-Grid-row">
<div className="ms-Grid-col ms-sm4">
<div className={styles.workTeamContainer}>
<Text content="Team di Lavoro" size="small" weight="bold" />
<div className="ms-Grid-row">
<div className="ms-Grid-col ms-sm10">
<Stack style={{ width: "200px" }}>
<PeoplePicker
context={this.props.context}
principalTypes={[PrincipalType.User]}
personSelectionLimit={3}
groupName={""} // Leave this blank in case you want to filter from all users
showtooltip={true}
isRequired={true}
disabled={false}
ensureUser={true}
selectedItems={this._getPeoplePickerItems}
showHiddenInUI={false}
resolveDelay={1000} />
</Stack>
<div className="ms-Grid-row">
<div className="ms-Grid-col ms-sm12">
{this.state.users.map(m =>
<RenderProfilePicture
loginName={m.LoginName}
displayName={m.Title}
getUserProfileUrl={() => this.getUserProfileUrl(m.LoginName)}></RenderProfilePicture>
)}
</div>
</div>
</div>
<div className="ms-Grid-col ms-sm2 ms-smPull4">
<Button
onClick={this._addusertogroup}
content="Aggiungi"
loader="Index card"
primary
/>
</div>
</div>
</div>
</div>
Dear @engineer98,
If we're talking about Azure groups, you cannot add users to it with pnp. You can do it with graph that is also included with Forms, but only if user has appropriate permissions to do so - Add members - Microsoft Graph v1.0 | Microsoft Docs
Otherwise, use Azure function or MS Power Automate.
I'm sorry, the groups reside on sharepoint (tenant) and through the code I provided you I am able to view them with related users. I would like to extend only the addition of the user to all the groups I select from the dropdown, passing the group name via getbyName not via string and the user via loginName and not address, as they are provided to me by the previous functions
Dear @engineer98,
As far as I see, you're not using SharePoint Dropdown field or our common field to select group value, but instead you've written the Dropdown field yourself. Is that the case? What is this constructor?
You should still be able to access the selected value with jQuery (just add a unique ID to your Dropdown) - Get selected value of a dropdown's item using jQuery - Stack Overflow
i don't use jquery, but react and pnp / sp as i am developing a webpart which must also go on teams. The dropdown values are retrieved from a sherpoint list. I send you the consctructor and the state
constructor(props: ISolutionsMappingWebPartProps, state: ISolutionsMappingWebPartState) {
super(props);
this.state = { users: [], items: []};
}
--------------------------------------------
import { WebPartContext } from "@microsoft/sp-webpart-base";
import { IDropdownOption } from "office-ui-fabric-react/lib/Dropdown";
export interface ISolutionsMappingWebPartProps {
description: string;
context: WebPartContext;
}
export interface ISolutionsMappingWebPartState {
users: any[];
items: IDropdownOption[];
}Dear @engineer98,
Are you using Plumsail Forms app for SharePoint? If so, jQuery should be available out of JavaScript editor - Intro to JavaScript framework of Plumsail Forms for SP — SharePoint forms
no i don'use this app. I use Visual studio code, pnp, react and spfx
Dear @engineer98,
Best to ask the general SharePoint questions on StackExchange, or in MS SharePoint community.
This community is dedicated to support and discussion around the Plumsail Forms product. We'll be happy to guide you on how it can be done using the product, as we have a rich JavaScript API for accessing fields on the form, on load and on change.