Dpenz Final Wiki

From IS480
Jump to navigation Jump to search

Project Progress Summary

Final slides link: Final Slides
Deployed site link:

Login Details
User Role Name XPID Password
Procurement Staff Tom 9003 INGBank
Head of Procurement/Admin Matthias 9010 INGBank
Functional Owner Marlie 9112 INGBank
Functional Owner Dany 9113 INGBank
Functional Owner Mandy 9002 INGBank
*Note: any Functional Owner can be an approver of a project.

Project status

All functions have been completed, with 5 user tests conducted in total.

Changes since Midterm

  • Fully implemented changes from Midterm feedback (i.e. Field validations, currency code, archiving, etc.)
  • Fully implemented remaining functions (Admin panel, Export project details, Export report)
  • UT5 with client side
  • Fully implemented changes from UT5 (i.e. Aesthetic improvements such as terminology)

Project Highlights:

  • Started out coding in java as client was unable to confirm programming language that was supported in the bank. Upon being updated on the language, we took 3 weeks to learn ASP.NET which we all did not have prior experience in.
  • Additional requirements included based on midterm feedback:
    • Archiving
    • Importing of users via CSV file
    • We relooked at our schedule and catered in more man-hours (within our capacity) to add in these functions, as they were necessary for our system.
  • In our final UT5 with the client side, they were pleased with our system as it exceeded their expectations and this made our efforts all worth it.

Project Challenges:

  • We were behind time for a few of our sprints and it was not easy to catch up for subsequent sprints, but we dedicated more man-hours and managed to be early for Sprint 8.
  • Revamped the entire Approval process as clients were unable to confirm the exact process flow previously. We constantly communicated with the client so we were able to make the changes as soon as the correct process was released to us.

Project Achievements:

  • One of our main selling points was the flexible and scalable Procurement Approval Form (PAF) template. It allowed for dynamically adding/removing/re-ordering the various phases and fields contained in the PAF. We successfully catered for our database structure to accommodate the constant changes in the PAF template.
  • As we were behind time for a few sprints, we had to compensate by adding in more man-hours. We helped each other with our parts whenever we could as the one who knows how to solve the bug might not be the one who was responsible for coding it. This teamwork paid off when we finally caught up to end Sprint 8 early.

Project Management

Current project status:
Dpenz Timeline.jpg

Project Schedule (Plan Vs Actual):

This is a chart of how our schedule lines up. There were some delays in the middle, but since midterm, we have put in extra man hours a day and slowly caught up to our planned sprint end dates. We have even ended our sprint early in Sprint 8. More details of our schedule is on our Project Schedule page.

Regarding the scope, we have implemented some additional features based on feedback from midterm, our supervisor and our sponsor, and we have evaluated that these features can value add to our system and it can fit within our project time frame. These change requests have been documented in our Change Management section.

Dpenz Sprints Overview.JPG

Project Metrics:

More details of the metrics can be found on the Metrics Management page.

Schedule metrics

Dpenz SM values absolute.JPG

Dpenz Current SM values.JPG

Effort metrics

Dpenz Current EM values.JPG

Bug Metrics

More details in Bug Metrics section.

Dpenz Bug Chart.JPG

Quality of product

We designed our system with usability as our priority. As such, we allow for customisability such as customizing the PAF template and some report generation fields. The highlight of our product is that we provide a flexible structure for our clients to customize their project form template so that they can configure the form template using the user interface instead of going through the IT department. To make the Edit PAF Template easier to use, we also implemented the drag and drop functionality. On all tables, we have also implemented the sortable function so users can find their desired data easily. We also have several search bars to make locating information easier.

Design Considerations


  • Scalable & customizable PAF template
  • Database tables structured to cater for any changes in PAF template
  • Supplier Modal quicken the process of selection

Maintainable & Reusable Code

  • Minimized hard-coding involved
  • Services implemented to handle query codes

Easy Transition into the system

  • Easy to use user interface
  • Import users from excel spreadsheet
  • Import projects from excel spreadsheet

Project Deliverables:

Stage Specification Modules
Project Management Minutes Meeting Minutes
Metrics Metrics Management
Project Schedule Project Schedule
Product Burndown Chart Product Burndown Chart
Risk Management Risk Management
Change Management Change Management, Change Log
Requirements Project Description Project Description, Requirements List
Analysis Use case Overall Use Case Diagram
Architecture & Deployment Diagram Architecture Diagram
Project Process Flow Process Flowchart
Design Class Diagram Class Diagram
Testing User tests User Tests Conducted
Bug metrics and trackers Bug Metrics
Handover Manuals

