Add SharePoint page name in a webpart

Question

I've made a HTML + CSS menu on a page which I happy with. Ideally I wanted the name of the page to appear in it. This way I can use the web part across the site and it will change the page name itself.

I first tried some code to do this

<script>document.write(document.getElementById("ctl00_PlaceHolderMain_wikiPageNameDisplay").innerHTML);</script>

This didn't work as I wanted as it took the pagename.aspx. So if I renamed it to something more readable, the URL would be full of %20s.

I then made a new page using the page library. This would give me a display name field, but now I can't figure out how to show just the display name. The old code I used doesn't work as it looks like it is for wiki pages.

Ganesh Sanap - MVP · Accepted Answer · 2021-01-08T08:16:31.797

1

Try using below code:

document.querySelector("h1#pageTitle span").innerText

You can trim the page title like:

document.querySelector("h1#pageTitle span").innerText.trim()

Or for safer side you can use:

document.querySelector("h1#pageTitle1 span") ? document.querySelector("h1#pageTitle span").innerText.trim() : ""

Update from Comments:

Try using below complete code in Script Editor web part. It is working on my SharePoint site:

<div id="customPageTitle"></div>
<script type="text/javascript">
    //_spBodyOnLoadFunctionNames.push("runAfterEverythingLoaded");
ExecuteOrDelayUntilScriptLoaded(runAfterEverythingLoaded, &quot;sp.js&quot;);

function runAfterEverythingLoaded() {
    // your code goes here
    var pageTitle = document.querySelector(&quot;h1#pageTitle span&quot;) ? document.querySelector(&quot;h1#pageTitle span&quot;).innerText.trim() : &quot;&quot;;
    document.querySelector(&quot;div#customPageTitle&quot;).innerText = &quot;Page Title is: &quot; + pageTitle;
}

</script>

Output:

To read more about ExecuteOrDelayUntilScriptLoaded() function, check my answer at: Run Javascript after page loads

edited Jan 08 '21 at 08:16

answered Jan 08 '21 at 06:53

Ganesh Sanap - MVP

44,918
21
30
61

I worry if I have missed something here. I wrap your code in script tags but nothing shows on the page. – Darkstar.Industries Jan 08 '21 at 07:19
Can you please try running this code first in browser's console (developer tools) and see if it works? – Ganesh Sanap - MVP Jan 08 '21 at 07:41
Thank you. First two codes blocks bring back the page title. I just can't get it to show on the page. – Darkstar.Industries Jan 08 '21 at 07:43
Can you please share any screenshot of where exactly you want to show the page title? or your existing code? – Ganesh Sanap - MVP Jan 08 '21 at 07:44
Well I have a table I want to place it into. But as a test, even just getting it to appear on the page doesn't work. I'm currently using a script webpart to try to get it to work
Anywhere on the page will do at this point.
– Darkstar.Industries Jan 08 '21 at 07:45
It will be easier to understand what you are trying to do and answer your question more precisely if you can share your existing code. please edit the original question and add your code there. Are you using jQuery in your code? – Ganesh Sanap - MVP Jan 08 '21 at 07:47
Let us continue this discussion in chat. – Darkstar.Industries Jan 08 '21 at 07:48
1

Perfect. Updated code works great and I've managed to get it to work in my custom menu too. Thank you! – Darkstar.Industries Jan 08 '21 at 08:42

Add SharePoint page name in a webpart

1 Answers1