Can't apply field customizer to Name columns in form libraries

[JLRishe]

Category

• Question
• Typo
• Bug
• Additional article idea

Expected or Desired Behavior

I am trying to apply a field customizer to any one of the name columns in a form library (form libraries have three Name columns, with internal names FileLeafRef, LinkFilename, and LinkFileNameNoMenu)

If this is not possible, I would like to create a column that "shadows" one of these columns, by referencing their values so I can apply a field customizer to that column (as detailed below, I can't find a way to do this either).

Observed Behavior

I am not able to apply a field customizer to any of these three columns. If I try to run an extension in debug mode by using the loadSPFX, debugManifestsFile, and fieldCustomizers. parameters in the URL, my field customizer's code does not run and the column's rendered content is unchanged.

If I try to use the REST API to set any of these columns' ClientSideComponentId, the REST request returns a 204 success result, but the columns' ClientSideComponentId value remains unchanged as 00000000-0000-0000-0000-000000000000. I am able to use the same type of REST request to change the ClientSideComponentId on other columns, but not these.

I am unable to find a way to create a column to "Shadow" any of these column. It seems that it's not possible to create a Calculated column that references an item's filename since File columns cannot be used in the formulas for Calculated columns.

I know it's possible to simply create an empty column and have the field customizer render the desired value in that column, but there are two fairly large issues with this:
(1) I'm unable to sort on this column, because the underlying value is empty
(2) the column displays as too narrow, with the values truncated, because the underlying value is empty.

Steps to Reproduce

1. Create a field customizer that renders some arbitrary content (e.g. "Hello")
2. Use gulp serve --nobrowser to serve the customizer code
3. Navigate to any form library that has files in it
4. Append the following to the page URL, replacing [id] with the field customizer's ID:
   ?loadSPFX=true&debugManifestsFile=https://localhost:4321/temp/manifests.js&fieldCustomizers={"LinkFilename":{"id":"[id]","properties":{}}}

[ahackettms]

Form library is not enabled for modern library experience yet. Client-side extensions only work for modern library UX.
We will update once form library is enabled for modern UX

[JLRishe]

@ahackettms Thank you for your response.

It's possible I am misunderstanding what you said, but I am definitely seeing form libraries in the modern UX and am able to apply field customizers to columns there except the columns that this case is about.

I'm glad to hear that it sounds like there are some changes still in the works, though.

[ahackettms]

Hi Jimmy Do you have a repro or screenshot? I am pretty certain that form library is not on modern UX yet. Get Outlook for iOS<https://aka.ms/o0ukef>

…

________________________________ From: Jimmy Rishe <notifications@github.com> Sent: Thursday, October 12, 2017 9:07:52 PM To: SharePoint/sp-dev-docs Cc: Amy Hackett; Mention Subject: Re: [SharePoint/sp-dev-docs] Can't apply field customizer to Name columns in form libraries (#906) @ahackettms<https://na01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fahackettms&data=02%7C01%7Cahackett%40microsoft.com%7C24bb16ddea15442386a208d511effa56%7C72f988bf86f141af91ab2d7cd011db47%7C1%7C0%7C636434644742526196&sdata=ikBDfMgD32ju6ZRJwmhfZh3ge%2FgQ6DldpeN4QR36BDM%3D&reserved=0> It's possible I am misunderstanding what you said, but I am definitely seeing form libraries in the modern UX and am able to apply field customizers to columns there except the columns that this case is about. I'm glad to hear that it sounds like there are some planned changes for form libraries, though. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub<https://na01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2FSharePoint%2Fsp-dev-docs%2Fissues%2F906%23issuecomment-336345110&data=02%7C01%7Cahackett%40microsoft.com%7C24bb16ddea15442386a208d511effa56%7C72f988bf86f141af91ab2d7cd011db47%7C1%7C0%7C636434644742526196&sdata=UaHQWqU9ZrdTDxlJz4cI19uoeoxsMtbF2%2BxBF4jxDFI%3D&reserved=0>, or mute the thread<https://na01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fnotifications%2Funsubscribe-auth%2FAcPVChFmW5IsHamWYtgKi12N1csy_Gduks5sruIYgaJpZM4Purvd&data=02%7C01%7Cahackett%40microsoft.com%7C24bb16ddea15442386a208d511effa56%7C72f988bf86f141af91ab2d7cd011db47%7C1%7C0%7C636434644742526196&sdata=0msXhm7jufYUdpGYtbytXwxyxOAUoji%2FQl7%2FNhVjkPA%3D&reserved=0>.

[JLRishe]

@ahackettms

It seems like form libraries usually display in the clasic view by default, but it's definitely possible to view them in the modern UX on SharePoint Online.

The following seems to work for getting a form library to show in the modern UX.

1. Go to Site Contents
2. If Site Contents is displaying in the classic view, skip to step 4
3. Click Return to classic SharePoint
4. Click Exit Classic Experience
5. Click the library you want to view

After doing that, the library shows up in the modern UX (at least it does for me).

Regarding the issue I am reporting, here are repro steps:

Repro steps: Attempting to modify form library columns' ClientSideComponentId and ClientSideComponentProperties and apply an installed field customizer to those columns

1. Create a new field customizer project in accordance with the Create an extension project section of the tutorial.
2. Build, package, and deploy the extension to the app catalog as described in the tutorial. (Note: You can delete the <Field> element from the elements.xml file to avoid creating unnecessary site columns. The column defined there is not needed for these steps.)
3. Launch a server for the field customizer by using gulp serve --nobrowser as described in the tutorial.
4. Open SharePoint Online in any browser other than Internet Explorer and navigate to a site where you would like to test these steps.
5. Install the extension deployed in step 2.
6. Create a new form library with any name consisting entirely of letters (e.g. MyFormLibrary).
7. Navigate to the new form library, ensure it is showing in the modern UX, and upload a few files to it.
8. Open the browser console, paste the contents of this gist into the console, and press enter. This gist includes some functions for setting and getting the ClientSideComponentId and ClientSideComponentProperties settings on list/library fields.
9. In the console, enter the following line, substituting [site], [library], and [extension id] with the URL of the SharePoint site you are in, the name of the library you created in step 4, and the id (guid) of your field customizer, respectively, and press enter:

setAndCheckClientSideComponent(
    '[site]', 
    '[library]', 
    'Modified', 
    '[extension id]', 
    { sampleText: 'It works!' }
);

10. The console should display the following:

Finished setting field settings with status code: 204
Field settings retrieved:
  ClientSideComponentId: [extension id]
  ClientSideComponentProperties: {"sampleText":"It works!"}

11. Refresh the library page.
12. The values in the Modified column should now be prefixed with "It works!":
    
13. Repeat steps 8 and 9, but change Modified to LinkFilename in step 9. (LinkFilename is the InternalName of the document name column that is shown in form libraries by default.)
14. Issue: The console indicates that the request to change the column's settings completed with a 204 success status, but the query to retrieve these settings indicates that the ComponentId and ComponentProperties remain unmodified as 00000000-0000-0000-0000-000000000000 and null, respectively.
15. Refresh the library page.
16. Issue: The field customizer is not applied to the Name column.

Summary

The above steps demonstrate the following:

1. It is possible to apply a field customizer to certain form library columns, but not others.
2. It is not possible to modify the ClientSideComponentId or ClientSideComponentProperties of the LinkFilename column in a form library. This is also true for the LinkFileNameNoMenu and FileLeafRef columns.
3. Not surprisingly because of (2) and other reasons, it appears to not be possible to apply a field customizer to any of a form library's Name columns.

It's also possible to observe a similar issue when trying the extension in Debug mode.

Even in Debug mode, which circumvents the inability to modify the ComponentId and ComponentProperties on these columns, it's still not possible to appply a field customizer to any of the Name columns.

Here are the steps for that:

Repro steps: Attempting to apply a field customizer to form library columns in debug mode

1. Create a new field customizer project in accordance with the Create an extension project section of the tutorial. (note: you can skip this if you have already done this for the steps above)
2. Launch a server for the field customizer with gulp serve --nobrowser. (note: you can skip this if you already have a server running from the steps above)
3. Open SharePoint Online in any browser other than Internet Explorer and navigate to a site where you would like to test these steps.
4. Create a new form library with any name consisting entirely of letters (e.g. MyFormLibrary).
5. Navigate to the new form library, ensure it is showing in the modern UX, and upload a few files to it.
6. Add the following query string to the current page's URL after removing any query string that it already has. Replace [extension id] with your extension's id (guid), and press enter:

    ?loadSPFX=true&debugManifestsFile=https://localhost:4321/temp/manifests.js&fieldCustomizers={"Modified":{"id":"[extension id]","properties":{"sampleText":"It works!"}}}

7. Accept the prompt to load debug scripts.
8. The values in the Modified column should now be prefixed with "It works!". (same as screenshot above)
9. Repeat steps 6 and 7, but use LinkFilename instead of Modified in the query string.
10. Issue: The field customizer is not applied to the Name column.

[JLRishe]

Hi @ahackettms any word about this? I have just tried again and it looks like it's still not possible to apply a field customer to the built-in Name column of Form Libraries.

I would really like to know what the situation is because MS is pushing the Modern UX out to SPO environments and it will become increasingly difficult for my customers to use JSLink.

[JLRishe]

After a bit more investigation, it looks like I am able to apply a field customizer on the FileLeafRef column, and these changes are also reflected across all of the other name columns. I've also verified that I can use the REST API to set the ClientSideComponentId and ClientSideComponentProperties on this column.

So I think I may be squared away now. I will continue experimenting with this functionality.

[wobba]

@JLRishe I'm trying to apply a field customizer to FileLeafRef. Works fine in debug, but feature activation won't set the guid. Also, if I set the guid manually it still won't load. Could you provide steps as to how you got it working? Package settings and how you apply the id.

[JLRishe]

@wobba Can you clarify what you mean by "manually" when you say "if I set the guid manually"?

I haven't used the feature framework for this. I've had success setting the ClientSideComponentId and ClientSideComponentProperties using the REST API and have found that the field customizer works as expected when I do so.

I have a gist (also mentioned further up above) with some example code showing how to use the REST API to set these properties. I've also had success using the SPHttpClient to do so from within a webpart.

I haven't done anything out of the ordinary with the package settings. Basically just the defaults.

Some questions:

• If you query the field's properties, do they properly show the desired ClientSideComponentId?
• Are you also setting the ClientSideComponentProperties? It may be necessary to do so in order for the customizer to work.
• Have you checked the browser console during page loading to see if there are any errors there?

[wobba]

@JLRishe by manually I meant PowerShell. Are you using a global extension without feature activation? Or do youadd the app to the site? And then modify for example FileLeafRef on the libraries fields. I’ll give that a go. Would be ideal to do it on the site column so that all libs inherit, but I can work around that.

And appreciate the help :)

