Solvedsp dev docs SPFX Field Customizer Extension not loading

Category

  • Question
  • Typo
  • Bug
  • Additional article idea

Expected or Desired Behavior

On "Gulp serve" SPFX Field customizer should redirect to SP Site list view page and should render the field with prefix "Value:" in front of each field

Observed Behavior

On "Gulp serve" SPFX Field customizer redirected to SP Site list view as expected but didn't render the field with prefix "Value:" in front of each field. No errors or warnings found in page and VS code Terminal window

Steps to Reproduce

  1. Created a new SPFX Field Extension as in Microsoft site
    https://docs.microsoft.com/en-us/sharepoint/dev/spfx/extensions/get-started/building-simple-field-customizer
  2. Opened in VS code
  3. Updated the PageURL in "serve.json". No extra code added.
  4. Ran "Gulp serve" in cmd
  5. Browser will open the SP Online site list view "allitems.aspx". Click "Load Debug Scripts" in the "Allow debug scripts" pop up window
  6. The list view will load as in OOTB view but the expected prefix will not be available

Submission Guidelines

Sure this is not a big bug as it has worked earlier for many users, may be a regression bug.

Thanks for your contribution! Sharing is caring.

30 Answers

✔️Accepted Answer

I was able to workaround the issue by replacing "&loadSPFX=true" in the url opened by "gulp serve" with "&loadSpfx=true" (notice how spfx is written in a different casing).

Longer explaination:

, m = p.getQueryParameter("loadSpfx")
, f = p.getQueryParameter("customActions")
, h = p.getQueryParameter("fieldCustomizers")
, g = m && (f || h);
  • g is evaluated as "loadSpfx && (customActions || fieldCustomizers)" .
  • Checking the return value of "p.getQueryParameter("loadSpfx")" in the console, it returns null. This looked strange as the url that "gulp serve" opens contains loadSPFX=true
  • Trying to call instead "p.getQueryParameter("loadSpfx")" in the console, it returned "true"
  • Trying to open the same url but this time replacing "&loadSPFX=true" with "&loadSpfx=true" loaded both a FieldCustomizer and a ListViewCommandSet that weren't loaded before.

I hope this will allow people to continue working while the bug is fixed either on SPO side or at "gulp serve" side

Other Answers:

@jackpoz - you are a wonderful person. I've forwarded the information, and it will help get a fix out. Can't thank you enough.

Needed code changes have been now completed and we are currently internally validating situation. Fix will be rolling out to production in upcoming days/week. Until that happens, please use the workaround provided by @jackpoz. Thanks for sharing it! Sharing is caring!

I have the same issue, a FieldCustomizer that worked fine last month doesn't work anymore (I rarely use it so I don't know when it broke).
When using "gulp serve" and loading a test list, the js file is loaded, not errors appear in the console but still the customizer is not applied.

Request: '/temp/manifests.js'
Request: '/lib/extensions/branding/loc/en-us.js'
Request: '/lib/extensions/boldField/loc/en-us.js'
Request: '/dist/google-command-set.js'
Request: '/dist/branding-application-customizer.js'
Request: '/dist/bold-field-field-customizer.js' <--- this is the Field customizer

If I set a breakpoint in onInit()/onRenderCell()/onDisposeCell(), the breakpoints are never hit.
I have a webpart and an ApplicationCustomizer in the solution too and these 2 work (so the solution is loaded and the workbench connection works too).
Is there any trace log that I could enable to ensure SPO is loading the FieldCustomizer ?

@jackpoz , Fab. The workaround worked for me. You are a star. Thanks.

I was able to workaround the issue by replacing "&loadSPFX=true" in the url opened by "gulp serve" with "&loadSpfx=true" (notice how spfx is written in a different casing).

Longer explaination:

, m = p.getQueryParameter("loadSpfx")
, f = p.getQueryParameter("customActions")
, h = p.getQueryParameter("fieldCustomizers")
, g = m && (f || h);
  • g is evaluated as "loadSpfx && (customActions || fieldCustomizers)" .
  • Checking the return value of "p.getQueryParameter("loadSpfx")" in the console, it returns null. This looked strange as the url that "gulp serve" opens contains loadSPFX=true
  • Trying to call instead "p.getQueryParameter("loadSpfx")" in the console, it returned "true"
  • Trying to open the same url but this time replacing "&loadSPFX=true" with "&loadSpfx=true" loaded both a FieldCustomizer and a ListViewCommandSet that weren't loaded before.

I hope this will allow people to continue working while the bug is fixed either on SPO side or at "gulp serve" side

Thanks a lot !!! Your workaround works !! Replacing "&loadSPFX=true" by "&loadSpfx=true" work for me ! Thanks

Related Issues:

24
sp dev docs SPFX Field Customizer Extension not loading
I was able to workaround the issue by replacing &loadSPFX=true in the url opened by gulp serve with ...
19
sp dev docs SPFX Local workbench not loading
@nickpape-msft @andrewconnell I found the issue Port 5432 is the default port value used by PostgreS...
12
sp dev docs SPFx Yeoman template broken by TypeScript 2.1 definition in @types/lodash
This is a regression introduced by DefinitelyTyped PR 13994 As a workaround you can run this command...
11
sp dev docs Breaking change on creating content types using CSOM - Value cannot be null
Thanks everyone for confirming that the workaround fix in the PnP PowerShell and NuGet package side ...
3
sp dev docs environment missing on WebPartContext for O365 hosted SPFx/workbench
So we are refactoring APIs for the next drop and the lack of API documentation has lead to this conf...