Configure a report in Blazor

A report can be set using an inline object or a URL to JSON.

This guide explains how to configure a report for Flexmonster in Blazor using an inline object. Configuring a report this way in a Blazor project differs from configuring a report in a JavaScript project because of the C# usage.

To configure a report using a URL to JSON, refer to this section: Define a report for Flexmonster.

Learn more about available report configurations.

Prerequisites

A Blazor application with Flexmonster embedded into it.
If Flexmonster is not yet embedded, see Integration with Blazor.

How to configure a report

To configure a report for Flexmonster using an inline object, do the following:

Step 1. In the @code block, declare a Report object (e.g., report):

@code {
  Report report;
}

Step 2. Define the OnInitialized() method to create and configure the Report object when the component is initialized:

@code {
  Report report;

  protected override void OnInitialized()
  {  }
}

Step 3. Create and configure the Report object (e.g., report). See an example with the configured DataSource property:

@code {
  Report report;

  protected override void OnInitialized()
  {
    report = new Report()
    {
      DataSource = new DataSource()
      {
        Type = "json",
        Filename = "https://cdn.flexmonster.com/data/retail-data.json"
      }
    };
  }
}

Notice that each object should be created with the constructor. In addition, property names in Blazor are pascal-cased (i.e., DataSource instead of dataSource) to conform to C# code conventions.

To configure other properties, see the fully configured report example, or check out our Blazor wrapper's source code.

Step 4. Pass the configured report to the FlexmonsterComponent using the Report parameter:

<FlexmonsterComponent 
  Report="@report"
/>

Example

Expand an example of a configured Report object in Blazor:

Example of a Report object

