DEV Community: Vijay Anand

How to Import Data from SQL Server to Excel Table in C#

Vijay Anand — Wed, 28 Aug 2019 11:00:32 +0000

Microsoft Excel is known for storing, analyzing, and visualizing data. Databases are great for storing a large set of data. At times, you may need to use or analyze data from a database in Excel.

In this article, we are going to see how the Syncfusion .NET Excel (XlsIO) library helps you import data from SQL Server to Excel in C# through external data connections, import filtered data using query parameters, and programmatically refresh Excel data when its database is updated.

Before we see how to import data from SQL Server to Excel, you must understand Excel tables, because Microsoft Excel allows data to be imported from SQL Server to Excel tables. Excel tables allow you to analyze data quickly and easily by performing operations such as sorting, filtering, calculating, and formatting.

How to import data from SQL Server to Excel

In this blog, we are going to use an Employee_Details  table from a database mapped to an Excel table. We have used the following query to fill an Excel table from a database:

select \* from Employee\_Details;

Excel Table with External Connection

Let’s see the steps involved in importing data from SQL Server to Excel using C#. Before proceeding with the following steps, refer to the Getting Started guide for the assemblies required to create an Excel file.

Step 1: Create the instances of ExcelEngine and IApplication. It is like opening an Excel application.

Step 2: Create a new workbook instance with one worksheet.

Step 3: Create a connection string to establish a connection with a SQL Server database and query string to retrieve data from a SQL Server database similar to ADO.NET.

Step 4: Establish the connection to the workbook with the connection string and query string.

Step 5: Create an Excel table with an external data connection using the _AddEx _ method of the *IWorksheet.ListObjects * collection class.

Step 6: Pull the data from the database and store it in Excel using the Refresh() method of the *IListObject * class.

Step 7: Save the Excel file and close its instances.

The following code sample shows how to import data from a database to an Excel table.

private void btnCreateExcel_Click(object sender, EventArgs e)
{
    using (ExcelEngine excelEngine = new ExcelEngine())
    {
        IApplication application = excelEngine.Excel;
        application.DefaultVersion = ExcelVersion.Excel2016;

        //Create a new workbook 
        IWorkbook workbook = application.Workbooks.Create(1);
        IWorksheet sheet = workbook.Worksheets[0];

        if (sheet.ListObjects.Count == 0)
        {
            //Estabilishing the connection in the worksheet 
            string connectionString = "Server=myServerAddress;Database=myDataBase;User Id=myUsername;Password = myPassword";

            string query = "SELECT * FROM Employees";

            IConnection connection = workbook.Connections.Add("SQLConnection", "Sample connection with SQL Server", connectionString, query, ExcelCommandType.Sql);

            //Create Excel table from external connection. 
            sheet.ListObjects.AddEx(ExcelListObjectSourceType.SrcQuery, connection, sheet.Range["A1"]);
        }

        //Refresh Excel table to get updated values from database 
        sheet.ListObjects[0].Refresh();

        sheet.UsedRange.AutofitColumns();

        //Save the file in the given path 
        Stream excelStream = File.Create(Path.GetFullPath(@"Output.xlsx"));

        workbook.SaveAs(excelStream);
        excelStream.Dispose();
    }
}

How to import data using query parameters in an Excel table

To import data from SQL Server to an Excel table, queries are used. Queries always return the same results, and their data cannot be filtered at runtime. Therefore, Microsoft Excel provides the option Parameter , which is used to get dynamic values, apply them to the query, and return filtered results. Parameters can be set either through a prompt event, as a constant, or as an Excel range. Developers can write a query and leave it up to the end-user to filter data on their own. The values entered as parameters are used in the WHERE clause of the SQL query. The available parameter types are:

Prompt parameter
Constant parameter
Range parameter

Let’s see these parameter types in detail and how to implement them.

Prompt parameter

The prompt parameter type helps the user by raising a prompt event where a filter value can be entered at runtime on refreshing the Excel table. This is useful when there is a need to filter the Excel table with different values.

The following code example illustrates how to set two parameters through prompt events by accessing an existing Excel table with an external connection.

private void btnApplyPromptParameter_Click(object sender, EventArgs e)
{
    using (ExcelEngine excelEngine = new ExcelEngine())
    {
        IApplication application = excelEngine.Excel;

        //Load existing Excel template document with external connection
        IWorkbook workbook = application.Workbooks.Open(DataPathBase + "Template.xlsx");
        IWorksheet worksheet = workbook.Worksheets[0];

        //Accessing the query table from Excel table
        QueryTableImpl queryTable = worksheet.ListObjects[0].QueryTable;

        //Update Excel query to filter data from various parameter types
        string query = "select * from Employee_Details where Emp_Age = ? AND Country = ?;";
        queryTable.CommandText = query;

        //Add a parameter
        IParameter promptParam = queryTable.Parameters.Add("PromptParameter", ExcelParameterDataType.ParamTypeChar);

        //Set PROMPT parameter by raising the event SetParam
        promptParam.SetParam(ExcelParameterType.Prompt, "Emp Age");
        promptParam.Prompt += new PromptEventHandler(SetParameter1);
        promptParam.Prompt += new PromptEventHandler(SetParameter2);

        //Refresh Excel table to filter data while loading Excel document
        worksheet.ListObjects[0].Refresh();

        //Save the workbook
        workbook.SaveAs("Output.xlsx");
    }
}

private void SetParameter1(object sender, PromptEventArgs args)
{
    args.Value = 30;
}

private void SetParameter2(object sender, PromptEventArgs args) 
{ 
    args.Value = "Argentina"; 
}

Screenshot of Applying Prompt Parameter in Microsoft Excel

Excel File Generated with Prompt Parameter Query

Constant parameter

The constant parameter type helps the user define a constant from the code and filter the Excel table. Here, if the data is modified in the database, the filtering is always done for the constant value defined in the code.

The following code example illustrates how to set the parameter through the constant type by accessing an existing Excel table with an external connection.

private void btnApplyConstantParameter_Click(object sender, EventArgs e)
{
    using (ExcelEngine excelEngine = new ExcelEngine())
    {
        IApplication application = excelEngine.Excel;

        //Load existing Excel template document with external connection
        IWorkbook workbook = application.Workbooks.Open(DataPathBase + "Template.xlsx");
        IWorksheet worksheet = workbook.Worksheets[0];

        //Accessing the query table from Excel table
        QueryTableImpl queryTable = worksheet.ListObjects[0].QueryTable;

        //Update Excel query to filter data from various parameter types
        string query = "select * from Employee_Details where Emp_Age > ?;";
        queryTable.CommandText = query;

        //Add a parameter object
        IParameter constParam = queryTable.Parameters.Add("ConstantParameter", ExcelParameterDataType.ParamTypeChar);

        //Set CONSTANT parameter
        constParam.SetParam(ExcelParameterType.Constant, 25);

        //Refresh Excel table to filter data while loading Excel document
        worksheet.ListObjects[0].Refresh();

        //Save the workbook
        workbook.SaveAs("Output.xlsx");
    }
}

Screenshot of Applying Constant Parameter in Microsoft Excel

Excel File Generated with Constant Parameter Query

Range parameter

Situations may arise where you need to show data from a database based on a cell value in an Excel worksheet. For example, if a cell contains a formula and the value varies for certain cases, the Excel table will reflect this accordingly. The range parameter helps filter data based on the cell values available in a worksheet range.

The following code shows how to set a parameter type to a specific range.

private void btnApplyRangeParameter_Click(object sender, EventArgs e)
{
    using (ExcelEngine excelEngine = new ExcelEngine())
    {
        IApplication application = excelEngine.Excel;

        //Load existing Excel template document with external connection
        IWorkbook workbook = application.Workbooks.Open(DataPathBase + "Template.xlsx");
        IWorksheet worksheet = workbook.Worksheets[0];

        //Accessing the query table from Excel table
        QueryTableImpl queryTable = worksheet.ListObjects[0].QueryTable;

        //Update Excel query to filter data from various parameter types
        string query = "select * from Employee_Details where Emp_Age = ?;";
        queryTable.CommandText = query;

        //Add a parameter
        IParameter rangeParam = queryTable.Parameters.Add("RangeParameter", ExcelParameterDataType.ParamTypeChar);

        //Set RANGE parameter
        rangeParam.SetParam(ExcelParameterType.Range, worksheet.Range["H1"]);
        rangeParam.RefreshOnChange = true;

        //Refresh Excel table to filter data while loading Excel document
        worksheet.ListObjects[0].Refresh();

        //Save the workbook
        workbook.SaveAs("Output.xlsx");
    }
}

Screenshot of applying Range Parameter in Microsoft Excel

Excel File Generated with Range Parameter Query

How to refresh Excel data from a database

Excel worksheets that are connected to SQL Server as an external data source will fetch data for an Excel table. If data is updated in the database, it is mandatory to refresh the Excel table to update its data. Essential XlsIO allows you to update the data by refreshing the table from its source. Refresh the connection every time, when the data is updated.

Here we invoke the Refresh() method of the *IListObject * class to get updated data from the database in an Excel table.

The following code sample shows how to import data from a database to an Excel table.

private void btnCreateExcel_Click(object sender, EventArgs e) 
{ 
    using (ExcelEngine excelEngine = new ExcelEngine()) 
    { 
        IApplication application = excelEngine.Excel;  

        //Load existing Excel document with an external connection 
        IWorkbook workbook = application.Workbooks.Open(DataPathBase + "Template.xlsx"); 
        IWorksheet worksheet = workbook.Worksheets[0]; 

        //Refresh Excel table to update data after loading the Excel document. 
        worksheet.ListObjects[0].Refresh(); 

        //Save the workbook
        workbook.SaveAs("Output.xlsx"); 
    } 
}

GitHub Sample

You can download the sample to import data from SQL Server into Excel table in C# here.

Conclusion

In short, Excel is mainly used for processing and visualizing data, and Syncfusion’s Excel (XlsIO) library provides an easy way to import data from SQL Server and filter it at runtime. Use them effectively to generate Excel reports with high performance and process large amounts of data.

For more information about creating external data connections and setting parameters, refer to our documentation on external data connections. This feature is supported in .NET Framework platforms such as Windows Forms, WPF, ASP.NET, and ASP.NET MVC.

Take a moment to peruse the documentation, where you’ll find other options and features, all with accompanying code samples. Using the Excel library, you can also export Excel data to PDF, image, CSV, TSV, HTML, and ODS file formats; data tables; collections of objects; and more.

If you are new to our Excel library, it is highly recommended that you follow our Getting Started guide.

Already a Syncfusion user? You can download the product setup from the Essential Studio Downloads page. If you’re not yet a Syncfusion user, you can download a free, 30-day trial from our website.

If you have any questions or require clarifications about these features, please let us know in the comments below. You can also contact us through our support forum, Direct-Trac, or our feedback portal. We are happy to assist you!

Related Blog

6 Easy Ways to Export Data to Excel in C#

The post How to Import Data from SQL Server to Excel Table in C# appeared first on Syncfusion Blogs.

10 Tricks Every Developer Should Know in Visual Studio Code

Vijay Anand — Wed, 26 Jun 2019 11:00:22 +0000

Visual Studio Code is a fundamental programming tool for editing the source code of computer programs. It is developed by Microsoft for working in Windows, Linux, and Mac operating systems. This application is free and open source for both private and commercial use.

Here is a list of 10 tricks every developer should know in Visual Studio Code:

Command Palette
Zen Mode
Split View
Tag Wrapping
Git Integration
New Themes and Plugins
Command Line in VS Code
Edit Multiple Lines Simultaneously
Exclude Folders
Go to Definition

Command Palette

The Command Palette allows you to access various available commands just by typing a keyword instead of navigating through menus.

The Command Palette can be opened with the key combination Ctrl + Shift + P. You can then type relevant keywords to see a list of commands in the drop-down window.

Command Palette

Zen Mode

Zen Mode is a distraction-free view. All the extra tool boxes and bars in your window will be removed, allowing you to completely focus on your code.

Jump to and from Zen mode by selecting View > Appearance > Toggle Zen Mode.

Also, you can center-align your code in Zen Mode to experience a view like a document editor. Jump in and out of the centered layout by selecting View > Appearance > Toggle Centered Layout.

Centered Code in Zen Mode

Split view

If you’re good at multitasking, and you are working on two different files of the same project simultaneously, or need to check the difference between two files, then go to the split view.

The split view can be customized based on your preferences, whether you like to lay out files vertically or horizontally.

You can achieve the split view by selecting View > Editor Layout > Split Up.

Comparing Files in Split View

Tag wrapping

Emmet is a plugin that saves time and improves developer productivity by helping you type less but generate more code.

Emmet allows you to get the corresponding tags from the abbreviated code you are typing. You can see an example in the following screenshot. Check out this list of all the pre-supported tag wraps in Emmet.

Tag Wrapping Using Emmet

Git integration

Visual Studio Code comes with Git integration that allows you to commit, pull, and push your code changes to a remote Git repository.

Open a file in a Visual Studio Code that belongs to a Git repository. The editor will show the difference between the working copy and the current file in a remote repository. This won’t work without an internet connection; one is required to stay connected with the Git repository.

Check out this cheat sheet for all the Git commands.

Code Difference between Working Copy and Code Base

New themes and plugins

VS Code lets you apply a theme to the syntax highlighting of text in the editor based on your preferences. You can find many themes in the VS Marketplace that are absolutely free.

