Skip to content
Petkir Blog
XLinkedinBluesky

SPFx CommandSet - How to Determine If a Selected Row Is a Folder or File

— Code, SPFx — 2 min read

When working with a list view, it's often necessary to distinguish between folders and files. Here's a handy code snippet to help you determine whether the selected row is a folder or a file:

this.context.listView.selectedRows?.length === 1 && this.context.listView.selectedRows[0].getValueByName("FSObjType") ==="0"

SPFx CommandSet implementation This code checks if there's exactly one selected row and if its "FSObjType" value is "0", indicating that it's a file. But how do you know what values to expect in the selected row? Here's a breakdown of the key information:

Values in SelectedRows Mainly Used Keys: .fileType: Specifies the file extension, e.g., "png". "FSObjType": Indicates the type of the item, where 1 stands for a folder and 0 for a file. Let's dive into a sample JSON representing a selected row:

{"ID" => "3"}
{"PermMask" => "0x7ffffffffffbffff"}
{"FSObjType" => "0"}
{"HTML_x0020_File_x0020_Type" => ""}
{"UniqueId" => "{163C1A67-56C4-4BC6-A180-FABED36DCA1B}"}
{"ProgId" => ""}
{"NoExecute" => "1"}
{"ContentTypeId" => "0x0101001C8F3D586D27CB4B8CEEE188DBBFD725"}
{"FileRef" => "/sites/Test1/Anweisungen/Info/Screenshot 2023-05-30 at 17.18.55.png"}
{"SMTotalSize" => "5194242"}
{"File_x0020_Size" => "852938"}
{"MediaServiceFastMetadata" => "{
    "billedEvents":[],
    "externalJobs":[],
     "photo":    {"width":2384,"height":1300},
     "tags":[
           {"name":"text","localizedName":null,"confidence":0.99937927722930908,"category":null},
           {"name":"screenshot","localizedName":null,"confidence":0.98435449600219727,"category":null},
           {"name":"display","localizedName":null,"confidence":0.93576586246490479,"category":null}
       ]
    }"}
{"_CommentFlags" => ""}
{"File_x0020_Type" => "png"}
{"File_x0020_Type.mapapp" => ""}
{"HTML_x0020_File_x0020_Type.File_x0020_Type.mapcon" => "SharePoint.OpenDocuments"}
{"HTML_x0020_File_x0020_Type.File_x0020_Type.mapico" => "icpng.gif"}
{"serverurl.progid" => ""}
{"ServerRedirectedEmbedUrl" => ""}
{"File_x0020_Type.progid" => "SharePoint.OpenDocuments.3"}
{"File_x0020_Type.url" => "FALSE"}
{"FileLeafRef" => "Screenshot 2023-05-30 at 17.18.55.png"}
{"CheckoutUser" => ""}
{"CheckedOutUserId" => ""}
{"IsCheckedoutToLocal" => "0"}
{"_ComplianceFlags" => ""}
{"_ShortcutUrl" => ""}
{"_ShortcutUrl.desc" => ""}
{"_ShortcutSiteId" => ""}
{"_ShortcutWebId" => ""}
{"_ShortcutUniqueId" => ""}
{"Created_x0020_Date" => "0;#2023-05-31 15:56:47"}
{"Created_x0020_Date.ifnew" => ""}
{"Editor" => Array(1)}
{"Modified" => "31.05.2023 15:57"}
{"Modified." => "2023-05-31T13:57:15Z"}
{"Modified.FriendlyDisplay" => "0|May 31"}
{"ItemChildCount" => "0"}
{"FolderChildCount" => "0"}
{"A2ODMountCount" => ""}
{"_StubFile" => "0"}
{"_ExpirationDate" => ""}
{"_ExpirationDate." => ""}
{"owshiddenversion" => "5"}
{"ContentVersion" => "2"}
{"DocConcurrencyNumber" => "5"}
{"_VirusStatus" => "0"}
{"Restricted" => ""}
{"PolicyDisabledUICapabilities" => "0"}
{"AccessPolicy" => "0"}
{".spItemUrl" => "https://pkirschner.sharepoint.com:443/_api/v2.0/drives/b!lihaiXnZT0iAEAv6kIzJi220wbxVrLpEmxBOgnwNLP5f_RKxSIAgSK6VVhpaXDle/items/016FLVTT3HDI6BNRCWYZF2DAH2X3JW3SQ3?version=Published"}
{".fileType" => "png"}
{".hasThumbnail" => "True"}
{".hasVideoManifest" => "False"}
{".hasPdf" => "False"}
{".hasOfficePreview" => "False"}
{".hasBxf" => "False"}
{".hasGlb" => "False"}
{".hasHtml" => "False"}
{".ctag" => ""c:{163C1A67-56C4-4BC6-A180-FABED36DCA1B},2""}
{".etag" => ""{163C1A67-56C4-4BC6-A180-FABED36DCA1B},5""}

Here, "FSObjType" is "0", indicating that this row represents a file.

Custom Date Column

Additionally, if you're dealing with custom date columns, you might encounter properties like:

{"ValidTo" => "08.06.2023 00:00"}
{"ValidTo." => "2023-06-07T22:00:00Z"}
{"ValidTo.FriendlyDisplay" => ""}

These properties provide information about the validity period of the file or folder.

By understanding these key properties and using the provided code snippet, you can effectively determine whether a selected row in your list view represents a folder or a file, empowering you to tailor your application's behavior accordingly.