Persist input value in Angular component

[dacsystemsw (DAC Software)]

What product/components do you use and which version/fix level are you on?

Cumulocity IoT (backend 1011.0.19 frontend 1011.0.4)

Is your question related to the free trail, or to a production (customer) instance?

Customer license

What are you trying to achieve? Please describe in detail.

Hi it’s Luca,
I don’t know how to persist an input field in an Angular component.

This is what i’ve done so far.
I created an empty project using: c8ycli new spike-componentscommunication cockpit
Then following this tutorial, I created a new component with the corresponding item in the navigator. The result looks like this:

Side note: I’m using this input to feed a widget with its value

My problem is that if I enter a value then refresh the page I lose what I inserted before. I need the value to be persisted in some way.
Here it’s exaplaned how to persist a value within a widget/dashboard context but I think this is not the same case.

Regards,
Luca

[Tristan_Bastian]

Hi Luca,

you could store/retrieve a single simple value easily e.g. in the tenant options like this:

  private readonly category = 'myCategory';
  private readonly key = 'myKey';

  constructor(private tenantOption: TenantOptionsService) {}

  async storeInputFieldValue(value: string): Promise<void> {
    await this.tenantOption.update({ category: this.category, key: this.key, value });
  }

  async getValue(): Promise<string> {
    try {
      const { data: tenantOption } = await this.tenantOption.detail({ category: this.category, key: this.key });
      return tenantOption.value;
    } catch {
      // tenant option is initially not existing
      return '';
    }
  }

Note that the any user accessing the tenant options requires a specific set of permissions to do so.

You might want to store more complex object in the Inventory e.g. like this:

  private readonly attribute = 'myObjAttribute';

  constructor(private inventory: InventoryService) {}

  async storeObjectValue(value: any): Promise<void> {
    try {
      const existingObj = await this.getObject();
      await this.inventory.update({
        id: existingObj.id,
        [this.attribute]: value
      });
    } catch {
      // Object not found on first save
      await this.inventory.create({[this.attribute]: value});
    }
  }

  async getObjectValue<T>(): Promise<T> {
    const obj = await this.getObject();
    return obj[this.attribute];
  }

  private async getObject(): Promise<IManagedObject> {
    const { data } = await this.inventory.list({ fragmentType: this.attribute, pageSize: 1 });
    if (!data.length) {
      throw Error('Not found');
    }
    return data[0];
  }

note that this is just some pseudo code, that I did not actually run/test, but you might be able to get the idea.

Regards,
Tristan