Configuring Dataset and Datasource Access in Angular Report Designer

Published:

Updated:

The permissionSettings property in the Bold Reports Angular Designer enables administrators to control user access to Datasets and Datasources. By configuring permissions such as Create, Edit, Clone, Refresh, and Delete, you can restrict users to shared datasets and datasources, enhancing data security.

This guide explains how to configure permissionSettings in an Angular application to manage access effectively.

Steps to Hide the Dataset and Datasource Options

Step 1: Configure the permissionSettings property in the app.component.html

Add the permissionSettings property within the <bold-reportdesigner> tag as shown below:

<bold-reportdesigner id="designer"  
  [serviceUrl]="serviceUrl"  
  [serviceAuthorizationToken] = "serverServiceAuthorizationToken" 
  (create)="controlInitialized()"
  [permissionSettings] ="permissionSettings"
  style="position: absolute;height:700px;width: 100%;"> 
</bold-reportdesigner>

Step 2: Update app.component.ts

In the AppComponent class, configure the permissionSettings property to configure access levels for the Dataset and Datasource.

export class AppComponent {
  title = 'reportdesignerapp';
  public serviceUrl: string;
  public serverServiceAuthorizationToken: string;
  private controlId: string;
  public permissionSettings: any;

  constructor() {
    this.controlId = "designer";
    this.serviceUrl = '[https://demos.boldreports.com/services/api/ReportingAPI]';
    this.serverServiceAuthorizationToken = 'bearer <token>';
    this.permissionSettings = {
      dataSet: ej.ReportDesigner.Permission.Shared,
      dataSource: ~ej.ReportDesigner.Permission.All
    };
  }
}

Replace serviceUrl with your actual Bold Reports service URL and bearer <token> with the serviceAuthorizationToken generated from the report server.

Code	Description
`dataSet: ej.ReportDesigner.Permission.Shared`	Allows access to shared datasets only. Users cannot create or modify datasets beyond what’s shared.
`dataSource: ~ej.ReportDesigner.Permission.All`	Denies all permissions related to data sources, disabling create, edit, and delete options.

Datasource and Dataset available options

Name	Description
`ej.ReportDesigner.Permission.Create`	Shows or hides embedded dataset option in the dataset pane
`ej.ReportDesigner.Permission.Edit`	Shows or hides the edit option in the dataset pane
`ej.ReportDesigner.Permission.Delete`	Shows or hides the delete option in the dataset pane
`ej.ReportDesigner.Permission.Shared`	Shows or hides the shared dataset option in the dataset pane
`ej.ReportDesigner.Permission.All`	Enables all dataset options in the dataset pane

The code having the bitwise operator like ~ej.ReportDesigner.Permission inverts the permission settings for ej.ReportDesigner.Permission, when used, it hides options like Create, Edit, Delete, Shared, or All and when omitted, it allows these options to be shown.

Step 3: Preview

Snapshot : The datasource edit, create dataset, clone and delete options should now be unavailable based on the configured permissions.
Snapshot : The dataset’s Edit, Clone, Delete and Refresh options are unavailable from the dropdown options

Conclusion

By following the steps above, you can effectively control dataset and datasource access in the Bold Reports Angular Designer application using the permissionSettings property.

Configuring Dataset and Datasource Access in Angular Report Designer

Steps to Hide the Dataset and Datasource Options

Datasource and Dataset available options

Conclusion

See Also

Access denied