List of Themes for VS Code

Also, VS Code has a rich plugin API, which allows users to create awesome plugins. Some of the most popular plugins are:

Settings Sync: The most common settings plugin. It allows you to sync your VS Code installations on different devices.
Docker: Developing with Docker can sometimes mean running complex Docker commands and monitoring them. Installing this Docker extension adds some helpful Docker tools, such as generating Docker files, Docker file IntelliSense, and even monitoring.

Command Line in VS Code

VS Code comes with an integrated command-line terminal. On Windows, this terminal shows up as the Command Prompt. On Mac and Linux, it shows up as a Bash prompt. Either way, the terminal starts off in the current project’s working directory if one is loaded, or from your home folder if no project is loaded.

The command-line interface lets you control how you launch the editor. You can open files, install extensions, change the display languages, and output diagnostics through its options.

It also supports the ability to have multiple, separate terminals. Just click the + icon at the top right to spawn more terminal instances or click the trash can icon to close the current terminal.

Command Line in VS Code

Edit multiple lines simultaneously

Just copying and pasting code is a bit old fashioned. In VS Code, you can edit multiple lines by adding cursors to different locations. This is very useful if you are going to use the same code on different lines. Instead of copying and pasting the code in all places, you can hold Alt and click to add a cursor in the places you want to type or edit the code. After adding cursors, edit the code to see the changes in the places where the cursors were added.

Editing Multiple Lines Simultaneously

Exclude folders

You can use the exclude folder option to remove unwanted folders like node_modules or others you don’t want to open in Visual Studio Code.

To exclude a folder, go to File > Preferences , and search for file.exclude in the search settings. You can add the pattern of the folder you don’t want Visual Studio Code to open.

Excluding Folder

Go to definition

While programming or scripting, you’ll often run into a variable or method that you don’t recognize. You could spend several minutes searching for the right file, or you could hold Command (on Mac) or Ctrl (on Windows) and click the variable or method name. VS Code will then take you to its definition.

Or, you could just hold Command (on Mac) or Ctrl (on Windows) and hover the pointer over the variable or method to see an inline definition at the position of the cursor.

Inspecting a Variable in a Pop-up

Conclusion

I hope you have enjoyed learning some new tricks in making effective use of Visual Studio Code. Know a trick in VS Code and feel it would be helpful for others? Share it as a comment below. We will add it in another blog.

Happy coding!

The post 10 Tricks Every Developer Should Know in Visual Studio Code appeared first on Syncfusion Blogs.

How to Create Custom Controls in Xamarin.Forms

Vijay Anand — Thu, 09 May 2019 11:00:42 +0000

Xamarin.Forms allows end users to create native user interfaces on Android, iOS, and UWP platforms using a single, shared C# codebase. It provides a multitude of customization options on each native platform, since the UI is rendered using different native control Renderer classes.

With over 40 pages, layouts, and controls built into the Xamarin.Forms library, you can do almost anything while building your native mobile apps on Android, iOS, and UWP. The best thing about Xamarin.Forms is the ability to completely customize each built in-control. In addition to that, you can use platform-specific APIs and custom controls. You can reuse your custom native control in Xamarin.Forms applications using the custom renderer concept.

There are two ways of creating a custom control:

Using the built-in layouts and controls.
Using a dummy wrapper class in the PCL/.NET standard project with bindable properties or in the renderer of each platform.

Simple ListView

In this blog post, we are going to create custom controls using the first approach. There are numerous custom controls in Xamarin. However, my favorite is the ListView, which is required in a majority of the applications we use.

What if you could create your own ListView that could render any data with just few lines of code? What if you could provide options to customize the view loaded in it without too much coding? That is exactly what we are going to see in this blog post: a simple ListView that displays contact information like in a mobile phone.

To create a ListView, first we need to write a class that contains the properties of the control. The best part about any ListView is that it reuses items when we scroll. In other words, it creates only the child and rearranges the items that go out of the viewport when we scroll. This logic is adopted in here, as well, and thus we need a scroll container to control this logic flow.

Displaying contact information in ListView

A ListView is a data-bound control. Therefore, you must create a data model to bind to the control.

We’ll create a simple data source and bind it to our ListView. In this case, simple “contact details of some random users” have been modeled that generate random contact details containing a user name, user image, call time, and the contact number. In a real-world scenario, you can also bind the data from the services and database to render in the ListView control.

public class ContactInfo
{
    public string ContactName { get; set; }
    public string CallTime { get; set; }
    public string ContactImage { get; set; }
    public long ContactNumber { get; set; }
    public Color ContactImageColor { get; set; }
}

Model class with properties

public class ContactsViewModel
{
    public ObservableCollection Contacts { get; set; }

    public ContactsViewModel()
    {
        GenerateContactDetails();
        Contacts = new ObservableCollection();

        foreach (var cusName in CustomerNames)
        {
            ContactInfo contact = new ContactInfo();
            ...
            Contacts.Add(contact);
        }
    }

    private void GenerateContactDetails()
    {
        ContactNumbers.Add("Kyle", 23564582);
        ContactNumbers.Add("Gina", 77656453);
        ...
        ContactNumbers.Add("Liam", 28726937);
        ContactNumbers.Add("Jacob", 39283738);
    }
}

Populating the model collection

Implementation logic

The ListView class contains the required properties to customize the appearance of the custom ListView and a subscription to the Scrolled event. The properties in the custom ListView are:

DataSource—To bind any collection to be rendered.
ItemTemplate—To customize the views that need to be loaded inside.
ItemHeight—To customize the height of the items, based on the views loaded in the ItemTemplate.

The following code illustrates the exact implementation of our SimpleListView that holds a custom view ScrollController as its content.

public class SimpleListView : ScrollView, IDisposable 
{
    private ScrollController controller;
    public int ItemHeight { get; set; }
    public DataTemplate ItemTemplate { get; set; }

    public static readonly BindableProperty DataSourceProperty =
        BindableProperty.Create("DataSource", typeof(IList), typeof(SimpleListView), null, BindingMode.TwoWay);

    public IList DataSource
    {
        get { return (IList)GetValue(DataSourceProperty); }
        set { this.SetValue(DataSourceProperty, value); }
    }

    public SimpleListView()
    {
        this.Orientation = ScrollOrientation.Vertical;
        this.ItemHeight = 60;
        this.controller = new ScrollController() { ListView = this };
        this.Scrolled += this.controller.ListView_Scrolled;
        this.Content = this.controller;
    }

    public void Dispose()
    {
        this.Scrolled -= this.controller.ListView_Scrolled;
    }
}

Loading initial views in the ListView

First, we need to create the views that fit within the view area. This can be done in the OnMeasure override of the ScrollController class. Obtain the number of items that fits within the view by diving the height of ListView by the item height. Maintain the created views in a list along with their index and the BindingContext information.

protected override SizeRequest OnMeasure(double widthConstraint, double heightConstraint)
{
    if (isFirstTime)
        CreateView((int)Math.Ceiling(ListView.Height / this.ListView.ItemHeight));

    var totalheight = this.ListView.DataSource.Count * this.ListView.ItemHeight;
    return (new SizeRequest(new Size(widthConstraint, totalheight)));
}

public void CreateView(int count)
{
    for (int i = 0; i < count; i++)
    {
        ItemView template = new ItemView
        {
            Content = (View)this.ListView.ItemTemplate.CreateContent(),
            BindingContext = this.ListView.DataSource[i],
            IsEnsured = false,
            ItemIndex = -1,
        };
        viewItems.Add(template);
        this.Children.Add(template);
    }
    isFirstTime = false;
}

The created views maintained in a list can be arranged sequentially based on the index in the LayoutChildren override.

protected override void LayoutChildren(double x, double y, double width, double height)
{
    double yPosition;
    foreach (var item in viewItems)
    {
        yPosition = item.ItemIndex * this.ListView.ItemHeight;
        item.Layout(new Rectangle(x, yPosition, width, this.ListView.ItemHeight));
    }
}

Reusing the items in the ListView when scrolling

In simple words, pick the item, whenever it goes out of the view. Then the index and the data of the item are modified and rearranged either at the top or bottom of the list based on the scroll direction.

We need to maintain a property to store the offset value and call the OnSizeAllocated method whenever the scroll offset changes to refresh the view.

The following illustrates the code logic to reuse items in the ListView control.

internal void ListView_Scrolled(object sender, ScrolledEventArgs e)
{
    this.ScrollY = e.ScrollY;
}

internal double ScrollY
{
    get { return this.scrollY; }
    set
    {
        if (this.scrollY != value)
        {
            this.scrollY = value;
            this.OnSizeAllocated(this.Width, this.Height);
        }
    }
}

protected override void OnSizeAllocated(double width, double height)
{
    var start = (int)Math.Floor(ScrollY / this.ListView.ItemHeight);
    int noOfItems = (int)Math.Ceiling(ListView.Height / this.ListView.ItemHeight);

    foreach (var item in viewItems)
        item.IsEnsured = false;

    for (int i = start; i < start + noOfItems; i++) { var row = this.viewItems.FirstOrDefault(x => x.ItemIndex == i);
        if (row == null)
        {
            row = this.viewItems.FirstOrDefault(x => ((x.ItemIndex < start || x.ItemIndex > (start + noOfItems - 1)) && !x.IsEnsured));
            if (row == null)
            {
                CreateView(1);
                row = this.viewItems.FirstOrDefault(x => ((x.ItemIndex < start || x.ItemIndex > (start + noOfItems - 1)) && !x.IsEnsured));
            }
            if (row != null)
            {
                row.ItemIndex = i;
                row.BindingContext = this.ListView.DataSource[i];
                row.IsEnsured = true;
            }
        }
        else
            row.IsEnsured = true;
    }
    base.OnSizeAllocated(width, height);
}

Binding contact information to the custom ListView

Design your template and define a suitable item height for your template. Then render the custom ListView in the view.

The following code illustrates a simple template for rendering the contact information that we generated earlier.

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:CustomControl"
             x:Class="CustomControl.MainPage"
             Padding="5,5,10,5>

    <ContentPage.BindingContext>
        <local:ContactsViewModel x:Name="viewModel" />
    </ContentPage.BindingContext>

    <local:SimpleListView ItemHeight="60"
                          DataSource="{Binding Contacts}">
        <local:SimpleListView.ItemTemplate>
            <DataTemplate>
                <StackLayout>
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="60" />
                            <ColumnDefinition Width="*" />
                            <ColumnDefinition Width="Auto" />
                        </Grid.ColumnDefinitions>
                        <ContentView Padding="5, 0, 5, 0">
                            <Label Text="{Binding ContactImage}" BackgroundColor="{Binding ContactImageColor}" TextColor="White" FontSize="32"  HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" />
                        </ContentView>
                        <StackLayout Grid.Column="1">
                            <Label LineBreakMode="NoWrap" TextColor="#474747" Text="{Binding ContactName}" FontSize="16" FontAttributes="Bold" VerticalTextAlignment="Center" />
                            <Label TextColor="#474747" LineBreakMode="NoWrap" Text="{Binding ContactNumber}" FontSize="12" VerticalTextAlignment="Center" HorizontalTextAlignment="Start" />
                        </StackLayout>
                        <Label Grid.Column="2" TextColor="#474747" LineBreakMode="NoWrap" Text="{Binding CallTime}" FontSize="12" VerticalTextAlignment="Center" HorizontalTextAlignment="Start" />
                    </Grid>
                    <BoxView BackgroundColor="Gray" HeightRequest="1" />
                </StackLayout>
            </DataTemplate>
        </local:SimpleListView.ItemTemplate>
    </local:SimpleListView>
</ContentPage>

Note : The custom ListView creation in the previous code example is entirely explained with XAML logics. However, you can also do this with the code behind.

Congratulations on configuring a simple, custom ListView in your application. Just running the sample with these steps will render a beautiful ListView in your view.

Xamarin Forms Custom List View

The previous screenshot shows the outcome of the custom ListView. However, you might want to add some more customization options and advanced features. To see these, you can refer to the Syncfusion ListView and DataGrid components pages.

Conclusion

In this blog post, we looked at creating and configuring a simple custom control, custom ListView with customizable item heights and templates in Xamarin.Forms. Be sure to download the sample application to deploy a readily runnable sample and experience how easy it is to create a custom control in Xamarin.Forms!

If you are a current customer, we invite you to check out the Syncfusion ListView and DataGrid components for Xamarin. If you are not a current customer, you can always download our free evaluation to see them in action. You can also explore the ListView and DataGrid samples available on Google Play and the App Store, and learn about advanced features in our documentation (ListView, DataGrid).

If you have any questions or require clarification, please let us know in the comments section below. You can also contact us through our support forum or Direct-Trac or Feedback Portal. We are happy to assist you!

The post How to Create Custom Controls in Xamarin.Forms appeared first on Syncfusion Blogs.

Introducing Syncfusion’s JavaScript PDF Viewer for Web

Vijay Anand — Wed, 08 May 2019 11:00:39 +0000

Syncfusion is happy to let you know that the production version of the JavaScript PDF Viewer component for web frameworks is available from 2019 Volume 1 release (version 17.1.0.38).

In this current release, we have made various improvements in terms of viewing experience and new features such as right-to-left support, accessibility, and text mark-up annotations. The PDF Viewer component is interoperable with other third-party frameworks such as Angular , React , and Vue.js.

The PDF Viewer is designed to provide high performance in every aspect, but it is especially powerful in the following ways:

Instant Loading – Load PDF files with thousands of pages instantly.
Accurate Rendering – Render PDF pages without errors.
Virtualized pages – Render pages on demand to help reduce initial load time when working with large PDF files.

In this blog, you will learn how to get started with the PDF Viewer and its feature set, uses, and different modules, as well as learn the details of the roadmap.

Key Features

Both normal and PDF files protected with AES and RC4 encryption can be opened and displayed.
JavaScript PDF Viewer supports core interactions such as scrolling, zooming, panning, and page navigation.
Built-in toolbar.
Select and copy text from PDF files.
Text can be easily searched across the PDF document.
Easy navigation with the help of bookmarks, thumbnails, hyperlinks, and a table of contents.
Availability of two view modes: fit-to-page and fit-to-width.
The entire document or a specific page or a customized range of pages can be printed directly from the browser.
Text can be highlighted with the help of text mark-up annotations such as Highlight, Underline, and Strikethrough.

Where to use the PDF Viewer?

Here are some common uses for the JavaScript PDF Viewer component:

Preview PDF files on Cloud/File Storage.
Display PDF invoices or reports in your web applications.
Perform review of PDF files.

Creating a PDF Viewer

For configuring PDF Viewer, we have to perform changes on both the server-side and client-side.

Web API Service Creation

The JavaScript PDF Viewer has server-side dependency to get details from PDF documents. First of all, let’s see the steps to create an ASP.NET Core Web API service for server-side processing.

Choose File > New > Project in the Visual Studio menu bar.

Create New VS Project

Select ASP.NET Core Web Application, change the application name, and then click OK.

Select ASP.NET Core Web Application

Select API and then click OK. The web application project has been created with the default ASP.NET Core template

Select Web API Template

After creating the project, add the Syncfusion.EJ2.PdfViewer.AspNet.Core.Windows dependency to your project by using NuGet Package Manager

Install Syncfusion.EJ2.PdfViewer.AspNet.Core.Windows

Note: For Linux and macOS operating systems, use the following respective NuGet package:

Syncfusion.EJ2.PdfViewer.AspNet.Core.Linux
Syncfusion.EJ2.PdfViewer.AspNet.Core.OSX
1. Place a PDF file inside the App_Data folder.
2. Rename the ValuesController.cs to PdfViewerController.cs inside the Controllers folder and add the following code.

using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.Mvc;
using Newtonsoft.Json;
using Syncfusion.EJ2.PdfViewer;
using System;
using System.Collections.Generic;
using System.IO;

namespace ej2_pdfviewer_service.Controllers
{
    public class PdfViewerController : Controller
    {
        private IHostingEnvironment _hostingEnvironment;
        public PdfViewerController(IHostingEnvironment hostingEnvironment)
        {
            _hostingEnvironment = hostingEnvironment;
        }
        [AcceptVerbs("Post")]
        [HttpPost]
        [Microsoft.AspNetCore.Cors.EnableCors("MyPolicy")]
        //Post action for Loading the PDF documents   
        public IActionResult Load([FromBody] Dictionary jsonObject)
        {
            PdfRenderer pdfviewer = new PdfRenderer();
            MemoryStream stream = new MemoryStream();
            object jsonResult = new object();
            if (jsonObject != null && jsonObject.ContainsKey("document"))
            {
                if (bool.Parse(jsonObject["isFileName"]))
                {
                    string documentPath = GetDocumentPath(jsonObject["document"]);
                    if (!string.IsNullOrEmpty(documentPath))
                    {
                        byte[] bytes = System.IO.File.ReadAllBytes(documentPath);
                        stream = new MemoryStream(bytes);
                    }
                    else
                    {
                        return this.Content(jsonObject["document"] + " is not found");
                    }
                }
                else
                {
                    byte[] bytes = Convert.FromBase64String(jsonObject["document"]);
                    stream = new MemoryStream(bytes);
                }
            }
            jsonResult = pdfviewer.Load(stream, jsonObject);
            return Content(JsonConvert.SerializeObject(jsonResult));
        }

        [AcceptVerbs("Post")]
        [HttpPost]
        [Microsoft.AspNetCore.Cors.EnableCors("MyPolicy")]
        //Post action for processing the bookmarks from the PDF documents   
        public IActionResult Bookmarks([FromBody] Dictionary jsonObject)
        {
            PdfRenderer pdfviewer = new PdfRenderer();
            var jsonResult = pdfviewer.GetBookmarks(jsonObject);
            return Content(JsonConvert.SerializeObject(jsonResult));
        }
        [AcceptVerbs("Post")]
        [HttpPost]
        [Microsoft.AspNetCore.Cors.EnableCors("MyPolicy")]
        //Post action for processing the PDF documents.  
        public IActionResult RenderPdfPages([FromBody] Dictionary jsonObject)
        {
            PdfRenderer pdfviewer = new PdfRenderer();
            object jsonResult = pdfviewer.GetPage(jsonObject);
            return Content(JsonConvert.SerializeObject(jsonResult));
        }
        [AcceptVerbs("Post")]
        [HttpPost]
        [Microsoft.AspNetCore.Cors.EnableCors("MyPolicy")]
        //Post action for rendering the ThumbnailImages
        public IActionResult RenderThumbnailImages([FromBody] Dictionary jsonObject)
        {
            PdfRenderer pdfviewer = new PdfRenderer();
            object result = pdfviewer.GetThumbnailImages(jsonObject);
            return Content(JsonConvert.SerializeObject(result));
        }
        [AcceptVerbs("Post")]
        [HttpPost]
        [Microsoft.AspNetCore.Cors.EnableCors("MyPolicy")]
        //Post action for unloading and disposing the PDF document resources  
        public IActionResult Unload([FromBody] Dictionary jsonObject)
        {
            PdfRenderer pdfviewer = new PdfRenderer();
            pdfviewer.ClearCache(jsonObject);
            return this.Content("Document cache is cleared");
        }
        [HttpPost]
        [Microsoft.AspNetCore.Cors.EnableCors("MyPolicy")]
        //Post action for downloading the PDF documents
        public IActionResult Download([FromBody] Dictionary jsonObject)
        {
            PdfRenderer pdfviewer = new PdfRenderer();
            string documentBase = pdfviewer.GetDocumentAsBase64(jsonObject);
            return Content(documentBase);
        }
        [HttpPost]
        [Microsoft.AspNetCore.Cors.EnableCors("MyPolicy")]
        //Post action for printing the PDF documents
        public IActionResult PrintImages([FromBody] Dictionary jsonObject)
        {
            PdfRenderer pdfviewer = new PdfRenderer();
            object pageImage = pdfviewer.GetPrintImage(jsonObject);
            return Content(JsonConvert.SerializeObject(pageImage));
        }
        //Gets the path of the PDF document
        private string GetDocumentPath(string document)
        {
            string documentPath = string.Empty;
            if (!System.IO.File.Exists(document))
            {
                var path = _hostingEnvironment.ContentRootPath;
                if (System.IO.File.Exists(path + "\\Data\\" + document))
                    documentPath = path + "\\Data\\" + document;
            }
            else
            {
                documentPath = document;
            }
            return documentPath;
        }
    }
}

Change the launchUrl to pdfviewer (name of the control) in the launchSettings.json file as follows.

{
  "iisSettings": {
    "windowsAuthentication": false,
    "anonymousAuthentication": true,
    "iisExpress": {
      "applicationUrl": "http://localhost:58767/",
      "sslPort": 0
    }
  },
  "profiles": {
    "IIS Express": {
      "commandName": "IISExpress",
      "launchBrowser": true,
      "launchUrl": "pdfviewer",
      "environmentVariables": {
        "ASPNETCORE_ENVIRONMENT": "Development"
      }
    },
    "ej2_pdfviewer_service": {
      "commandName": "Project",
      "launchBrowser": true,
      "launchUrl": "pdfviewer",
      "environmentVariables": {
        "ASPNETCORE_ENVIRONMENT": "Development"
      },
      "applicationUrl": "http://localhost:62978/"
    }
  }
}

Configure a CORS policy at application Startup.cs in the ConfigureService method using the following code.

public void ConfigureServices(IServiceCollection services)
        {
            services.AddMemoryCache();
            services.AddMvc();
            services.AddCors(o => o.AddPolicy("MyPolicy", builder =>
            {
                builder.AllowAnyOrigin()
                .AllowAnyMethod()
                .AllowAnyHeader();
            }));
            services.Configure(options => options.Level = System.IO.Compression.CompressionLevel.Optimal);
            services.AddResponseCompression();
        }

The CoresPolicyBuilder in builder allows you to configure the policy as needed. You can now use this policy name to apply to controllers and actions as shown in the following code sample.

[Microsoft.AspNetCore.Cors.EnableCors("MyPolicy")]

You can download the same ASP.NET Core Web API service application from the following location.

ASP.NET Core Web API service application

_Note: Similarly, you can create the ASP.NET MVC Web API service for PDF Viewer by using the steps provided in the following link, _

https://ej2.syncfusion.com/documentation/pdfviewer/how-to/create-pdfviewer-service

And also you can download the ASP.NET MVC Web API service application from the following location.

ASP.NET MVC Web API service application

Configure PDF Viewer on Client-side

Now let’s look at the steps for configuring PDF Viewer on client-side.

You can clone the Essential JS 2 QuickStart project and install necessary packages by using the following commands.

git clone https://github.com/syncfusion/ej2-quickstart.git quickstart
cd quickstart
npm install

Dependent packages must be mapped in the config.js configuration file exist in the directory “quickstart/src” using the following code sample.

System.config({
    paths: {
        'npm:': '../node_modules/',
        'syncfusion:': 'npm:@syncfusion/'

    },
    map: {
        app: 'app',

         //Syncfusion packages mapping
        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
        "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
        "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",
        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
        "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
        "@syncfusion/ej2-pdfviewer": "syncfusion:ej2-pdfviewer/dist/ej2-pdfviewer.umd.min.js"

    },
    packages: {
        'app': { main: 'app', defaultExtension: 'js' }
    }
});

System.import('app');

** ** Add an HTML div element to act as the PDF Viewer in “index.html” using the following code

<!--Element which will be rendered as PDF Viewer --></pre><div id="PdfViewer" style="height: 600px;"></div>

Essential JS 2 components support a set of built-in themes, and here we will use the material theme for the PDF Viewer. To add the material theme in your application, you need to import an applicable CSS in “quickstart/src/styles/style.css”.

@import '../../node\_modules/@syncfusion/ej2/material.css';

Place the following code in “app.ts” to start the PDF Viewer.

// Import the required modules 
import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView,
ThumbnailView, Print, TextSelection, TextSearch, Annotation} from '@syncfusion/ej2-pdfviewer';

// Inject the required modules
PdfViewer.Inject(Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation);

// Create the PDF Viewer instance
let pdfviewer: PdfViewer = new PdfViewer();
// Map the service URL
// Please use your own service URL of ASP.NET (Core or MVC) Web API  
pdfviewer.serviceUrl = "http://localhost:62978/api/pdfviewer";
pdfviewer.appendTo("#PdfViewer");
pdfviewer.load('inputfile.pdf', null);

_ Note: Here you have to use the service URL from ASP.NET Core or ASP.NET MVC Web API service application URL as provided in earlier steps._

Run the following command to start the application

| npm start |

Your browser window will appear like this:

PDF Viewer default view

## PDF Viewer – Modules

All the features we’ve explored are broken into individual modules, so as to enable selective referencing; only the features you need have to be included in your application. Here are the available modules:

Toolbar: Built-in toolbar for better user interaction.
Magnification: Perform zooming operations for a better viewing experience.
Navigation: Easy navigation across PDF pages.
LinkAnnotation: Easy navigation both in and out of the PDF document through hyperlink.
ThumbnailView: Allows users to navigate easily with a thumbnail view.
BookmarkView: Allows users to navigate easily with a bookmark view.
TextSelection: Select and copy text from a PDF file.
TextSearch: Search text easily across the PDF document.
Print: Print the entire document or a specific page directly from the browser.
Annotation: Allows the user to add or edit annotations.

Supported Frameworks

This PDF Viewer supports the following Web Frameworks:

Roadmap

In the future release of Syncfusion’s JavaScript PDF Viewer, the following features can be expected:

Shape annotations such as rectangle, circle, line, polyline, and polygon
Stamp annotations
Measuring tools such as length, area, volume, radius, and perimeter.
Sticky notes and comments

Summary

We hope that you now understand the features of the JavaScript PDF Viewer , real use cases for it, and how to integrate it into a web application. If you would like to try the PDF Viewer component, you can download our free trial. You can visit the PDF Viewer source in GitHub and can check our sample browser and documentation for detailed explanations if you want to explore further applications.

If you have any questions or need any information, please let us know in the comments section below. You can also contact us through our support forum or Direct-Trac or feedback portal. We are always happy to assist you.

The post Introducing Syncfusion’s JavaScript PDF Viewer for Web appeared first on Syncfusion Blogs.

7 Tips to Optimize Xamarin Charts Performance

Vijay Anand — Mon, 29 Apr 2019 04:00:04 +0000

Visualizing raw data is important in any application, so that you can quickly and clearly understand large quantities of data and compare different kinds of data sets. One of the most commonly used chart types is the line chart. It is represented by a series of data points on a straight line. It should be capable of visualizing a large amount of data points, as would be the typical requirement in most applications.

