Custom Angular Application for Cumulocity platform

, , , , ,
1

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.

2

Hi

in generally a good starting point are these articles:

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

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

3

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.

4

All the sources are published here:

So it is kind of a template you can use and adapt it to your needs. You can check also the open-source repositories for other “templates” or examples, for examples this one:

5

Thank you very much…

6

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,

7

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

8

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

9

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.

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?