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

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

0 голосов
/ 10 октября 2018

Я новичок в 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>
            }
        ];
    }
}

1 Ответ

0 голосов
/ 10 октября 2018

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

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

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-интерфейсы для получения требуемыхданные и дизайн моей страницы.

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

...