SOLVED

Adding new (SPFX based) ecb Menu Item with showProperties function

%3CLINGO-SUB%20id%3D%22lingo-sub-2281279%22%20slang%3D%22en-US%22%3EAdding%20new%20(SPFX%20based)%20ecb%20Menu%20Item%20with%20showProperties%20function%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-2281279%22%20slang%3D%22en-US%22%3E%3CP%3EHello%20everybody%2C%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EI%20hope%20you%20can%20help%20me%20out%20with%20my%20question.%20I%20was%20searching%20a%20whole%20day%20and%20I%20couldnt%20find%20a%20solution.%3C%2FP%3E%3CP%3E%3CBR%20%2F%3EI%20am%20working%20with%20SharePoint%20Online%20and%20my%20goal%20is%20to%20make%20the%20%22Properties%22%20button%20for%20a%20file%20inside%20a%20document%20library%20more%20accessable.%20Cause%20the%20button%20is%20really%20hidden%20in%20subsubmenues.%3C%2FP%3E%3CP%3E%3CBR%20%2F%3EI%20would%20like%20to%20create%20my%20own%20(SPFX%20based)%20ecb%20menu%20item.%20which%20I%20already%20did%2C%20but%20now%20I%20would%20like%20to%20open%20the%20properties%20of%20the%20selected%20Item%20and%20I%20have%20no%20idea%20how.%26nbsp%3B%3C%2FP%3E%3CP%3E%3CBR%20%2F%3EWhen%20I%20look%20up%20the%20event%20receivers%20of%20that%20button%20I%20only%20see%20jibberish.%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EDoes%20anybody%20know%20how%20to%20call%20the%20%22ShowPropertiesAction%22%20inside%20a%20document%20library%3F%3C%2FP%3E%3CP%3E%3CBR%20%2F%3EI%20am%20very%20happy%20for%20any%20answers%3C%2FP%3E%3CP%3E%3CBR%20%2F%3EWith%20regards%2C%3C%2FP%3E%3CP%3EKevin%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-2282451%22%20slang%3D%22en-US%22%3ERe%3A%20Adding%20new%20(SPFX%20based)%20ecb%20Menu%20Item%20with%20showProperties%20function%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-2282451%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F1033520%22%20target%3D%22_blank%22%3E%40powerCorner%3C%2FA%3E%26nbsp%3BYou%20can%20achieve%20similar%20functionality%20using%20JSON%20formatting%20with%20less%20efforts.%20Follow%20below%20steps%3A%3C%2FP%3E%3CP%3E1.%20Create%20a%20new%20single%20line%20of%20text%20column%20in%20document%20library%3C%2FP%3E%3CP%3E2.%20Format%20the%20newly%20created%20column%20using%20below%20JSON%3A%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CPRE%20class%3D%22lia-code-sample%20language-json%22%3E%3CCODE%3E%7B%0A%20%20%22%24schema%22%3A%20%22https%3A%2F%2Fdeveloper.microsoft.com%2Fjson-schemas%2Fsp%2Fv2%2Fcolumn-formatting.schema.json%22%2C%0A%20%20%22elmType%22%3A%20%22button%22%2C%0A%20%20%22txtContent%22%3A%20%22Open%20properties%22%2C%0A%20%20%22customRowAction%22%3A%20%7B%0A%20%20%20%20%22action%22%3A%20%22editProps%22%0A%20%20%7D%0A%7D%3C%2FCODE%3E%3C%2FPRE%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E3.%20Hide%20this%20column%20from%20library%20forms%20(make%20it%20%3CSTRONG%3EHidden%26nbsp%3B%3C%2FSTRONG%3Efrom%20advanced%20content%20type%20management%20settings).%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CSTRONG%3EOutput%3C%2FSTRONG%3E%3A%3C%2FP%3E%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20image-alt%3D%22ganeshsanap_0-1619177409055.png%22%20style%3D%22width%3A%20400px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F274953i5CBA7A7AF22F55B2%2Fimage-size%2Fmedium%3Fv%3Dv2%26amp%3Bpx%3D400%22%20role%3D%22button%22%20title%3D%22ganeshsanap_0-1619177409055.png%22%20alt%3D%22ganeshsanap_0-1619177409055.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%3CP%3EOn%20click%20of%20this%20button%2C%20file%20properties%20pane%20will%20be%20open%20at%20the%20right%20side.%20Optionally%2C%20you%20can%20apply%20styling%20to%20the%20button%20as%20per%20your%20requirements.%20for%20that%20check%20%3CA%20href%3D%22https%3A%2F%2Fdocs.microsoft.com%2Fen-us%2Fsharepoint%2Fdev%2Fdeclarative-customization%2Fcolumn-formatting%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%22%3Eofficial%20documentation%20of%20JSON%20formatting%3C%2FA%3E.%3C%2FP%3E%3CHR%20%2F%3E%3CP%3EPlease%20click%26nbsp%3B%3CSTRONG%3EMark%20as%20Best%20Response%3C%2FSTRONG%3E%26nbsp%3B%26amp%3B%20%3CSTRONG%3ELike%3C%2FSTRONG%3E%20if%20my%20post%20helped%20you%20to%20solve%20your%20issue.%20This%20will%20help%20others%20to%20find%20the%20correct%20solution%20easily.%20It%20also%20closes%20the%20item.%20If%20the%20post%20was%20useful%20in%20other%20ways%2C%20please%20consider%20giving%20it%20%3CSTRONG%3ELike%3C%2FSTRONG%3E.%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-2287760%22%20slang%3D%22en-US%22%3ERe%3A%20Adding%20new%20(SPFX%20based)%20ecb%20Menu%20Item%20with%20showProperties%20function%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-2287760%22%20slang%3D%22en-US%22%3EThank%20you%20very%20much%20%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F373269%22%20target%3D%22_blank%22%3E%40ganeshsanap%3C%2FA%3E!%3CBR%20%2F%3E%3CBR%20%2F%3EThis%20was%20exactly%20what%20I%20was%20looking%20for!!!%20Man%20that%20is%20so%20much%20easiert%20then%20doing%20stuff%20with%20the%20ECB%20menu%20and%20SPfx%20%3A)%3C%2Fimg%3E%3CBR%20%2F%3E%3CBR%20%2F%3EWith%20regards%2C%3CBR%20%2F%3EKevin%3C%2FLINGO-BODY%3E
New Contributor