We built this chart with plotting a lot of data points in mind and included several optimizations to handle high numbers of data points while still providing a smooth experience to users. Still, more optimizations can be done at the application level to get the best possible performance when loading more than 100K data points, and those techniques are explained in this blog post.

#1: Use fast line series instead of line series

The line series was built for providing rich customization of individual lines, so it will not be good for loading a high number of data points and performing real-time data updates. However, we also have a FastLineSeries. It is commonly used to load a huge number of data points as it renders the line with a single points collection. The configuration of FastLineSeries, such as setting the items source and binding paths, is the same as any other series. The following code snippet shows how to configure the fast line series in XAML code.

<chart:SfChart.Series>
      <chart:FastLineSeries XBindingPath="XValue" YBindingPath="YValue" ItemsSource="{Binding Data}"/>
</chart:SfChart.Series>

#2: Do not use data markers, use trackball or tooltips

Plotting data markers and labels for each data point will be look messy when you plot many data points. Nevertheless, it is important to track the data points at required indexes. That is where tooltips and a trackball come into play. A tooltip will display data when you touch any data point. Similarly, the trackball will display the information of the nearest data point along with a vertical line when you touch and hold it on the chart area. Customize the appearance of both trackball and tooltip labels using built-in APIs and data templates. The following code snippet shows how to enable tooltips and the trackball and customize their labels using a data template.

Enable and customize tooltips using a data template.

chart:FastLineSeries  EnableTooltip="true"> 

     <chart:FastLineSeries.TooltipTemplate> 
           <DataTemplate> 
                <Label Text="{Binding TooltipString}" /> 
           </DataTemplate> 
     </chart:FastLineSeries.TooltipTemplate> 

</chart:FastLineSeries>

Enable the trackball.

<chart:SfChart.ChartBehaviors>
      <chart:ChartTrackballBehavior/>
</chart:SfChart.ChartBehaviors>

Customize the trackball labels with a data template

<chart:FastLineSeries>

    <chart:FastLineSeries.TrackballLabelTemplate>
                  <DataTemplate>
                        <Label Text="{Binding TooltipString}" />
                  </DataTemplate>
    </chart:FastLineSeries.TrackballLabelTemplate > 

</chart:FastLineSeries>

#3: Reduce the stroke width of the fast line series to 1

By default, the stroke width of a fast line series is 2. It causes a delay if you render the line with two pixels rather than a single pixel. So, set the StrokeWidth of FastLineSeries to 1 if you don’t have any specific requirement to render the line with the thickness of two. The thickness of the line can be increased at runtime. You can render the line with a thickness of one at load time and, after zooming to a certain level, you can increase the thickness to two or more to see the line clearly. The following code snippet demonstrates how to configure the thickness of the line.

<chart:SfChart.Series> 
       <chart:FastLineSeries StrokeWidth="1" /> 
</chart:SfChart.Series>

#4: Make use of SuspendSeriesNotification and ResumeSeriesNotification

After binding your data to the ItemsSource property of ChartSeries, the chart will always listen to the changes that happen in your data if it implements the INotifyCollectionChanged interface. But in some cases, you may add bulk objects to your data collection. If you think those updates in the chart do not make any sense, you are able to stop the chart from being updated for each modification in the items source collection. It is possible with the Charts control using the SuspendSeriesNotification and ResumeSeriesNotification methods. The chart will not respond to any change in the items source collection after the SuspendSeriesNotification method is invoked. It will be updated with latest data after the ResumeSeriesNotification method is invoked. Refer to the following code snippet.

Chart.SuspendSeriesNotification();

//Make the required changes in the items source that don’t need to be updated in UI immediately.

Chart.ResumeSeriesNotification();

#5: Disable the anti-aliasing

The anti-aliasing support renders the line with smooth edges. But, this is not very important when you plot a huge number of data points. Disable the anti-aliasing of the line using EnableAntiAliasing property of FastLineSeries. Enable the anti-aliasing at runtime, though, whenever you want the line to be anti-aliased. The following code snippet shows how to disable the anti-aliasing feature.

<chart:SfChart.Series>
       <chart:FastLineSeries EnableAntiAliasing="false"  />
</chart:SfChart.Series>

#6: Avoid CategoryAxis, use NumericalAxis and DateTimeAxis

Do not use the CategoryAxis when you do not have any specific need to show the string values in the x-axis. Whereas CategoryAxis populates the labels based on the individual data points, the NumericalAxis and DateTimeAxis populate the labels based on the points’ ranges and intervals. These axes always give good performance when loading a high number of data points. The following code snippet shows how to configure the NumericalAxis as the primary axis.

<chart:SfChart.PrimaryAxis>
       <chart:NumericalAxis/>
</chart:SfChart.PrimaryAxis>

#7: Replace the FastLineSeries with FastLineBitmapSeries in UWP

Because the quality of the default rendering is better with FastLineSeries, the Xamarin.Forms FastLineSeries has been mapped with it instead of FastLineBitmapSeries in the UWP platform. The FastLineSeries plots the data using polylines, but FastLineBitmapSeries plots the data using bitmap, which is faster than polyline rendering. To replace FastLineSeries with FastLineBitmapSeries, you need to write a custom renderer, as shown in the following code snippet.

public class ChartRendererExt : SfChartRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs e)
        {
            base.OnElementChanged(e);

            Native.SfChart chart = this.Control as Native.SfChart;
            chart.Series.Clear();

            //Replace the fast line series with fast line bitmap series
            foreach (var formsSeries in e.NewElement.Series)
            {
                if (formsSeries is FastLineSeries)
                {
                    Native.FastLineBitmapSeries fastLine = new Native.FastLineBitmapSeries();

                    formsSeries.PropertyChanged += (sender, a) =>
                    {
                        if(a.PropertyName.Contains("ItemsSource"))
                        {
                            fastLine.ItemsSource = formsSeries.ItemsSource;
                        }
                    };

                    var properties = SfChartRenderer.GetPropertiesChanged(typeof(ChartSeries), formsSeries);

                    foreach (var name in properties)
                    {
                        ChartSeriesMapping.OnXyDataSeriesPropertiesChanged(name, formsSeries as FastLineSeries,
                            fastLine);
                    }
                    chart.Series.Add(fastLine);
                }
            }
        }
    }

All the above techniques help to improve the loading time and provide smooth, real-time updates in a complex application. However, the performance is still dependent on the device and its configuration. We have applied these optimizations and tested the control with 500K data points. It loads within a second in all the Xamarin.Forms platforms. We have used an iPhone 7 to test iOS, Google Pixel for Android, and a device with 16GB RAM and an Intel Core i5 7th Gen 7200U to perform this test on the Windows platform.

The following GitHub repository contains the example project with all the proposed optimizations. You can download or clone it to perform this test in your environment.

Xamarin.Forms Chart Performance Example

Please share your valuable feedback about this article in the comments section below. If you have any specific requirement related to chart performance, you can also contact us through our support forum or Direct-Trac. We are happy to assist you!

If you enjoyed this post, we think you will also like:

[Ebook] Visual Studio for Mac Succinctly
[Ebook] Xamarin.Forms Succinctly
[Ebook] Xamarin.Forms for macOS Succinctly
[Blog Post] What’s New in 2018 Volume 4: Highlights for Syncfusion Xamarin
[Blog Post] What’s New in 2018 Volume 3: Xamarin.Forms Maps Updates

The post 7 Tips to Optimize Xamarin Charts Performance appeared first on Syncfusion Blogs.

6 Easy Ways to Export Data to Excel in C#

Vijay Anand — Fri, 26 Apr 2019 11:00:54 +0000

Syncfusion Excel (XlsIO) library is a .NET Excel library that allows the user to export data to Excel in C# and VB.NET from various data sources like data tables, arrays, collections of objects, databases, CSV/TSV, and Microsoft Grid controls in a very simple and easy way. Exporting data to Excel helps in visualizing the data in a more understandable fashion. This feature helps to generate financial reports, banking statements, and invoices, while also allowing for filtering large data, validating data, formatting data, and more.

Essential XlsIO provides the following ways to export data to Excel:

DataTable to Excel
Collection of objects to Excel
Database to Excel
Microsoft Grid controls to Excel
Array to Excel
CSV to Excel

In this blog we will look at each of these methods and how to execute them.

1. Export from DataTable to Excel

Data from ADO.NET objects such as datatable, datacolumn, and dataview can be exported to Excel worksheets. The exporting can be done as column headers, by recognizing column types or cell value types, as hyperlinks, and as large dataset, all in a few seconds.

Exporting DataTable to Excel worksheets can be achieved through the ImportDataTable method. The following code sample shows how to export a datatable of employee details to an Excel worksheet.

using (ExcelEngine excelEngine = new ExcelEngine())
{
    IApplication application = excelEngine.Excel;
    application.DefaultVersion = ExcelVersion.Excel2016;

    //Create a new workbook
    IWorkbook workbook = application.Workbooks.Create(1);
    IWorksheet sheet = workbook.Worksheets[0];

    //Create a dataset from XML file
    DataSet customersDataSet = new DataSet();
    customersDataSet.ReadXml(Path.GetFullPath(@"../../Data/Employees.xml"));

    //Create datatable from the dataset
    DataTable dataTable = new DataTable();
    dataTable = customersDataSet.Tables[0];

    //Import data from the data table with column header, at first row and first column, 
    //and by its column type.
    sheet.ImportDataTable(dataTable, true, 1, 1, true);

    //Creating Excel table or list object and apply style to the table
    IListObject table = sheet.ListObjects.Create("Employee_PersonalDetails", sheet.UsedRange);

    table.BuiltInTableStyle = TableBuiltInStyles.TableStyleMedium14;

    //Autofit the columns
    sheet.UsedRange.AutofitColumns();

    //Save the file in the given path
    Stream excelStream = File.Create(Path.GetFullPath(@"Output.xlsx"));
    workbook.SaveAs(excelStream);
    excelStream.Dispose();
}

Output of DataTable to Excel

When exporting large data to Excel, and if there is no need to apply number formats and styles, you can make use of the ImportDataTable overload with the TRUE value for importOnSave parameter. Here, the export happens while saving the Excel file.

Use this option to export large data with high performance.

value = instance.ImportDataTable(dataTable, firstRow, firstColumn, importOnSave);

If you have a named range and like to export data to a named range from a specific row and column of the named range, you can make use of the below API, where rowOffset and columnOffset are the parameters to import from a particular cell in a named range.

value = instance.ImportDataTable(dataTable, namedRange, showColumnName, rowOffset, colOffset);

2. Export from collection of objects to Excel

Exporting data from a collection of objects to an Excel worksheet is a common scenario. However, this option will be helpful if you need to export data from a model to an Excel worksheet.

The Syncfusion Excel (XlsIO) library provides support to export data from a collection of objects to an Excel worksheet.

Exporting data from a collection of objects to an Excel worksheet can be achieved through the ImportData method. The following code example shows how to export data from a collection to an Excel worksheet.

using (ExcelEngine excelEngine = new ExcelEngine())
{
    IApplication application = excelEngine.Excel;
    application.DefaultVersion = ExcelVersion.Excel2016;

    //Read the data from XML file
    StreamReader reader = new StreamReader(Path.GetFullPath(@"../../Data/Customers.xml"));

    //Assign the data to the customerObjects collection
    IEnumerable customerObjects = GetData (reader.ReadToEnd());   

    //Create a new workbook
    IWorkbook workbook = application.Workbooks.Create(1);
    IWorksheet sheet = workbook.Worksheets[0];

    //Import data from customerObjects collection
    sheet.ImportData(customerObjects, 5, 1, false);

    #region Define Styles
    IStyle pageHeader = workbook.Styles.Add("PageHeaderStyle");
    IStyle tableHeader = workbook.Styles.Add("TableHeaderStyle");

    pageHeader.Font.RGBColor = Color.FromArgb(0, 83, 141, 213);
    pageHeader.Font.FontName = "Calibri";
    pageHeader.Font.Size = 18;
    pageHeader.Font.Bold = true;
    pageHeader.HorizontalAlignment = ExcelHAlign.HAlignCenter;
    pageHeader.VerticalAlignment = ExcelVAlign.VAlignCenter;

    tableHeader.Font.Color = ExcelKnownColors.White;
    tableHeader.Font.Bold = true;
    tableHeader.Font.Size = 11;
    tableHeader.Font.FontName = "Calibri";
    tableHeader.HorizontalAlignment = ExcelHAlign.HAlignCenter;
    tableHeader.VerticalAlignment = ExcelVAlign.VAlignCenter;
    tableHeader.Color = Color.FromArgb(0, 118, 147, 60);
    tableHeader.Borders[ExcelBordersIndex.EdgeLeft].LineStyle = ExcelLineStyle.Thin;
    tableHeader.Borders[ExcelBordersIndex.EdgeRight].LineStyle = ExcelLineStyle.Thin;
    tableHeader.Borders[ExcelBordersIndex.EdgeTop].LineStyle = ExcelLineStyle.Thin;
    tableHeader.Borders[ExcelBordersIndex.EdgeBottom].LineStyle = ExcelLineStyle.Thin;
    #endregion

    #region Apply Styles
    //Apply style to the header
    sheet["A1"].Text = "Yearly Sales Report";
    sheet["A1"].CellStyle = pageHeader;

    sheet["A2"].Text = "Namewise Sales Comparison Report";
    sheet["A2"].CellStyle = pageHeader;
    sheet["A2"].CellStyle.Font.Bold = false;
    sheet["A2"].CellStyle.Font.Size = 16;

    sheet["A1:D1"].Merge();
    sheet["A2:D2"].Merge();
    sheet["A3:A4"].Merge();
    sheet["D3:D4"].Merge();
    sheet["B3:C3"].Merge();

    sheet["B3"].Text = "Sales";
    sheet["A3"].Text = "Sales Person";
    sheet["B4"].Text = "January - June";
    sheet["C4"].Text = "July - December";
    sheet["D3"].Text = "Change(%)";
    sheet["A3:D4"].CellStyle = tableHeader;
    sheet.UsedRange.AutofitColumns();
    sheet.Columns[0].ColumnWidth = 24;
    sheet.Columns[1].ColumnWidth = 21;
    sheet.Columns[2].ColumnWidth = 21;
    sheet.Columns[3].ColumnWidth = 16;
    #endregion

    sheet.UsedRange.AutofitColumns();

    //Save the file in the given path
    Stream excelStream = File.Create(Path.GetFullPath(@"Output.xlsx"));
    workbook.SaveAs(excelStream);
    excelStream.Dispose();
}

