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.

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:

• The javascript file that is supposed to load customizations from the workbench checks for query string parameters "loadSpfx", "customActions" and "fieldCustomizers"
  https://spoprod-a.akamaihd.net/files/odsp-next-prod_2019-07-19-sts_20190725.002/splistitemsscope-is-mini-455d2d6b.js

, 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

@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:

• The javascript file that is supposed to load customizations from the workbench checks for query string parameters "loadSpfx", "customActions" and "fieldCustomizers"
  https://spoprod-a.akamaihd.net/files/odsp-next-prod_2019-07-19-sts_20190725.002/splistitemsscope-is-mini-455d2d6b.js

, 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