Update List in List view webpart based on url parameter

Question

Is there any way to dynamically update the list in the 'list view web part' based on the url parameter?

My requirement is- I have a sharepoint modern/classic web page, in that I have to display list view web part. but that list should be dynamic based on the url parameter(example: listid).

Answer 1

Are you talking about below list view web part?

• https://support.microsoft.com/en-us/office/use-the-list-web-part-ef0a1b80-f8b3-443d-b04a-1e76c70b5537

If so, it's possible to update its properties via code. For example, we can update it through PnPjs:

• https://pnp.github.io/pnpjs/sp/clientside-pages/

  public async UpdateSitePage(): Promise<void> {
      const urlParams = new URLSearchParams(window.location.search);
      if (!urlParams.has('listid') || this.props.disMode == DisplayMode.Edit) {
          this.setState({
           ready: true
         });
        return;
      }
  
   const listid = urlParams.get('listid');
   let list: IListInfo;
  
   try {
     list = await sp.web.lists.getById(listid).get();
   } catch (e) {
     console.log(e);
     this.setState({
       ready: true
     });
     return;
   }
  
   // use from the sp.web fluent chain
   const page = await sp.web.loadClientsidePage(window.location.pathname);
   const control = page.findControlById('81b84607-7f7a-49d8-b504-957a986d6e07') as ClientsideWebpart;
  
   let p = control.getProperties();
  
   if (p.selectedListId == listid) {
     this.setState({
       ready: true
     });
     return;    // the same list, no need to update
   }
  
   control.setProperties(
     {
       selectedListId: listid,
       selectedListUrl: list.ParentWebUrl + "/Lists/" + list.Title,
       selectedViewId: null,
       webRelativeListUrl: "/Lists/" + list.Title
     }
   );
  
   control.data.webPartData.serverProcessedContent.searchablePlainTexts = { listTitle: list.Title };
  
   page.save().then(e => {
     location.reload();
   });
  
   console.log(control);
  
   } 
  

Test Demo:

The problem is that what we updated is the source page file. Imagic that there're a lot of people are visiting this page, it will get stuck into conflict.

Hence I do not suggest you update this web part property based on URL. you may consider developing a custom web part to display list item based on the passed parameter. MS has not exposed the source code of List view web part, we cannot extend it.

BR