How to set ContextMenu option in ListViewCommand Set in SPFx

Question

In spfx listview command set, I want to add a new context menu option to list items. I have this

elements.xml

<?xml version="1.0" encoding="utf-8"?>
<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
    <CustomAction
        Title="ImagePicker"
        RegistrationId="100"
        RegistrationType="List"
        Location="ClientSideExtension.ListViewCommandSet.ContextMenu"
        ClientSideComponentId="e15a3da8-5684-44f5-abc8-e9c72f5bb926"
        ClientSideComponentProperties="{&quot;sampleTextOne&quot;:&quot;One item is selected in the list.&quot;, &quot;sampleTextTwo&quot;:&quot;This command is always visible.&quot;}">
    </CustomAction>
</Elements>

and clientsideinstance.xml

<?xml version="1.0" encoding="utf-8"?>
<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
    <ClientSideComponentInstance
        Title="ImagePicker"
        Location="ClientSideExtension.ListViewCommandSet.ContextMenu"
        ListTemplateId="100"
        Properties="{&quot;sampleTextOne&quot;:&quot;One item is selected in the list.&quot;, &quot;sampleTextTwo&quot;:&quot;This command is always visible.&quot;}"
        ComponentId="e15a3da8-5684-44f5-abc8-e9c72f5bb926" />
</Elements>

but when I test on gulp serve, it only appears in the top command bar, not on the list item. Anyone know what's wrong?

Answer 1

Check the value of "location" in your config/serve.json file.

Answer 2

The above config is for deployment. If you do gulp serve then the config from serve.json will appear in debug mode.