Report report = new Report()
{
  DataSource = new DataSource()
  {
    Type = "json",
    Filename = "https://cdn.flexmonster.com/data/data.json",
    Mapping = new Dictionary<string, Mapping>
    {
      { "Category", new Mapping() { Hierarchy = "Item" } },
      { "Color", new Mapping() { Hierarchy = "Item", Parent = "Category" } },
      { "Size", new Mapping() { Hierarchy = "Item", Parent = "Color" } }
    }
  },
  Slice = new Slice()
  {
    Rows = new SliceHierarchy[]
    {
      new SliceHierarchy()
      {
        UniqueName = "Item",
        Sort = "asc"
      }
    },
    Columns = new SliceHierarchy[]
    {
      new SliceHierarchy
      {
        UniqueName = "Country",
        Filter = new Filter
        {
          Members = new string[]
          {
            "country.[australia]",
            "country.[france]",
            "country.[united kingdom]"
          }
        },
        Sort = "asc"
      },
      new SliceHierarchy
      {
        UniqueName = "Business Type",
        Sort = "asc"
      },
      new SliceHierarchy
      {
        UniqueName = "[Measures]",
      },
    },
    Measures = new SliceMeasure[]
    {
      new SliceMeasure
      {
        UniqueName = "Price",
        Aggregation = "sum",
        Active = true,
        Format = "currency"
      }
    },
    Sorting = new SortingObject
    {
      Row = new SortingHierarchyObject
      {
        Type = "desc",
        Tuple = new string[] { "item.[cars].[red]" },
        Measure = new Measure
        {
          UniqueName = "Price",
          Aggregation = "sum"
        }
      }
    },
    Expands = new ExpandObject
    {
      ExpandAll = false,
      Columns = new HierarchyObjectInSlice[]
      {
        new HierarchyObjectInSlice
        {
          Tuple = new string[] { "country.[australia]" }
        }
      }
    },
    Drills = new DrillObject
    {
      DrillAll = false,
      Rows = new HierarchyObjectInSlice[]
      {
        new HierarchyObjectInSlice
        {
          Tuple = new string[] { "item.[accessories]" }
        },
        new HierarchyObjectInSlice
        {
          Tuple = new string[] { "item.[cars]" }
        }
      }
    }
  },
  Options = new Options
  {
    ViewType = "grid",
    Grid = new GridOptions
    {
      Type = "compact",
      Title = "",
      ShowFilter = true,
      ShowHeaders = true,
      ShowTotals = "on",
      ShowGrandTotals = "on",
      GrandTotalsPosition = "top",
      ShowHierarchies = true,
      ShowHierarchyCaptions = true,
      DrillThroughMaxRows = 1000,
      ShowReportFiltersArea = true,
      Dragging = true,
      ShowAutoCalculationBar = true
    },
    Chart = new ChartOptions
    {
      Type = "column",
      Title = "",
      ShowFilter = true,
      MultipleMeasures = false,
      OneLevel = false,
      AutoRange = false,
      ReversedAxes = false,
      ShowLegend = true,
      ShowLegendButton = false,
      ShowDataLabels = false,
      ShowAllLabels = false,
      ShowMeasures = true,
      ShowOneMeasureSelection = true,
      ShowWarning = true,
      ActiveMeasure = new MeasureObject()
    },
    Filter = new FilterOptions
    {
      WeekOffset = 1,
      DateFormat = "dd/MM/yyyy",
      LiveSearch = true
    },
    ConfiguratorActive = false,
    ConfiguratorButton = true,
    ShowAggregations = true,
    ShowCalculatedValuesButton = true,
    Grouping = false,
    Editing = false,
    DrillThrough = true,
    ShowDrillThroughConfigurator = true,
    Sorting = "on",
    DefaultDateType = "date",
    StrictDataTypes = false,
    DatePattern = "dd/MM/yyyy",
    DateTimePattern = "dd/MM/yyyy HH:mm:ss",
    SaveAllFormats = false,
    ShowDefaultSlice = true,
    UseOlapFormatting = false,
    ShowMemberProperties = false,
    ShowEmptyData = true,
    DefaultHierarchySortName = "asc",
    ShowOutdatedDataAlert = false,
    ShowAggregationLabels = true,
    ShowAllFieldsDrillThrough = false,
    LiveFiltering = false,
    ShowFieldListSearch = false,
    ValidateFormulas = true,
    CaseSensitiveMembers = false,
    SimplifyFieldListFolders = false,
    ValidateReportFiles = true,
    AllowBrowsersCache = false,
    ShowEmptyValues = false,
    DistinguishNullUndefinedEmpty = false,
    UseCaptionsInCalculatedValueEditor = false,
    ReadOnly = false
  },
  Conditions = new ConditionalFormat[]
  {
    new ConditionalFormat
    {
      Formula = "#value < 20000",
      Measure = "Price",
      Aggregation = "sum",
      Format = new Style
      {
        BackgroundColor = "#F44336",
        Color = "#FFFFFF",
        FontFamily = "Arial",
        FontSize = "12px"
      }
    }
  },
  Formats = new Format[]
  {
    new Format
    {
      Name = "-currency",
      CurrencySymbol = "$"
    }
  },
  TableSizes = new TableSizes
  {
    Columns = new ColumnSize[]
    {
      new ColumnSize
      {
        Tuple = new string[] { "country.[australia]", "business type.[warehouse]" },
        Measure = new MeasureObject
        {
          UniqueName = "Price",
          Aggregation = "sum"
        },
        Width = 121
      }
    }
  },
  Localization = "https://cdn.flexmonster.com/loc/es.json",
  Version = "2.9.71",
  CreationDate = "2024-02-22T11:54:40.925Z"
};

Frequently asked questions

Can't find your answer?
Visit the FAQ

What is Flexmonster Pivot Table & Charts?

Flexmonster Pivot Table & Charts is a JavaScript pivot table component for adding interactive reporting and data analysis to web applications. Users can summarize, filter, sort, and explore data in pivot tables and charts, drill into results, and export reports.

Which frameworks does Flexmonster work with?

Which data sources can Flexmonster connect to?

How is Flexmonster licensed?

Can I try Flexmonster before buying?

Configure a report in Blazor

Prerequisites

How to configure a report

Example

See also

Frequently asked questions