HITS is a company specialized in developing Human Resources and People Management Business-to-Business Systems. Over the course of 17 years, HITS has evolved from a small regional enterprise into a world-class multinational company offering their flagship solution “HITS DNA” to more than 300 customers in 52+ countries.

HITS Products | HITS Customers | Contact HITS

Microsoft and HITS teamed up to build Azure-backed Xamarin productivity app that would facilitate managing employee development plans

The Xamarin app allows the customers of HITS to manage their employee Development plan; through the app you can create any number of development plans where each Development can target certain group of employees.

The Development plan contains configurable number of stages and each stage contains numbers of skills that should be developed and tracked to assure the employees development.

The manager & the employee agrees on a set of skills and KPIs at each stage, then the app guides the employee through set of actions and interventions that will lead to develop the required skills, these actions are triggered by other development modules in the app like training, objectives, and appraisals module. The app is the one-stop shop for assigning the development plans, and skills, tracking the progress of the interventions throughout the stages.

"When we took the decision to start mobile development to expand our main HR product, we faced three challenges; upskilling of the team as they all are web developers, time frame to produce a certain HR model over the mobile platforms and finally how we keep our development environment as it is.

Xamarin answered the three challenges by providing cross platform development (time factor) , XAML support (similarity to ASP.Net model in utilizing markup and code behind)  and all the projects are within a solution running on VS 2015 and fully integrating with TFS."

-Mina Monir, Director of Research and Development, HITS

Application Functionalities

1) Employee Functionalities:

• Join a development plan
• Track the progress according to the chosen development plan
• File self-service forms to complete the actions required to develop a specific skill
• Track changes made by managers in skills order or KPI score after the completion of a specific stage

2) Manager Functionalities:

• Manage all employees' development plans
• Enroll employees in a development plan at each stage
• Order the skills to be developed for the employees
• Complete actions and forms required to step employees from stage to stage
• Evaluate employees' KPIs after the completion of their stages

Key technologies:

• Xamarin.Forms
• Azure App Service
• Azure API Apps
• Swagger
• Azure SQL
• Azure Blobs
• XAML/C#

Core Team:

• Minaa Monir - Director of Research & Development, HITS
• Sherif El Mahdi, Senior Technical Evangelist, Microsoft
• Sara Ahmed - Technical Evangelist, Microsoft
• Nour Ramadan - Technical Evangelist, Microsoft

Challenge

HITS offers a set of solutions under the umbrella of HITS DNA; HR & Payroll Solution, Time Management Solution and Citizen Management Solution where all of them are web apps.

HITS team decided to develop their new solution  "Employee Development Plans App" as a mobile application targeting Android, iOS and Windows with the following constraints: shortest go-to-market time, lowest cost in terms of upskilling HITS development team, highest code sharing across all the supported platforms and native user experience.

In order to fit into such constraints, HITS team wanted to use Xamarin mobile development approach capitalizing on the XAML/C# experience of their development team.

Solution, steps, and delivery

Before digging deep into the development of HITS Azure-Backed Xamarin application, let's have a bird's-eye view on the architecture behind all HITS DNA web solutions (HR & Payroll Solution, Time Management Solution and Citizen Management Solution):

Web Role Instances: Set of cloud services behind azure application gateway with WAF enabled feature, these cloud services are the main HR system application(ASP.NET application) - Multi tenant.

Load Balancer: Azure application gateway with WAF enabled feature - Multi tenant.

Virtual Machines - Alerting: SQL VM machine utilizing SQL reporting services data driven subscription to build user defined Email alerts - Multi tenant.

Virtual Machines - Reporting: SQL VM machine utilizing SQL reporting services for rendering reports from the cloud service web application - Multi tenant.

Azure SQL Database : the main HR system Database - Single tenant.

Blob Storage : the main storage for HR files (letters , HR documents , contracts copy , etc...) - Single tenant.

[Server Side - Azure API App]

Building Azure API App as a REST model:

"Azure API Apps provided us with very quick and simple deployment and we found it extremely easy to stand up an HTTP endpoint for our client application."  -Mina Monir, Director of Research and Development, HITS

To start building the mobile application, HITS team needed to build a REST model that can be interfaced to the Xamarin mobile app representing the data tier. Moreover, scaling automatically and having built-in load-balancing made an Azure API APP a natural choice for HITS.

