Connect two web parts in different pages from UI Fabric React Detail list

Question

I am a newbie in SharePoint. I have a SharePoint UI Fabric react detail list in one of my page, and I am creating a different page which will contains other web parts.

Consider that the first page contains only the primary data and when the user clicks on the first column link from any rows in the detaillist, I need to open the second page with all the other detailed information.

But to do so, I wanted some of the data to be available in the second page so that I can query and get the needed data.

Have you ever done anything similar to this.
What would be the best approach to do this?
Is it really possible to pass the query string from a link?

Below is my first page detail list configuration.

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>
            }
        ];
    }
}

score 0 · Accepted Answer · answered Oct 10 '18 at 13:11

I think I have done that. Here is the things I am doing. Below is my component I have in the parent page.

Main page component

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>
            }
        ];
    }
}

Here the local page link is just for testing and you should change it your detail page link.

Child/Detail page

And on my detail page web part typescript file. I had imported the UrlQueryParameterCollection

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

And in onInit I am getting the value as follows.

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

And from here I can start writing APIs to fetch the required data and design my page.

Hope it helps.

Connect two web parts in different pages from UI Fabric React Detail list

1 Answers1