logo
small logo
  • Products
  • Buy
  • Support
  • Articles
  • Customer panel Support
    • en
    • pt
    • es
    • de
    • pl
    • JP
    • ZH
  • Home
  • /
  • Articles
  • /
  • How to change the Online Designer configuration in the program code
  • How to use FastCube .NET in the SPA application Knockout.js

    July 21, 2021

    To output the data cube, we will create a SPA application by means of Knockout.js

    read more
  • How to use FastCube .NET in the SPA Angular application

    April 19, 2021

    One of the most popular frameworks for creating single-page applications is Angular. It is based

    read more
  • How to use FR Core Web Report in Single Page Application Angular 7

    April 29, 2019

    The concept of one-page apps is finding an increasing number of supporters. One of the

    read more
  • Interactive web report with drill down lists

    August 15, 2017

    In this article we look at how to create interactive reports with drop-down groups. We

    read more
  • How to use Online Designer in a knockout.js application

    June 30, 2019

    The knockout.js library was quite popular among web developers before the appearance of angular. Despite

    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
Technical Writer
Fast Reports Team: Dmitriy Fedyashov - Technical Writer at Fast Reports
.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
  • Extended licensing
  • Contact us

© 1998-2022 by Fast Reports Inc.

  • Privacy Policy