How to disable Apply dashboard to devices of type option

,
2

Hi Mohan,

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:

  1. 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.

  2. 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.

Best regards
Christian

1 Like