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).
Are you talking about below list view web part?
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
