Блог

Главная - Вопросы по программированию - Рабочий пример для Graph Toolkit с использованием SharePoint spfx, реагирует и получает компонент с шаблоном

Рабочий пример для Graph Toolkit с использованием SharePoint spfx, реагирует и получает компонент с шаблоном

#reactjs #templates #sharepoint #spfx #microsoft-graph-toolkit

#reactjs #шаблоны #sharepoint #spfx #microsoft-graph-toolkit

Вопрос:

Я пытаюсь использовать Microsoft Graph Toolkit в моем решении для веб-части SharePoint spfx, а точнее, версию React (@microsoft / mgt-react).

Мне удалось импортировать пакеты, а также правильно отобразить элемент управления.

Однако сейчас я пытаюсь отобразить элементы управления на основе результата из элемента управления. Что-то вроде этого:

 const MyPerson = (props: MgtTemplateProps) => {
      const { person } = props.dataContext;
      return <Person userId={person.userPrincipalName}></Person>;
    }

И вот элемент управления:

       <Get resource={`/groups/${this.props.groupid}/members`}>
        <MyPerson template="value" />
      </Get>

Ничего не отображается.
Может ли кто-нибудь помочь мне исправить это?

Спасибо!

ОБНОВЛЕННЫЙ РАБОЧИЙ ОБРАЗЕЦ:

   public render(): React.ReactElement<IMemberListProps> {

const LoadingPerson = (props: MgtTemplateProps) => {
      return <div><Spinner size={SpinnerSize.large} label="Loading members..." /></div>;
    };

const MemberPerson = (props: MgtTemplateProps) => {
      const person = props.dataContext;
        return <div className={styles.memberRow}>
          <Person userId={person.userPrincipalName} view={PersonViewType.twolines} fetchImage={true} showPresence={true}
            personCardInteraction={PersonCardInteraction.hover} line2Property="mail"></Person></div>;
    };

    return (
      <div>
        <Get resource={`/groups/${this.props.groupId.toString()}/members/microsoft.graph.user/?$count=trueamp;$orderby=displayname`} >
          <MemberPerson template="value" />
          <LoadingPerson template="loading" />
        </Get>
      </div>
    );
}

Ответ №1:

У props.dataContext него нет свойства person, но это сам объект person, попробуйте изменить свое MyPerson определение на:

 const MyPerson = (props: MgtTemplateProps) => {
  const person = props.dataContext;
  return <Person userId={person.userPrincipalName}></Person>;
}

Комментарии:

1. Большое вам спасибо! Возможно ли также иметь шаблон «загрузка» (и, возможно, шаблон «ошибка»)? Я видел, как этого добиться в стандартных компонентах mgt, но я не могу найти никакой документации о том, как это настроить с помощью компонентов React.

2. Вы имеете в виду как часть Get компонента? Если это так, это будет похоже на то, как value определяется шаблон — просто установите template prop на loading error дочерний компонент или на него.

3. Еще раз спасибо, Никола! Мне удалось создать новый объект и отправить шаблон «загрузка». Сработало как шарм 🙂

4. Как вы можете видеть в этом коде, я пытаюсь привлечь несколько человек, использующих объект Get. Я хотел бы упорядочить их по имени. Я пытался использовать этот запрос ресурсов, но он не сортируется. Вы знаете, что может быть не так? /groups/${this.props.groupId.toString()}/members/microsoft.graph.user/?$count=trueamp;$orderby=displayname

5. @Frank-OveKristiansen, я не пробовал, но, возможно, сработало бы что-то вроде этого: — привязать MemberPerson к default шаблону ( template="default" ) — в MemberPerson шаблоне, из props.dataContext которого вы получите всю коллекцию данных, извлеченных из Graph, отсортируйте ее, а затем просмотрите ее самостоятельно, чтобы создать HTML для отображения