0

I have a custom list named CompanyNews which contain these fields:

  • Title --> Free Text

  • Topic ---> choice which allow multiple selections

Where inside the custom list, we will be adding the pages titles such as "Home","CEO Message", etc.. and the related Topics.

Then we will add the web part to a page >> so the web part should get the current page title >> then query the custom list by matching the Page title with the list's Title field and get the Topics, then show the Topics inside the web part. if nothing matches to show nothing inside the web part.

Here is my code:

But currently when I add the web part to any page it will show all the topics regardless of the page title.

Any advice?

1

You can get the page title using simple JavaScript like:

let pageTitle: string = document.title;

Then you can use it in REST endpoint like:

let pageTitle: string = document.title;
let url = `${this.props.context.pageContext.web.absoluteUrl}/_api/lists/getbytitle('CompanyNews')/items?$filter=Title eq '${pageTitle}'`;

If above method of getting page title is not working for you, you can get the page title using API call like:

let listTitle: string = this.props.context.pageContext.list.title;
let pageItemId: number = this.props.context.pageContext.listItem.id;

let url = `${this.props.context.pageContext.web.absoluteUrl}/_api/lists/getbytitle('${listTitle}')/items(${pageItemId})?$select=ID,Title`;

Update from comments:

Below is the complete code to get page title:

let listTitle: string = this.props.context.pageContext.list.title;
let pageItemId: number = this.props.context.pageContext.listItem.id;
let url = `${this.props.context.pageContext.web.absoluteUrl}/_api/lists/getbytitle('${listTitle}')/items(${pageItemId})?$select=ID,Title`;
let response: SPHttpClientResponse = await this.props.context.spHttpClient.get(url, SPHttpClient.configurations.v1);

let pageDetails: any = await response.json();
let pageTitle: string = pageDetails.Title ? pageDetails.Title : "";

Where pageTitle variable holds the title of site page.

7
  • the let pageTitle: string = document.title; will return the site name - page title and not just the page title...
    – john Gu
    Nov 22 at 10:52
  • 1
    Then you have to use the 2nd approach to get the page title using API call. Nov 22 at 11:12
  • 1
    You can use the same getSPData() function. Just pass the url as given in 2nd approach like: let url = ${this.props.context.pageContext.web.absoluteUrl}/_api/lists/getbytitle('${listTitle}')/items(${pageItemId})?$select=ID,Title; Nov 22 at 11:14
  • 1
    Check updated answer for complete code to get page title. Nov 22 at 12:00
  • 1
    ok your code worked perfectly for me.. thanks a lot
    – john Gu
    Nov 22 at 12:23

Your Answer

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

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