Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
Final Work Product Submission for Google Summer of Code'19 at The Mifos Initiative - Abhay Chawla(@abhaychawla)

GSoC'19 Work Product Submission Mifos X Web App | Abhay Chawla

I would like to thank Ed Cable and Pranjal Goswami for their guidance and support throughout the program. A special thanks to Santosh Math and Sampath Kumar G for their timely assistance.

Project Overview

Mifos X Web App is the revamped version of the Mifos X Community App, an effective financial inclusion solution and the default web application built on top of the Mifos X platform for the Mifos User Community. It provides the frontend for a core banking system. Due to the limitations of Angular 1.x, the community app is being rewritten as the web app leveraging Angular 6 and Material Design. This project strives to continue the work which began last year.


Originally, I had proposed to work on creating a self guided walkthrough (configuration wizard) but given the priority of rewrite of the new web app and the work remaining, I shifted my focus there.

Work Overview

Commits | Live Demo

Table of Contents

  1. Update to Angular 7
  2. Javascript Heap Goes Out of Memory
  3. Dynamic Form Dialog Component
  4. Pipes
  5. Material Stepper Integration
  6. Products

Update to Angular 7

To keep the web app upto date with the latest released stable version of Angular, it was decided to upgrade it to Angular 7.

  • All dependencies were updated to their latest versions.
  • Tslint configuration and rules were refactored.
  • Travis configuration was updated to use Angular 7.

Related Issues:
[1] openMF/web-app#407
Related Pull Requests:
[1] openMF/web-app#408
[2] openMF/web-app#412

Javascript Heap Goes Out of Memory

Production build was failing due to a limit on heap memory allocation in V8 (node.js) which lead to JavaScript heap going out of memory. I updated the production build script and Travis configuration to increase the same.

Related Issues:
[1] openMF/web-app#436
Related Pull Requests:
[1] openMF/web-app#437

Dynamic Form Dialog Component

I created a custom component for creating forms dynamically in a dialog which will be used as a replacement to the current scenario in the community app where formfields were being added to a table. Addition and Editing will be performed via the dialog while the data will be shown in the table.

  • Added formfield, input, select and datepicker base (model)
  • Added formgroup service
  • Added formfield and form-dialog component
  • Jivjyot worked on the same as well, and also added a checkbox base (model)

Related Issues:
[1] openMF/web-app#427
Related Pull Requests:
[1] openMF/web-app#428


Various pipes were created to assist the functionality of web app in general as well as the products section in particular. They include the following:

  • Added find pipe to find a particular option's property within a set of options by a unique value.
  • Added charges penalty filter pipe to filter charges that have penalty or not (as per requirement).
  • Added charges filter pipe to filter charges by currency code or multi disburse loan (loan products)

Related Commits:

Material Stepper Integration

Angular material stepper was integrated within the web app to ensure a workflow similar to the one in community app wherein we have long forms. Earlier within the community app the entire code of stepper for a particular section eg. loan products was cluttered within a single file making it very difficult to understand. But now, each step for every section in creation of products is within its own component improving readability of the code as well as allowing its reuse (with some modifications) for the editing of products as well.

Stepper Preview step

Various icons/colours indicating the current state of the stepper include:

  • Pencil with Default colour - Edit
  • Check mark with Green colour - Done
  • Exclaimation mark with Red colour - Error
  • Eye with Default colour - Preview


Features Completed:

  • Loan Products
List Create View Edit
Loan Products Create Loan Product View loan product new edit loan product

Related Issues:
[1] openMF/web-app#429
[2] openMF/web-app#188
[3] openMF/web-app#438
[4] openMF/web-app#439
Related Pull Requests:
[1] openMF/web-app#430
[2] openMF/web-app#434
[3] openMF/web-app#442
[4] openMF/web-app#451

  • Savings Products
List Create View Edit
savings products create saving product view saving product edit saving product

Related Issues:
[1] openMF/web-app#440
[2] openMF/web-app#189
[3] openMF/web-app#452
[4] openMF/web-app#453
Related Pull Requests:
[1] openMF/web-app#454
[2] openMF/web-app#455
[3] openMF/web-app#456
[4] openMF/web-app#457

  • Shares Products
List Create View Edit
Share Products create share product view share product edit share product

Related Issues:
[1] openMF/web-app#458
[2] openMF/web-app#190
[3] openMF/web-app#463
[4] openMF/web-app#464
Related Pull Requests:
[1] openMF/web-app#459
[2] openMF/web-app#462
[3] openMF/web-app#469
[4] openMF/web-app#470

  • Deposit Products Interest Rate Chart step was enhanced so that multiple interest rate charts can now be added within the stepper itself.
create fixed deposit product

Related Issues:
[1] openMF/web-app#458
Related Pull Requests:
[1] openMF/web-app#459

Other work:

  • Working on getting the pending PRs (view and edit for deposit products) merged.
  • Working on addition of tooltips before the final presentation.

Further Enhancements possible for future:

Weekly Updates

Overall Experience

It has been a great experience again working with the Mifos community and I am looking forward to continue the same in the future.

Thank you Mifos Initiative and Google Open Source Team for this great opportunity! 😃 👍

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment