Custom input/output tab in properties panel

How can we add custom input/output tab for process/any other element. We want to allow user to manually add input/output for process element through properties panel input/output tab, and the format we are using to .bpmn file is as mention below.

<bpmn:process id="bpocommon_CreateResource" name="BPO Common - Create Resource" isExecutable="true">
    <bpmn:extensionElements>
      <camunda:inputOutput>
        <camunda:inputParameter name="resourceId">fd123</camunda:inputParameter>
        <camunda:inputParameter name="resourceMap"><camunda:map>
            <camunda:entry key="parent_resource_id">1</camunda:entry>
            <camunda:entry key="data" />
            <camunda:entry key="wait_time">1</camunda:entry>
            <camunda:entry key="wait_active">5</camunda:entry>
          </camunda:map>
        </camunda:inputParameter>
        <camunda:inputParameter name="resourceList"><camunda:list>
            <camunda:value>l1</camunda:value>
            <camunda:value>l2</camunda:value>
          </camunda:list>
        </camunda:inputParameter>
        <camunda:outputParameter name="outputList">
          <camunda:list>
            <camunda:value>h1</camunda:value>
            <camunda:value>h2</camunda:value>
          </camunda:list>
        </camunda:outputParameter>
      </camunda:inputOutput>
    </bpmn:extensionElements>
  </bpmn:process>

You can check out the properties panel custom properties extension example.

Hi @beatriz.mendes, I have already gone through the property-panels example, but the requirement is a bit different.
We are trying to get a similar input/output tab as a callActivity tag for the process element.
for ex:
Screenshot 2023-04-12 at 1.48.38 PM
for ‘getProductId’ call activity this tab has been shown.
similar we need for <bpmn:process> tag.

I see that you are using an older version of the properties panel so you should look at the corresponding example: bpmn-js-examples/properties-panel-extension at b20919ac2231abf3df45b9dc9a2561010009b4a2 · bpmn-io/bpmn-js-examples · GitHub.

You can look at The MagicPropertiesProvider and look at how custom tabs and properties are added. You can also have a look at how the Input/Output group tab is originally implemented: bpmn-js-properties-panel/CamundaPropertiesProvider.js at 0.x · bpmn-io/bpmn-js-properties-panel · GitHub.