Соедините две веб-части на разных страницах из списка деталей UI Fabric React.

Question

Я новичок в SharePoint. У меня есть подробный список реагирования пользовательского интерфейса SharePoint на одной из моих страниц, и я создаю другую страницу, которая будет содержать другие веб-части.

Учтите, что первая страница содержит только первичные данные, и когда пользователь щелкает ссылку на первый столбец из каких-либо строк в листе рассылки, мне нужно открыть вторую страницу со всей другой подробной информацией.

Но для этого я хотел, чтобы некоторые данные были доступны на второй странице, чтобы я мог запрашивать и получать необходимые данные.

1. Вы когда-нибудь делали что-то похожее на это?
2. Каков наилучший подход для этого?
3. Действительно ли возможно передать строку запроса по ссылке?

Ниже моя первая страница подробного списка конфигурации.

export class ResultList extends React.Component<IResultListProps, {}> {
    constructor(props: IResultListProps) {
        super(props);
    }

    public render(): React.ReactElement<IResultListProps> {
        return (
            <DetailsList items={this.props.items} columns={this.getColumns()} />
        );
    }

    private getColumns(): IColumn[] {
        return [
            {
                key: 'name',
                name: 'name',
                fieldName: 'name',
                minWidth: 100,
                maxWidth: 120,
                isResizable: true,
                onRender: (item) => <a target="_blank" href="a link to the second page">{item.name}</a>
            }
        ];
    }
}

Answer 1

Я думаю, что сделал это. Вот что я делаю. Ниже мой компонент у меня на родительской странице.

Компонент главной страницы

import * as React from 'react';
import { DetailsList, IColumn, Link, Fabric } from 'office-ui-fabric-react';
import { IResultListProps } from './IResultListProps';

export class ResultList extends React.Component<IResultListProps, {}> {
    constructor(props: IResultListProps) {
        super(props);
    }

    public render(): React.ReactElement<IResultListProps> {
        return (
            <DetailsList items={this.props.items} columns={this.getColumns()} />
        );
    }

    private getColumns(): IColumn[] {
        return [
            {
                key: 'name',
                name: 'name',
                fieldName: 'name',
                minWidth: 100,
                maxWidth: 120,
                isResizable: true,onRender: (item) => <a target="_blank" href={`https://localhost:4321/temp/workbench.html?selectedName=${item.name}`}>{item.name}</a>
            }
        ];
    }
}

Здесь ссылка на локальную страницу предназначена только для тестирования, и вы должны изменить ее на странице с подробной информацией.

Детский / Детальная страница

И на моей странице подробностей веб-части машинописного файла. Я импортировал UrlQueryParameterCollection

import { UrlQueryParameterCollection } from '@microsoft/sp-core-library';

И в onInit Я получаю значение следующим образом.

protected onInit(): Promise<void> {
    return super.onInit().then(() => {
      let queryParameters = new UrlQueryParameterCollection(window.location.href);
      let name = queryParameters.getValue("name");
      alert(name);
    })
  }

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

Надеюсь, поможет.