0

I am working on a scenario where we have a top level SP online site 'Top1' and it has subsites for each department say dept1,dept2,dept3.Each department has specific request list and and respective task list. Now over the top site I have to create a SPFX react based web part which will display all the subsites as kind of boxes and when I click on any box it should display respective site's requests and again when I click on any request id ,its associated tasks will be displayed. So here the intension is to make REST API call to fetch the data and display for the sites/request id user has clicked.

Now I am able to display all the boxes[sites] over the web part now. As I am new to react unable to understand the approach of appending another component underneath the box with dynamic data for any box user clicks. This looks something like nested components and again each site/box will have similar behavior.so, don't understand how to maintain the state for each site/requests/tasks.

import * as React from 'react';
import styles from './Requests.module.scss';
import { IRequestsProps } from './IRequestsProps';
import { escape } from '@microsoft/sp-lodash-subset';
import * as jquery from 'jquery';
export interface IRequestsState{
  items:[{
    Title:"",
    Description:"",
    TestID:"",
    TaskID:""
  }];
  DistributedLists:[{
    LabTitle:"",
    SiteUrl:"",
    TestListTitle:"",
    TaskListTitle:""
  }];
}


export default class Requests extends React.Component<IRequestsProps,IRequestsState > {
  public constructor(props:IRequestsProps,state:IRequestsState){
    super(props);
    this.state={
      items:[{
        Title:"",
        Description:"",
        TestID:"",
        TaskID:""
      }],
      DistributedLists:[{
        LabTitle:"",
        SiteUrl:"",
        TestListTitle:"",
        TaskListTitle:""
      }]
    };
  }
  public componentDidMount(){
    setTimeout(() => {
      this.readConfiguedJSON();
    }, 1000);
    
  }
  private readConfiguedJSON(){
    var jsonstring=`${this.props.ConfigurationText}`;
    if(jsonstring !="" && jsonstring!=null){
      console.log(jsonstring);
      var ditributedListInformation=JSON.parse(jsonstring);
      console.log(ditributedListInformation);
      var reactObj=this;
      reactObj.setState({
        DistributedLists:ditributedListInformation
      });
    }
  }
  private generateRandomUniqueId(){
    return (Math.floor(100000 + Math.random() * 900000));
  }
  private getTestDataDetails(){
    alert("clicked");
  }
  public render(): React.ReactElement<IRequestsProps> {
    return (
      <div className={styles.panelStyle} >
          <div className={styles.tableStyle} >
          <div className={styles.headerStyle} >
          {this.state.DistributedLists.map((list,key)=>{
              var uniqueid=this.generateRandomUniqueId();
              return (<div className={styles.rowStyle} id={uniqueid.toString()} key={key} >
                      <div className={styles.CellStyle}>{list.LabTitle}</div>
                      <button onClick={()=>{this.getTestDataDetails();}} data-relatedrowid={uniqueid.toString()} className={styles.buttonstyle}>More Details...</button>
                      <div className={styles.rowStyle} test-panelid={uniqueid.toString()}>
                        <div className={styles.rowStyle} task-panelid={uniqueid.toString()}></div>
                      </div>
              </div>);
            })}                     
          </div>
          </div>
        </div>
    );
  }
}

In above code the web part is having a property called this.props.ConfigurationText takes input as a Jason string with site/department URL. Each department has similar requests list structure and task list structure along with list titles.

Please guide me here to achieve the target.

Thanks in advance!

1 Answer 1

0

You can pass the parameters you want to the getTestDataDetails function, like:

export default class OfficeUispfx extends React.Component<IOfficeUispfxProps, any> {
  constructor(props) {
    super(props);
    this.state = {
      items: []
    }
  }

  public render(): React.ReactElement<IOfficeUispfxProps> {
    return (
      <div className={styles.officeUispfx}>
        {this.state.items.map((list, key) => {

          return (<div key={key} >    
            <button onClick={() => { this.getTestDataDetails(list["Title"]); }} className={styles.button}>More Details...</button>    
          </div>);
        })}

      </div>
    );

  }
  getTestDataDetails(s: string) {
    console.log(s)
  }
   
  public componentDidMount() {
    sp.web.lists.getByTitle("11/25").items.get().then(r => {
      this.setState({ items: r })
    })

  }

}

Then you can use the value of each list in getTestDataDetails function.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.