Hello everybody,

 

I hope you can help me out with my question. I was searching a whole day and I couldnt find a solution.


I am working with SharePoint Online and my goal is to make the "Properties" button for a file inside a document library more accessable. Cause the button is really hidden in subsubmenues.


I would like to create my own (SPFX based) ecb menu item. which I already did, but now I would like to open the properties of the selected Item and I have no idea how. 


When I look up the event receivers of that button I only see jibberish. 

 

Does anybody know how to call the "ShowPropertiesAction" inside a document library?


I am very happy for any answers


With regards,

Kevin

2 Replies
best response confirmed by powerCorner (New Contributor)
Solution

@powerCorner You can achieve similar functionality using JSON formatting with less efforts. Follow below steps:

1. Create a new single line of text column in document library

2. Format the newly created column using below JSON:

 

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "button",
  "txtContent": "Open properties",
  "customRowAction": {
    "action": "editProps"
  }
}

 

3. Hide this column from library forms (make it Hidden from advanced content type management settings).

 

Output:

ganeshsanap_0-1619177409055.png

On click of this button, file properties pane will be open at the right side. Optionally, you can apply styling to the button as per your requirements. for that check official documentation of JSON formatting.


Please click Mark as Best Response & Like if my post helped you to solve your issue. This will help others to find the correct solution easily. It also closes the item. If the post was useful in other ways, please consider giving it Like.

Thank you very much @ganeshsanap!

This was exactly what I was looking for!!! Man that is so much easiert then doing stuff with the ECB menu and SPfx :)

With regards,
Kevin