Output of collection of objects to Excel

3. Export from Database to Excel

Excel supports creating Excel tables from different databases. If you have a scenario in which you need to create one or more Excel tables from a database using Excel, you need to establish every single connection to create those tables. This can be time consuming, so if you find an alternate way to generate Excel tables from database very quickly and easily, wouldn’t that be your first choice?

The Syncfusion Excel (XlsIO) library helps you to export data to Excel worksheets from databases like MS SQL, MS Access, Oracle, and more. By establishing a connection between the databases and Excel application, you can export data from a database to an Excel table.

You can use the Refresh()_ _option to update the modified data in the Excel table that is mapped to the database.

Above all, you can refer to the documentation to create a table from an external connection to learn more about how to export databases to Excel tables. The following code sample shows how to export data from a database to an Excel table.

using (ExcelEngine excelEngine = new ExcelEngine())
{
    IApplication application = excelEngine.Excel;
    application.DefaultVersion = ExcelVersion.Excel2016;

    //Create a new workbook
    IWorkbook workbook = application.Workbooks.Create(1);
    IWorksheet sheet = workbook.Worksheets[0];

    if(sheet.ListObjects.Count == 0)
    {
        //Estabilishing the connection in the worksheet
        string dBPath = Path.GetFullPath(@"../../Data/EmployeeData.mdb");
        string ConnectionString = "OLEDB;Provider=Microsoft.JET.OLEDB.4.0;Password=\"\";User ID=Admin;Data Source="+ dBPath;
        string query = "SELECT EmployeeID,FirstName,LastName,Title,HireDate,Extension,ReportsTo FROM [Employees]";
        IConnection Connection = workbook.Connections.Add("Connection1", "Sample connection with MsAccess", ConnectionString, query, ExcelCommandType.Sql);
        sheet.ListObjects.AddEx(ExcelListObjectSourceType.SrcQuery, Connection, sheet.Range["A1"]);
    }

    //Refresh Excel table to get updated values from database
    sheet.ListObjects[0].Refresh();

    sheet.UsedRange.AutofitColumns();

    //Save the file in the given path
    Stream excelStream = File.Create(Path.GetFullPath(@"Output.xlsx"));
    workbook.SaveAs(excelStream);
    excelStream.Dispose();
}

Output of Database to Excel table

4. Export data from DataGrid, GridView, DatGridView to Excel

Exporting data from Microsoft grid controls to Excel worksheets helps to visualize data in different ways. You may work for hours to iterate data and its styles from grid cells to export them into Excel worksheets. It should be good news for those who export data from Microsoft grid controls to Excel worksheets, because exporting with Syncfusion Excel library is much faster.

Syncfusion Excel (XlsIO) library supports to exporting data from Microsoft Grid controls, such as DataGrid, GridView, and DataGridView to Excel worksheets in a single API call. Also, you can export data with header and styles.

The following code example shows how to export data from DataGridView to an Excel worksheet.

#region Loading the data to DataGridView
DataSet customersDataSet = new DataSet();

//Read the XML file with data
string inputXmlPath = Path.GetFullPath(@"../../Data/Employees.xml");
customersDataSet.ReadXml(inputXmlPath);
DataTable dataTable = new DataTable();

//Copy the structure and data of the table
dataTable = customersDataSet.Tables[1].Copy();

//Removing unwanted columns
dataTable.Columns.RemoveAt(0);
dataTable.Columns.RemoveAt(10);
this.dataGridView1.DataSource = dataTable;

dataGridView1.AlternatingRowsDefaultCellStyle.BackColor = Color.White;
dataGridView1.RowsDefaultCellStyle.BackColor = Color.LightBlue;
dataGridView1.ColumnHeadersDefaultCellStyle.Font = new System.Drawing.Font("Tahoma", 9F, ((System.Drawing.FontStyle)(System.Drawing.FontStyle.Bold)));
dataGridView1.ForeColor = Color.Black;
dataGridView1.BorderStyle = BorderStyle.None;
#endregion

using (ExcelEngine excelEngine = new ExcelEngine())
{
    IApplication application = excelEngine.Excel;

    //Create a workbook with single worksheet
    IWorkbook workbook = application.Workbooks.Create(1);

    IWorksheet worksheet = workbook.Worksheets[0];

    //Import from DataGridView to worksheet
    worksheet.ImportDataGridView(dataGridView1, 1, 1, isImportHeader: true, isImportStyle: true);

    worksheet.UsedRange.AutofitColumns();
    workbook.SaveAs("Output.xlsx");
}

Microsoft DataGridView to Excel

5. Export from array to Excel

Sometimes, there may be a need where an array of data may need to be inserted or modified into existing data in Excel worksheet. In this case, the number of rows and columns are known in advance. Arrays are useful when you have a fixed size.

The Syncfusion Excel (XlsIO) library provides support to export an array of data into an Excel worksheet, both horizontally and vertically. In addition, two-dimensional arrays can also be exported.

Let us consider a scenario, “Expenses per Person.” The expenses of a person for the whole year is tabulated in the Excel worksheet. In this scenario, you need to add expenses for a new person, Paul Pogba, in a new row and modify the expenses of all tracked people for the month Dec.

Excel data before exporting from array

Exporting an array of data to Excel worksheet can be achieved through the ImportArray method. The following code sample shows how to export an array of data to an Excel worksheet, both horizontally and vertically.

using (ExcelEngine excelEngine = new ExcelEngine())
{
    IApplication application = excelEngine.Excel;
    application.DefaultVersion = ExcelVersion.Excel2016;

    //Reads input Excel stream as a workbook
    IWorkbook workbook = application.Workbooks.Open(File.OpenRead(Path.GetFullPath(@"../../../Expenses.xlsx")));
    IWorksheet sheet = workbook.Worksheets[0];

    //Preparing first array with different data types
    object[] expenseArray = new object[14]
    {"Paul Pogba", 469.00d, 263.00d, 131.00d, 139.00d, 474.00d, 253.00d, 467.00d, 142.00d, 417.00d, 324.00d, 328.00d, 497.00d, "=SUM(B11:M11)"};

    //Inserting a new row by formatting as a previous row.
    sheet.InsertRow(11, 1, ExcelInsertOptions.FormatAsBefore);

    //Import Peter's expenses and fill it horizontally
    sheet.ImportArray(expenseArray, 11, 1, false);

    //Preparing second array with double data type
    double[] expensesOnDec = new double[6]
    {179.00d, 298.00d, 484.00d, 145.00d, 20.00d, 497.00d};

    //Modify the December month's expenses and import it vertically
    sheet.ImportArray(expensesOnDec, 6, 13, true);

    //Save the file in the given path
    Stream excelStream = File.Create(Path.GetFullPath(@"Output.xlsx"));
    workbook.SaveAs(excelStream);
    excelStream.Dispose();
}

Output of array of data to Excel

6. Export from CSV to Excel

Comma-separated value (CSV) files are helpful in generating tabular data or lightweight reports with few columns and a high number of rows. Excel opens such files to make the data easier to read.

The Syncfusion Excel (XlsIO) library supports opening and saving CSV files in seconds. The below code example shows how to open a CSV file, also save it as XLSX file. Above all, the data is shown in a table with number formats applied.

using (ExcelEngine excelEngine = new ExcelEngine())
{
    IApplication application = excelEngine.Excel;
    application.DefaultVersion = ExcelVersion.Excel2016;

    //Preserve data types as per the value
    application.PreserveCSVDataTypes = true;

    //Read the CSV file
    Stream csvStream = File.OpenRead(Path.GetFullPath(@"../../../TemplateSales.csv")); ;

    //Reads CSV stream as a workbook
    IWorkbook workbook = application.Workbooks.Open(csvStream);
    IWorksheet sheet = workbook.Worksheets[0];

    //Formatting the CSV data as a Table 
    IListObject table = sheet.ListObjects.Create("SalesTable", sheet.UsedRange);
    table.BuiltInTableStyle =  TableBuiltInStyles.TableStyleMedium6;
    IRange location = table.Location;
    location.AutofitColumns();

    //Apply the proper latitude & longitude numerformat in the table
    TryAndUpdateGeoLocation(table,"Latitude");
    TryAndUpdateGeoLocation(table,"Longitude");

    //Apply currency numberformat in the table column 'Price'
    IRange columnRange = GetListObjectColumnRange(table,"Price");
    if(columnRange != null)
        columnRange.CellStyle.NumberFormat = "$#,##0.00";

    //Apply Date time numberformat in the table column 'Transaction_date'
    columnRange = GetListObjectColumnRange(table,"Transaction_date");
    if(columnRange != null)
        columnRange.CellStyle.NumberFormat = "m/d/yy h:mm AM/PM;@";

    //Sort the data based on 'Products'
    IDataSort sorter = table.AutoFilters.DataSorter;
    ISortField sortField = sorter. SortFields. Add(0, SortOn. Values, OrderBy. Ascending);
    sorter. Sort();

    //Save the file in the given path
    Stream excelStream;
    excelStream = File.Create(Path.GetFullPath(@"../../../Output.xlsx"));
    workbook.SaveAs(excelStream);
    excelStream.Dispose();
}

Input CSV file

Output of CSV converted to Excel

Wrapping up

As you can see, Syncfusion Excel (XlsIO) library provides various easy ways to export data to Excel in C#. Use them effectively to generate Excel reports with high performance and to process large data. Take a moment to peruse the documentation, where you’ll find other options and features, all with accompanying code samples. Using the library, you can also Export Excel data to PDF, image, data table, CSV, TSV, HTML, collections of objects, ODS file format, and more.

If you are new to our Excel library, it is highly recommended that you follow our Getting Started guide.

Are you already a Syncfusion user? You can download the product setup here. If you’re not yet a Syncfusion user, you can download a free, 30-day trial here.

If you have any questions or require clarification about these features, please let us know in the comments below. You can also contact us through our support forum or Direct-Trac or Feedback Portal. We are happy to assist you!

The post 6 Easy Ways to Export Data to Excel in C# appeared first on Syncfusion Blogs.

Create Progressive Web App with Syncfusion React UI Components

Vijay Anand — Wed, 24 Apr 2019 11:00:49 +0000

The Progressive Web App makes the react web applications feel like mobile-native apps. It features the option to add a web application to the home screen of mobile devices for easy access, and supports full screen for a native application look. PWA supports cache and makes use of cached items to work in slow networks, as well as in offline mode.

In this blog, I am going to create an application which lists the Succinctly series books and allow the users to search for a specific book. I will use create-react-app CLI to create the base application and will configure Syncfusion React UI components to implement this application. To do this, I am going to follow below steps:

Getting started with create-react-app
Configuring Syncfusion React UI components in it
Making it a Progressive Web App
Launching the application

The final project sample is available in this github repository, to track the progress in each step. You can also follow along with committed details provided at the end of each step.

Getting started with create-react-app

To create the React app, I am using the create-react-app CLI. This has some default settings like Manifest.json and service workers to help me make it a Progressive Web App. Install the create-react-app CLI globally using the following command:

npm i create-react-app -g

You can create the React app in any directory using create-react-app command. Move to the directory in which you want to create the application and run the following command. Here I am naming this app as “pwa-succinctly-books”

Example: create-react-app

create-react-app pwa-succinctly-books

This will create the application. To run the same with default configuration, move to the application directory and use the following command:

cd pwa-succinctly-books

npm start

The React application

Note: You can find information on this step on GitHub: Getting started with create-react-app

Configuring Syncfusion React UI components

With this, I have created the base application and made it run. Hence, I am going to configure the application with Syncfusion React UI components.

Like I said before, the core idea of this application is to populate a list of Syncfusion Succinctly series ebooks that is searchable based on book attributes. In this application, I am going to list the Succinctly series ebooks using Syncfusion Cards, and for searching, I will use Syncfusion TextBox. For this, I am going to install the ej2-react-inputs and ej2-layouts. For the search operation, I am going to use DataManager. To install these Syncfusion components, run the following command:

npm install  @syncfusion/ej2-react-inputs @syncfusion/ej2-data @syncfusion/ej2-layouts

Now, every required configuration is done. To start the application, remove some elements from the base application. In App.js, empty the App div element.

