# How to get alarm in my html custom widget

**URL:** <https://community.cumulocity.com/t/how-to-get-alarm-in-my-html-custom-widget/3323>\
**Category:** Forum\
**Tags:** device-connectivity, cumulocity\
**Created:** [March 28, 2023, 5:47am UTC](https://community.cumulocity.com/t/how-to-get-alarm-in-my-html-custom-widget/3323 "2023-03-28T05:47:49Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![sumit.singh](https://avatars.discourse-cdn.com/v4/letter/s/e9c0ed/32.png) [@sumit.singh](https://community.cumulocity.com/u/sumit.singh)\
**Post date:** [March 28, 2023, 5:47am UTC](https://community.cumulocity.com/t/how-to-get-alarm-in-my-html-custom-widget/3323/1 "2023-03-28T05:47:49Z")

</div>

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

Cumulocity  
Backend: **1015.0.278**  
UI: **1011.0.38**

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

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

 ![alarms](https://europe1.discourse-cdn.com/flex005/uploads/cumulocity/original/3X/d/3/d3ae03883ab8ace904386880b6a48c0f23fddeb7.jpeg)  
I am getting this alarm on Cumulocity through Mqtt now i want to show these alarm on my custom widget i mean how i can listen these alarm on this widget which i have develop in cunulocity using html  
 ![widget](https://europe1.discourse-cdn.com/flex005/uploads/cumulocity/original/3X/8/b/8b918f394c6b58e05340c4714161d46eea36ca40.jpeg)  
i want to show alarm by parsed alarm json in html custom widget refere above image for widget which i developed using html

#### Do you get any error messages? Please provide a **full error** message screenshot and log file.

#### Have you installed all the latest fixes for the products and systems you are using?

---

<div class="post-metadata">

**Author:** ![Stefan\_Witschel](https://dub1.discourse-cdn.com/flex005/user_avatar/community.cumulocity.com/stefan_witschel/32/31955_2.png) [@Stefan\_Witschel](https://community.cumulocity.com/u/Stefan_Witschel)\
**Post date:** [March 28, 2023, 9:31am UTC](https://community.cumulocity.com/t/how-to-get-alarm-in-my-html-custom-widget/3323/2 "2023-03-28T09:31:41Z")

</div>

Hi @sumit.singh ,

not sure where to start 🙂  
First of all your alarms and devices look awkward.  
The alarm type seems to a a total mess and should follow the principal “prefix\_” Instead it seems you have a json string used as a type which makes it very hard to use within the Cumulocity IoT platform.

Your device name also looks strange. You should have a common naming pattern how you would name your device. Using blanks and underscores and also special characters in the name like % makes it very hard to read and work with the platform.

Now to your initial request: If you would follow the naming patterns of alarms you could use the default alarm widgets in your cockpit. Still if you want to adapt the widget to your needs you should follow the web development guides here: [Overview - Cumulocity IoT Guides](https://cumulocity.com/guides/web/overview/) or here: [Cumulocity IoT Web Development Tutorial - Part 3: Query data from Cumulocity IoT](https://community.cumulocity.com/t/cumulocity-iot-web-development-tutorial-part-3-query-data-from-cumulocity-iot/7678) (especially how to query data).

Mainly you cannot just use HTML but you need to write a web app (angular preferred) with a component using @c8y/client to retrieve the alarm and visualize it in your widget.

---

<div class="post-metadata">

**Author:** ![sumit.singh](https://avatars.discourse-cdn.com/v4/letter/s/e9c0ed/32.png) [@sumit.singh](https://community.cumulocity.com/u/sumit.singh)\
**Post date:** [March 29, 2023, 9:25am UTC](https://community.cumulocity.com/t/how-to-get-alarm-in-my-html-custom-widget/3323/3 "2023-03-29T09:25:52Z")

</div>

Thank You @Stefan_Witschel , I will follow your suggestion it will help me to develop web app , but how i will able to retrieve alarms for this ,what I will use either from API or from Cumulocity which I have in JSON format on Cumulocity?

---

<div class="post-metadata">

**Author:** ![Stefan\_Witschel](https://dub1.discourse-cdn.com/flex005/user_avatar/community.cumulocity.com/stefan_witschel/32/31955_2.png) [@Stefan\_Witschel](https://community.cumulocity.com/u/Stefan_Witschel)\
**Post date:** [March 29, 2023, 9:29am UTC](https://community.cumulocity.com/t/how-to-get-alarm-in-my-html-custom-widget/3323/4 "2023-03-29T09:29:47Z")

</div>

Please have a look here: [Cumulocity IoT Web Development Tutorial - Part 3: Query data from Cumulocity IoT](https://community.cumulocity.com/t/cumulocity-iot-web-development-tutorial-part-3-query-data-from-cumulocity-iot/7678#query-data-using-c8yclient-4)

The c8y/client comes with an AlarmService:  
[http://resources.cumulocity.com/documentation/websdk/client/classes/alarmservice.html](http://resources.cumulocity.com/documentation/websdk/client/classes/alarmservice.html)

So you can easily query any data (also alarms) with it and visualize that data accordingly.

---

<div class="post-metadata">

**Author:** ![sumit.singh](https://avatars.discourse-cdn.com/v4/letter/s/e9c0ed/32.png) [@sumit.singh](https://community.cumulocity.com/u/sumit.singh)\
**Post date:** [March 29, 2023, 9:33am UTC](https://community.cumulocity.com/t/how-to-get-alarm-in-my-html-custom-widget/3323/5 "2023-03-29T09:33:03Z")

</div>

Thank You @Stefan_Witschel It will help me a lot .

---

<div class="post-metadata">

**Author:** ![sumit.singh](https://avatars.discourse-cdn.com/v4/letter/s/e9c0ed/32.png) [@sumit.singh](https://community.cumulocity.com/u/sumit.singh)\
**Post date:** [April 4, 2023, 12:58pm UTC](https://community.cumulocity.com/t/how-to-get-alarm-in-my-html-custom-widget/3323/6 "2023-04-04T12:58:44Z")

</div>

Hi @Stefan_Witschel I have gone through the above link which u have provided me ,  
I am getting confuse with this web sdk docs ,

I want to develop custom widget using angular so that I can show my alarms on Cumulocity using those custom widget , I have alarm API I want to integrate it in my angular application once custom widget work done and then want to deploy this application on Cumulocity “cloud you please refer me some step by step guide or example” so that I can easily develop my custom widget in angular and deploy it on Cumulocity it will be Helpfull for me ,this will give me clear under standing .

Thanks and regards  
sumit singh

---

<div class="post-metadata">

**Author:** ![Stefan\_Witschel](https://dub1.discourse-cdn.com/flex005/user_avatar/community.cumulocity.com/stefan_witschel/32/31955_2.png) [@Stefan\_Witschel](https://community.cumulocity.com/u/Stefan_Witschel)\
**Post date:** [April 4, 2023, 2:26pm UTC](https://community.cumulocity.com/t/how-to-get-alarm-in-my-html-custom-widget/3323/7 "2023-04-04T14:26:08Z")

</div>

Actually the Web Developer Series is exactly what you are looking for:

> [@Cumulocity IoT Web Development Tutorial - Part 1: Start your journey](https://community.cumulocity.com/t/cumulocity-iot-web-development-tutorial-part-1-start-your-journey/4124):
>
> Cumulocity IoT Web Development Tutorial - Part 1: Start your journey [Cumulocity IoT Web Development Tutorial - Part 2: Create your first component](https://community.cumulocity.com/t/cumulocity-iot-web-development-tutorial-part-2-create-your-first-component/5569)[Cumulocity IoT Web Development Tutorial - Part 3: Query data from Cumulocity IoT](https://community.cumulocity.com/t/cumulocity-iot-web-development-tutorial-part-3-query-data-from-cumulocity-iot/7678)[Cumulocity IoT Web Development Tutorial - Part 4: Convert component into a widget](https://community.cumulocity.com/t/cumulocity-iot-web-development-tutorial-part-4-convert-component-into-a-widget/2873)[Cumulocity IoT Web Development Tutorial - Part 5: Provide widget as a UI Plugin](https://community.cumulocity.com/t/cumulocity-iot-web-development-tutorial-part-5-provide-widget-as-a-ui-plugin/3926)A new journey Starting your journey as a web developer in Cumulocity IoT can be quite overwhelming in…

It is starting with basic setup of web development tooling (Part 1) and ends with building a widget and deploying it to cumulocity.

> [@Cumulocity IoT Web Development Tutorial - Part 4: Convert component into a widget](https://community.cumulocity.com/t/cumulocity-web-development-tutorial-part-4-convert-component-into-a-widget/2873#convert-the-device-info-component-into-a-c8y-widget-3):
>
> [Cumulocity IoT Web Development Tutorial - Part 1: Start your journey](https://community.cumulocity.com/t/cumulocity-iot-web-development-tutorial-part-1-start-your-journey/4124)[Cumulocity IoT Web Development Tutorial - Part 2: Create your first component](https://community.cumulocity.com/t/cumulocity-iot-web-development-tutorial-part-2-create-your-first-component/5569)[Cumulocity IoT Web Development Tutorial - Part 3: Query data from Cumulocity IoT](https://community.cumulocity.com/t/cumulocity-iot-web-development-tutorial-part-3-query-data-from-cumulocity-iot/7678) Cumulocity IoT Web Development Tutorial - Part 4: Convert component into a widget [Cumulocity IoT Web Development Tutorial - Part 5: Provide widget as a UI Plugin](https://community.cumulocity.com/t/cumulocity-iot-web-development-tutorial-part-5-provide-widget-as-a-ui-plugin/3926)Welcome to the 4th round of the web development series. [minion-boxing] In the [last part](https://community.cumulocity.com/t/cumulocity-web-development-tutorial-part-3-query-data-from-cumulocity/7678) you have …

In part 3 it was explained how to use the c8yclient to retrieve data and visualize it.  
So everything is there.

---

<div class="post-metadata">

**Author:** ![sumit.singh](https://avatars.discourse-cdn.com/v4/letter/s/e9c0ed/32.png) [@sumit.singh](https://community.cumulocity.com/u/sumit.singh)\
**Post date:** [April 5, 2023, 6:49am UTC](https://community.cumulocity.com/t/how-to-get-alarm-in-my-html-custom-widget/3323/8 "2023-04-05T06:49:58Z")

</div>

Thank You @Stefan_Witschel for these info , It will give me better understanding for developing web application for Cumulocity .

---

<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 2, 2023, 6:50am UTC](https://community.cumulocity.com/t/how-to-get-alarm-in-my-html-custom-widget/3323/9 "2023-10-02T06:50:40Z")

</div>

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