Despite the best efforts of Microsoft with the UI design of SharePoint / PWA, I frequently get requests from customers to make changes / additions to the standard UI elements such as the ribbon menu, which – if you’re reading Microsoft – people very often still just “don’t get”.
So a small thing I came across while digging around in the internals of the Project Server undocumented JavaScript was an easy way to re-use the standard functions of the ribbons in your own html / JavaScript.
(Note this is not a post about ribbon customisation, see Alex’s great post series here if that’s what you’re after.)
Example: ever wanted buttons at the bottom of a long form?
Simple yet effective.
Source html
<div id="myFooterBtns"><span>
<input type="button" value="< Previous Page" onclick="PDPInfrastructure.GotoPreviousPDP();">
<input type="button" value="Next Page >" onclick="PDPInfrastructure.GotoNextPDP();">
</span>
<span style="float: right;">
<input type="button" value="Save Project" onclick="PDPButton.SaveData();">
</span></div>
Note the JavaScript function calls which are quite self explanatory: PDPInfrastructure.GotoNextPDP(); etc. As you might guess you can find a similar method for most options (although some are not so simple).
To use: simply save this as a html file somewhere in your site collection and then reference it in a Content Editor Web Part, see here for an example of how to do that.
Disclaimer
It may go without saying but I will anyway: This is using undocumented and unsupported internal functions that will undoubtedly change at some point in the future whenever Microsoft feels like it.
You have been warned. But in the meantime keep giving customers what they ask for. :)