What Did We Build?
Reportal is a cloud-based reporting tool that allows users to create and collect digital reports with ease. It is available for both iOS and Android, with an admin interface available via the web. It was built using the Angular framework and uses the Ionic framework to compile executables for launch on the app stores. It operates on a subscription model, allowing a single user or company to create an account and invite additional users. The logo and colour scheme within the app can be customised via the admin interface so that it matches the company’s branding.
We developed a drag-and-drop builder to allow users to create custom forms and PDF templates. The builder contains a variety of different input types to capture information such as text, email addresses, phone numbers, images, videos, user locations and more. Once a form is saved, it will appear for use within the mobile app. Fields, such as location capture, can be automated using features like device geolocation.
Once submitted, the contents of the form are emailed to the form owner and saved as a report within the admin portal. If a PDF template has been created for the form, the contents of the report are rendered as a PDF and included as an attachment. Submitted reports and subsequent attachments can all be read within the admin interface.
As it isn’t guaranteed that users will have network access when submitting a form, a local copy of the submitted report is stored on the device until a network connection can be found. The mobile app also allows the user to download and view any files uploaded via the admin portal. This prevents the need to carry around weighty product catalogues as they can be viewed directly within the app.
Inspiration For This Project
The original concept came to us following a discussion with one of our clients. They mentioned that they’d had difficulty getting staff to fill out paperwork whilst on site, and the documents they did receive were often difficult to read, making it hard for their office staff to digitise. This got us thinking whether we could remove the need for paper altogether with a fully digital solution. We spent time with the client to understand what they’d need from the app, and set about building the Square Flame Service App.
The service app was built as a white-labelled product that could be reskinned and published for each client. Each version contained a series of digital forms that included all fields present on the current documents. We wrote custom templates for each form to ensure that when submitted, the report matched the styling of the current documents. This worked well but we quickly realised that the process of maintaining multiple apps, publishing updates and constructing forms for each client was a very time-consuming process.
It was because of this, that we decided to create a new system that would allow our clients to build their own forms and PDF templates. The result of which, is the fully automated system now known as Reportal.
What We Did
Data Structure & API
Reportal is split between a web interface and mobile app, so we needed to ensure that any data was easily accessible across both platforms. To ensure security and accessibility, we decided to use an external database and built a RESTful API. The API handles functionality such as user authentication, retrieval of data from the database and requests to manipulate data. The data structure for the forms was carefully considered as they determine how the form layouts appear in the app. We decided to implement version control so that any unwanted or accidental changes could be easily reverted.
Form & Report Builders
Despite their complex functionality, the form and report builders are both intuitive and easy-to-use. Forms are used to collect the data and reports are used to display it. We opted to use a drag-and-drop system that allows users to build forms by dragging-and-dropping fields into place. Once positioned, users can edit the settings of each field using a simple popup, such as setting validation, marking fields as required or changing the name of a field. As reports are tied directly to specific forms, we are able to use the same builder layout for the reports. This allows users to drag-and-drop the fields from their chosen form to create an attractive report template. Reports can even be exported as PDF files, with a preview option available to allow users to check a document’s layout before saving.
Dynamic Data Collection
Each form is created dynamically within the app. This means that any changes made in the admin portal are immediately reflected within the app content. The app also uses Ionic to access device specific functionality, such as opening the device’s camera or checking the user’s current location. This allows us to collect data in a wider variety of formats, such as GPS positions, photographs, videos, voice recordings and more. In addition, some of the data collection can be automated, such as the GPS location. Once the user has filled out the form correctly it is submitted for processing via the API.
Managing Reports
Once a user has submitted a form via the mobile app, the contents of the report are available to view via the admin inbox. The inbox shows a list of all submitted reports that can be filtered by sender, report type and date of submission. Selecting a report will open a new window which displays the report using the defined template. The user can download a PDF version of this report as well as any other attachments that may have been submitted.
Managing Documents
The admin interface allows users to upload documents which can be viewed using the app. For example, you may wish to upload health and safety information, manuals for installing your products, or product brochures to show to your clients. Any uploaded documents can be organised into folders, allowing you to easily manage your content. The files are stored within an S3 bucket and return a data string when fetched. This allows each file to be downloaded directly onto a user’s device and displayed using our custom document viewer.
User Management
Reportal includes a comprehensive user management system, including multiple levels of access and user grouping. When a user first registers, they will be assigned as the owner of their organisation. Owners are able to invite additional users, either as administrators or app users. All users are able to view and submit reports, but only owner and admin users are able to access the admin portal. To allow better organisation, users can be assigned to specific teams, each of which can manage their own sets of forms and reports. This ensures that separate teams have a streamlined experience and cannot accidentally submit reports for a different department.
Subscription Plans & Billing
To ensure that customer details are kept secure, all subscriptions, invoicing and billing is handled via Stripe. The amount of storage volume and number of available user accounts is determined by your subscription plan, with higher subscription levels receiving greater storage and user numbers. If an existing subscription expires, the account will remain accessible, but users will not be able to submit any reports or upload any additional files. Each customer is given a 14 day free-trial when they sign up to help them get started. Users can change their plan at any time during their subscription, and any difference in price will be automatically handled via the Stripe payments.
White-Labelling
Reportal uses dynamic CSS4 variables to allow customers to modify its appearance. By accessing the account settings in the admin panel, users are able to update their logo and set their branding colours for the app. This ensures that the admin portal and the app are displayed using your own business branding.
Final Result and Potential Future Improvements
Overall, we are pleased with the end result, which allows users to more efficiently collect their data. It has resulted in a great reduction in administrative costs, paper used and time wasted worrying about missing information or scribbled handwriting. In addition, staff no longer need to carry weighty documents around as they have everything they need in a single application.
We were very pleased with the Report builder as this allowed users to easily replicate complex forms without requiring any technical skillset or prior knowledge of the system. Additionally, we were extremely satisfied with the seamless transition between updating a form in the admin portal and its immediate appearance within the app. The custom data structure means that forms can be updated and built using compressed JSON, making them extremely fast and efficient. In addition, there are no existing libraries to allow user to view documents on Android. Consequently, the bespoke document viewer is an excellent example of overcoming framework limitations. It also works wonderfully with all document types, making it something that can be repurposed for future projects.
Whilst the existing user interface is functional, we would like to improve it in future by including a greater emphasis on design. The admin portal specifically would benefit from both a UX review and updates to the styling to include some more modern design traits. In addition, we would like to add some further functionality, such as the ability to more efficiently manage your reports inbox, the addition of in-app messaging, and the ability to assign specific reports for users to complete.
How It Looks
Similar Projects
Get In Touch
Thank you for your interest in our business. If you have any questions about our services, a project you’d like us to help with, or if you just want to say hello, please don’t hesitate to get in touch. We look forward to hearing from you!
