Introducing Telerik ERP: Beautifully designed & high-performant enterprise application built with Telerik UI for Xamarin controls.

The Telerik ERP is a showcase Xamarin application designed to demonstrate a real-world mobile app scenario for enterprise resource management. The app is built entirely with the Telerik UI for Xamarin controls and provides users with a beautiful design and high-performant UI that enables its users to easily manage various customers and vendors transactions on the go, by displaying the latest updates and follow ups on orders, products, customers and much more.

The Telerik ERP demo app uses a combination of Microsoft’s Azure services and Entity Framework to host its data on the cloud, and an MVVM framework to present it on Android, iOS and UWP devices.

In this blogpost, we will walk you through the an overview of building the ERP application – from its backend and services, the MVVM layer to the Telerik UI for Xamarin controls that provide the modern and fluid user-experience.

The Backend Structure of Telerik ERP

The backend of the Telerik ERP application is hosted on Microsoft Azure Mobile Apps, which allows you to quickly cloud-enable your mobile app by storing its data online and giving you the necessary tools to access it. The framework provides everything you need right from the start.

The data of the application is split into two parts. First part contains only the business (structured) data and the second part contains the pictures (unstructured data) used in the application. Let’s start with the latter.

Hosting Unstructured Data

We are using Azure Blob storage for images, which provides us with a convenient way to serve them directly to the application, thus removing the hassle of having to save images into a database.

Hosting Business Data

On the business data side of things, we are using an ASP.NET application that connects to a SQL server database. This application is deployed to an Azure App Service to be accessible 24/7 from anywhere in the world. The code of the application can be found in the git repository.

The application uses Entity Framework’s code first approach to create the database. Inside the _DataObjects _folder you can find all entities that the application needs. Please note that they all derive from EntityData. This will help in data serialization\deserialization process.

As in a real-life application, the separate entities are interconnected. Our customer has a collection of addresses and a collection of orders. Having such relations can result in complications when it comes to loading the required information from the database. To avoid this, we have introduced custom TableControllers that can be found inside the _Controllers _folder. These controllers use a custom ActionFilterAttribute to control what additional information gets loaded when you execute a query to the database.

public class CustomerController : TableController<Customer>
    {
        protected override void Initialize(HttpControllerContext controllerContext)
        {
            base.Initialize(controllerContext);
            telerikerpContext context = new telerikerpContext();
            DomainManager = new EntityDomainManager<Customer>(context, Request);
        }

        // GET tables/Customer
        [ExpandProperty("Addresses")]
        public IQueryable<Customer> GetAllCustomers()
        {
            return Query();
        }

        // GET tables/Customer/48D68C86-6EA6-4C25-AA33-223FC9A27959
        [ExpandProperty("Addresses")]
        [ExpandProperty("Orders")]
        public SingleResult<Customer> GetCustomer(string id)
        {
            return Lookup(id);
        }
    }

C#

Let’s take a deeper dive into the CustomerController.

You can see that the GetAllLCustomers() method has the _ExpandProperty(“Addresses”)_attribute. This will populate the addresses collection for each of the customers before returning result. The GetCustomer(string id) method will load the addresses as well as the orders of a single customer. If we didn’t have these controllers introduced, the EntityFramework would return empty collections for the addresses and orders and we would be forced to do additional roundtrips to the database to fetch them. Controllers allow us to do this in a single roundtrip.

To allow the EntityFramework to create, connect and modify the SQL database we have created a custom DbContext that can be found inside the _Models _folder. This context holds the separate DbSets that the application needs, the connection string to the database and configures the DbModelBuilder. Based on this context and the EntityDate objects, the EntityFramework autogenerates code which is used to create the database schema. This code is then wrapped in a migration which can be found in the Migrations folder. Executing this migration will prepare all tables in the database.

  public class telerikerpContext : DbContext
    {
        private const string connectionStringName = "Name=MS_TableConnectionString";

        public telerikerpContext() : base(connectionStringName)
        {
        } 

        public DbSet<Customer> Customers { get; set; }
        public DbSet<CustomerAddress> CustomerAddresses { get; set; }
        public DbSet<Product> Products { get; set; }
        public DbSet<Vendor> Vendors { get; set; }
        public DbSet<Order> Orders { get; set; }
        public DbSet<OrderDetail> OrderDetails { get; set; }

        protected override void OnModelCreating(DbModelBuilder modelBuilder)
        {
            modelBuilder.Conventions.Add(
                new AttributeToColumnAnnotationConvention<TableColumnAttribute, string>(
                    "ServiceTableColumn", (property, attributes) => attributes.Single().ColumnType.ToString()));
        }
    }

C#

The final step is to populate the database with actual data. This is achieved by a custom DbMigrationsConfiguration which allows us to override the Seed() method and control what data gets populated into the separate database tables.

#telerik #designed #high-performant #ui