Now, I am going to follow below steps:

Rendering React components
Implement search operation
Styling the application

Rendering React components

We need to render the following elements:

Header
Search text box
List of cards

First, we need input for the search text box and a bootstrap Grid layout for aligning the cards in order. Create a local data source for listing the details of the Succinctly series books and name the file as datasource.js. Export this file to make it available in App.js. Add Syncfusion React TextBox component to render the search textbox. We can now import the TextBox from the ej2-react-inputs package. The App.js will contain the following code after including the required elements:

import {TextBoxComponent} from '@syncfusion/ej2-react-inputs';
class App extends Component {
render() {
return (
<div className="App">
<div className='control-pane'>
<div>
{/* Header HTML element */}
<header className="header">
<h1 className="header__title">Succinctly Series</h1>
</header>
</div>
<div className="main">
<div className="control-section card-control-section tile_layout">
<div className="row filter">
<div className="col-xs-4 col-sm-4 col-lg-4 col-md-4 "></div>
<div className="col-xs-4 col-sm-4 col-lg-4 col-md-4 ">
{/* Searching HTML element */}
<TextBoxComponent id="search_Card" placeholder="Enter text to search" floatLabelType="Auto" />
</div>
<div className="col-xs-4 col-sm-4 col-lg-4 col-md-4  tile_search">
</div></div>
{/* Cards Template holder */}
<div className='row e-card-layout' style={{ textAlign: 'center' }}>
<div className="row">
<div className="row error" style={{ minHeight: '150px' }}>
<div className="e-error-content" style={{ margin: 'auto', fontWeight: 500 }}>No results found. Please try a different search.</div></div>
<div className="col-xs-6 col-sm-6 col-lg-6 col-md-6"><div id='card_sample_1' className='card_sample'></div></div>
<div className="col-xs-6 col-sm-6 col-lg-6 col-md-6"><div id='card_sample_2' className='card_sample'></div></div>
<div className="col-xs-6 col-sm-6 col-lg-6 col-md-6"><div id='card_sample_3' className='card_sample'></div></div>
<div className="col-xs-6 col-sm-6 col-lg-6 col-md-6"><div id='card_sample_4' className='card_sample'></div></div>
<div className="col-xs-6 col-sm-6 col-lg-6 col-md-6"><div id='card_sample_5' className='card_sample'></div></div>
<div className="col-xs-6 col-sm-6 col-lg-6 col-md-6"><div id='card_sample_6' className='card_sample'></div></div>
<div className="col-xs-6 col-sm-6 col-lg-6 col-md-6"><div id='card_sample_7' className='card_sample'></div></div>
<div className="col-xs-6 col-sm-6 col-lg-6 col-md-6"><div id='card_sample_8' className='card_sample'></div></div>
<div className="col-xs-6 col-sm-6 col-lg-6 col-md-6"><div id='card_sample_9' className='card_sample'></div></div>
<div className="col-xs-6 col-sm-6 col-lg-6 col-md-6"><div id='card_sample_10' className='card_sample'></div></div>
<div className="col-xs-6 col-sm-6 col-lg-6 col-md-6"><div id='card_sample_11' className='card_sample'></div></div>
<div className="col-xs-6 col-sm-6 col-lg-6 col-md-6"><div id='card_sample_12' className='card_sample'></div></div>
</div></div></div></div></div>
</div>
);
}
}

Now I am going to render the cards by handling the componentDidMount hook method. Define the Card component, and run the data source against it. This renders each card populated in a bootstrapped grid layout.

import * as ReactDOM from 'react-dom';
import {cardBook} from './datasource';
let cardEle;
/* Funtion for Rendering Cards */
function cardRendering(cardBook) {
let errorContent = document.querySelector('.tile_layout .row.error');
if (cardBook.length > 0) {
errorContent.style.display = 'none';
cardBook.forEach((data, index) => {
cardEle = document.getElementById('card_sample_' + (++index));
if (cardEle) {
ReactDOM.render(<CardRender data={data}/>, cardEle);
}
});
}
else {
errorContent.style.display = 'flex';
}
}

class App extends Component {
componentDidMount() {
cardRendering(cardBook);
}
//render(){..}
}
class CardRender extends React.Component {
constructor() {
super(...arguments);
this.headerTitleSubCheck = this.props.data.header_title.length > 0 || this.props.data.header_subtitle.length > 0;
this.headerCheck = this.props.data.header_title.length > 0 || this.props.data.header_subtitle.length > 0 || this.props.data.header_img.length > 0;
this.bgimageUrl =  this.props.data.cardImage.url ;
}
render() {
return (<div className={this.props.data.isHorizontal ? 'e-card e-card-horizontal' : 'e-card'}>
{this.props.data.cardImage && <div className={"e-card-image "+this.bgimageUrl} > {this.props.data.cardImage.title && <div className='e-card-title'>{this.props.data.cardImage.title}</div>} </div>}
{this.props.data.cardTitle && <div className='e-card-title'>{this.props.data.cardTitle}</div>}
{this.headerCheck && <div className='e-card-header'>
{this.props.data.header_img && <div className={this.props.data.header_img.isRounded ? 'e-card-header-image e-card-corner' : 'e-card-header-image e-card-corner'}></div>}
{this.headerTitleSubCheck && <div className='e-card-header-caption'>
{this.props.data.header_title && <div className='e-card-header-title'>{this.props.data.header_title}</div>}
{this.props.data.header_subtitle && <div className='e-card-sub-title'>{this.props.data.header_subtitle}</div>}
</div>}
</div>}
{this.props.data.cardContent && <div className='e-card-content'>{this.props.data.cardContent}</div>}
{this.props.data.card_action_btn &&
<div className={this.props.data.card_action_btn.isVertical ? 'e-card-actions e-card-vertical' : 'e-card-actions'}>
{this.props.data.card_action_btn.action_btns.map(function (actBtn) {
return actBtn.tag === "a" ? <a key={actBtn.text} href={actBtn.href} target={actBtn.target} className='e-btn e-outline e-primary'> {actBtn.text}</a> : <button key={actBtn.text} className='e-card-btn'>{actBtn.text}</button>;
})}
</div>}
</div>);
}
}

Implement search operation

I have rendered the search text box in the above operation itself, and now I am going to add the functionality to the user interfaces. Handle the input event of the search textbox to create a predicate and parse it with the data source. Destroy all the cards available in the document after the search operation. Then, create new cards for the items available after searching the data source.

import { Query, DataManager, Predicate } from '@syncfusion/ej2-data';
let data = [];
let emptyData = true;
/* Function for Destroying Cards */
function destroyAllCard() {
let cards = document.querySelectorAll('.card-control-section .e-card');
[].slice.call(cards).forEach((el) => {
ReactDOM.unmountComponentAtNode(el.parentElement);
});
}
/* Function for Filtering Cards */
function searchFilter(key) {
let predicate = new Predicate('cardContent', 'Contains', key, true);
predicate = predicate.or('cardImage.title', 'Contains', key, true).or('header_title', 'Contains', key, true).or('header_subtitle', 'Contains', key, true);
data = new DataManager(cardBook).executeLocal(new Query().where(predicate));
destroyAllCard();
cardRendering(data);
}
class App extends Component {
componentDidMount() {
cardRendering(cardBook);
}
filterHandler(e) {
if (e.event.code === 'Tab' || e.event.code === 'Escape' || e.event.code === 'ShiftLeft' || (e.event.code === 'Backspace' && emptyData)) {
return;
}
let inputVal = e.value;
emptyData =inputVal.length === 0 ;
searchFilter(inputVal);
}
render(){
..
/* Filter handler in search text box */
<TextBoxComponent id="search_Card" input={(event) => this.filterHandler(event)} placeholder="Enter text to search" floatLabelType="Auto" />
..}
}

Note: You can find the information about this step on GitHub: Configuring Syncfusion React UI components

Styling the application

The React application requires styling to make it responsive on mobile devices. To do so, I am going to import bootstrap for the grid layout of cards and load material CSS for Syncfusion React UI components in App.js. Also define the styles for card images which are loaded from the SRC folder and handle it using a background image URL.

npm install bootstrap

App.js

import “https://cdn.syncfusion.com/ej2/material.css”;

import “bootstrap/dist/css/bootstrap.min.css”;

Note: You can find the information about this step on GitHub: Application styling

Making it a Progressive Web App

The basic steps to make an application a progressive web app are:

Configuring Web App Mainfest
Handling Service Worker

Configuring Web App Manifest

Since I have created this application using create-react-app CLI, the default application manifest will be available in the public folder. This web app manifest is a JSON data containing some basic details about the application. We have more key value pairs in this manifest and will be modifying a few.

short_name / name – You can provide either short_name / name. If you provide both, short_name will be displayed, where the small space is available and name will be used for the app install prompt.

background_color – You can provide this property, which is used on the splash screen when the application is launched on slow networks. Downloading resources will take some time during the application’s initial load.

theme_color – Use this property to set the color of the toolbar in the browser.

icons – These are used for app icons when added from the browser to the home and splash screens.

display – You can set this to ‘standalone’ to make the app look like a native mobile app. The other display options are in the table below.

start_url – This lets the browser display the application start page when it is launched and prevents displaying the URL from which the user pulled the app.

Manifest.json

{

"short_name": "Succinctly Series",

"name": "Succinctly Series",

"icons": [{

"src": "succinctly_series.png",

"sizes": "246x246",

"type": "image/png"

}],

"start_url": "./index.html",

"display": "standalone",

"theme_color": "#000000",

"background_color": "#000000"

}

Handling Service Worker – Offline Caching

Service workers handle the offline experience, and background syncing of data in a web application. This in-turn will provide a better experience, when offline or on a slow network. We have a default service worker JavaScript file named serviceworker.js in the SRC folder, since the application was created using create-react-app.

This script will handle the default caching required for files, so that, we can launch the application even when we are offline. When the application is launched for the first time, the service worker will be registered and cache required files; this will serve till the cache gets cleared. You can learn what the service worker does with the comments provided in the serviceworker.js. Register the service worker in index.js using the code below.

serviceWorker.register();

Note: You can find the information about this step on GitHub: Making a Progressive Web App

Launching application

With this, we have successfully implemented our application and now we need to launch it. To launch the application in development version, use the command below.

npm start

Succinctly series React PWA

To launch the application for production, run the command below.

npm run build

This will generate the build folder in the application for production purpose. Then, we need to launch this application so we can make use of the serve NPM package which is used for serving static applications and single page applications. For which, use the following commands to serve the application:

npm i serve -g

serve -s build

This will launch the application at http://localhost:5000, and you can check the changes with the application manifest and service worker here.

In the Chrome developer tools we have the application tab, in which you can see the manifest and service worker in the left-side of the tree. Once you click on the manifest, in the right-side pane you can check the key value pair configured for the application.

Succinctly series PWA manifest

When you click on the service worker, you will see that, we have options to check the offline status of the application with a checkbox. Before doing that, ensure that the service worker is registered. Refresh the full page and check whether the service worker launches the application properly.

Succinctly series PWA Service Workers

Summary

In this blog, we have gone through the basic steps for creating a Progressive Web App. We walked through using React applications, created an app with create-react-app CLI and Syncfusion React UI components. We can do a lot more with progressive web apps, I am leaving this for you to experiment with.

You can find the application in this Github repository. If you have any questions or need more help, please let us know in the comments section below. You can also contact us through our support forum or Direct-Trac. We are always happy to assist you!

The post Create Progressive Web App with Syncfusion React UI Components appeared first on Syncfusion Blogs.

How to create a Simple, Responsive, and Dynamic Dashboard in Web application

Vijay Anand — Fri, 12 Apr 2019 11:05:06 +0000

Dashboards are very useful to track strategic data, key performance indicators, and important metrics from several data sources and visually present them. But designing a dashboard is a challenging job when you need features that let users place components, drag-and-drop, resize, and reorder. You’ll also need to present the dashboard with a responsive and adaptive layout, so it can be viewed at any resolution in any device without data loss.

Considering all these challenges, the Syncfusion Dashboard Layout component was implemented. It will create a dynamic dashboard quickly with the expected layout and allow you to think about only the data integration and projection.

You can place the component in a grid-structured layout at a desired place and design the layout by live-editing the panels with the help of reordering, drag and drop, resizing, add new, and removing functionalities.

Let’s try making a dashboard as shown in the following screenshot by using the Dashboard Layout component.

A simple dashboard with Grid, Chart and Map components.

You can get the demo sample from the GitHub repository: How to create a dynamic and responsive dashboard

Initialize the Dashboard Layout component

The list of dependencies required to render the Dashboard Layout component are as follows.

|– @syncfusion/ej2-layouts

|– @syncfusion/ej2-base

To use the Dashboard Layout component, we need to import it from the @syncfusion/ej2-layoutspackages from the npm and append it to an element as shown in the following code example.

[index.ts]

//importing DashboardLayout from ej2-layouts 
import { DashboardLayout } from '@syncfusion/ej2-layouts';

let dashboard: DashboardLayout = new DashboardLayout({}); 

dashboard.appendTo('#editLayout');

[index.html]

<!-- dashboard layout element --> 

<div id="editLayout"></div>

Creating panels

Panels are the building blocks of the Dashboard Layout component. It holds the data (components) to be visualized or presented. It has options to resize, reorder, or position a component in the desired manner. Configure the panels to place inside the dashboard as shown in the following code example.

