Sharepoint Online- Creating a footer

Question

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...

Nanddeep Nachan · Answer

Yes, SPFx Extension should work on publishing site. Use JQuery to avoid rewriting the code for SPFx

Shail S · Answer

@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?

Shail S · Answer

@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.

Shail S · Answer

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..

Shail S · Answer

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 S · Answer

@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. " runat="server" After="corev15.css" /> When i view the page source, The css is not loading.

Shail S · Answer

@Nanddeep: It is'nt working. I have referenced the .css file in the masterpage as below: " runat="server" After="corev15.css" />--> 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 Nachan · Answer

In Master page you can refer custom JS and CSS as: --> SharePoint:CssRegistration Name = " " runat = "server" After = "corev15.css" />

Shail S · Answer

@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: src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">

Shail S · Answer

@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 Nachan · Answer

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

Nanddeep Nachan · Answer

In html, try adding ContentPlaceHolder as: --> div id = "FooterMenu" > div > -->

Shail S · Answer

@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 Nachan · Answer

It is strange. getAllTerms generally returns the terms without sort. I will check and let you know.

Nanddeep Nachan · Answer

Try by removing CustomSortOrder from below code g_ClientContext.load(g_AllTerms, 'Include(IsRoot, Labels, TermsCount, CustomSortOrder, Id, Name, PathOfTerm, Parent, LocalCustomProperties)')

Shail S · Answer

@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 Nachan · Answer

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/

Nanddeep Nachan · Answer

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 Nachan · Answer

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

Nanddeep Nachan · Answer

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 S · Answer

@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 Nachan · Answer

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 S · Answer

@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 Nachan · Answer

This JavaScript code will only work with Classic UI. For Modern UI, you will have to write SPFx Extension - Application Customizer for footer

Nanddeep Nachan · Answer

Is it a publishing site or a team site?

Nanddeep Nachan · Answer

Please open Developer Toolbar (F12) on SiteContents Page and see if any errors logged to console.

Nanddeep Nachan · Answer

Try by adding ScriptLink directly SharePoint:ScriptLink runat = "server" ID = "ScriptLinkCustomJS" Language = "javascript" Name = "~SiteCollection/Style Library/JS/FooterFetchTerms.js" />

Nanddeep Nachan · Answer

Try by explicitly specifying type= text/javascript for your Script tag

Shail S · Answer

@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)

Shail S · Answer

@Nanddeep: It is still the same. It still displays all the terms sorted alphabetically.

Shail S · Answer

@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?