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
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
1 Like
