How to disable Apply dashboard to devices of type checkbox option while adding dashboard under device level in custom cockpit application ?
We know this option help’s to create dashboard at a time for all the devices which has same type.
In the same way if user delete the dashboard one place it will delete in all other places if device has same type. There might be chance for human errors if user delete by chance in once place it will impact all other places. Can we hide that option in custom cockpit application ?
there isn’t any out-of-the-box option to disable this checkbox easily, as the ‘Add Dashboard’ dialog is part of Cumulocity Core. Even if you override Cockpit there isn’t an easy solution.
I see two options:
Extend the branding and have some custom CSS selectors, which hide the checkbox. This is difficult as the checkbox element can’t be identified easily, because it doesn’t have an id or unique class. You would need to define some complicated CSS selectors to find the element and hide it.
Hide the element directly in the @c8y/ngx-components dependency and create a patch out of it. The checkbox is part of the context-dashboard module and can for example be found here: .\node_modules\@c8y\ngx-components\fesm2015\c8y-ngx-components-context-dashboard.mjs. You would need to remove following snippet to remove the checkbox:
<div *ngIf="!currentDashboard && deviceType">
<div class="form-group">
<label title="{{ applyToDevicesOfTypeTitle }}" class="c8y-checkbox">
<input
type="checkbox"
name="deviceType"
[(ngModel)]="dashboard.deviceType"
[disabled]="!applyToDevicesOfTypePermitted"
/>
<span></span>
<span
class="m-r-4"
[translateParams]="{ type: dashboard.deviceTypeValue }"
ngNonBindable
translate
>
Apply dashboard to all devices of type
<i>{{ type }}</i>
</span>
</label>
</div>
<div class="alert alert-info m-b-24" *ngIf="isDeviceType">
<i c8y-icon="info"></i>
<span
translate
[translateParams]="{ type: dashboard.deviceTypeValue }"
ngNonBindable
>
This dashboard is shared between all devices of the type
<i>{{ type }}</i>
.
</span>
</div>
</div>
To apply it as a patch, install patch-package by running: npm install patch-package --save-dev. To generate the patch, you need to run: npx patch-package @c8y/ngx-components.
From both options, I prefer the second one, but it is also a bit complicated to implement it.
Thanks for the update chrisitan, let’s say we opt second option will it be any impact if version changes happen in future ? So now I am using 1015.0.249 version If I use some latest version in future ?
You will need to update the patch, if you update the version of the sdk. The steps are the same as above. patch-package will print out an error in case patches can’t be applied properly, e.g. after the version of the c8y sdk has changed.
What I forgot to mention is that you need to update postinstall script in your package.json to include a call to patch-package to apply all existings patches in your project: "postinstall": "patch-package && ngcc", after your dependencies have been installed
