How to add the data source and dataset for Report Designer from application

To add a data source and dataset to the Bold Reports^® Angular Report Designer from your application, call the addDataSource and addDataSet functions when the Report Designer initializes. The functions add the data source and dataset for the reports at the time of initialization of the Report Designer.

Use the following steps to add the data source and dataset for the Report Designer from your application.

• Create a function and bind it with the create API as shown in the following code snippet:

  <bold-reportdesigner id="designer"
  [serviceUrl]="serviceUrl"
  (create)="controlInitialized()"
  >
  </bold-reportdesigner>

  export class AppComponent {
    ...
  
    public controlInitialised(){
          ...
      }
   }

• Use the addDatasource method to add the data source in the Report Designer as shown in the following code snippet:

  export class AppComponent {
    title = 'reportdesignerapp';
    public serviceUrl: string;
  
    public datasource: any =
      {
      __type:'BoldReports.RDL.DOM.DataSource',
      Name:'DataSource1',
      Transaction:false,
      DataSourceReference:null,
      SecurityType:'DataBase',
      ConnectionProperties:{
              __type:'BoldReports.RDL.DOM.ConnectionProperties',
              ConnectString:'Data Source=<instancename>;Initial Catalog=<database>;',
              EmbedCredentials:false,
              DataProvider:'SQL',
              IsDesignState:false,
              IntegratedSecurity:false,
              UserName:'',
              PassWord:'',
              Prompt:'Specify the Username and password for DataSource DataSource1',
              CustomProperties:[]
          }
      };
  
      public controlInitialised(){
        var designerObj = $('#designer').data('boldReportDesigner');
        designerObj.addDataSource(datasource);
      }
  }

• Use the addDataSet method to add the dataset in the Report Designer as shown in the following code snippet:

    export class AppComponent {
    title = 'reportdesignerapp';
    public serviceUrl: string;
  
    public dataset: any =
      {
      __type:'BoldReports.RDL.DOM.DataSet',
      Name:'DataSet1',
      Fields:[
          { __type: "BoldReports.RDL.DOM.Field", DataField: "DepartmentID", Name: "DepartmentID", TypeName: "System.Int16",Value: null},
          { __type: "BoldReports.RDL.DOM.Field", DataField: "Name", Name: "Name", TypeName: "System.String",Value: null},
          { __type: "BoldReports.RDL.DOM.Field", DataField: "GroupName", Name: "GroupName", TypeName: "System.String",Value: null },
          { __type: "BoldReports.RDL.DOM.Field", DataField: "ModifiedDate", Name: "ModifiedDate", TypeName: "System.DateTime",Value: null}
          ],
      Query: {
          __type: "BoldReports.RDL.DOM.Query",
          CommandText: "SELECT [HumanResources].[Department].[DepartmentID],\n[HumanResources].[Department].[Name],\n[HumanResources].[Department].[GroupName],\n[HumanResources].[Department].[ModifiedDate] FROM [HumanResources].[Department]",
          CommandType: 0,
          DataSourceName: "DataSource1",
          QueryDesignerState: {
              __type: "BoldReports.RDL.DOM.QueryDesignerState",
              Expressions: null,
              Filters: null,
              Joins: null,
              StoredProcedure: null,
              Tables: [
                  {
                  __type: "BoldReports.RDL.DOM.Table",
                  Columns: [
                      { __type: "BoldReports.RDL.DOM.Column", AggregateTye: undefined, AliasName: null, IsDuplicate: false,
                      IsSelected: true, Name: "DepartmentID"
                      },
                      { __type: "BoldReports.RDL.DOM.Column", AggregateTye: undefined, AliasName: null, IsDuplicate: false,
                      IsSelected: true, Name: "Name"
                      },
                      { __type: "BoldReports.RDL.DOM.Column", AggregateTye: undefined, AliasName: null, IsDuplicate: false,
                      IsSelected: true, Name: "GroupName"
                      },
                      { __type: "BoldReports.RDL.DOM.Column", AggregateTye: undefined, AliasName: null, IsDuplicate: false,
                      IsSelected: true, Name: "ModifiedDate"
                      }
                  ],
                  Name: "Department",
                  Schema: "HumanResources",
                  SchemaLevels: [
                      { Name: "HumanResources", SchemaType: "Schema"},
                      { Name: "Tables", SchemaType: "Category"},
                      { Name: "Department", SchemaType: "Table"}
                  ]
                  }
              ]
          },
          QueryParameters: [],
          Timeout: 0
          },
      CaseSensitivity:0,
      Collation:null,
      AccentSensitivity:0,
      KanatypeSensitivity:0,
      WidthSensitvity:0,
      Filters:[],
      SharedDataSet:null,
      InterpretSubtotalsAsDetails:0,
      DataSetInfo:null,
      DataSetObject:null
      };
  
      public controlInitialised(){
        var designerObj = $('#designer').data('boldReportDesigner');
        designerObj.addDataSet(dataset);
      }
  }