[JLRishe]

@wobba As of right now, I've been adding the app to individual sites and using REST to modify the properties on individual library fields. I hope you manage to get it working!

[wobba]

Ok..so add per site but without the feature.xml right?

[JLRishe]

@wobba Yes, that's what I mean. I don't have a feature.xml and my elements.xml just contains an empty <Elements> element.

[wobba]

@JLRishe Ok, so it works for Modifed and DocIcon, but not for FileLeafRef. FileLeafRef works fine in debug mode though.

[JLRishe]

@wobba That's very odd. Modifying FileLeafRef's properties and applying the field customer that way has been working for me for a few months now.

I assume you're using SharePoint Online? Not on-premises?

[wobba]

On-line yes. Tried in Doc lib and Site Pages. Could you try to create a sample sppkg which works on FileLeafRef and share it?

[wobba]

@JLRishe Also, which SPFx version are you using? I'm testing with v1.5.1.

[JLRishe]

@wobba Not sure where I would find the version number for that. Where should I look? Looks like I'm using v 1.4.1 of the @microsoft/sp-core-library.

I'll try to put together a sample sppkg tomorrow.

[wobba]

Seems 1.4.1 then :-) and thank you.

[JLRishe]

@wobba I think I've just made a discovery that might explain why you're having trouble.