Here's the solution structure:

The API covers the following:

• Authentication through HTTPS headers
• Filter pass-through based on the authentication
• Models built over HITS Azure database
• Web routing based on action tags
• Enabled swagger interface

HITSRestServices project provides REST functionality to be called by the client apps where the API layer provides Swagger metadata for each API call facilitating easy cross-platform client SDK generation.

Here’s a typical controller interface allowing access to the model layer and Swagger metadata. The method is checking the authentication validity and returns either empty structures or hits the entity to GET or POST the data based on the message parameters.

using System.web.http;
using HITSRestServices.Models;

namespace HITSRestServices.Controllers
{
  public class EmployeeBasicDatasController : ApiController
  {
    private NASDataSource db = new NASDataSource();

    public IQueryable GetEmployeebasicDatas(string userLogoname, int empid, Nullable mydate, string where)
    {

      if (RequestContext.Principal.Identity.IsAuthenticated == false)
      return Enumerable.Empty().AsQueryable();
      else
      {
        NASdataSource db1 = new NASDataSource();
        try
        {
          return db1.WebAPIGetEmployeeBasicData(userLogonName, empid, mydate, where).AsQueryable();
        }
        catch (Exception ex)
        {
          return Enumerable.Empty().AsQueryable();
        }
     }
   }

  protected override void Dispose(bool disposing)
  {
    if (disposing)
    {
      db.Dispose();
    }
    base.Dispose(disposing);
  }
 }
}

After developing the API, we hosted the API as Azure API App under the Azure App Service umbrella, which gave us the documentation of the API using Swagger without additional effort.

[Client Side - Xamarin.Forms]

Consuming Azure API App from Xamarin.Forms Client Application

One of the big challenges that has been solved by Azure API App is that the client side can automatically consume the API without any development effort. It's as simple as that:

Right Click on the Project -> Add -> REST API Client -> Select the hosted Azure API App.

This automatically sends the swagger documentation needed by visual studio populating the whole model that's ready to be used.

At this stage the Xamarin projects are ready to build view models based on the populated models.

