import { override } from '@microsoft/decorators' ; import { Log } from '@microsoft/sp-core-library' ; import { BaseApplicationCustomizer , PlaceholderContent , PlaceholderName } from '@microsoft/sp-application-base' ; import { Dialog } from '@microsoft/sp-dialog' ; import { escape } from '@microsoft/sp-lodash-subset' ; import HeaderFooterDataService from './common/services/HeaderFooterDataService' ; import IHeaderFooterData from './common/model/IHeaderFooterData' ; import ComponentManager from './common/components/ComponentManager' ; const LOG_SOURCE = 'CustomHeaderFooterApplicationCustomizer' ; export interface ICustomHeaderFooterApplicationCustomizerProperties { Top : string ; Bottom : string ; } export default class CustomHeaderFooterApplicationCustomizer extends BaseApplicationCustomizer < ICustomHeaderFooterApplicationCustomizerProperties > { private _topPlaceholder : PlaceholderContent | undefined ; private _bottomPlaceholder : PlaceholderContent | undefined ; @ override public onInit ( ) { return new Promise ( ( ) => { Log . info ( LOG_SOURCE , `Initialized CustomHeaderFooterApplicationCustomizer` ) ; this . context . placeholderProvider . changedEvent . add ( this , this . bootstrap ) ; return ; } ) ; } private bootstrap ( ) { const url = 'https://<tenant>.sharepoint.com/sites/scripts/Style%20Library/HeaderFooterData.json.txt' ; HeaderFooterDataService . get ( url ) . then ( ( data ) => { const header = this . context . placeholderProvider . tryCreateContent ( PlaceholderName . Top , { onDispose : this . _onDispose } ) ; const footer = this . context . placeholderProvider . tryCreateContent ( PlaceholderName . Bottom , { onDispose : this . _onDispose } ) ; if ( header || footer ) { ComponentManager . render ( header ? header . domElement : null , footer ? footer . domElement : null , data ) ; } } ) . catch ( ( error ) => { console . log ( `Error in CustomHeaderFooterApplicationCustomizer: ${ error }` ) ; } ) ; return ; } private _onDispose ( ) { } }