In Debug mode, it seems that you have to indicate FileLeafRef as the column name and that overrides all three Name columns with the field customizer, but outside of Debug mode, the field customizer is applied to the column(s) that actually have its GUID in their properties.

Since the FileLeafRef column is not included in library views by default (LinkFilename is the Name column that's included by default), this might explain why you don't see anything happening.

Could you try displaying all three Name columns in your view at once, and see if the field customizer is being applied to any of them? If that works, it may make sense to apply the Component Id and Properties to all 3 Name columns when configuring them.

[wobba]

@JLRishe I'm sure I tested this yesterday as well.. but seems it works fine with LinkFilename. Oh well ;)

[ralftokada]

Hi @JLRishe and @wobba
I have successfully customized the FieldLeafRef field using the latest build 1.7.0 with the expected click behavior, although when clicking, both link and selection circle next to it are executed, maybe this is related to what is mentioned above about the 3 name columns are being customized.
I am trying to figure how to implement this when building the sppkg, replacing the LinkFilename and its build-in GUID {5cc6dc79-3710-4374-b433-61cb4a686c12} in the elements.xml file does not work.
I have read that to relate your fied customizer to the LinkFilename field a change needs to be applied using rest/csom to the ClientSideComponentId unfortunately I have not found an example to do it and how to add it to the solution.
Is there some guidness about how to set a deployment project for an existing field?

I appreciate any hint

Thanks

[wobba]

@ralftokada see my post with link to code:
https://www.techmikael.com/2018/08/highlighting-which-page-is-welcome-page.html

[ralftokada]

@wobba
Thanks you very much for showing how you set the ClientSideComponentId in your deployment project.
Unfortunately the LinkFilename field still cannot be customized without loosing other features and I notice you have to use the docicon instead, good workaround.

Although for my solution, I just need to customize the file link of any default view so it will launch an specific file type with a client installed app I will provide. without modifying any other feature. Sound simple but It has turn out to be quite a challenge.
Things desired:
DoubleClick is not customizable (I would like to get the same behavior of a single click)
Actions menu is lost
Circle selector is selected when the link is clicked, still do not why
hasPreview still do not what this does.

Thanks again

[wobba]

True.... would be nice to append to default behavior. You can always do DOM manipulation and hope it works forever ;)