[index.ts]

let dashboard: DashboardLayout = new DashboardLayout({ 
//splits the entire width of the component into 6 equal columns. 
columns: 6, 
//defines the width/height ratio of each panel, here panel height will be 10/8 of its width value. 
cellAspectRatio: 100 / 80, 
//adding panel properties. 
panels: [
{'sizeX': 2, 'sizeY': 1, 'row': 0, 'col': 0 }, 
{'sizeX':2, 'sizeY': 1, 'row': 0, 'col': 2 }, 
{'sizeX': 2, 'sizeY': 1, 'row': 0, 'col': 4 }, 
{'sizeX': 3, 'sizeY': 2, 'row': 1, 'col': 0 }, 
{'sizeX': 3, 'sizeY': 2, 'row': 1, 'col': 3 }, 
{'sizeX': 3, 'sizeY': 2, 'row': 4, 'col': 0 }, 
{'sizeX': 3, 'sizeY': 2, 'row': 4, 'col': 3 },

]}); 

dashboard.appendTo('#editLayout');

In the above code block, columns and cellAspectRatio properties defines the panel dimensions (height and width of each panel) to represent the number columns and panels placed in each row. In addition, you can turn on the panel resize option to enhance further live designing.

Dashboard layout with empty panels

Adding components with header information to panels

In the Dashboard Layout components, Panels has options to define the header and content with complete customization. Header holds the supplemental data and also any action items like buttons or menu. The content of the panels can adopt any data or even data visualizing component such as chart or gauge or map. Refer to the following code example to add header and content to panels.

[index.ts]

import { enableRipple } from '@syncfusion/ej2-base'; 

import { DashboardLayout } from '@syncfusion/ej2-layouts'; 

import { CircularGauge } from '@syncfusion/ej2-circulargauge'; 

import { gauge1, gauge2, gauge3 } from './gauge-component'; 

import { Grid } from '@syncfusion/ej2-grids'; 

// importing grid component. 
import { gridComponent } from './grid-component'; 

import { Maps} from '@syncfusion/ej2-maps'; 
// importing map component. 
import { mapsComponent } from './map-component'; 

import { Chart, Legend, Tooltip, ColumnSeries, Category, DataLabel } from '@syncfusion/ej2-charts'; 
// importing column chart. 
import { columnChartComponent } from './chart-component'; 

Chart.Inject(ColumnSeries, DataLabel, Category, Legend, Tooltip); 

enableRipple(true); 

// initializing DashboardLayout component. 

let dashboard: DashboardLayout = new DashboardLayout({

 columns: 5, 
cellSpacing: [25, 25], 
cellAspectRatio: 100 / 80, 

panels: [
{ 
'sizeX': 2, 'sizeY': 1, 'row': 0, 'col': 0, cssClass: 'card-template', content: '#card1' 
}, 
{ 
'sizeX': 2, 'sizeY': 1, 'row': 0, 'col': 2, cssClass: 'card-template', content: '#card2' 
}, 
{ 
'sizeX': 2, 'sizeY': 1, 'row': 0, 'col': 4, cssClass: 'card-template', content: '#card3' 
}, 
{ 
'sizeX': 3, 'sizeY': 2, 'row': 1, 'col': 0, header: '<div> Customer details</div>', content: '<div id="Grid"></div>' 
}, 
{ 
'sizeX': 3, 'sizeY': 2, 'row': 1, 'col': 3, header: '<div>Regional Map</div>', content: '<div id="map"></div>' 
}, 
{ 
'sizeX': 3, 'sizeY': 2, 'row': 4, 'col': 0, header: '<div>Sales in 2018 </div>', content: '<div id="colChart"></div>' 
}, 
{ 
'sizeX': 3, 'sizeY': 2, 'row': 4, 'col': 3, header: '<div> Sales Comparison </div>', content: '#card4' 
}
]}); 

dashboard.appendTo('#editLayout'); 

// initializing gauge components. 

let germany: CircularGauge = new CircularGauge(gauge1(), '#container1'); 

let usa: CircularGauge = new CircularGauge(gauge2(), '#container2'); 

let uk: CircularGauge = new CircularGauge(gauge3(), '#container3'); 

// initializing chart component. 

let chart: Chart = new Chart (columnChartComponent(),'#colChart'); 

// initializing grid component. 

let grid: Grid = new Grid(gridComponent(),'#Grid'); 

// intitalizing map component. 
let map: Maps = new Maps(mapsComponent(), "#map");

Here the first row of panel contains the HTML template cards. Then the grid component is initialized and rendered by obtaining the model values from the grid-component.ts file.

Grid inside the panel

Similarly, the other components, chart, maps, and gauge, are also imported from the chart-component.ts, map-component.ts, and gauge-component.ts files, respectively.

Chart, Map and Circular gauge inside the panels

Finally, you will get a simple dashboard with cards, grid, chart, gauges and map as shown in below screenshot with editable layout.

A simple dashboard with Grid, Chart and Map components

Redesign the layout to a different structure by live editing the dashboard as like below.

Dashboard with live editing

Conclusion

We hope this blog and the sample shared help you design a dynamic dashboard with grids, charts, and gauges using the Dashboard Layout component. The Dashboard Layout is also available in Angular, React, Vue, ASP.NET MVC and ASP.NET Core framework, so you can try out the sample based on your preferred one.

To learn more about the Dashboard Layout component, refer to the Syncfusion online samples and documentation. We look forward to you trying this component and providing your feedback through this feedback portal. You can also contact us through our support forum or Direct-Trac. We are happy to assist you!

The post How to create a Simple, Responsive, and Dynamic Dashboard appeared first on Syncfusion Blogs.

Introducing Syncfusion’s ASP.NET Core Blazor / Razor Components

Vijay Anand — Wed, 10 Apr 2019 12:57:23 +0000

Like everyone else, we are excited about the upcoming Microsoft ASP.Net Core 3.0 framework. We are particularly eager to try Blazor /Razor Components, which have the potential to turn web development more towards strongly-typed C# and WebAssembly. Syncfusion is thrilled to announce that a preview release of UI controls for ASP.NET Core Blazor /Razor Components is now available. In this post, we will provide a brief introduction to Blazor /Razor Components.

Introduction to Blazor

Blazor is a next-generation single-page application (SPA) for building client-side web apps with .NET. It supports writing C# code instead of using JavaScript for a client-side web application. The WebAssembly is used to build the .NET C# code in a web browser without any additional plugins.

Blazor runs .NET code in the browser with WebAssembly.

A Blazor app processes the following functionalities when it is built and run in the web browser:

The Blazor application compiles the C# codes and Razor files into a .NET assembly.
The client-side web browser downloads the assembly files.
The WebAssembly will load the downloaded assembly files in the client-side.
Blazor handles the DOM manipulation and triggers the browser API.

Blazor is the experimental client-side hosting model for Razor Components.

Introduction to Razor Components (Server-side Blazor)

Razor Components is a new web framework to build interactive web UI with .NET. It is designed to run client-side in the web browser on a Blazor application.

Now, .NET Core 3.0 provides support for hosting Razor Components from server-side by using an ASP.NET Core app. The SignalR connection handles UI updates from server to client and client to server.

Razor Components runs .NET code on the server and interacts with the DOM in the client over a SignalR connection.

Syncfusion ASP.NET Core Blazor / Razor Components

The Syncfusion UI controls for ASP.NET Core Razor Components is a complete suite of over 60+ UI controls for the Blazor framework that has been built on top of our popular Essential JS 2 JavaScript framework. We have put in a great deal of effort to ensure that the wrapper components behave exactly like native Razor Components from an application developer’s perspective. Application developers will be able to write all their code in C# and will not have to write a single line of JavaScript.

We could have taken the approach of building native Razor Components from scratch using C#, but the end result would have been little different from what we have achieved by building on Essential JS 2. Our current approach has enabled us to ship over 60 components in the very first version, and the framework will only grow richer over time as Essential JS 2 itself expands. We believe that the goal of the Blazor framework and WebAssembly itself is not to kill JavaScript, but rather to provide application developers the option to write all their application code in their favorite language, and our components help accomplish that.

Rendering a Syncfusion UI control in ASP.NET Core Razor Components

Now, we’ve learned about Blazor /Razor Components with their basic behavior. Let’s try out the Syncfusion DataGrid control with the server-side hosting model of ASP.NET Core Razor Components using the .NET Core CLI for practice:

Install the required software, .NET Core SDK 3.0 Preview, to start the implementation.
Create a new Razor Components application by running the following command line from command prompt.

dotnet new razorcomponents -o EJ2Application

Creating a ASP.NET Core Razor Components application

This creates a new ASP.NET Core Razor Components application in the EJ2Application folder. Navigate to the application from the command prompt and open the application in Visual Studio Code or any code editor.

cd EJ2Application

Navigate to the application folder

Now, add the Syncfusion.EJ2.AspNet.Core.RazorComponents NuGet package to the new application and use the following command line to restore the packages.

dotnet add package Syncfusion.EJ2.AspNet.Core.RazorComponents -v 17.1.0.34-*

Installing Syncfusion ASP.NET Core Razor Components NuGet package

Open the ~/Components/_ViewImports.cshtml file and import the *Syncfusion.EJ2.RazorComponents * at the end.

@addTagHelper *, Syncfusion.EJ2.RazorComponents

Add the required client-side resources as CDN references in the <head> element of the ~/Pages/index.cshtml file.

<head> 
..... 
..... 
<link href="https://cdn.syncfusion.com/ej2/material.css" rel="stylesheet" />
<script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js"></script>
<script src="https://cdn.syncfusion.com/ej2/dist/ejs.introp.min.js"></script>
</head>

Create a folder named Grid ** inside **~/Components/Pages/ and add the *Default.razor * file for rendering the DataGrid component.
The Razor Components application itself has the WeatherForecastService for data binding. It can be validated in the link <localhost>/fetchdata once the application is run in the web browser. We are using the same service to bind the data to the Syncfusion DataGrid component.

@page "/Grid/Default"

@using EJ2Application.Services
@inject WeatherForecastService ForecastService 
@using Syncfusion.EJ2.RazorComponents.Grids 

<h2>Syncfusion DataGrid in Razor Components</h2> 

<EjsGrid id="Grid" DataSource="@forecasts" AllowPaging="true" AllowSorting="true"> 
<GridColumns> 
<GridColumn Field=@nameof(WeatherForecast.Date) HeaderText="Date" Format="yMd" Type="date" Width="130"></GridColumn> 
<GridColumn Field=@nameof(WeatherForecast.TemperatureC) HeaderText="Temp. (C)" Width="120"></GridColumn> 
<GridColumn Field=@nameof(WeatherForecast.TemperatureF) HeaderText="Temp. (F)" Width="150"></GridColumn> 
<GridColumn Field=@nameof(WeatherForecast.Summary) HeaderText="Summary" Width="130"></GridColumn> 
</GridColumns> 
</EjsGrid> 

@functions { 
WeatherForecast[] forecasts; 

protected override async Task OnInitAsync() { 
forecasts = await ForecastService.GetForecastAsync(DateTime.Now); 
} 
}

Now, use the following command line to run the application and it will run in a specific <localhost> port. For example: http://localhost:5000.

dotnet run

Running the application

Finally, navigate to the link <localhost>/Grid/Default and the final output of the Synfusion DataGrid in Razor Components will look like the following.

The Final output of Syncfusion DataGrid in Razor Components

This application is available in the GitHub repository for reference.

Summary

In this blog, we have learned about Blazor /Razor Components, and rendering a Syncfusion UI control in ASP.NET Core Razor Components. Blazor is still an experimental project. So it is not yet ready for production. We are eagerly waiting to integrate the complete support of Blazor / Razor Components in the Syncfusion UI controls. Currently, we have provided most of the basic supports in our components. We will implement more features in our upcoming Volume 2, 2019, release. Feel free to download and test our preview version of Razor Components (demos, documentation, GitHub) and share your feedback in the support incident page or feedback page.

The post Introducing Syncfusion’s ASP.NET Core Blazor / Razor Components appeared first on Syncfusion Blogs.

Create ZUGFeRD-Compliant PDF Invoice in C#

Vijay Anand — Wed, 10 Apr 2019 11:00:17 +0000

Syncfusion PDF Library now supports creating ZUGFeRD-compliant PDF invoices in C#. ZUGFeRD (Zentraler User Guide des Forums Elektronische Rechnung Deutschland) is a German invoicing standard for the exchange of structured data in public and private sectors. A ZUGFeRD PDF is PDF/A-3 compliant and has an XML file attachment specifically designed for long-term archiving. Invoices made with ZUGFeRD PDF contain human-readable invoices with text, graphics, and images, as well as machine-readable structured invoice data in XML format.

This invoicing standard has multi-profile conformance:

Basic: represents structured data for simple invoices, and you can include additional information as free text.
Comfort: represents structured data for fully automated invoice processing.
Extended: represents additional structured data for exchanging invoices across different industry segments.

In this article, let’s create a basic ZUGFeRD invoice using C# like in the following screenshot.

ZUGFeRD PDF invoice

Creating a ZUGFeRD invoice

Create a PDF document with PDF/A-3b compliance and set the ZUGFeRD conformance level to basic.

//Create PDF with PDF/A-3b conformance. 

PdfDocument document = new PdfDocument(PdfConformanceLevel.Pdf_A3B); 

