0

I need to create a Web-Part, where it shows all items from one list and if you expand the item, you see all items from another list which are connected to the first one and so on. So f.e. I got a list with companies, work-sites and departments. Now I need the overview of all companies as a list. If you expand one company, it will show all work-sites, connected to the company and if you expand a work-site, all departments in it will show. So like a tree view for folders but with connected lists. I have LookUp Fields in the work-site list referring to the company and in departments referring to the work-site. Is this possible? I tried out what I've found after googleing a bit but I'm really new into this stuff, so it is hard to understand most of the complex this.

Anyways, any help would be welcome!

Thanks in advance! Fanki

Edit: here is the code I currently have:

import { Version } from '@microsoft/sp-core-library';
import {
  BaseClientSideWebPart,
  IPropertyPaneConfiguration,
  PropertyPaneTextField
} from '@microsoft/sp-webpart-base';
import { escape } from '@microsoft/sp-lodash-subset';

import styles from './Helloworld2WebPart.module.scss';
import * as strings from 'Helloworld2WebPartStrings';
import {
  SPHttpClient, SPHttpClientResponse} from '@microsoft/sp-http';

import {
  Environment,
  EnvironmentType
  } from '@microsoft/sp-core-library';
import { StringRepresentable } from 'lodash';


export interface IHelloworld2WebPartProps {
  description: string;
}
export interface ISPLists {
  value: ISPLists[];
}
export interface ISPListsAR {
  value: ISPListsAR[];
}

export interface ISPLists {
  Title: string;
  Id: string;
}
export interface ISPListsAR {
  Title: string;
  Id: string;
  FLook: string;
}
let htmlü: string =''; 

export default class Helloworld2WebPart extends BaseClientSideWebPart<IHelloworld2WebPartProps> {
  private _getListData(): Promise<ISPLists> {
    return this.context.spHttpClient.get(this.context.pageContext.web.absoluteUrl + `/_api/web/lists/GetByTitle('Firmen')/items`, SPHttpClient.configurations.v1)
      .then((response: SPHttpClientResponse) => {
        return response.json();
      });
   }

   private _getListData2(): Promise<ISPListsAR>{
     return this.context.spHttpClient.get(this.context.pageContext.web.absoluteUrl + `/_api/web/lists/GetByTitle('Arbeitsstätten')/items`, SPHttpClient.configurations.v1)
      .then((response:SPHttpClientResponse)=>{
        return response.json();
      });
   }


   public _renderList(items: ISPLists[]): void {
    let html: string = '';
    items.forEach((item: ISPLists) => {
      html += `
    <ul class="${styles.list}">
    <li class="${styles.listItem}">
    <a href="[Link to Page]" target="_blank">${item.Title}</a>
    `;
    });


    //const listContainer: Element = this.domElement.querySelector('#spListContainer');
    //listContainer.innerHTML = html;
    htmlü = html;

  }

  private _renderList2(items: ISPListsAR[]): void {

    let htmltemp: string ='';
    items.forEach((item: ISPListsAR)=>{
    htmltemp += `
    <ul class="${styles.list}">
    <li class="${styles.listItem}">
    <a href="[Link to Page]" target="_blank"> ${item.Title}</a>
    </li>
    </ul>
    </li>
    </ul>
    `;
    });
    htmlü +=htmltemp;
    const listContainer: Element = this.domElement.querySelector('#spListContainer');
    listContainer.innerHTML = htmlü;}

  private _renderListAsync(): void {

     if (Environment.type == EnvironmentType.SharePoint || 
              Environment.type == EnvironmentType.ClassicSharePoint) {
      this._getListData()
        .then((response) => {
          this._renderList(response.value);
        });
        this._getListData2()
        .then((response) => {
          this._renderList2(response.value);
        });
    }
  }





  public render(): void {
    this.domElement.innerHTML = `
      <div class="${ styles.helloworld2 }">
        <div class="${ styles.container }">
          <div class="${ styles.row }">
            <div class="${ styles.column }">
              <span class="${ styles.title }">Welcome to SharePoint!</span>
              <p class="${ styles.subTitle }">Customize SharePoint experiences using Web Parts.</p>
              <p class="${ styles.description }">${escape(this.properties.description)}</p>
              <p class="${styles.description}">Loading from ${escape(this.context.pageContext.web.title)}</p>
              <a href="https://aka.ms/spfx" class="${ styles.button }">
                <span class="${ styles.label }">Learn more</span>
              </a>
            </div>
          </div><div id="spListContainer">
          </div>
        </div>
      </div>`;
      this._renderListAsync();

  }

  protected get dataVersion(): Version {
    return Version.parse('1.0');
  }

  protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
    return {
      pages: [
        {
          header: {
            description: strings.PropertyPaneDescription
          },
          groups: [
            {
              groupName: strings.BasicGroupName,
              groupFields: [
                PropertyPaneTextField('description', {
                  label: strings.DescriptionFieldLabel
                })
              ]
            }
          ]
        }
      ]
    };
  }
}
  • Hey, thanks for your answer! But since I'm relatively new to the topic, I can't change the code from the link you gave me to show list items in a tree view. I need all items from the first list and expandable to show the list below and so on. Is this possible? I have achieved to show the items from one list but I can't get it to work to show the items from another list too. – Fanki Jan 28 at 9:20
  • Without code, you will not solve this problem. – Fox Jan 28 at 9:35
  • Sorry, i expressed it badly. I am able to change code, but I dont understand the code from the link. But I'll post an answer to this post with the code i have currently – Fanki Jan 28 at 10:57

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.