Create custom Widget to show Customers

[rafaelnogueira1]

Component

• UI

Description I'm trying to create a Widget using the Community Edition dashboard, and as I'm new to ThingsBoard, I'm attempting something that I'm not sure is possible.

I want to create a Widget that, when instantiated on the Dashboard, allows me to select a Customer and display all the devices owned by that Customer.

I've created a Static Widget type. I've been trying to modify the datasource to perform this search without success. I also created a field in the Settings Schema, but I couldn't populate this field with the registered Customers.

Can someone help me understand if this is possible and how I should proceed? Or am I thinking about how to use the information incorrectly, such as it not being possible to perform this action with a Customer?

Thank you guys!!

Environment

• OS: name and version
• ThingsBoard: 3.7 Community Edition
• Browser: name and version

---

Disclaimer

We appreciate your contribution whether it is a bug report, feature request, or pull request with improvement (hopefully). Please comply with the Community ethics policy, and do not expect us to answer your requests immediately. Also, do not treat GitHub issues as a support channel.

[devaskim]

To show customers you can use Entities Table with this Entity Alias

[rafaelnogueira1]

Hi @devaskim , thanks for the answer!! That is the only way to do this? Is there a way to make the search specific to customers? Some widgets do this, but from what I've seen, it's only with devices. I would like to have just one field to search for customers.

[devaskim]

That is the only way to do this?

It is the fastest way.

Is there a way to make the search specific to customers?

The Entities Table widget already has search feature.

[rafaelnogueira1]

@devaskim you seem to understand the panel development well. Can you help me with a question: Is it possible to use the service getCustomers to fetch all customers and populate a select field in the SettingsSchema? I tried to do it using getSettingsSchema or ctx.settings but without success. It only worked with manual information filling.

Or is it possible, using the Latest Values widget as a base, to remove some fields from the datasource? Set the type to default Entity and display only the Entity Alias field.

The goal would be to select one customer in this select field when instantiating the Widget, and display some of their information using their id.

I know it's possible to select the customer using Entity and Entity Alias type, but I would like to have a solution where all customers are already displayed to shorten the process.

[devaskim]

Is it possible to use the service getCustomers to fetch all customers and populate a select field in the SettingsSchema?

No

Or is it possible, using the Latest Values widget as a base

Yes, you may reuse TB component called tb-entity-autocomplete

In HTML section

      <tb-entity-autocomplete
          required
          [entityType]="'CUSTOMER'"
          (entityChanged)="onCustomerSelected(data)">
      </tb-entity-autocomplete>

In JS section

....
self.onInit = function() {
    ....
    self.ctx.$scope.onCustomerSelected = function(data) {
        console.log('Some customer data', data);
    }
}
....

Other input parameters of this TB component you can find here (search for @Input annotation)

[rafaelnogueira1]

Thank you very much for the answer, @devaskim

Initially, the result I was looking for was to be able to select the customer on this screen, without create an entity alias:

In this case, the solution you indicated gives me this result. But it also works well for this issue I need.

From what I understand so far, the screen I sent above, where we search for entities, cannot be maintained with just the Customer field, correct? The solution is to make this choice after the widget has already been instantiated then.

By the way, do you know how this function works and for what case it is appropriate? self.useCustomDatasources = function() {}

When I return a boolean through it, it is not possible to add any information to the widget.

That was really helpful man!!! :)

[devaskim]

cannot be maintained with just the Customer field, correct? Correct. Either device, or entity alias.

By the way, do you know how this function works and for what case it is appropriate?

No, but you can clone source code of TB UI and search for how this useCustomDatasources is being used.