Technical Complexity

1. Customizable fields and phases

Our system allows for the PAF template to be modified in the long run. This editable feature allows user to dynamically add, remove, or reorder the fields in the PAF template. Any changes made would then be reflected as the latest PAF version and used when new projects are being created. Old projects will still retain the template that was at the point of creation.

Editable PAF Template
Our Editable PAF Template can handle any number of field inputs and keep tracks of the sequence, making use of Model Binding, Model Validation, HTML Helpers, Partial Views and JQuery.

By implementing the DefaultModelBinder in ASP.NET MVC, our system can bind submitted form values to arguments of action method in controller and at the same time capturing the sequence of field inputs. It works perfectly for collection if we are posting a collection of primitive type.

Dpenz Model Issue.png

Unfortunately, that is not a very robust approach when the collection consists of complex type. Issue arises when our system can’t distinguish from the fact that there may well be another field input unrelated to our list of model atributes which could throw off our binding.

Fix To Resolve The Issue
Dpenz Model Fix.png

Since we can’t distinguish that there may well be another Name input unrelated to our list of Phase which could throw off our binding. Our system provides an index (GUID) for each item and uses TagBuilder class to build HTML.Helper which in return is used to bind the complex objects to the model, it also retains the order of items within the collection when it is being passed over to controller as an object. This ensures we can unambiguously match up the submitted properties with the correct object.

JQuery is being used heavily to allow user to dynamically add and remove Models, drag and drop the field inputs within the PAF template. However, cache must be cleared all the time to resolve the duplicating ID issues created by the GUID fix mentioned above.

Render Partial View
Dpenz Render Partial.png

The PAF Template is then broken down into 3 component and implemented with HTML.RenderPartial to manage it individually. The overall template maintains a partial view while Phase and Phase Fields input Model are each being rendered partially. This provide advance form management when our system to break down a Parent Model consisting of several child Models, and each child model is rendering its own view for display and capturing any modification made to that model itself.

2. Restructuring Database

Previously, the database stores the form fields as columns and the data pertaining to respective project as row, as shown:

Project_ID Field_Name_1 Field_Name_2 Field_Name_3 Field_Name_4 Field_Name_5 Field_Name_6 Field_Name_7
1 Data 1 Data 2 Data 3 ? ? ? ?
2 Data 1 Data 2 Data 3 Data 4 Data 5 ? ?
3 Data 1 Data 2 Data 3 Data 4 Data 5 Data 6 Data 7

This does not ensure data consistency by allowing for additional fields to be added in the long run without modifying the table structure. Catering to any number of fields means table columns would increase as time goes by. Data inconsistency occur when user modify the name of an existing field to another when previous projects have data associating to that field. This also makes it hard for our application to keep track of relevant details for searching, editing, approving and auditing.

As a result, we have restructured the database tables to accommodate for the changes made in PAF template.

Dpenz Revised DB.png

Template Table -Stores the fields information pertaining to template.
Project -Stores field values pertaining to basic fields. E.g. Project Name, Project ID, Functional Owner, Project Budget.
Project Extra -Stores field values of phase fields and refers to Template table to determine its field type.

3. Popup Modal

Dpenz Modal Supplier.png

Our system made use of popup via server as compared to the typical client end in script. A typical process of short-listing suppliers while updating a project details would require the procurement staff to browse through the list of suppliers available and make comparisons.

When the procurement staff founds out that their desired supplier is missing, they would have to perform a search or create a new supplier into the system. Usually, users would open a new tabs to perform these actions. With the Modal, our system opens up additional window dialog which allows user to perform Supplier Management functions such as creating, searching or even selecting of suppliers to aid in their project editing process.

However, when implementing the Popup Modal, the newly created supplier or selected supplier information is not passed back to the parent.
Fix for Modal

Dpenz Modal Supplier Fix.png

4. Exporting Google Charts into PDF Issue

Dpenz Export Charts 1 Issue.JPG
Our system allows for user to generate report and export them into PDF for own reference. Making use of Google Developer API, we pass JSON to Google Chart API which helps to render our data for visualisation. This png image was then retrieved displayed on the html view. This image source code was then retrieved and passed to the server for PDF generation. Issues arises when the iText PDF Convertor library does not support the image source code.

