How to incorporate icons into a C8Y application

,
1

I am trying to integrate icons into my cumulocity application: they consist of two logo icons, both .svg files, one blue and the other white, that I want to integrate at two different locations.

I would like the blue logo to appear inside the app switcher after the user opens the window ( i.e. at location 1 in the screenshot) and I would like the white logo to appear inside the navigation panel above the app name at location 2.

image
image1205×734 108 KB
.

Both icons are included in the assets folder in my dist folder, which I then deployed to my tenant, and they are also included in the assets folder at the root level of my application.

For the first logo, I have tried modifying my package.json to include an icon field within the c8y object, to no effect.

  "c8y": {
    "application": {
      "name": "Technical Service",
      "contextPath": "karl-storz-demo",
      "key": "karl-storz-demo-application-key",
      "dynamicOptionsUrl": "/apps/public/public-options/options.json",
      "brandingEntry": "./branding/branding.less",
      "hidePowered": true,
      "hideNavigator": true,
      "icon": {
        "url": "url(/apps/karl-storz-demo/assets/log-ks-blue.svg)"
      }
    },
    "cli": {}
  },

I tried to get the second logo to appear in the navigator by using styling in the branding.less file as follows:

:root {
    --navigator-header-bg: #074089 !important;
    --navigator-platform-logo: url('/assets/logo-ks-white.svg') !important;
    --navigator-platform-logo-height: 36px !important; 
}

While I was able to change the color background to my desired color, the white icon unfortunately does not appear.

2

I have an example with this in cumulocity.json…

{
“name”: “c8yicontest”,
“contextPath”: “c8yicontest”,
“key”: “c8yicontest-application-key”,
“icon”: {
“url”: “url(/apps/c8yicontest/tshirt.png)”
},
“tabsHorizontal”: true,
“upgrade”: true,
“rightDrawer”: true,
“breadcrumbs”: false,
“sensorAppOneLink”: “OneLink.To”,
“sensorPhone”: true,
“contentSecurityPolicy”: “base-uri ‘none’; default-src ‘self’ ‘unsafe-inline’ http: https: ws: wss:; connect-src ‘self’ *.billwerk.com 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 *;”,
“globalTitle”: “Cumulocity”,
“legacy”: false
}

…and the image is in the base directory of the zip…

image

Does that work for you?

3

Hi Robert,

I noticed that I had made a typo in the url field of my icon object in package.json. Once I corrected it, the icon appears on the application switcher; however, it is not filling up the space adequately.

image

Any ideas for getting the white logo to display?

4

https://cumulocity.com/guides/web/application-configuration/#application-options

Does this help?

I think you might need ‘/apps/karl-storz-demo/…’ also for the platform logo.

5

Hi Lucas,

Your svg has it’s width set to 1024 and height set to 362.
If you try to make it a square (same width and height) where the logo is in the center, it should also be centered in the app switcher.

6

Hi Robert,

Yes, I was consulting that page. I tried to add /apps/karl-storz-demo/ to the --navigator-platform-logo field, but I would get an error stating that the file does not exist.

7

Hi Tristan,

How would I go about changing the branding of the displayed widget? I tried adding a “width” field to the icon object inpackage.json but nothing happened.

"c8y": {
    "application": {
      "name": "Technical Service",
      "contextPath": "karl-storz-demo",
      "key": "karl-storz-demo-application-key",
      "dynamicOptionsUrl": "/apps/public/public-options/options.json",
      "brandingEntry": "./branding/branding.less",
      "hidePowered": true,
      "hideNavigator": true,
      "icon": {
        "url": "url(/apps/karl-storz-demo/assets/logo-ks-blue.svg)",
        "width": 362
      }
    },
    "cli": {}
  },
8

You need to adjust the SVG itself.

9

I adjusted the height and width to both be 362 and, unfortunately, the problem still persists.

10

My 10.17 app has this in branding.less…

@navigator-platform-logo: if(@use-relative-paths, ‘…/img/logo-tralux.png’, ‘img/logo-tralux.png’);

…and the png file is in the application directory …cp1017\node_modules@c8y\style\img

11

I managed to display the white icon on the navigation bar by importing the main.less file rather than the extend.less file as follows:

@import '~@c8y/style/main.less';

As for the blue icon, it seems that I will have to find one that already comes with square dimensions.

12

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