# Quick Start

## Content



This quick start familiarizes you with creation of a simple report in WinForms App and populating it with data using code. The following image shows a FlexViewer control populated with a sample data.

![WinForms FlexReport QuickStart](https://cdn.mescius.io/document-site-files/images/4f10fc8d-eb38-4687-8264-468b8828236a/images/win-flexrerport-qs.png)

To create a simple report application and display the report in a FlexViewer control in both .NET and .NET Framework applications, follow these steps:

1.  Create a **Windows Forms App**, add the following **NuGet** packages:
    *   C1.Win.FlexReport
    *   C1.Win.FlexViewer
2.  Add the following controls to the Form.
    
    | Control/Component | Name |
    | --- | --- |
    | FlexReport | flexReport |
    | FlexViewer | flexViewer |
    

### Create report definition

1.  Define report layout by instantiating an object of **Layout** class and specify the orientation and width of the report as illustrated in the below code.
    
    ```csharp
    //defining layout
    Layout l = flexReport.Layout;
    l.Orientation = OrientationEnum.Portrait;
    l.Width = 6.5 * 1440;
    ```
    
2.  Define report header by creating a new section using **Section** class as illustrated in the following code.
    
    ```csharp
    //create a report header
    Section s = flexReport.Sections[SectionTypeEnum.Header];
    s.Height = 640;
    s.Visible = true;
    s.BackColor = Color.FromArgb(200, 200, 200);
    TextField textFld1 = new TextField();
    textFld1.Name = "FldTitle";
    textFld1.Text = "Product Report";
    textFld1.Left = 0;
    textFld1.Top = 0;
    textFld1.Width = 8000;
    textFld1.Height = 640;
    textFld1.Font.Size = 24;
    textFld1.Font.Bold = true;
    textFld1.ForeColor = Color.FromArgb(0, 0, 100);
    textFld1.BackColor = Color.SkyBlue;
    flexReport.Sections.Header.Fields.Add(textFld1);
    ```
    
3.  Define report's page header as illustrated in the following code.
    
    ```csharp
    //create a page header with field labels  
    s = flexReport.Sections[SectionTypeEnum.PageHeader];
    s.Height = 500;
    s.Visible = true;
    flexReport.Font.Bold = true;
    TextField textFld4 = new TextField();
    textFld4.Name = "LblPID";
    textFld4.Text = "PID";
    textFld4.Left = 0;
    textFld4.Top = 50;
    textFld4.Width = 500;
    textFld4.Height = 300;
    textFld4.Align = FieldAlignEnum.LeftTop;
    flexReport.Sections.PageHeader.Fields.Add(textFld4);
    TextField textFld5 = new TextField();
    textFld5.Name = "LblName";
    textFld5.Text = "Name";
    textFld5.Left = 500;
    textFld5.Top = 50;
    textFld5.Width = 1500;
    textFld5.Height = 300;
    flexReport.Sections.PageHeader.Fields.Add(textFld5);
    TextField textFld6 = new TextField();
    textFld6.Name = "LblSupplier";
    textFld6.Text = "Supplier";
    textFld6.Left = 2000;
    textFld6.Top = 50;
    textFld6.Width = 1200;
    textFld6.Height = 300;
    flexReport.Sections.PageHeader.Fields.Add(textFld6);
    TextField textFld7 = new TextField();
    textFld7.Name = "LblUnitPrice";
    textFld7.Text = "UnitPrice";
    textFld7.Left = 3600;
    textFld7.Top = 50;
    textFld7.Width = 800;
    textFld7.Height = 300;
    flexReport.Sections.PageHeader.Fields.Add(textFld7);
    TextField textFld8 = new TextField();
    textFld8.Name = "LblDiscontinued";
    textFld8.Text = "Discontinued";
    textFld8.Left = 5000;
    textFld8.Top = 50;
    textFld8.Width = 8000;
    textFld8.Height = 300;
    flexReport.Sections.PageHeader.Fields.Add(textFld8);
    flexReport.Font.Bold = false;
    ShapeField shpfld2 = new ShapeField();
    shpfld2.Name = "FldLine";
    shpfld2.ShapeType = ShapeType.Line;
    shpfld2.Left = 0;
    shpfld2.Top = 400;
    shpfld2.Width = flexReport.Layout.Width;
    shpfld2.Height = 20;
    flexReport.Sections.PageHeader.Fields.Add(shpfld2);
    ```
    
4.  Define report's page footer as illustrated in the following code.
    
    ```csharp
    // create a page footer   
    s = flexReport.Sections[SectionTypeEnum.PageFooter];
    s.Height = 500;
    s.Visible = true;
    TextField textFld2 = new TextField();
    textFld2.Name = "FldFtrLeft";
    textFld2.Text.Expression = @"""Products: Printed on "" & Now";
    textFld2.Left = 0;
    textFld2.Top = 0;
    textFld2.Width = 4000;
    textFld2.Height = 300;
    textFld2.Font.Size = 8;
    textFld2.Font.Bold = false;
    flexReport.Sections.PageFooter.Fields.Add(textFld2);
    TextField textFld3 = new TextField();
    textFld3.Name = "FldFtrRight";
    textFld3.Text.Expression = @"""Page "" + Page + "" of "" & Pages";
    textFld3.Left = 4000;
    textFld3.Top = 0;
    textFld3.Width = 4000;
    textFld3.Height = 300;
    textFld3.Align = FieldAlignEnum.RightTop;
    textFld3.Width = flexReport.Layout.Width - textFld3.Left;
    flexReport.Sections.PageFooter.Fields.Add(textFld3);
    //add a line before page footer
    ShapeField shpfld = new ShapeField();
    shpfld.Name = "FldLine";
    shpfld.ShapeType = ShapeType.Line;
    shpfld.Left = 0;
    shpfld.Top = 0;
    shpfld.Width = flexReport.Layout.Width;
    shpfld.Height = 20;
    flexReport.Sections.PageFooter.Fields.Add(shpfld);
    ```
    
5.  Define the detail section of the report to display the data as illustrated in the following code.
    
    ```csharp
    // create the Detail section  
    s = flexReport.Sections[SectionTypeEnum.Detail];
    s.Height = 330;
    s.Visible = true;
    TextField textField = new TextField();
    textField.Name = "FldPID";
    textField.Text.Expression = "PID";
    textField.Left = 0;
    textField.Top = 0;
    textField.Width = 500;
    textField.Height = 500;
    flexReport.Sections.Detail.Fields.Add(textField);
    TextField textField1 = new TextField();
    textField1.Name = "FldName";
    textField1.Text.Expression = "Name";
    textField1.Left = 600;
    textField1.Top = 0;
    textField1.Width = 1200;
    textField1.Height = 500;
    flexReport.Sections.Detail.Fields.Add(textField1);
    TextField textField2 = new TextField();
    textField2.Name = "FldSupplier";
    textField2.Text.Expression = "Supplier";
    textField2.Left = 2000;
    textField2.Top = 0;
    textField2.Width = 1500;
    textField2.Height = 500;
    flexReport.Sections.Detail.Fields.Add(textField2);
    TextField textField3 = new TextField();
    textField3.Name = "FldUnitPrice";
    textField3.Text.Expression = "UnitPrice";
    textField3.Left = 3600;
    textField3.Top = 0;
    textField3.Width = 800;
    textField3.Height = 500;
    flexReport.Sections.Detail.Fields.Add(textField3);
    TextField textField4 = new TextField();
    textField4.Name = "FldDiscontinued";
    textField4.Text.Expression = "Discontinued";
    textField4.Left = 5000;
    textField4.Top = 0;
    textField4.Width = 8000;
    textField4.Height = 500;
    flexReport.Sections.Detail.Fields.Add(textField4);
    textField4.Width = flexReport.Layout.Width - textField4.Left;
    textField4.AutoHeight = AutoSizeBehavior.CanGrow;
    textField4.Font.Size = 8;
    textField4.Align = FieldAlignEnum.JustTop;
    //end of report creation through code
    ```
    

### Bind report definition with data source

1.  Create a class with name **Product.cs**, to be used as a datasource as illustrated in the following code:
    
    ```csharp
    public class Product
    {
        static Random _rnd = new Random();
        static string[] _names = "Chai|Chang|Aniseed Syrup|Konbu|Tofu|Pavlova|Tunnbröd|Gravad lax|Røgede sild".Split('|');
        static string[] _supplier = "Bigfoot Breweries|Leka Trading|Karkki Oy|Ma Maison|Tokyo Traders|Lyngbysild".Split('|');
        public Product()
        {
            Pid = "P" + Convert.ToString(_rnd.Next() % 1000);
            Name = _names[_rnd.Next() % _names.Length];
            Supplier = _supplier[_rnd.Next() % _supplier.Length];
            double prc = Math.Ceiling(30 + _rnd.NextDouble() * 1000);
            UnitPrice = "$ " + prc;
            Discontinued = _rnd.NextDouble() < .2;
        }
        public string Pid { get; set; }
        public string Name { get; set; }
        public string Supplier { get; set; }
        public String UnitPrice { get; set; }
        public bool Discontinued { get; set; }
    }
    ```
    
2.  Initialize a list of type Product, where Product is a class type and populate it with random data.
3.  Set the **DataSource.Recordset** property of the **C1FlexReport** class with the instance of List to populate it with random data as illustrated in the below code.
    
    ```csharp
    List<Product> _products = new List<Product>();
    for (int i = 0; i < 20; i++)
    {
        _products.Add(new Product());
    }
    //load the report using the products class.
    flexReport.DataSource.Recordset = _products;
    ```
    

### Display report data

Once the report definition has been created, the data source defined and loaded into the FlexReport component, you can render the report to the FlexViewer control. For doing so, assign the flexreport object to **DocumentSource** property of the **C1FlexViewer** to display the report created in the above steps as illustrated in the following code.

```csharp
flexViewer.DocumentSource = flexReport;
```

You can also create a report in the FlexReportDesigner application. To get the detailed information, see [Report Creation](/componentone/docs/reporting/online-flexreport/reportcreation).