Sharepoint Online- Creating a footer

Shail S

Hi,

How can I create a footer(like the one on https://www.microsoft.com/en-in/) and navigation menu using the term store . How can include that in the masterpage so that it reflects across the site.

Also, if the menu and footer is term driven there is a posssibility the menu would show items not accessible to some users with limited access as managed metadata is not security trimmed. Is there any other way to come up with a solution for such a request. Please help...

31 Replies

Know the answer? Post it — somebody with the same question will find it here.

Nanddeep Nachan8y ago
Add scss file (e.g. FooterExtension.module.scss) to your solution.
Use below syntax to refer it in your .ts
import styles from './FooterExtension.module.scss';
You cannot refer external JS.
All your JS code should go inside your TypeScript (.ts) files.
Shail S8y ago
@Nanddeep: I have created a basic footer for modern pages using SPFX with the help of the following url:

https://docs.microsoft.com/en-us/sharepoint/dev/spfx/extensions/get-started/using-page-placeholder-with-extensions

How can i use the custom jss and custom css that i used for the footer used on classic pages?

Please advice..
Nanddeep Nachan8y ago
Please refer code here for implementing custom header and footer using SPFx Extension - Application Customizer:
https://github.com/SharePoint/sp-dev-fx-extensions/tree/master/samples/react-menu-footer-classic-modern
Shail S8y ago
@Nanddeep: Sir, thanks for your inputs. As rightly mentioned by you, the footer approach works well for classic pages but isn't working for the modern pages.Could you please tell me how can i create the same footer using SPFX and jquery.

Please advice..
Nanddeep Nachan8y ago
Yes, SPFx Extension should work on publishing site.
Use JQuery to avoid rewriting the code for SPFx
Shail S8y ago
@Nanddeep: Will the SPFx Extension - Application Customizer for footer work for Publishing site too?

Also, I would like to know whether I can create a similar footer(retrieving terms from a termset) and displaying in the footer using the Application customizer approach?
Nanddeep Nachan8y ago
This JavaScript code will only work with Classic UI.
For Modern UI, you will have to write SPFx Extension - Application Customizer for footer
Shail S8y ago
@Nanddeep: It's a publishing site.
The issue is with the site contents page, as the footer is visible but the terms don't show up in the footer. However on the site landing page, site settings page,etc it works fine.

Also, the footer works only when the site is in Classic Mode. It does'nt work in the new experience mode.
Nanddeep Nachan8y ago
Is it a publishing site or a team site?
Shail S8y ago
There are 2 warnings-

[Deprecation] Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/.

Set-Cookie header is ignored in response from url: https://outlook.office365.com/owa/service.svc?action=GetOwaUserConfiguration. Cookie length should be less than or equal to 4096 characters.

But I don't think this might be the reason as they are just warnings and not errors.

Please suggest..
Nanddeep Nachan8y ago
Please open Developer Toolbar (F12) on SiteContents Page and see if any errors logged to console.
Shail S8y ago
Nanddeep: Finally, got the footer working. It works as expected on some pages but other pages such as the sitecontents page, the terms are not retrieved and it shows an empty div for the footer.

How can i make sure the footer applies across the site?

Home Page(Footer working fine)

SiteContents Page(Terms not retrieved)

Ideally the footer should have displayed on the site contents page as it is not using the modern experience. I am not able to figure out the issue..
Please help..
Shail S8y ago
@Nanddeep:
I am getting all the terms. The js file is loading but the css is'nt.

The CSS reference in the masterpage is'nt working for me.

When i view the page source, The css is not loading.
Nanddeep Nachan8y ago
Try by adding ScriptLink directly
<SharePoint:ScriptLink runat="server" ID="ScriptLinkCustomJS" Language="javascript" Name="~SiteCollection/Style Library/JS/FooterFetchTerms.js"/>
Shail S8y ago
@Nanddeep: It is'nt working.

I have referenced the .css file in the masterpage as below:

I am getting the following warning while converting the html to masterpage-
SharePoint can't parse this file, most likely because of an incorrectly formatted SharePoint snippet. The markup at the following location is causing problems. Edit the markup manually to fix it, or replace it with a new snippet from the Snippet Gallery
Nanddeep Nachan8y ago
In Master page you can refer custom JS and CSS as:
<SharePoint:CssRegistration Name="<%$SPUrl:~SiteCollection/Style Library/FooterCSS/FooterStyle.css%>" runat="server" After="corev15.css" />
Shail S8y ago
@Nanddeep: I want to know how am I suppose to reference the custom .js file located at the following path-

https://sharepointdevtrial.sharepoint.com/sites/PubSiteDemo/Style Library/JS/FooterFetchTerms.js and the custom css file- https://sharepointdevtrial.sharepoint.com/sites/PubSiteDemo/Style
Library/FooterCSS/FooterStyle.css inside the .html file that would be finally converted to the .master file using design manager.

Could you please correct me If I am going wrong somewhere..Here is how I have referenced these files-

Also I have referenced jquery inside the masterpage as follows:
Nanddeep Nachan8y ago
Try by explicitly specifying type= text/javascript for your Script tag
Shail S8y ago
@Nanddeep: I am able to see the div=FooterTerms, but it is empty.

I have tested the same using a conetent editor webpart on a page and linking the cewp to a html page with inline js and css. and it works fine. I am able to create the footer with the terms and the custom css.

I am getting the following error:

Refused to execute script from 'https://sharepointdevtrial.sharepoint.com/sites/PubSiteDemo/siteassets/jquery.min.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.

Please advice..
Nanddeep Nachan8y ago
At the moment, we do not have any HTML element in our DIV.
Please see from view source or F12 (Developer Tool) to locate the div
Shail S8y ago
@Nanddeep: The conversion is successful. But I don't see the footer. After conversion, I have selected the new masterpage but somehow I don't see the footer.

I have refernced the .js and .css files in the new html file(used for masterpage)
Nanddeep Nachan8y ago
In html, try adding ContentPlaceHolder as:
<div id="FooterMenu">div>
Shail S8y ago
@Nanddeep: Hi,

I have referred the .js and the .css files(placed in the sitecollection library) in the new custom master page(.html) file. When i try uploading the new custom master(html) file and convert it to .master using the design manager. I am getting warnings and it is pointing to the asp tag for the contentplaceholder that i have added in the new html file.

Could you tell me where should i place the contentplaceholder in the html file?

In the js file I am searching for the div-FooterMenu and rendering the content from the termset inside it.

Warning:

SharePoint requires HTML files to be XML-compliant. Your file isn't XML-compliant, likely because of tag properties without quotes, missing closing tags, or invalid properties in tags.

'asp' is an undeclared prefix. Line 444, position 26.

Please help..
Nanddeep Nachan8y ago
It is strange. getAllTerms generally returns the terms without sort.
I will check and let you know.
Shail S8y ago
@Nanddeep: It is still the same. It still displays all the terms sorted alphabetically.
Nanddeep Nachan8y ago
Try by removing CustomSortOrder from below code

g_ClientContext.load(g_AllTerms, 'Include(IsRoot, Labels, TermsCount, CustomSortOrder, Id, Name, PathOfTerm, Parent, LocalCustomProperties)')
Shail S8y ago
@Nanddeep: Thanks for the quick tip.
I am now able to fetch all the terms from the termset. The output is the list of terms in sorted manner but i do not want it to be sorted. I want it to be fetched in the same order.
Nanddeep Nachan8y ago
JSOM example here will help you to get the terms for given TermSet
http://www.sharepointsearch.net/ctw-get-all-terms-from-termset-with-javascript/
Shail S8y ago
@Nanddeep: Thanks for your help.
I am just getting the parent terms from the particular termset in the alert. Is there a way to get the child terms too?
Nanddeep Nachan8y ago
You are almost to the solution.
Quick solution could be create ul, li HTML element structure with your variable termList and then append it to some div in footer.
Nanddeep Nachan8y ago
If you have custom master page,
Add ContentPlaceHolder for Footer
Add your custom JS file reference to Master page
Define a TermSet for your footer
Using JSOM code read the termset and render at div inside ContentPlaceHolder