Detail ID vs Detail Name CPF

Help
1

We’d like to replace “Device” with the “Device Name” on the Dashboard, similar to how it’s shown on the Devices page.
Would replacing “Device” with “Device Name” on the cpf-element-events-table page achieve this? We weren’t able to get it to work. Any assistance would be greatly appreciated.
Thanks!

Device
2

You can make a change to cpf-element-events-table to display the device name instead of the device ID.

On line 132 (the specific line in your version may be slightly different), change this:

<td><a href="/devices/{{this.deviceId}}">{{this.deviceId}}</a></td>

to

<td><a href="/devices/{{this.deviceId}}">{{this.deviceName}}</a></td>

You can inspect the render log to see which fields are available:

image
image1920×1037 152 KB

One caveat is that this change does not modify the header, where you can filter by device ID. Changing that to device name is much more invasive and requires changes to this element, its Stimulus controller (cpf-js-element-events-table) and the element’s workflow (cpf-element-events-table). That said, the device ID filter will continue to work even when displaying device name instead of ID.

3

Thank you Brandon. The first part work as stated but you know I attempted to fix the header. Let’s just say I deeply value and appreciate the “Copy to develop” backstop. We will try again tomorrow. Hiccup is either the workflow or the filter. I took a look at the device details for clues but it’s best to start over tomorrow before I get myself further lost.

4

Hi Brandon, we had an unsuccessful attempt to make the Device Name filter work on the Main Dashboard. Quick Question - why is there a difference in the CPF-Page-Device-Details vs CPF-Element-Events table in showing/filtering Device Name vs Device ID?

5

Both the device details page and the dashboard page use the same underlying element, cpf-element-events-table.

If you look at the device details page, under the events tab, you’ll see the Turbo Frame:

<turbo-frame
  id="cpf-element-events-table"
  src="/cpf/elements/events-table?hideDeviceColumn=true&device={{request.params.deviceId}}"
  target="_top"
  loading="lazy">
  <img class="cpf-spinner" src="{{file 'spinner.gif'}}">
</turbo-frame>

For the dashboard, you’ll see a very similar Turbo Frame:

<turbo-frame
  id="cpf-element-events-table"
  src="/cpf/elements/events-table"
  target="_top">
  <img class="cpf-spinner" src="{{file 'spinner.gif'}}">
</turbo-frame>

The differences are:

  1. The device details page adds the hideDeviceColumn and device parameters to the Turbo Frame src. This is because you are looking at events specifically for a single device. Those parameters are used to automatically filter the events table to a single device and then hide the device column (there’s no need for that column because it’s always a single device).
  2. The device details page adds loading="lazy" because it does not need rendered until the user actually clicks the “Events” tab.