ActiveReports 17.2 新特性-WebDesigner 中的共享数据源支持

17.2.0将共享数据源也添加到web设计器里面。以前只能在桌面设计器使用共享数据源。现在web端也可以了。

那什么是共享数据源和为什么要用他呢？
首先共享数据源简单的说就是可以共享使用，每个人都可以直接通过选择就是用这个数据源，而不在需要输入连接信息 。
那么使用场景当然也就可想而知了，就是不希望设计报表的人员看到数据库连接信息。他们只需要关注设计报表即可。而且也不用担心数据库连接信息被知道。
那么接下来就给大家说一下，web端如何使用共享数据源。(WebDesigner)
首先，共享数据源需要使用桌面设计器设计出来，具体操作如下:

只需要将桌面设计器设计好的数据源，右键点击共享数据员，即可保存为.rdsx文件(共享数据源)

WebDesigner:
添加共享数据源整体只需要3步。本文以如下链接示例为例子:
https://github.com/activereports/WebSamples17/tree/main/WebDesignerSamples/WebDesigner_MVC_Core
准备工作，将准备好的rdsx文件放置在resource文件夹下

1.自己新创建一个类，实现:ISharedDataSourceService接口，示例代码:

1. public class SharedDataSourceService : ISharedDataSourceService
   
2. {
   
3.         public SharedDataSourceInfo[] GetSharedDataSourceList()
   
4.         {
   
5.                 return Startup.ResourcesRootDirectory
   
6.                         .EnumerateFiles("*.rdsx")
   
7.                         .Select(x =>
   
8.                         {
   
9.                                 var dataSource = GetDataSource(x.Name);
   
10.                                 return new SharedDataSourceInfo()
    
11.                                 {
    
12.                                         Name = x.Name,
    
13.                                         Type = dataSource.ConnectionProperties.DataProvider
    
14.                                 };
    
15.                         }).ToArray();
    
16.         }
    
17.         public DataSource GetDataSource(string name)
    
18.         {
    
19.                 return DataSourceTools.LoadSharedDataSource(Path.Combine(Startup.ResourcesRootDirectory.FullName, name));
    
20.         }
    
21. 
    
22. }

复制代码

如上代码其实就是读取 resource目录。然后把以.rdsx为后缀的文件全部拿到。返回为指定格式的数组。

2.修改startup文件。
在ConfigureServices 方法中，新添加.AddSingleton<ISharedDataSourceService, SharedDataSourceService>() 将我们刚实现的类注册进来。
完整代码:

1. public void ConfigureServices(IServiceCollection services)
   
2. {
   
3.         Encoding.RegisterProvider(CodePagesEncodingProvider.Instance);
   
4. 
   
5.         services
   
6.                 .AddReporting()
   
7.                 .AddDesigner()
   
8.                 .AddSingleton<ITemplatesService>(new FileSystemTemplates(TemplatesRootDirectory))
   
9.                 .AddSingleton<IDataSetsService>(new CustomDataSetTemplates())
   
10.                 .AddSingleton<ISharedDataSourceService, SharedDataSourceService>()
    
11.                 .AddMvc(options => options.EnableEndpointRouting = false)
    
12.                 .AddJsonOptions(options => options.JsonSerializerOptions.PropertyNamingPolicy = null);
    
13. }

复制代码

其次修改Configure方法，新增一个入参，ISharedDataSourceService sharedDataSourceService 依旧是我们刚才注册的。
其次在useDesigner中，添加config.UseSharedDataSources(sharedDataSourceService);将入参传递进来。
完整代码:

1. public void Configure(IApplicationBuilder app, IWebHostEnvironment env, IDataSetsService dataSetsService, ISharedDataSourceService sharedDataSourceService)
   
2. {
   
3.         if (env.IsDevelopment())
   
4.         {
   
5.                 app.UseDeveloperExceptionPage();
   
6.         }
   
7.         
   
8.         app.UseFileServer();
   
9. 
   
10.         app.UseReporting(config => config.UseFileStore(ResourcesRootDirectory));
    
11.         app.UseDesigner(config =>
    
12.         {
    
13.                 config.UseSharedDataSources(sharedDataSourceService);
    
14.                 config.UseFileStore(ResourcesRootDirectory, false);
    
15.                 config.UseDataSetTemplates(dataSetsService);
    
16.         });
    
17. 
    
18. 
    
19.         app.UseMvc();
    
20. }

复制代码

3.修改前段js，将共享数据源开放出来
这个我们只需要在create的时候，修改data的一个对象即可
完整代码:

1. arWebDesigner.create('#ar-web-designer', {
   
2.   rpx: { enabled: true },
   
3.   appBar: { openButton: { visible: true } },
   
4.   data: {
   
5.     dataSets: { canModify: true }, dataSources: {
   
6.       canModify: true,
   
7.       shared: { enabled: true }
   
8.     }
   
9.   },
   
10.   preview: {
    
11.     openViewer: (options) => {
    
12.       if (viewer) {
    
13.         viewer.openReport(options.documentInfo.id);
    
14.         return;
    
15.       }
    
16.       viewer = createViewer({
    
17.         element: '#' + options.element,
    
18.         reportService: {
    
19.           url: 'api/reporting',
    
20.         },
    
21.         reportID: options.documentInfo.id,
    
22.         settings: {
    
23.           zoomType: 'FitPage',
    
24.         },
    
25.       });
    
26.     }
    
27.   }
    
28. });

复制代码

data -> dataSource -> shared开启即可。
至此，一个webDesigner的共享数据源添加就完成了。

示例Demo：