# Custom Angular Application for Cumulocity platform

**URL:** <https://community.cumulocity.com/t/custom-angular-application-for-cumulocity-platform/7632>\
**Category:** Forum\
**Tags:** custom-app, Angular, custom-application, cumulocity\
**Created:** [May 27, 2024, 8:48am UTC](https://community.cumulocity.com/t/custom-angular-application-for-cumulocity-platform/7632 "2024-05-27T08:48:01Z")\
**Posts on this page:** 10\
**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:** [May 27, 2024, 8:48am UTC](https://community.cumulocity.com/t/custom-angular-application-for-cumulocity-platform/7632/1 "2024-05-27T08:48:01Z")

</div>

Good Morning, Everyone.

We are facing the need to create an custom application in Angular to be able to integrate it into the cumulocity platform. This custom application should be able to make queries to the cumulocity REST interface to be able to send and retrieve information in real time from the platform and be viewed by it currently logged in user.

So based on this need I have searched the platform documentation and I don’t know at the moment if there is an updated template to be able to perform this task.

If anyone in the forum has had the opportunity to do something similar and could give me a guide on how to deal with the situation and possible problems to investigate beforehand?

Any comment or suggestion will be welcome,

Thank you very much in advance.

---

<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:** [May 27, 2024, 9:16am UTC](https://community.cumulocity.com/t/custom-angular-application-for-cumulocity-platform/7632/2 "2024-05-27T09:16:51Z")

</div>

Hi

in generally a good starting point are these articles:

> [@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…

Especially Part 3 covers the most things you are asking for:

> [@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 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 [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)Part 3 has finally arrived! [about-time] In the [last part](https://community.cumulocity.com/t/cumulocity-web-development-tutorial-part-2-create-your-first-component/5569) you have implemented your first componen…

Also the “new” codex for web development contains a lot of good pointers and examples:  
[https://styleguide.cumulocity.com/apps/codex/#/getting-started/guides/data-access/overview](https://styleguide.cumulocity.com/apps/codex/#/getting-started/guides/data-access/overview)

---

<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:** [May 27, 2024, 9:40am UTC](https://community.cumulocity.com/t/custom-angular-application-for-cumulocity-platform/7632/3 "2024-05-27T09:40:07Z")

</div>

Excellent, it is a good example to start the application from scratch, but is there a template created by Software AG that can be reused?

thank you very much.

i will check it and will let you know.

---

<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:** [May 27, 2024, 9:47am UTC](https://community.cumulocity.com/t/custom-angular-application-for-cumulocity-platform/7632/4 "2024-05-27T09:47:20Z")

</div>

All the sources are published here:

> **[GitHub - Cumulocity-IoT/cumulocity-web-development-tutorial: Cumulocity web development tutorial](https://github.com/Cumulocity-IoT/cumulocity-web-development-tutorial)**
>
> Cumulocity web development tutorial

So it is kind of a template you can use and adapt it to your needs. You can check also the [open-source repositories](https://github.com/Cumulocity-IoT) for other “templates” or examples, for examples this one:

> **[GitHub - Cumulocity-IoT/cumulocity-community-plugins: This is a set of module federation plugins...](https://github.com/Cumulocity-IoT/cumulocity-community-plugins)**
>
> This is a set of module federation plugins developed and maintained by the community.

---

<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:** [May 28, 2024, 9:22am UTC](https://community.cumulocity.com/t/custom-angular-application-for-cumulocity-platform/7632/5 "2024-05-28T09:22:55Z")

</div>

Thank you very much…

---

<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:** [June 5, 2024, 7:25am UTC](https://community.cumulocity.com/t/custom-angular-application-for-cumulocity-platform/7632/6 "2024-06-05T07:25:50Z")

</div>

Hello,

I have followed the steps described and what I need to do works correctly, I just have some doubts about it:

1. How could I integrate my custom angular app “inside” the cumulocity platform, i mean, keep the side menu and the top bar and other elements present on the platform.

2. How to allow access to the Angular application only to people logged into the cumulocity platform, since at the moment if I copy and paste the url in another browser it allows me to access.

thanks in advance,

---

<div class="post-metadata">

**Author:** ![Tristan\_Bastian](https://dub1.discourse-cdn.com/flex005/user_avatar/community.cumulocity.com/tristan_bastian/32/18259_2.png) [@Tristan\_Bastian](https://community.cumulocity.com/u/Tristan_Bastian)\
**Post date:** [June 5, 2024, 8:23am UTC](https://community.cumulocity.com/t/custom-angular-application-for-cumulocity-platform/7632/7 "2024-06-05T08:23:21Z")

</div>

Hi @dacsystemsw,

You could use the `application` template when scaffolding a new application using the Web SDK. This would include stuff like the login screen, navigation, application switcher and more.  
The application template does not include the functionalities that are typically available in apps like cockpit/devicemanagement/administration. You would basically start from scratch, with a more or less empty app, where you could then implement your own views and add your own items to the navigation/side bars.

In case you would like to implement this without utilizing the Cumulocity Web SDK, you would have to implement functionality like e.g. the login on your own.  
Note that you should not place any sensitive information inside your angular application, as all of the static files of these apps are publicly accessible.

Regards,  
Tristan

---

<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:** [June 5, 2024, 9:59am UTC](https://community.cumulocity.com/t/custom-angular-application-for-cumulocity-platform/7632/8 "2024-06-05T09:59:54Z")

</div>

> [@Tristan\_Bastian](#):
>
> new application using the Web SDK

this: “new application using the Web SDK”, means application builder?

---

<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:** [June 5, 2024, 10:28am UTC](https://community.cumulocity.com/t/custom-angular-application-for-cumulocity-platform/7632/9 "2024-06-05T10:28:05Z")

</div>

If you mean embedding your app into existing application than you should look into plugins and hooks you can use. Can be anywhere integrated like navbar, as a widget, tab in device management etc.

If you want to keep the same structure but want to define it yourself then use the application template Tristan mentioned. No Tristan means to scaffold the application using the application template e.g.

```auto
ng add @c8y/websdk

? Which base project do you want to scaffold from?
  administration
  application
  cockpit
  devicemanagement
  hybrid
  tutorial
  widget-plugin
  package-blueprint

```

To your second point: Normally all of your deployed apps must be authenticated with a cumulocity user. Can you double check that you don’t share sessions e.g. inkognito tab or you running the app locally?

---

<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:** [December 2, 2024, 10:28am UTC](https://community.cumulocity.com/t/custom-angular-application-for-cumulocity-platform/7632/10 "2024-12-02T10:28:49Z")

</div>

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