{"id":820,"date":"2019-01-04T10:59:25","date_gmt":"2019-01-04T10:59:25","guid":{"rendered":"http:\/\/blog.softreeconsulting.com\/?p=820"},"modified":"2019-01-04T10:59:25","modified_gmt":"2019-01-04T10:59:25","slug":"use-mutation-observer-spfx-application-customizer","status":"publish","type":"post","link":"https:\/\/softreetechnology.com\/blog\/sharepoint\/use-mutation-observer-spfx-application-customizer\/","title":{"rendered":"How to use Mutation Observer in SPFx (Application Customizer)"},"content":{"rendered":"

 <\/p>\n

The following blog will help you to add your custom action menu in SharePoint modern page. As we are not able to get the DOM element for action menu in OnInit() method of SPFx(application customizer) so here we will see how mutation observer helps to get the DOM element SharePoint modern pages custom action menus and add your own custom action menu to the existing menus.<\/p>\n

    \n
  1. To use mutation observer in your client-side extension, first, you need to install mutation observer in your solution using the command \u201cnpm install MutationObserver-shim\u201d.<\/li>\n<\/ol>\n

    \"1\"<\/a><\/p>\n

    2. Then write the comment \u201crequire(‘mutationobserver-shim’)\u201dto include mutation observer operations in client-side extensions.<\/p>\n

    \"2\"<\/a><\/p>\n

    3. Update HelloWorldApplicationCustomizer class codes as provided.<\/p>\n

    Requirement:-<\/strong><\/p>\n

    Our requirement was to add our custom personal action menu where we wanted to execute custom JavaScript functions. In oninit method, if we try to get the menus to edit the existing one to add our custom menus then we will be not able to get those default action menus as those menus are not getting rendered in page onload.<\/p>\n

    \"3\"<\/a><\/p>\n

    For this, we need to use MutationObserver to add our custom menu. Using the following code, I successfully added my custom action menus.<\/p>\n

    \"4\"<\/a>
    \nHere mentioned below is the complete typescript file which contains all codes based on the requirement mentioned in this blog<\/p>\n

    [code lang=”c”]<\/p>\n

    import { override } from ‘@microsoft\/decorators’;
    \nimport { Log } from ‘@microsoft\/sp-core-library’;
    \nimport {
    \nBaseApplicationCustomizer
    \n} from ‘@microsoft\/sp-application-base’;
    \nimport { Dialog } from ‘@microsoft\/sp-dialog’;
    \nrequire(‘mutationobserver-shim’);<\/p>\n

    import * as strings from ‘HelloWorldApplicationCustomizerStrings’;<\/p>\n

    const LOG_SOURCE: string = ‘HelloWorldApplicationCustomizer’;<\/p>\n

    \/**
    \n* If your command set uses the ClientSideComponentProperties JSON input,
    \n* it will be deserialized into the BaseExtension.properties object.
    \n* You can define an interface to describe it.
    \n*\/
    \nexport interface IHelloWorldApplicationCustomizerProperties {
    \n\/\/ This is an example; replace with your own property
    \ntestMessage: string;
    \n}
    \nlet _observer: MutationObserver;
    \n\/** A Custom Action which can be run during execution of a Client Side Application *\/
    \nexport default class HelloWorldApplicationCustomizer
    \nextends BaseApplicationCustomizer<IHelloWorldApplicationCustomizerProperties> {<\/p>\n

    @override
    \npublic onInit(): Promise<void> {
    \nLog.info(LOG_SOURCE, `Initialized ${strings.Title}`);<\/p>\n

    let message: string = this.properties.testMessage;
    \nif (!message) {
    \nmessage = ‘(No properties were provided.)’;
    \n}<\/p>\n

    this.context.placeholderProvider.changedEvent.add(this, this.renderObserver);<\/p>\n

    return Promise.resolve();
    \n}<\/p>\n

    private async renderObserver(): Promise<void> {<\/p>\n

    if (!_observer) {
    \n\/\/ Register observable
    \nlet config = { childList: true, subtree: true };
    \n_observer = new MutationObserver(this.addMyCustomMenu);
    \n_observer.observe(document, config);
    \n}
    \n}<\/p>\n

    private addMyCustomMenu(mutationsList) {
    \nvar o365Menus = document.querySelectorAll(“*[class^=\\”o365cs-mfp-linklist o365cs-segoeRegular o365cs-text-align-left\\”]”);
    \nif (o365Menus.length > 0) {
    \nfor (var i in o365Menus) {
    \ntry {<\/p>\n

    var menuItem = o365Menus[i];
    \nvar innerhtml = menuItem.innerHTML;
    \nvar newhtml = ‘<div class=”ms-fcl-tp o365cs-nfd-normal-lineheight”><a class=”ms-fcl-tp o365button” role=”link”‘;
    \nnewhtml += ‘href=”javascript:alert(\\”Hello\\”);” id=”O365_SubLink_CustomMenu”‘;
    \nnewhtml += ‘aria-labelledby=”_ariaId_9″ style=””><span class=”_fc_3 owaimg” style=”display: none;”><\/span>’;
    \nnewhtml += ‘<span class=”_fc_4 o365buttonLabel” id=”_ariaId_9″>My Custom Menu<\/span><\/a><\/div>’;<\/p>\n

    menuItem.innerHTML = innerhtml.concat(newhtml);
    \n} catch (e) { }
    \n}
    \n}
    \n}<\/p>\n

    private _onDispose(): void {
    \nif (_observer) {
    \n_observer.disconnect();
    \n}
    \nconsole.log(‘[HelloWorldApplicationCustomizer._onDispose] Disposed custom.’);
    \n}
    \n}<\/p>\n

    [\/code]<\/p>\n

    This solution is brought to you by our SharePoint professionals.<\/strong><\/p>\n

    Softree Consulting<\/a>\u00a0employs SharePoint consultants; we are a technology services provider with the aim to help companies achieve exceptional performance through SharePoint. Our dedicated team of SharePoint consultants has the right bent of mind to understand and execute customer requirements.<\/p>\n

    Be it SPFx or SharePoint <\/a>add-in developments,\u00a0SharePoint 2019 developments, web part developments, migrating from SharePoint 2010\/2013 to SharePoint 2013\/2016\/Office 365, Office 365,\u00a0SharePoint hosted apps development\u00a0or something else in SharePoint, we strive to deliver the best<\/p>\n","protected":false},"excerpt":{"rendered":"

      The following blog will help you to add your custom action menu in SharePoint modern page. As we are not able to get the DOM element for action menu in OnInit() method of SPFx(application customizer) so here we will see how mutation observer helps to get the DOM element SharePoint modern pages custom action menus and add your own […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[43],"tags":[203,204,205,206,207],"class_list":["post-820","post","type-post","status-publish","format-standard","hentry","category-sharepoint","tag-add-custom-menu-in-sharepoint-modern-pages","tag-how-to-use-mutation-observer-in-spfx","tag-mutation-observer-in-sharepoint-modern-pages","tag-mutation-observer-in-spfx","tag-npm-install-mutationobserver-shim"],"yoast_head":"\nHow to use Mutation Observer in SPFx (Application Customizer) - Softree Technology<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/softreetechnology.com\/blog\/sharepoint\/use-mutation-observer-spfx-application-customizer\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to use Mutation Observer in SPFx (Application Customizer) - Softree Technology\" \/>\n<meta property=\"og:description\" content=\"  The following blog will help you to add your custom action menu in SharePoint modern page. As we are not able to get the DOM element for action menu in OnInit() method of SPFx(application customizer) so here we will see how mutation observer helps to get the DOM element SharePoint modern pages custom action menus and add your own […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/softreetechnology.com\/blog\/sharepoint\/use-mutation-observer-spfx-application-customizer\/\" \/>\n<meta property=\"og:site_name\" content=\"Softree Technology\" \/>\n<meta property=\"article:published_time\" content=\"2019-01-04T10:59:25+00:00\" \/>\n<meta name=\"author\" content=\"admin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to use Mutation Observer in SPFx (Application Customizer) - Softree Technology","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/softreetechnology.com\/blog\/sharepoint\/use-mutation-observer-spfx-application-customizer\/","og_locale":"en_US","og_type":"article","og_title":"How to use Mutation Observer in SPFx (Application Customizer) - Softree Technology","og_description":"  The following blog will help you to add your custom action menu in SharePoint modern page. As we are not able to get the DOM element for action menu in OnInit() method of SPFx(application customizer) so here we will see how mutation observer helps to get the DOM element SharePoint modern pages custom action menus and add your own […]","og_url":"https:\/\/softreetechnology.com\/blog\/sharepoint\/use-mutation-observer-spfx-application-customizer\/","og_site_name":"Softree Technology","article_published_time":"2019-01-04T10:59:25+00:00","author":"admin","twitter_card":"summary_large_image","twitter_misc":{"Written by":"admin","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/softreetechnology.com\/blog\/sharepoint\/use-mutation-observer-spfx-application-customizer\/#article","isPartOf":{"@id":"https:\/\/softreetechnology.com\/blog\/sharepoint\/use-mutation-observer-spfx-application-customizer\/"},"author":{"name":"admin","@id":"https:\/\/softreetechnology.com\/blog\/#\/schema\/person\/98740297642f06debccdcee2de84086b"},"headline":"How to use Mutation Observer in SPFx (Application Customizer)","datePublished":"2019-01-04T10:59:25+00:00","mainEntityOfPage":{"@id":"https:\/\/softreetechnology.com\/blog\/sharepoint\/use-mutation-observer-spfx-application-customizer\/"},"wordCount":611,"commentCount":0,"publisher":{"@id":"https:\/\/softreetechnology.com\/blog\/#organization"},"image":{"@id":"https:\/\/softreetechnology.com\/blog\/sharepoint\/use-mutation-observer-spfx-application-customizer\/#primaryimage"},"thumbnailUrl":"https:\/\/blog.softreeconsulting.com\/wp-content\/uploads\/2019\/01\/1.png","keywords":["Add custom menu in SharePoint modern pages","how to use mutation observer in spfx","mutation observer in SharePoint modern pages","mutation observer in spfx","npm install mutationobserver-shim"],"articleSection":["SharePoint"],"inLanguage":"en","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/softreetechnology.com\/blog\/sharepoint\/use-mutation-observer-spfx-application-customizer\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/softreetechnology.com\/blog\/sharepoint\/use-mutation-observer-spfx-application-customizer\/","url":"https:\/\/softreetechnology.com\/blog\/sharepoint\/use-mutation-observer-spfx-application-customizer\/","name":"How to use Mutation Observer in SPFx (Application Customizer) - Softree Technology","isPartOf":{"@id":"https:\/\/softreetechnology.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/softreetechnology.com\/blog\/sharepoint\/use-mutation-observer-spfx-application-customizer\/#primaryimage"},"image":{"@id":"https:\/\/softreetechnology.com\/blog\/sharepoint\/use-mutation-observer-spfx-application-customizer\/#primaryimage"},"thumbnailUrl":"https:\/\/blog.softreeconsulting.com\/wp-content\/uploads\/2019\/01\/1.png","datePublished":"2019-01-04T10:59:25+00:00","breadcrumb":{"@id":"https:\/\/softreetechnology.com\/blog\/sharepoint\/use-mutation-observer-spfx-application-customizer\/#breadcrumb"},"inLanguage":"en","potentialAction":[{"@type":"ReadAction","target":["https:\/\/softreetechnology.com\/blog\/sharepoint\/use-mutation-observer-spfx-application-customizer\/"]}]},{"@type":"ImageObject","inLanguage":"en","@id":"https:\/\/softreetechnology.com\/blog\/sharepoint\/use-mutation-observer-spfx-application-customizer\/#primaryimage","url":"https:\/\/blog.softreeconsulting.com\/wp-content\/uploads\/2019\/01\/1.png","contentUrl":"https:\/\/blog.softreeconsulting.com\/wp-content\/uploads\/2019\/01\/1.png"},{"@type":"BreadcrumbList","@id":"https:\/\/softreetechnology.com\/blog\/sharepoint\/use-mutation-observer-spfx-application-customizer\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/softreetechnology.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to use Mutation Observer in SPFx (Application Customizer)"}]},{"@type":"WebSite","@id":"https:\/\/softreetechnology.com\/blog\/#website","url":"https:\/\/softreetechnology.com\/blog\/","name":"Softree Technology","description":"Celebrating 10+ Years in SharePoint Consulting !","publisher":{"@id":"https:\/\/softreetechnology.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/softreetechnology.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en"},{"@type":"Organization","@id":"https:\/\/softreetechnology.com\/blog\/#organization","name":"Softree Technology","url":"https:\/\/softreetechnology.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en","@id":"https:\/\/softreetechnology.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/softreetechnology.com\/blog\/wp-content\/uploads\/2023\/03\/cropped-white-logo-soft.png","contentUrl":"https:\/\/softreetechnology.com\/blog\/wp-content\/uploads\/2023\/03\/cropped-white-logo-soft.png","width":844,"height":230,"caption":"Softree Technology"},"image":{"@id":"https:\/\/softreetechnology.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/softreetechnology.com\/blog\/#\/schema\/person\/98740297642f06debccdcee2de84086b","name":"admin","image":{"@type":"ImageObject","inLanguage":"en","@id":"https:\/\/softreetechnology.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/6fc78c8a7aa3fb0bf43c3b9a2e3962d7?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/6fc78c8a7aa3fb0bf43c3b9a2e3962d7?s=96&d=mm&r=g","caption":"admin"},"sameAs":["https:\/\/softreeconsulting.com"],"url":"https:\/\/softreetechnology.com\/blog\/author\/admin\/"}]}},"_links":{"self":[{"href":"https:\/\/softreetechnology.com\/blog\/wp-json\/wp\/v2\/posts\/820","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/softreetechnology.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/softreetechnology.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/softreetechnology.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/softreetechnology.com\/blog\/wp-json\/wp\/v2\/comments?post=820"}],"version-history":[{"count":0,"href":"https:\/\/softreetechnology.com\/blog\/wp-json\/wp\/v2\/posts\/820\/revisions"}],"wp:attachment":[{"href":"https:\/\/softreetechnology.com\/blog\/wp-json\/wp\/v2\/media?parent=820"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/softreetechnology.com\/blog\/wp-json\/wp\/v2\/categories?post=820"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/softreetechnology.com\/blog\/wp-json\/wp\/v2\/tags?post=820"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}