In the attempt to perform a quick workaround for this, the security feature of asp.net controller was manually modified in the codes to reduce its security checks, to allow the HTML source codes to be retrieved from the user View page back to the controller for processing of images. However, it did not resolve our initial issue and may pose more opportunity for sql injections.

Dpenz Export Charts 2 Issue.JPGDpenz Export Charts 3 Issue.JPG
After research and consultations from various forums, we came across a plausible solutions which is to get hold of the base 64 encoded image source code for processing. Repeating the steps to retrieved rendered Google Chart Images, we then retrieve the img src using getImageURL() method in javascript and passed it to controller. The controller would then remove the Base64 encoded string and do a conversion into image type, which would then be inserted into the PDF during export report.

5. Word Document Conversion

The filter attribute hijacks the request, changes the layout of the view to your new Word specific layout and then changes the response type to a file stream.

There are two key things to notice here, one is that we set the MasterPage (aka Layout) to _LayoutWord.cshtml. The other is that we set a ViewBag property ViewBag.WordDocumentMode = true;. This lets us tweak the View when it’s being downloaded as a word document if we want. For example, if there are buttons in the html form, we can omit them from the report if ViewBag.WordDocumentMode == true. The next step is to create a basic layout file so we only put into the word document what we need and this is done either in the LayoutWord.cshtml which is stored in the ~/Views/Shared/_LayoutWord.cshtml, or change the filter attribute above to your own location (ViewProjectWord.cshtml).

The final portion is to convert the response type to Word so the it will prompt the user to download it.

Dpenz Word Doc Conversion.JPG

User Testing:

The whole set of our user testing results can be seen on our User Testing page.

User Test 5

UT5 was the last user testing performed with our client before the end of our IS480.

Goal: Functional testing of our system with all required features implemented. Testing was done with real data (real XPIDs, dummy project data) to test the usefulness and content validation of our system.

Please view more details of this on our User Testing page.

Dpenz UT5 Photo1.jpg
Dpenz UT5 Photo2.jpg


Team Reflection:

For our research conducted prior to the start of development, plenty of online opinions were in support of Java over ASP.NET. Thus, we were skeptical about having to develop our application in ASP.NET. However, as we progressed, we realized that the framework which ASP.NET provided assisted us in building the foundation up very quickly. Thus, we now feel that sometimes it's good to go against what majority feel about a technology and learn how to choose what is best for us depending on the situation.
In our project, we have also learnt how to work with our difference and be aware of each other's strength and weaknesses so that we can work most efficiency for our project.

Individual Reflection:

Bing Huan (Dex): As the QA lead, I ensure the high quality of our system. I now think that quality assurance is an important aspect in software development that cannot be neglected and proper planning for the testing process is needed to ensure a high-quality product. Through QA, I have become better in debugging issues and communicating problems to the rest of my team who will help with resolving the problems.

Ching Png: As the lead developer, I have learnt the importance of building a strong architectural framework for my team members to work on. I also learnt the importance of learning from each other and helping one another out as we all have strengths in different areas. This project has really honed my technical skills and I am glad that we used ASP.NET as it is really helps us to build a system very quickly. If I were to develop a system rapidly in future, I would use ASP.NET

Malique: As the assistant PM and developer, I have learnt more about using the Scrum framework in project management. It will be a framework that I will consider in future for software project managements. I have also improved my technical skills through this project as we got to try out new technology that we have never used before, such as ASP.NET and other packages such as iText.

Mei Hui (Nicole): As the business analyst, I have improved in my communications with the client. I learnt how to be firm and tactful when interacting with the client, especially so at times where we have to persistently bug our clients for actionable items and rejection of change requests. I have learnt that my role is important in helping the team define the scope of our project and to ensure that we deliver what the client really wants. Also as the UI developer, despite not having a strong background in coding out UI prior to this project, I have picked up a range of skills from CSS to JavaScript by learning independently.

Zoey: As the project manager, I learnt how to look at the big picture of the project and manage the different aspects that would contribute to the success of the project. I learnt the importance of planning and managing all the resources well, as well as all the stakeholders involved in the project such as the client, supervisor and most importantly, my team members. Through times when we faced delays from administrative issues and restrictions or constant changes, I have learnt to be adaptable in re-allocating our schedule and resources accordingly, and plan out workarounds for the problems we face.