logo
small logo
  • Products
  • Buy
  • Support
  • Articles
  • Forgot password?
    • en
    • ru
    • pt
    • es
    • JP
    • ZH
  • Home
  • /
  • Articles
  • /
  • How to change the Online Designer configuration in the program code
  • How to upload report into Online Designer and download edited report

    July 29, 2017

    One of the first questions that faces Online Designer users is how to organize downloading

    read more
  • How to handle errors when calling WebReport.DesignerSaveCallBack

    July 29, 2017

    Online Designer is an excellent tool for creating reports on the Internet. Let's look at

    read more
  • Localization of Online Designer and WebReport

    August 15, 2017

    Report Localization is very urgent task in a Web environment. Because your site can be

    read more
  • Updating report object through Ajax in ASP.Net MVC project

    August 16, 2017

    Ajax technology significantly speeds up web applications. Also, the visual side is important. Agree that

    read more
  • How to update the FastReport.Core web report

    September 21, 2020

    Sometimes you need to update the report, for example if you input a new variable

    read more

How to change the Online Designer configuration in the program code

July 29, 2017

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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
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.

 

about product download buy
avatar
Dmitriy Fedyashov
Head of QA
.NET MVC Online Designer WebReport

Add comment
logo
  • 800-985-8986 (English, US)
  • +4930568373928 (German)
  • +55 19 98147-8148 (Portuguese)
  • info@fast-report.com
  • 901 N Pitt Str #325 Alexandria VA 22314
  • Buy
  • Download
  • Documentation
  • Testimonials
  • How to uninstall
  • Ticket system
  • FAQ
  • Tutorial Video
  • Forum
  • Articles
  • Our News
  • Press about us
  • Resellers
  • Our team
  • Contact us

© 1998-2021 by Fast Reports Inc.

  • Privacy Policy