Обновление массива в SharePoint spfx с использованием React & PnPJS - PullRequest
Новая
       11

Обновление массива в SharePoint spfx с использованием React & PnPJS

0 голосов
/ 13 марта 2020

Я создаю веб-приложение, которое позволяет пользователю обновлять свое состояние и местоположение.

У меня есть таблица списка данных в SharePoint с именем пользователя, адресом электронной почты, состоянием (например, в Интернете, автономный или занятый), местоположение (которое является полем выбора), а также другие поля.

В веб-приложении есть только 2 разных поля выбора. Что позволяет пользователю обновлять свое состояние и местоположение.

Когда пользователь заходит на страницу на componentDidMount(), я получаю адреса электронной почты пользователя (поскольку он вошел в SharePoint), а затем фильтрую массив списка данных в просмотрите элемент для его информации (поэтому ищите его адрес электронной почты в MyList. Часть, в которой я сейчас застрял, обновляет список MyList выбранным ответом, выбранным пользователем.

Использование PnP- JS я обнаружил, что это должно быть возможно, вот две ссылки, показывающие функцию update(). https://github.com/SharePoint/PnP-JS-Core/wiki/Basic--Operations

https://github.com/SharePoint/PnP-JS-Core/wiki/Working-With: - Предметы

Мой код найден здесь: 

export default class SigninLocationWebpart extends React.Component<ISigninLocationWebpartProps, {Status: string, Location: string, userName: string, getEmail: string, selectedUser: any}> {

    constructor(props) {
        super(props);
        this.state = {
            Status: 'Online',
            Location: 'New York',
            userName: '',
            getEmail: '',
            selectedUser: {},

        };

        this.handleChangeStatus = this.handleChangeStatus.bind(this); 
        this.handleChangeLocation = this.handleChangeLocation.bind(this);   

    }

    handleChangeStatus(event) {
        const { value } = event.target;
        this.setState({ Status: value });
    }

    handleChangeLocation(event) {
        const { value } = event.target;
        this.setState({ Location: value });
    }


    private _onUpdate(event) { 
        event.preventDefault();

        //This is where I need help on updating list
        let list = pnp.sp.web.lists.getByTitle("MyList")

        //Instead of getting by ID i need to get by that selectUser array I believe
        list.items.getById(1).update({
            Status: this.state.Status, //User changing from Online to Offline
            Location: this.state.Location //User changing from New York to Los Angeles
        }).then(i => {
            console.log(i);
        });

    }       

    public componentDidMount() { 
        if (Environment.type === EnvironmentType.Local) {
        }
        else if (Environment.type === EnvironmentType.SharePoint || Environment.type === EnvironmentType.ClassicSharePoint) {

            //This gets the current users info and sets it to username and email
            sp.web.currentUser.get().then((response : CurrentUser) => {
                //console.log(response);
                this.setState({
                    userName: response["Title"],
                    getEmail: response["Email"],
                })
            })          


            //This gets the list of all all items in the list
            pnp.sp.web.lists.getByTitle("MyList").items.get().then((items: any[]) => {
                console.log(items);

                //Comparing email from sign in user and filtering items array to get that element
                var compareEmail = this.state.getEmail;
                console.log(compareEmail);

                let selectedUser =  _.filter(items, function(item) {
                    return item.Email_x0020_Address.toLowerCase() === compareEmail.toLowerCase();
                });
                console.log(selectedUser);


            });


        }
    }



    public render(): React.ReactElement<ISigninLocationWebpartProps> {
        return (

            <div className={ styles.signinLocationWebpart }>
                <h3>Hello {this.state.userName}</h3>

                <form onSubmit={this._onUpdate}>

                    <label>
                        Check In our Out
                    </label>
                    <select name="Status" value={this.state.Status} onChange={this.handleChangeStatus}> 
                        <option value="Online">Online</option>
                        <option value="Offline">Offline</option>
                        <option value="Busy">Busy</option>
                    </select>

                    <label>
                        Location
                    </label>
                    <select name="Location" value={this.state.Location} onChange={this.handleChangeLocation}> 
                        <option value="New York">New York</option>
                        <option value="Michigan">Michigan</option>
                        <option value="Los Angeles">Los Angeles</option>
                    </select>

                    <input type="submit" value="Submit" />

                </form>

            </div>
        );
    }
}

1 Ответ

1 голос
/ 13 марта 2020

Прежде всего, вместо того, чтобы получать все элементы в списке, а затем выполнять фильтрацию для текущего пользователя, вы должны получить только элемент (ы) для текущего пользователя. Как только ваш список увеличится в размерах, вы будете выполнять большие накладные расходы, извлекая все элементы.

Во-вторых, и то, что вы упоминаете в своих комментариях, заключается в том, что вам необходимо указать идентификатор элемента для обновления. Таким образом, в вашем componentDidMount после получения элемента списка для текущего пользователя сохраните этот элемент в своем состоянии. 

public componentDidMount() { 
    if (Environment.type === EnvironmentType.Local) {
    }
    else if (Environment.type === EnvironmentType.SharePoint || Environment.type === EnvironmentType.ClassicSharePoint) {

        //This gets the current users info and sets it to username and email
        sp.web.currentUser.get().then((response : CurrentUser) => {
            //console.log(response);
            this.setState({
                userName: response["Title"],
                getEmail: response["Email"],
            });

            pnp.sp.web.lists.getByTitle("MyList").items.filter("Email_x0020_Address eq '" + this.state.getEmail + "'").top(1).get().then((items: any[]) => {
                if (items && items.length) {
                    this.setState( { selectedUser: items[0] } );
                }
            });
        })          

    }
}

Затем во время обновления вы можете использовать идентификатор этого элемента для сохранения it. 

private _onUpdate(event) { 
    event.preventDefault();

    //This is where I need help on updating list
    let list = pnp.sp.web.lists.getByTitle("MyList")

    //Instead of getting by ID i need to get by that selectUser array I believe
    list.items.getById(this.state.selectedUser.ID).update({
        Status: this.state.Status, //User changing from Online to Offline
        Location: this.state.Location //User changing from New York to Los Angeles
    }).then(i => {
        console.log(i);
    });

}

Кроме того, вы захотите убедиться, что вы связываете свой обработчик представления так же, как вы делаете для своих обработчиков onchange в своем конструкторе: 

this._onUpdate = this._onUpdate.bind(this);

Я буду также добавьте, что, если вы не будете предварительно заполнять Список всеми возможными пользователями и всегда будете обновлять его новыми пользователями, было бы лучше поставить галочку в вашем _onUpdate, что если this.state.selectedUser == null || this.state.selectedUser.ID == null затем вы должны создать новый элемент (и добавить новый элемент в this.state.selectedUser) вместо обновления.

...