Procedure to use new custom properties to SPFx ListView Command project

If you need to add a new custom property like "sampleTextThree" with value "This is new text." to be used in SPFX extension ListView Command project. You should following the following steps.

1. Add sampleTextThree as string in the interface

sampleTextOne: string;
sampleTextTwo: string;
sampleTextThree: string;

2. Add property to serve.json like below.

"default": {
"pageUrl": "https://mysompont.sharepoint.com/sites/HarryTestX/Shared%20Documents/Forms/AllItems.aspx",
"customActions": {
"4de6483f-cccf-465d-b0ee-4aa6ebb0eb81": {
"location": "ClientSideExtension.ListViewCommandSet.CommandBar",
"properties": {
"sampleTextOne": "One item is selected in the list",
"sampleTextTwo": "This command is always visible.",
"sampleTextThree": "This is new text."
...

3. Change the default alert to use new property.

switch (event.itemId) {
case 'COMMAND_3':
Dialog.alert(${this.properties.sampleTextThree});
...

4. Gulp serve run locally is fine. However, after this deployed to tenant, the property cannot be found and is "null" as indicated in here.

You should add another step#5.

5. Add the new custom property to "elements.xml" like below.

 ClientSideComponentProperties="{"sampleTextOne":"One item is selected in the list.", "sampleTextTwo":"This command is always visible."**, "sampleTextThree":"This command is new text."**}">

From my understanding, the serve.json is used by run locally "gulp serve" and the elements.xml is used by SharePoint online tenant. At this point, the new property can be picked up locally or deployed to SPO tenant.

I'm hoping the SPFx can enhance the build process to incorporate the configuration from serve.json and build to element.xml.