[jonathanhotono]

@wobba In you solution, is it possible for the DocIcon to render the default value instead of rendering the default into aspx file? (e.g: folders, word, word docs being checked out)? Sorry if the question is a bit out of scope, but I'm trying to improvise your solution to manipulate the Name field for another purpose using the DocIcon method, however it seems that it is not possible to not rendering the default innerHTML value. If it's not possible, I might raise a feature request to render default value if not matching certain conditions.

    public async onRenderCell(event: IFieldCustomizerCellEventParameters): Promise<void> {
        event.domElement.className = styles.ext;
        let fileLeafRef = event.listItem.getValueByName("FileLeafRef");
        if (WELCOME_PAGE === fileLeafRef) {
            Log.info(LOG_SOURCE, 'Highlighting welcome page');
            event.domElement.innerHTML = `<i class="${styles.homeIcon}" aria-hidden="true"></i>`;
            let row = this.getClosest(event.domElement, ".ms-DetailsRow-fields") as HTMLDivElement;
            if (row) {
                row.style.fontWeight = "800";
            }
        } else {
            **event.domElement.innerHTML = '<img class="FileTypeIcon-icon" title="aspx File" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAUtJREFUeNpiYBgFlAFGQgqmTJnyn0Z2L8jJyUkkpIhpAAMnAej5+YQUsRBrWnZ2NlVcNXXqVHRHMuALyQELQQ0NDaJCcsAc6OzsTJQjBzINEuVIloFyHFpahDsSiBMHTQgSA0gOwQP3voHpg/e/ofBh9P92DbJKAxwhisWBFdcdoCwwPfH1ezAnp/LGoAnB/cic2z8FSTJwy5WXJKn30REftDUJUWDUgTTPxTMDJcB0mpkAivisUx/AdPr6F6MhiBfAQg49xGAhO5oGCSmAhRx6GqR12hs+IYgeUvQOyeFTDuIKSXRxQnXryAtBGEBv58FyNzo4efIkSQ4wNzcfIbmY2NxKKERGbhokFoymQSBwRO40qbK/ryelb0LtNIjpwA7NA7AeJojInzKlHrm7SKjbOeBp0EGJC4Wudx5tzVA0ljLaHhwFlAKAAAMApTB5hrOUthUAAAAASUVORK5CYII=" style="width: 20px; height: 20px;">';**
        }
    }

[wobba]

@jonathanhotono you cannot fallback to default, but have to implement logic yourself for the right icon. So getting support for default fallback would be ideal indeed.

[msft-github-bot]

Issues that have been closed & had no follow-up activity for at least 7 days are automatically locked. Please refer to our wiki for more details, including how to remediate this action if you feel this was done prematurely or in error: Issue List: Our approach to locked issues