Change application icon

,
1

Hi all,
it’s Luca from DacSystem.

Is it possible to change via GUI (i.e. not programmatically) the app icon (attached figure)?

Regards
Luca

image
image1803×675 58 KB

2

Luca,

No it has to be done as part of the custom application you have uploaded (DAC-DASHBOARD).

image001.png

image002.png

image003.png

image005.png

image006.png

image007.png

image008.jpg
image008.jpg728×90 38.8 KB

image009.png

3

mm ok. So is it possible to change it programmatically?

regards,
Luca

4

This from KB 46467466

The icon can only be custom at version 10.5 onwards. At 10.4.6 it is not possible.

At 10.5 the applications package.json can have an icon option as follows (example from c8yicontest3 application)…

“c8y”: {

“application”: {

“name”: “c8yicontest3”,

“contextPath”: “c8yicontest3”,

“key”: “c8yicontest3-application-key”,

“icon”: { “url”: “url(/apps/c8yicontest3/icon3.jpg)”}

},

1 Like
5

There’s no way I can find the article you mention.
In the knowledge center query im doing something like this:

image
image1821×790 125 KB

What am I missing?

Luca

6

Search for ‘set custom application icon’

1799650 is perhaps most relevant.

7

I know this shuld be easy but I cannot make it work.

Steps I followed so far:

  1. I have an svg icon under the folder myProject/branding/cockpit.svg
  2. Modified package.json:
"c8y": {
    "application": {
      "name": "dac-dashboard",
      "contextPath": "dac-dashboard",
      "key": "dac-dashboard-application-key",
      "tabsHorizontal": true,
      "upgrade": true,
      "rightDrawer": true,
      "breadcrumbs": false,
      "sensorAppOneLink": "http://onelink.to/pca6qe",
      "sensorPhone": true,
      "contentSecurityPolicy": "base-uri 'none'; default-src 'self' 'unsafe-inline' http: https: ws: wss:; connect-src 'self' http: https: ws: wss:;  script-src 'self' open.mapquestapi.com *.twitter.com *.twimg.com *.aptrinsic.com 'unsafe-inline' 'unsafe-eval' data:; style-src * 'unsafe-inline' blob:; img-src * data:; font-src * data:; frame-src *; worker-src 'self' blob:;",
      "dynamicOptionsUrl": "/apps/public/public-options/options.json",
      "brandingEntry": "./src/branding.less",
      "icon": { "url": "url(/apps/dac-dashboard/branding/cockpit.svg)"}


    },

Result:

image
image1817×440 61.4 KB

Actually I would like to use from here the c8y-icon-cockpit icon. Is it possible?

Regards
Luca

8

When you build the app, in the resulting dist folder, is there dac-dashboard/branding/cockpit.svg?

I’ve only ever done this with png files, I don’t know about svg.

9

Hi Robert,
nope, no dac-dashboard/branding/cockpit.svg in dist

10

OK, manually put it there, zip the dist folder conttnts (make sure you don’t zip any previous zips) and upload it to the tenant.

11

Hi Luca,

if you want to use some of the default Cumulocity icons from the Styleguide you can use the class attribute instead of url (the interface is defined here: Web SDK documentation) e.g. like this:

"c8y":{
    "application":{
      "name":"dac-dashboard",
      "contextPath":"dac-dashboard",
      "key":"dac-dashboard-application-key",
      "tabsHorizontal":true,
      "upgrade":true,
      "rightDrawer":true,
      "breadcrumbs":false,
      "sensorAppOneLink":"http://onelink.to/pca6qe",
      "sensorPhone":true,
      "contentSecurityPolicy":"base-uri 'none'; default-src 'self' 'unsafe-inline' http: https: ws: wss:; connect-src 'self' http: https: ws: wss:;  script-src 'self' open.mapquestapi.com *.twitter.com *.twimg.com *.aptrinsic.com 'unsafe-inline' 'unsafe-eval' data:; style-src * 'unsafe-inline' blob:; img-src * data:; font-src * data:; frame-src *; worker-src 'self' blob:;",
      "dynamicOptionsUrl":"/apps/public/public-options/options.json",
      "brandingEntry":"./src/branding.less",
      "icon":{
        "class":"c8y-icon-cockpit"
      }
    }
  }
2 Likes
12

Hi @Tristan_Bastian

I did what you suggested. The web sdk docs you linked for icon states that:

Application icon to be displayed in app switcher and header bar.

But i’m getting this

image
image1724×674 156 KB

The icon in the app switcher didn’t change

Am i missing something?

regards
Luca

13

Hi Luca,

Are you trying this locally or have you deployed the app as well?

Try to remove the currently deployed app and upload it again if possible.

Regards,
Tristan

15

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