A Sample View Model looks like the following after adding the references of HITSServicesClient and HITSServicesClient.Models.

    using System;
    using System.Windows.Input;
    using Xamarin.Forms;
    using System.ComponentModel;
    using System.Runtime.CompilerServices;
    using System.Diagnostics;
    using HITSServicesClient;
    using HITSHRDev.Views;
    using HITSHRDev;
    using System.Collections;
    using HITSServicesClient.Models;
    using System.Collections.Generic;
    
    namespace HITSHRDev.ViewModels
    {
    	public class VMEmployee : INotifyPropertyChanged
    	{
   		 int taps = 0;
   		 string numberOfTapsTapped;
    
    	 public IList Employees { get; set; }
     	 public object iteml { get; set; }
    	 public VMEmployee(User NasUser,object item,int EmpId)
     	 {
    		 Employees = NasUser.HITAPIs.EmployeeBasicDatas.GetEmployeeBasicDatas(NasUser.Username, EmpId, DateTime.Now, "");
    		 iteml = item;
     	 	 tapCommand = new Command(OnTapped);
   		 }
  	 	 ICommand tapCommand; 

Building the application UI using Xamarin.Forms

Part of the app UI-related requirements is to have a "store like" navigation UI experience in addition to showing the employees data in business card-presentation format as shown below:

In order to meet the two requirements mentioned above, HITS team developed a custom UI control that inherits from Xamarin.Forms.Grid. Moreover, the team implemented a generic view cell that can be binded to different view models and can be positioned as the data item of the new grid class.

Using Xamarin Cross-Platform Plugins

One of the main advantages of using Xamarin is the possibility of sharing a significant portion of the source code across all the supported platforms. github.com/xamarin/plugins maintains a list of open-source plugins which can be used in Xamarin-based applications. Here's an example showing how HITS development team used file picker in a cross-platform fashion to pick a file then upload it to Azure Blobs.

     filedata = await CrossFilePicker.Current.PickFile();
     filebytes = filedata.DataArray;
    
     StorageCredentials credss = new StorageCredentials("hitsfiles", "YOUR BLOB KEY HERE");
     CloudBlobContainer tempContainer = new CloudBlobContainer(
      new Uri("https://hitsfiles.blob.core.windows.net/hitimages"),credss);
    
      SharedAccessBlobPolicy sasConstraints = new SharedAccessBlobPolicy();
      sasConstraints.SharedAccessExpiryTime = DateTime.UtcNow.AddHours(4);
      sasConstraints.Permissions = SharedAccessBlobPermissions.Write  
      |SharedAccessBlobPermissions.List;
    
      //Generate the shared access signature on the container, setting the constraints   
      directly on the signature.
      string sasContainerToken = tempContainer.GetSharedAccessSignature(sasConstraints);
    
      StorageCredentials cred = new StorageCredentials(sasContainerToken);
    
      try
      {
     	// Instantiate a Blob store container based on the info in the returned item.
   	    CloudBlobContainer container = new CloudBlobContainer(
       	new Uri("https://hitsfiles.blob.core.windows.net/hitimages"),cred);
    
    	// Upload the new image as a BLOB from the stream.
      	CloudBlockBlob blobFromSASCredential =
    	container.GetBlockBlobReference(Guid.NewGuid().ToString() + ".jpg");
    
    	await blobFromSASCredential.UploadFromByteArrayAsync(filebytes,0,filebytes.Length);

    	string ImageLink = blobFromSASCredential.Uri.ToString();
    
      }
      catch (Exception ex)
      {
 	    //Do Something to handle exceptions
      }

Xamarin.Forms Performance Challenge

HITS team faced a performance issue with Xamarin.Forms GridView as it was taking too long to display the data of the employees in "Manage My Team" View which is built using XAML.

Manage My Team View:

In order to optimize the poor layout performance, HITS team applied the following corrective actions in XAML:

• Using Fixed size rows and columns instead of using Auto Size whenever it's possible in addition to using FillAndExpand or LayoutOptions.Fill.

• Removing all the unnecessary Label text measurements as measuring text affects performance.
• Enabling XAML Compiler as it removes some of the load time for XAML elements.

//Enabling XAML Compiler on the assembly level
[assembly: XamlCompilation (XamlCompilationOptions.Compile) 

• Reducing unnecessary bindings as bindings aren't cost efficient.

Beside "Manage My Team" View, some views in the app were built in run-time from the code behind (C#) and the following corrective action was taken as well:

• Packing Children before Parents.

layout.Children.Add(nasImage); //Children
layout.Children.Add(nasLabel); //Children
page.Content= layout;  //Parent

Conclusion

With this project, HITS team strengthened their Xamarin muscle for any upcoming mobile-based projects. The project now is in the publishing phase to provide HITS customers with one more pillar under HITS DNA umbrella.

General Lessons:

• 100% of the Web Service Access Code, Processing the Logic and Using the Database is a shared code across the 3 platforms.
• Using Portable Class Libraries (PCL) for sharing code over the Shared Project style made the unit testing easier. However PCL may not be the optimal solution as platform-specific libraries cannot be referenced.
• Since the app doesn't need to be highly customized to the platform, Xamarin.Forms was useful for adding the UI definition under the shared code umbrella as well.
• Using Xamarin.Forms UI controls wasn't a blocker for making the app reflects HITS DNA visual identity; HITS development team created custom UI controls running across the 3 platforms and matching the visual identity of HITS DNA by inheriting from Xamarin.Forms UI controls.
• Connecting the logic fell under the shared code umbrella by using MVVM with Xamarin.Forms as a layered separated presentation pattern. However, using MVVM may not be worth it for smaller apps since it necessitates multiple layers.
• Using Swagger API metadata is effective when it comes to automatically generating client code for Azure API Apps.
• Deployment of Azure API Apps can be done easily through a wizard using tools built into Visual Studio 2015 or higher.

Additional resources

• Xamarin Unified Installer
• Xamarin Cross-Platform Plugins on GitHub
• Azure API Apps Documentation
• Xamarin.Forms Controls Reference
• Visual Studio Emulator for Android
• MVVM in Xamarin Forms
• Microsoft Azure Storage Explorer
• Azure SDK for .NET
• Optimizing Xamarin.Forms Performance