While adding new dashboard or editing an existing dashboard, we need to introduce Draft feature and publish feature

Forum
, ,
1

HI Team,
Our requirement is mentioned below:-
While adding new dashboard or editing an existing dashboard, we need to introduce Draft feature, the idea is that during the dashboard is in Draft mode, it won’t be accessible to anyone accept the creator / author
We need to have a publish feature, so that user can publish this dashboard

image
image1366×768 82.1 KB

Here we can add two buttons draft and publish button

Thanks
Rahul

2

Hi @rmishra1,

have you checked more recent versions of cockpit? These allow to edit multiple widgets and saving all of these changes at once, after you‘re done editing the dashboard.
It also allows to have a dashboard only visible to the current user.

Maybe this already fulfills your requirements…

Regards,
Tristan

1 Like
3

Thanks Tristan, Let me know which version has this functionality. But if any service is available for add button to publish and draft, then functionality will work accordingly to this button

4

You could pick the latest cockpit release from here.

Adding buttons should not be a hard task, you should be able to add these via the add method of the ActionBarService.
The logic behind these buttons will be harder to implement and that is where you would be on your own.

1 Like
5

Hello Tristan,
I’ve downloaded the latest SDK version from GitHub, but when I try to use the command line, I see that ng serve is still appearing instead of the expected command. Even after trying to install via the command line, I’m not seeing the correct options for this latest version. Could you assist with this issue?

Thanks
Rahul

6

Hi Rahul,

what is the command you were expecting?

In case you’ve been expecting the c8ycli command:
The c8ycli command has been deprecated in favor of using the angular cli.
Version 1019+ of the Web SDK will use the angular cli instead.

Regards,
Tristan

7

ok thanks Tristian

I’ve noticed that when I run npm start, the project gets stuck in a loading state. I want to confirm if there are any additional libraries or dependencies I need to install apart from Angular to resolve this. Below is the package.json file for reference.

{
  "name": "cockpit-draft",
  "version": "1021.36.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^18.2.0",
    "@angular/cdk": "^18.2.10",
    "@angular/common": "^18.2.0",
    "@angular/compiler": "^18.2.0",
    "@angular/core": "^18.2.0",
    "@angular/forms": "^18.2.0",
    "@angular/platform-browser": "^18.2.0",
    "@angular/platform-browser-dynamic": "^18.2.0",
    "@angular/router": "^18.2.0",
    "@angular/upgrade": "^18.2.9",
    "@c8y/bootstrap": "1021.36.0",
    "@c8y/client": "1021.36.0",
    "@c8y/ng1-modules": "1021.36.0",
    "@c8y/ngx-components": "1021.36.0",
    "@c8y/style": "1021.36.0",
    "angular": "1.8.3",
    "ngx-bootstrap": "18.0.0",
    "rxjs": "^7.8.1",
    "tslib": "^2.3.0",
    "zone.js": "~0.14.10"
  },
  "c8y": {
    "application": {
      "name": "Cockpit-draft",
      "contextPath": "cockpit-draft",
      "key": "cockpit-draft-application-key",
      "brandingEntry": "./ui-assets/index.less",
      "tabsHorizontal": true,
      "upgrade": true,
      "rightDrawer": false,
      "breadcrumbs": true,
      "hidePowered": true,
      "indexTemplate": "./index.html",
      "sensorAppOneLink": "http://onelink.to/pca6qe",
      "sensorPhone": false,
      "contentSecurityPolicy": "default-src 'self' 'unsafe-inline' http: https: ws: wss:; script-src 'self' http://cdn.appdynamics.com https://cdn.appdynamics.com https://www.googletagmanager.com *.mapquestapi.com http://web-sdk.aptrinsic.com 'unsafe-inline' 'unsafe-eval' data:; style-src * 'unsafe-inline' blob:; font-src * data:; frame-src *; img-src 'self' data: blob:; worker-src 'self' blob:",
      "dynamicOptionsUrl": "/apps/public/public-options/options.json",
      "contextHelp": true
    },
    "cli": {}
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^18.2.14",
    "@angular/cli": "^18.2.14",
    "@angular/compiler-cli": "^18.2.0",
    "@c8y/devkit": "1021.36.0",
    "@c8y/options": "1021.36.0",
    "@types/jasmine": "~5.1.0",
    "jasmine-core": "~5.2.0",
    "karma": "~6.4.0",
    "karma-chrome-launcher": "~3.2.0",
    "karma-coverage": "~2.2.0",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "~2.1.0",
    "typescript": "~5.5.2"
  },
  "author": "Cumulocity GmbH"
}
8

The application options that were previously defined in the c8y attribute of your package.json have been moved into a separate file called cumulocity.config.ts see e.g.: cockpit/cumulocity.config.ts at main · Cumulocity-IoT/cockpit · GitHub

Please also take a look at our upgrade instructions.

Regards,
Tristan

9

thanks @Tristan_Bastian

To set the tenant URL so you can run your application locally in the same way you did before,
“start”: “c8ycli server -u Tenant URL”

"c8y": {
    "application": {
      "name": "Cockpit",
      "contextPath": "cockpit",
      "key": "cockpit-application-key",
      "brandingEntry": "./ui-assets/index.less",
      "tabsHorizontal": true,
      "upgrade": true,
      "rightDrawer": false,
      "breadcrumbs": true,
      "hidePowered": true,
      "indexTemplate": "./index.html",
      "sensorAppOneLink": "http://onelink.to/pca6qe",
      "sensorPhone": false,
      "contentSecurityPolicy": "default-src 'self' 'unsafe-inline' http: https: ws: wss:; script-src 'self' http://cdn.appdynamics.com https://cdn.appdynamics.com https://www.googletagmanager.com *.mapquestapi.com http://web-sdk.aptrinsic.com 'unsafe-inline' 'unsafe-eval' data:; style-src * 'unsafe-inline' blob:; font-src * data:; frame-src *; img-src 'self' data: blob:; worker-src 'self' blob:",
      "dynamicOptionsUrl": "/apps/public/public-options/options.json",
      "contextHelp": true
    },

Please tell me new config file where i can update the appropriate change

10

Your c8ycli server -u <tenant-URL> should now just be ng serve -u <tenant-URL>.

As said before: