none
I want to apply application customiser to all the modern pages under site pages library in SharePoint online RRS feed

  • Question

  • I created a application customiser and i want to apply this to all my pages under site pages library. How can i modify my below code.

    .ts file:

    --------------------------------------------------------------------------------------------------------------------

    import { override } from '@microsoft/decorators';
    import { Log } from '@microsoft/sp-core-library';
    import {
    BaseApplicationCustomizer
    } from '@microsoft/sp-application-base';
    import { Dialog } from '@microsoft/sp-dialog';
    import * as strings from 'CssExtensionApplicationCustomizerStrings';
    const LOG_SOURCE: string = 'CssExtensionApplicationCustomizer';
    /**
    * If your command set uses the ClientSideComponentProperties JSON input,
    * it will be deserialized into the BaseExtension.properties object.
    * You can define an interface to describe it.
    */
    export interface ICssExtensionApplicationCustomizerProperties {
    // This is an example; replace with your own property
    // testMessage: string;
    cssurl: string;
    }
    /** A Custom Action which can be run during execution of a Client Side Application */
    export default class CssExtensionApplicationCustomizer
    extends BaseApplicationCustomizer<ICssExtensionApplicationCustomizerProperties> {
    @override
    public onInit(): Promise<void> {
    Log.info(LOG_SOURCE, `Initialized ${strings.Title}`);
    const cssUrl: string = this.properties.cssurl;
    if (cssUrl) {
    // inject the style sheet
    const head: any = document.getElementsByTagName("head")[0] || document.documentElement;
    let customStyle: HTMLLinkElement = document.createElement("link");
    customStyle.href = cssUrl;
    customStyle.rel = "stylesheet";
    customStyle.type = "text/css";
    head.insertAdjacentElement("beforeEnd", customStyle);
    }
    return Promise.resolve();
    }
    }

    --------------------------------------------------------------------------------------------------------------------

    serve.json file :

    ------------------------------------------------------------------------------------------------------------------

    {
    "$schema": "https://developer.microsoft.com/json-schemas/core-build/serve.schema.json",
    "port": 4321,
    "https": true,
    "serveConfigurations": {
    "default": {
    "pageUrl": "https://id.sharepoint.com/sites/Application/SitePages/home.aspx",
    "customActions": {
    "cde78383-faee-44cc-b649-3132fa01b810": {
    "location": "ClientSideExtension.ApplicationCustomizer",
    "properties": {
    "cssurl": "/sites/Application/Style%20Library/siteTitle.css"
    }
    }
    }
    },
    "cssExtension": {
    "pageUrl": "https://id.sharepoint.com/sites/Application/SitePages/home.aspx",
    "customActions": {
    "cde78383-faee-44cc-b649-3132fa01b810": {
    "location": "ClientSideExtension.ApplicationCustomizer",
    "properties": {
    "cssurl": "/sites/Application/Style%20Library/siteTitle.css"
    }
    }
    }
    }
    }
    }

    -------------------------------------------------------------------------------------------------------------------

    Tuesday, December 10, 2019 10:42 AM

Answers

  • Hi

    Based on user requested page to identify whether the page belongs to site pages library and then apply your custom CSS dynamically.

    public onInit(): Promise<void> {
        Log.info(LOG_SOURCE, `Initialized ${strings.Title}`);
        var requestPage=String(this.context.pageContext.legacyPageContext.serverRequestPath);
        console.log(requestPage);
        if(requestPage.indexOf("SitePages")>-1){
          console.log('Add custom css');
          const cssUrl:
          string = this.properties.cssurl;
          if (cssUrl) {
          // inject the style sheet
          const head:
          any = document.getElementsByTagName("head")[0] ||document.documentElement;
          let customStyle:
          HTMLLinkElement = 
          document.createElement("link");
          customStyle.href =cssUrl;
          customStyle.rel ="stylesheet";
          customStyle.type ="text/css";
          head.insertAdjacentElement("beforeEnd",customStyle);
          }
        }
        // let message: string = this.properties.testMessage;
        // if (!message) {
        //   message = '(No properties were provided.)';
        // }    
        // Dialog.alert(`Hello from ${strings.Title}:\n\n${message}`);
    
        return Promise.resolve();
      }

    Best Regards,

    Lee


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.

    SharePoint Server 2019 has been released, you can click here to download it.
    Click here to learn new features. Visit the dedicated forum to share, explore and talk to experts about SharePoint Server 2019.

    • Proposed as answer by Dennis GuoModerator Wednesday, December 18, 2019 7:34 AM
    • Marked as answer by SatyaNK Wednesday, December 18, 2019 8:19 AM
    Wednesday, December 11, 2019 5:35 AM