We were tasked with the objective to remove all appearance of SharePoint. The goal: Demo our solution to Microsoft (I live in Seattle) and have them not even realize we were demoing a solution to them that was built in SharePoint. Here is how we did it:
- Use CSS to remove the obvious SharePoint stuff. This CSS is in one of the Plumsail forms mentioned below, but it controls the entire page, not just the Plumsail webpaert (Code sample 1 below)
- Move the site Navigation to horizontal (get rid of that pesky Side Navigation)
- Used a non MSFT Font (we went with Roboto)
- Inject 2 Plumsail Forms
a. One with nothing more than just a Toolbar with buttons to Navigate to other Pages
b. One that contained a Tab control, each Tab for a specific area of work. Under each Tab was another Tab Control that allowed different views of the Parent Tab data. - In every List/Library inserted into the child Tabs mentioned above, we inserted custom buttons that opened everything in Dialogs, so the user NEVER left this one page.
In all we have 200+ forms, 80+ Lists, etc. all contained in this one page. The user never see a SharePoint list or Library. Everything in displayed in Kendo controls, which are just way nicer for the user.
Here is a sample of the entry page:
CSS to remove SharePoint stuff:
.ms-Panel-main{
width: 1200px !important;
}
.isFluent .SPPageChrome-app .commandBarWrapper {
display: none !important;
}
#commandBarWrapper {
display: none !important;
}
#spLeftNav{
display: none;
}
#SuiteNavWrapper{
display: none !important;
}
#sp-appBar{
display: none !important;
}
.od-ItemsScopeList-page {
display: none !important;
}
/* OPTIONAL - DOES SERIOUS STUFF
[data-sp-feature-tag="Site header host"] {
display: none;
}
*/
Code to have button that takes user to a THEIR custom page (another Plumsail form)
const myWorkPortal = {
icon: 'Work',
class: 'btn-outline-success',
text: 'My Work Portal',
visible: true,
click: function() {
pnp.sp.profiles.myProperties.get().then(function(result) {
var email = result.Email;
pnp.sp.web.lists.getByTitle('MyDefaults').items
.select('Title', 'ID')
.filter("AssignedTo/EMail eq '" + email + "'")
.get()
.then(function(items) {
// see if we got something
if (items.length > 0) {
if(items[0].ID){
const url = fd.webUrl + '/SitePages/PlumsailForms/MyDefaults/Item/DisplayForm.aspx?item=' + items[0].ID;
window.open(url, '_blank').focus();
}
}
});
});
}
};
fd.toolbar.buttons.push(myWorkPortal);
Enjoy.
