Home
White Papers
How to change the Online Designer configuration in the program code

How to change the Online Designer configuration in the program code

July 29, 2017

Dmitriy Fedyashov

Before downloading the Online Designer from the FastReport site, you must first compile it. But, for this you must first configure the program in a special visual builder. But what if your needs have changed and you need a different configuration? You have to again create OnlineDesigner in the visual builder, download it and add it to your project. And if you need different designer configurations for different cases within the same project? Your code begins to be duplicated to work with different versions of the designer, which adds unwanted "smells", as Martin Fowler would say.

But it's not so bad!

In this article I will talk about the new functionality - changing the configuration of the online designer in the code of the program. Actually, we will override the configuration file of the designer, which is a document in json format. This feature appeared in version 2017.3.3. This function can be useful for changing the design and some other parameters of the designer.

How it works? Online designer first loads the default settings, and then change - they override the initial settings.

The overridden config is stored in the property: WebReport.DesignerConfig as a string in JSON format.

Let's look at an example. Create an ASP.Net MVC application. We add a folder with Online Designer to the project. Let's call it WebReportDesigner. In it, we put the contents of the archive downloaded from the FastReport site after configuring the designer.

In the Reference, we add a link to the FastReport.dll and FastReport.Web.dll libraries.

Now, add the following code to the HomeController controller in the Index:

An example of using this property:

using FastReport.Web;
using System.Web.UI.WebControls;
…
 public ActionResult Index()
 {
 WebReport webReport = new WebReport();
 webReport.Width = Unit.Percentage(100);
 webReport.Height = Unit.Percentage(100);
 string report_path = GetReportPath();
 System.Data.DataSet dataSet = new System.Data.DataSet();
 dataSet.ReadXml(report_path + "nwind.xml");
 webReport.Report.RegisterData(dataSet, "NorthWind");
 webReport.Report.Load(report_path + "Simple List.frx");
 webReport.DesignReport = true;
 webReport.DesignScriptCode = false;
 webReport.Debug = true;
 webReport.DesignerPath = "~/WebReportDesigner/index.html";
 webReport.DesignerLocale = "en";
 webReport.DesignerSaveCallBack = "~/Home/SaveDesignedReport";
 webReport.ID = "DesignReport";
 // file with custom configuration
 string designerConfigFile = this.Server.MapPath("~/App_Data/DesignerConfig.json");
 // load file in DesignerConfig
 if (System.IO.File.Exists(designerConfigFile))
 webReport.DesignerConfig = System.IO.File.ReadAllText(designerConfigFile);
 ViewBag.WebReport = webReport;
 return View();
 }

As you noticed, WebReport added the DesignerConfig property. In it, we define the config file, which overrides the necessary parameters of Online Designer. The file is placed in the folder App_Data, or any other, inside the project.

Here is an example of the file contents /App_Data/DesignerConfig.json:

{
"font-names": [
    "Calibri",
    "Calibri Light",
    "Comic Sans MS",
],
"default-font-name": "Calibri",
"preload-fonts": ["Calibri"],
"scale": 1,
"grid": 9.45,
"sticky-grid": true
}

In this file, we changed the set of fonts available in the text components of the online designer.

Let's now look at all the configuration parameters that can be overridden in the configuration file:

"font-names" – An array containing the names of the fonts that are available for text components;
"default-font-name" – The default font that is assigned to the newly created text components;
"preload-fonts" – An array containing a set of fonts that will be pre-loaded before the initialization of the designer. Thus, the more fonts here, the longer the original designer load will take place;
"prefetch-fonts" - Loads fonts similar to the previous setting, but at a later stage of initialization. By this point the page and toolbars will already be visible;
"scale-mobile" - The default page scale for viewing the designer from mobile devices (0 to 2);
"scale" - Scale the default page for viewing the designer from all other devices (0 to 2);
"grid" - Grid spacing;
"sticky-grid" – "Stick" to the components to the grid (true/false);
"hotkeyProhibited" - Disable hotkeys;
"save_success_redirect":

{

"url" - Where to make a redirect after successful saving;

"blank": - Open in a new tab;

"useParent" - In the case when the online designer in the iframe then make a redirect in the parent window in which the designer is embedded;

"removeConfirmation" - Do not show confirmation when redirecting (after saving);

"colors":

{

"button-circle" - Color of resize elements and other round elements on the work area;

"angle-slider" - Angle element color;

"default-band-separator" - Color of separator between the bands;

"selected-band-separator" - The color of the active splitter between the bands, when the band is in the process of resizing;

"show-band-title" - Band headline show;
"add-bands" - Ability to prohibit the addition of a band;
"resize-bands" - Ability to prohibit changing the size of the bands;
"movable-components" - Ability to prohibit the movement of components;
"resizable-components" - Ability to prevent changing the size of components;

Customization panels (on the left, toolbar with buttons)

"customization":

{

"properties": {

"enable" - Panel activity;

"button" - Show the button for this toolbar on the toolbar;

"shown" - Open the default panel when downloading an online designer;

"header": - Panel title;

"hasBorder" – Visual border of the panel;

"movable" - The ability to move the panel through drag & drop;

"resizable" – The ability to change the size of the panel;

"events": {

"enable": true,

"button": true,

"shown": false,

"header": true,

"hasBorder": true,

"movable": true,

"resizable": true

"report-tree": {

"enable": true,

"button": true,

"shown": false,

"header": true,

"hasBorder": true,

"movable": true,

"resizable": true

"data": {

"enable": true,

"button": true,

"shown": false,

"header": true,

"hasBorder": true,

"movable": true,

"resizable": true

"preview": {

"enable": true,

"shown": true,

"button": false,

"header": false,

"background": "initial",

"container": "horz"

"width": 125 - Default widget width;

"table": true

}

"default-tab-menu": "home" – The default tab in the top toolbar when the designer loads;

"show-saving-progress": "default", - Possible values - default, small, large;

"notifications": "default", - Possible values - default, html5, false;

"notifications-mobile": "default" Possible values - default, html5, false;

}

Thus, we have a great opportunity to reconfigure the Online Designer without having to recompile it.

Similar articles:

back