//Set ZUGFeRD profile. 

document.ZugferdConformanceLevel = ZugferdConformanceLevel.Basic;

Now create the fonts and brushes you want to use in the document. Declare values for margin, line space, and height to create a rich-looking ZUGFeRD PDF invoice.

//Create border color. 
PdfColor borderColor = new PdfColor(Color.FromArgb(255, 142, 170, 219)); 
PdfBrush lightBlueBrush = new PdfSolidBrush(new PdfColor(Color.FromArgb(255, 91, 126, 215))); 
PdfBrush darkBlueBrush = new PdfSolidBrush(new PdfColor(Color.FromArgb(255, 65, 104, 209))); 
PdfBrush whiteBrush = new PdfSolidBrush(new PdfColor(Color.FromArgb(255, 255, 255, 255))); 
PdfPen borderPen = new PdfPen(borderColor, 1f); 
//Create TrueType font. PdfTrueTypeFont headerFont = new PdfTrueTypeFont(new Font("Arial", 30, System.Drawing.FontStyle.Regular), true); 
PdfTrueTypeFont arialRegularFont = new PdfTrueTypeFont(new Font("Arial", 9, System.Drawing.FontStyle.Regular), true); 
PdfTrueTypeFont arialBoldFont = new PdfTrueTypeFont(new Font("Arial", 11, System.Drawing.FontStyle.Bold), true); 
const float margin = 30; 
const float lineSpace = 7; 
const float headerHeight = 90;

Here, most of the parameters (font size, margin, line space, and height) are adjusted based on a A4 page size.

It’s obvious that we can tune these parameters in proportion to the size of the page, but this will slightly complicate the example.

Adding a header and buyer information

Creating a PDF from scratch using Syncfusion PDF Library is easy and provides several ways to place elements in the document. In this example, we’ll place the invoice title and buyer’s information on the left, and the amount, invoice number, and date to the right.

The following code snippet is used to create the invoice header with basic information.

//Add page to the PDF. 
PdfPage page = document.Pages.Add(); 

PdfGraphics graphics = page.Graphics; 

//Get the page width and height. 
float pageWidth = page.GetClientSize().Width; 
float pageHeight = page.GetClientSize().Height; 

//Draw page border 

graphics.DrawRectangle(borderPen, new RectangleF(0, 0, pageWidth, pageHeight)); 

//Fill the header with light Brush. 

graphics.DrawRectangle(lightBlueBrush, new RectangleF(0, 0, pageWidth, headerHeight)); 

RectangleF headerAmountBounds = new RectangleF(400, 0, pageWidth - 400, headerHeight); 
graphics.DrawString("INVOICE", headerFont, whiteBrush, new PointF(margin, headerAmountBounds.Height / 3)); 

graphics.DrawRectangle(darkBlueBrush, headerAmountBounds);

graphics.DrawString("Amount", arialRegularFont, whiteBrush, headerAmountBounds, new PdfStringFormat(PdfTextAlignment.Center, PdfVerticalAlignment.Middle)); 

PdfTextElement textElement = new PdfTextElement("Invoice Number: 2058557939", arialRegularFont); 

PdfLayoutResult layoutResult = textElement.Draw(page, new PointF(headerAmountBounds.X - margin, 120)); 

textElement.Text = "Date : " + DateTime.Now.ToString("dddd dd, MMMM yyyy"); 
textElement.Draw(page, new PointF(layoutResult.Bounds.X, layoutResult.Bounds.Bottom + lineSpace)); 

textElement.Text = "Bill To:"; layoutResult = textElement.Draw(page, new PointF(margin, 120)); 

textElement.Text = "Abraham Swearegin,"; 

layoutResult = textElement.Draw(page, new PointF(margin, layoutResult.Bounds.Bottom + lineSpace)); 

textElement.Text = "United States, California, San Mateo,"; 

layoutResult = textElement.Draw(page, new PointF(margin, layoutResult.Bounds.Bottom + lineSpace)); 

textElement.Text = "9920 BridgePointe Parkway,"; 

layoutResult = textElement.Draw(page, new PointF(margin, layoutResult.Bounds.Bottom + lineSpace)); 

textElement.Text = "9365550136"; 

layoutResult = textElement.Draw(page, new PointF(margin, layoutResult.Bounds.Bottom + lineSpace));

PDF invoice with header and buyer information

Adding invoice data

Then, we add the invoice data from the database in a tabular format with five columns using Syncfusion PDF tables. We can use just a single line of code to apply table appearances, just like in Microsoft Word tables.

PdfGrid grid = new PdfGrid(); 

grid.DataSource = GetProductReport(); 

grid.Columns[1].Width = 150; 

grid.Style.Font = arialRegularFont; 

grid.Style.CellPadding.All = 5; 

grid.ApplyBuiltinStyle(PdfGridBuiltinStyle.ListTable4Accent5); 

layoutResult = grid.Draw(page, new PointF(0, layoutResult.Bounds.Bottom + 40));
textElement.Text = "Grand Total: "; 

textElement.Font = arialBoldFont; 

layoutResult = textElement.Draw(page, new PointF(headerAmountBounds.X - 40, layoutResult.Bounds.Bottom + lineSpace)); 

float totalAmount = GetTotalAmount(grid); 

textElement.Text = "$" + totalAmount.ToString(); 

layoutResult = textElement.Draw(page, new PointF(layoutResult.Bounds.Right + 4, layoutResult.Bounds.Y)); 

graphics.DrawString("$" + totalAmount.ToString(), arialBoldFont, whiteBrush, new RectangleF(400, lineSpace, pageWidth - 400, headerHeight + 15), new PdfStringFormat(PdfTextAlignment.Center, PdfVerticalAlignment.Middle));

PDF invoice with table

Adding seller information

Finally, we create the footer of the invoice with dashed lines and add the address of the seller. With this, we have successfully created a rich-looking PDF invoice from scratch using C#.

borderPen.DashStyle = PdfDashStyle.Custom; 

borderPen.DashPattern = new float[] { 3, 3 }; 

PdfLine line = new PdfLine(borderPen, new PointF(0, 0), new PointF(pageWidth, 0));

layoutResult = line.Draw(page, new PointF(0, pageHeight - 100)); 

textElement.Text = "800 Interchange Blvd."; 

textElement.Font = arialRegularFont; 

layoutResult = textElement.Draw(page, new PointF(margin, layoutResult.Bounds.Bottom + (lineSpace * 3))); 

textElement.Text = "Suite 2501, Austin, TX 78721"; 

layoutResult = textElement.Draw(page, new PointF(margin, layoutResult.Bounds.Bottom + lineSpace)); 

textElement.Text = "Any Questions? support@adventure-works.com"; 

layoutResult = textElement.Draw(page, new PointF(margin, layoutResult.Bounds.Bottom + lineSpace));

PDF invoice with seller information in the footer

Create ZUGFeRD XML

ZUGFeRD XML is based on Cross Industry Invoice (CII) developed by the United Nations Centre for Trade Facilitation and Electronic Business (UN/CEFACT). In this section, we will create a basic profile ZUGFeRD XML using ZUGFeRD XML creation helper class files. The following code snippet will create a ZUGFeRD XML using the helper class for the created invoice data.

//Create ZUGFeRD Invoice. 
ZugferdInvoice invoice = new ZugferdInvoice("2058557939", DateTime.Now, CurrencyCodes.USD); 

//Set ZUGFeRD profile to basic 
invoice.Profile = ZugferdProfile.Basic; 

//Add buyer details. 
invoice.Buyer = new UserDetails { ID = "Abraham_12", Name = "Abraham Swearegin", ContactName = "Swearegin", City = "United States, California", Postcode = "9920", Country = CountryCodes.US, Street = "9920 BridgePointe Parkway" }; 

//Add seller details 
invoice.Seller = new UserDetails { ID = "Adventure_123", Name = "AdventureWorks", ContactName = "Adventure support", City = "Austin,TX", Postcode = "78721", Country = CountryCodes.US, Street = "800 Interchange Blvd" }; 

IEnumerable products = GetProductReport(); 

foreach (Product product in products) invoice.AddProduct(product);

invoice.TotalAmount = totalAmount; 

MemoryStream zugferdXML = new MemoryStream(); 

invoice.Save(zugferdXML);

Embed ZUGFeRD XML in PDF

After creating the ZUGFeRD XML, embed it within the PDF/A-3b document. As per ZUGFeRD guidelines, the embedded XML file name should be ZUGFeRD-invoice.xml. The relationship of the attachment and the document must be Alternative. In PDF/A-3b, this is expressed with the AFRelationship key.

//Attach ZUGFeRD XML to PDF 
PdfAttachment attachment = new PdfAttachment("ZUGFeRD-invoice.xml", zugferdXML); 

attachment.Relationship = PdfAttachmentRelationship.Alternative; 

attachment.ModificationDate = DateTime.Now; 

attachment.Description = "ZUGFeRD-invoice"; 

attachment.MimeType = "application/xml"; 

document.Attachments.Add(attachment); 

document.Save("ZUGFeRDInvoice.pdf"); 

document.Close(true);

The sample demonstrating ZUGFeRD invoice creation using Syncfusion PDF Library can be downloaded from ZUGFeRD-invoice.zip.

Conclusion

In conclusion, Syncfusion .NET PDF Library provides an easy way to create ZUGFeRD invoices using C#. With Syncfusion PDF Library, you can also extract the ZUGFeRD XML from a compliant invoice. You should also try other types of ZUGFeRD profiles.

To evaluate our ZUGFeRD PDF invoice using C# feature, try our online demo. Take a moment to peruse the documentation, where you’ll find other options and features, all with accompanying code examples.

If you like this post, you may also like:

[Blog Post] HTML to PDF Conversion Using ASP.NET Core in Linux Docker
[Blog Post] Easy Ways to Redact PDFs Using C#
[Blog Post] 7 ways to compress PDF files in C#, VB.NET
[Ebook] ASP.NET Core Succinctly

The post Create ZUGFeRD-Compliant PDF Invoice in C# appeared first on Syncfusion Blogs.

Introducing UI Templates for Xamarin.Forms

Vijay Anand — Thu, 04 Apr 2019 12:15:07 +0000

Creating a great user interface is very important to make users stay on your app and avoid it being uninstalled from their devices. It’s not as easy to create this kind of design in cross-platform development as in native development. However, Xamarin.Forms is actively improving the designing experience in all aspects by adding new views and layouts and enabling developers to access the native APIs from the shared code base.

We at Syncfusion really understand the need in Xamarin.Forms to produce the best user interface. We provide more than 50 UI views to build any complex design from the shared code base. From our 2019 Volume 1 release, we are moving one more step forward by providing complete context-based designs. This lets developers focus on business logic and not worry about the UI, as we are taking care of that part.

Login screen templates

In this release, we have included designs of login screens that fulfill the requirements of any login process. The login screens include login, sign up, forgot password, and reset password pages. Adding, removing, or editing the existing elements is simple and any Xamarin.Forms developer can easily understand the code.

Additionally, we have provided a ContentView called EmailEntry to add a rounded-corner appearance to a page for entry and validation of email addresses. The EmailEntry view get email addresses from the user for the login, sign up, and forgot password pages.

Login – The login page includes entries to take emails and passwords and a button to redirect from the login page to log in using a Facebook account. This page uses the Border, Button and GradientView components from Syncfusion.
Sign up – The sign-up page asks only a bit of common information from a user. But you may need this additional information, such as a phone number or address. You can simply insert those input views like any other view. Finally, you will get the perfect UI with the new items.
Forgot password – This page asks for an email address from the user to which to send the link to reset the forgotten password to a new password. This page has visual elements for entering the registered email and a button to request a reset-password link.
Reset password – When the user clicks the link received from the forgot password page, you can launch this page to have them set a new password. This page has visual elements for entering a new password, confirming that password, and a button to submit the new password.

Add templates from Visual Studio

The Visual Studio item template extension will be installed with your Syncfusion Essential Studio for Xamarin installation. Add the required Syncfusion page from the item template, as with any framework items. All the files, including the XAML design page, view model, view, and resources, will be added in their own folders. You don’t have to make any changes to the folder structure or namespace inside the files, as it will all be set up in a meaningful and standard pattern.

The following image shows Syncfusion item templates in Visual Studio.

Specify the name for the folder that keeps the required files for the chosen template. For example, if you specify Login, our extension adds the Login as a subfolder inside the Views and ViewModels folder to keep the login files in.

The following image shows the Solution Explorer after adding the Login page from the Visual Studio item template. Additionally, the images and font icons will be added in the platform-specific projects.

Integrating business logic in your templates

Adding the functionalities of your business logic is easy since the template follows the MVVM design pattern and has a clear separation between views and business logic. All the clickable items in the view have been linked to a command in ViewModel. So, you don’t need to touch the design unless you are required to add or remove an element from the UI.

The following image shows the command to add functionalities in the view model of a sign-up page.

Summary

This is the initial set of templates for Xamarin.Forms. More templates will be added in our upcoming releases to quickly build any complex user interface in cross-platform development.

Please share your valuable feedback for these login screens in the comments section below. If you would like to request a new design, please create a new feature request through our feedback portal.

https://www.syncfusion.com/feedback

Make sure to explore all our controls for Xamarin.Forms available on Google Play and the Microsoft Store.

The post Introducing UI Templates for Xamarin.Forms appeared first on Syncfusion Blogs.