# UI compoment state persistency

**URL:** https://community.cumulocity.com/t/ui-compoment-state-persistency/782
**Category:** Forum
**Tags:** persistency, cumulocity
**Created:** [July 12, 2022, 9:19am UTC](https://community.cumulocity.com/t/ui-compoment-state-persistency/782 "2022-07-12T09:19:27Z")
**Posts on this page:** 3
**Page:** 1

<div class="post-metadata">

### Author: ![dacsystemsw](https://avatars.discourse-cdn.com/v4/letter/d/e79b87/32.png) [@dacsystemsw](https://community.cumulocity.com/u/dacsystemsw)
#### Post date: [July 12, 2022, 9:19am UTC](https://community.cumulocity.com/t/ui-compoment-state-persistency/782/1 "2022-07-12T09:19:27Z")

</div>

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

Cumulocity IoT (backend **1011.0.19** frontend **1011.0.4** )

#### Are you using a free trial or a product with a customer license?

Customer license

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

Hi,  
It’s Luca from DAC System.  
We are starting to build a custom web application on top of cockpit. We are porting a 2D chart from a pre-existing application. This chart can be customized setting up some property from the UI like y-axis min/max value, lines color and so on. All these settings need to be persisted in some way, clearly we don’t want to set them every time we need to read the chart.

This is a very specific use case but I can generalize: what is the correct approach to persistency?

1. Use built-in API? What if the entity I need to persist doesn’t fit the “pre defined” collections i.e. inventory, alarms, events …?
2. Create some sort of persistency layer on a microservice? If this is the case I need some clarification on these statements I found on Cumulocity IoT docs. [Here](https://cumulocity.com/guides/microservice-sdk/concept/#requirements) it’s stated that “All persistent states must be stored at the Cumulocity IoT platform via inventory, binary, tenant options and other APIs. **Persistent volumes are not supported**.” On the other hand [here](https://cumulocity.com/guides/microservice-sdk/microservices-best-practices/) under the _statefullness_ paragraph: " Avoid statefulness wherever possible, rather write data via REST requests or **DB to a persistent shared storage** […]" What is the difference between a _persistent volume_ and a _persistent shared storage_ in this context?

Every bit of info or direction to look at is welcome.

Regards,  
Luca

---

<div class="post-metadata">

### Author: ![Christian\_Guether1](https://dub1.discourse-cdn.com/flex005/user_avatar/community.cumulocity.com/christian_guether1/32/14848_2.png) [@Christian\_Guether1](https://community.cumulocity.com/u/Christian_Guether1)
#### Post date: [July 12, 2022, 9:55am UTC](https://community.cumulocity.com/t/ui-compoment-state-persistency/782/2 "2022-07-12T09:55:38Z")

</div>

Hi Luca,

if you are using the Web SDK for Angular, you can define a `configComponent` for your widget. The `configComponent` is hooked into the configuration of a widget when you add it to a dashboard and extends it. As an example, have a look at this [widget](https://github.com/Cumulocity-IoT/cumulocity-indoor-air-quality-widget/blob/main/projects/gp-indoor-air-quality-c8y-widget/src/lib), which displays the indoor air quality. In the [module](https://github.com/Cumulocity-IoT/cumulocity-indoor-air-quality-widget/blob/main/projects/gp-indoor-air-quality-c8y-widget/src/lib/iaq.module.ts) you can find the general configuration of the widget. It also contains the definition of the component for the configuration: `configComponent: IndoorAirQualityWidgetConfigurationComponent`.

The [IndoorAirQualityWidgetConfigurationComponent](https://github.com/Cumulocity-IoT/cumulocity-indoor-air-quality-widget/blob/main/projects/gp-indoor-air-quality-c8y-widget/src/lib/iaq.config.component.ts) defines an input called `@Input() config`. This config is also later forwarded to your actual widget component as an input. Everything you save in the config variable will be persisted in the configuration of the dashboard Managed Object for the respective widget. There is no need to manage the persistence of the configuration of your widget yourself in some Microservice or whatsoever.

You can also have a look at the tutorial application, which comes with the c8y/cli: `c8ycli new <<your-app-name>> tutorial`. There you have a simple example inside the directory called `./widget`. See `./widget/demo-widget-config.component.ts` for additional details. It also comes with extensive comments.

Best regards  
Christian

---

<div class="post-metadata">

### Author: ![system](https://dub1.discourse-cdn.com/flex005/user_avatar/community.cumulocity.com/system/32/31990_2.png) [@system](https://community.cumulocity.com/u/system)
#### Post date: [October 10, 2022, 9:56am UTC](https://community.cumulocity.com/t/ui-compoment-state-persistency/782/3 "2022-10-10T09:56:34Z")

</div>

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.
