1

I am trying to add more than one SPFX extension in my solution (Application customizer in this case - one for header another for footer) but after deployment I only see one extension in my site. Am I missing something here?

my elements.xml is:

<?xml version="1.0" encoding="utf-8"?>
<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
    <CustomAction
        Title="TopNavigation"
        Location="ClientSideExtension.ApplicationCustomizer"
        ClientSideComponentId="819db51e-c5d7-447e-b4a8-3c8ae35681a3"
        ClientSideComponentProperties="{&quot;testMessage&quot;:&quot;Test message&quot;}">
    </CustomAction>
    <CustomAction
        Title="Footer"
        Location="ClientSideExtension.ApplicationCustomizer"
        ClientSideComponentId="6ea24ae1-1d36-464e-9330-a94c97134e76"
        ClientSideComponentProperties="{&quot;Top&quot;:&quot;Top area of the page&quot;,&quot;Bottom&quot;:&quot;Bottom area in the page&quot;}">
    </CustomAction>
</Elements>

and Config.JSON has entries:

{
  "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/config.2.0.schema.json",
  "version": "2.0",
  "bundles": {
    "top-navigation-application-customizer": {
      "components": [
        {
          "entrypoint": "./lib/extensions/topNavigation/TopNavigationApplicationCustomizer.js",
          "manifest": "./src/extensions/topNavigation/TopNavigationApplicationCustomizer.manifest.json"
        }
      ]
    },
    "footer-application-customizer": {
      "components": [
        {
          "entrypoint": "./lib/extensions/footer/FooterApplicationCustomizer.js",
          "manifest": "./src/extensions/footer/FooterApplicationCustomizer.manifest.json"
        }
      ]
    }
  },
  "externals": {},
  "localizedResources": {
    "TopNavigationApplicationCustomizerStrings": "lib/extensions/topNavigation/loc/{locale}.js",
    "FooterApplicationCustomizerStrings": "lib/extensions/footer/loc/{locale}.js"
  }
}

TIA

  • did you deploy the custom action using powershell ? You need to specify the clientsidecomponentid of the second Custom action as well – Gautam Sheth Oct 17 '18 at 7:26
  • Thanks for the reply @GautamSheth... I have package the application using gulp and sequence is: gulp bundle --ship, gulp package-solution --ship and then uploaded the app to app catalog site.. I have not used powershell to do so – DvG Oct 17 '18 at 8:52
0

After making the entries in the elements.xml file or clientsideinstance.xml file, do gulp clean, change the solution version, run gulp bundle —ship and gulp package-solution —ship, deploy the package in the apps catalogue

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.