How to create dynamic api call in widget configuration part or how to add api call is configurable in widget?

[thamizharasan (Thamizharasan Pandiyan)]

Hi Team,
I have static widget, i want to configure my API call to generic widget. kindly guide me here.

[Christian_Guether1 (Christian Guether)]

Hi,

can you provide some more details about what you are trying to achieve. Do you want to access Cumulocity’s internal API or do you want to access some 3rd party API of an external system?

Check out Cumulocity’s Tutorial application c8ycli new my-app tutorial to get an overview of different kind of concepts. There are also examples available on how to access Cumulocity’s API, e.g. the Inventory. See src/devices within the tutorial application on how to query device information.

For more information on the Angular client have a look at the documentation here and here

In case you want to access a 3rd party API, you can use for example the HttpClient. Make sure the API/server support CORS, otherwise API requests will be blocked by the browser.

Best regards
Christian

[thamizharasan (Thamizharasan Pandiyan)]

Hi,
I have created application-builder code and I have created one reusable widget but i want to configure API as a dynamic. Every time i’m going to use same widget so i need to configure dynamic API call.

Thanks,
Thamizharasan P

[Christian_Guether1 (Christian Guether)]

Hi Thamizharasan,

in this case you need to extend the configuration template for your widget with an additional input field, in which the URL or endpoint can be specified for your dynamic API call.

The tutorial application of the Web SDK has a simple example on how you can implement this. If you have cloned the tutorial application, you will find a sample widget called demo-widget within the src\widget directory.

The widget consists of a config component WidgetConfigDemo which extends the configuration with an additional text input. For your widget you would have to do the same.

import { Component, Input } from '@angular/core';
import { ControlContainer, NgForm } from '@angular/forms';
import { DynamicComponent } from '@c8y/ngx-components';

@Component({
  selector: 'c8y-widget-config-demo',
  template: `
    <div class="form-group">
      <c8y-form-group>
        <label translate>Text</label>
        <textarea style="width:100%" [(ngModel)]="config.text" name="text" [required]="true"></textarea>
      </c8y-form-group>
    </div>
  `,
  // We connect our parent Form to this form (for disabling the save button)
  // you can also enable the button by using ContextServiceDashboard.formDisabled
  // property instead (by default it is enabled).
  viewProviders: [ { provide: ControlContainer, useExisting: NgForm } ]
})
export class WidgetConfigDemo implements DynamicComponent {
  /**
   * The configuration which is shared between configuration component and display component.
   * Should be searilzabled to allow to save it to the API.
   */
  @Input() config: any = {};
}

Once the widget has been configured the config variable will provided as an input for your widget:

import { Component, Input } from '@angular/core';

@Component({
  selector: 'c8y-widget-demo',
  template: `
    <div class="p-16">
      <h1>Hi I'm a widget from angular</h1>
      <p class="text">{{ config?.text || 'No text' }}</p>
      <small>My context is: {{ config?.device?.name || 'No context' }}</small>
    </div>
  `,
  styles: [
    `
      .text {
        transform: scaleX(-1);
        font-size: 3em;
      }
    `
  ]
})
export class WidgetDemo {
  @Input() config;
}

Using the config you can access the URL or endpoint the user has specified in your configuration for the widget and create a dynamic API call.

Best regards
Christian