Add Custom Panel with custom msg

[cracosaurio]

Hi! I'm student and i'm trying make a custom panel with custom msg but i don't understand the flow, my first question what hierarchy i must have ( i have the rosboard package and workspace package in the same level), i have my package with my custom message: Custom.msg:

int32 example0
int32 example1
int32 example2
int32 example3
int32 example4
int32 example5

in my CMakeLists.txt i have added:

- find_package(std_msgs REQUIRED)
- find_package(rosidl_default_generators REQUIRED)
- ament_export_dependencies(rosidl_default_runtime)

in my package.xml i have added:

- <buildtool_depend>rosidl_default_generators</buildtool_depend>
- <depend>std_msgs</depend>
-<member_of_group>rosidl_interface_packages</member_of_group>

but i don't understand how to join de custom message to new panel, should I add the subscriber in the custom package or in the rosboard package(where i make the python file with the topic and the logic? Here is my .js:

"use strict";

class VehicleDataViewer extends Viewer {
  onCreate() {
    this.card.title.text("Vehicle Data");
    this.viewerNode = $('<div></div>')
      .addClass('vehicle-data-viewer')
      .css({'font-size': '14pt', 'padding': '10px'})
      .appendTo(this.card.content);

    this.fields = [
          'example0',
          'example1',
          'example2',
          'example3',
          'example4',
          'example5'
];
    this.dataTable = $('<table></table>')
      .addClass('mdl-data-table')
      .addClass('mdl-js-data-table')
      .css({'width': '100%', 'table-layout': 'fixed' })
      .appendTo(this.viewerNode);
    this.fieldNodes = {};
    this.fields.forEach(field => {
      let tr = $('<tr></tr>').appendTo(this.dataTable);
      $('<td></td>')
        .text(this.fieldLabels[field])
        .css({'font-weight': 'bold'})
        .appendTo(tr);
      this.fieldNodes[field] = $('<td></td>').appendTo(tr);
    });

    super.onCreate();
  }

  onData(data) {
    this.fields.forEach(field => {
      this.fieldNodes[field].text(data[field] || 'N/A');
    });
  }
}

VehicleDataViewer.friendlyName = "Vehicle Data";

VehicleDataViewer.supportedTypes = [
    "std_msgs/msg/Int32.msg"
];

Viewer.registerViewer(VehicleDataViewer);

also i have imported to index.js.