Report layout customisation

By Elena Kosik | June 20, 2017

We released the update for Android app beta. This update improves the Form builder and Report generation functionality. Additionally, it includes a Form layout designer - a companion to the Form builder that can be used to set the width and positioning of the form fields in order to customise the look and feel of the PDF report.

Inspection reports can be organised to reflect the way that the eye sees or to match the pre-made or printed report layout. By default, the report renders individual fields as a single column list. However, related information can be grouped together so the fields could be displayed as blocks and provide more space for specific inspection data.

Inspeko Form Builder contains a wide range of fields to support different input types. So, I would dare to say, that mostly any form can be created regardless of its complexity or structure. Individual fields can be laid out either as a list or grouped into the rows by modifying their width. Also, the form repeater, which represents data in a tabular format, supports its column width adjustment.

I would like to show how the form layout can be used to customise the report structure.

Creating form

To get started, we will need to create some form. Below is the printed form that we are going to use as an example and create the report with a similar layout.

Vehicle inspection form

Using the Form builder we simply add the fields matching the elements on the form above. For the Inspector's name we add Text field, for the Date of inspection - Date field, for the Year - Number field, etc. For the inspection item list we use the Repeater and add three fields into it: Item as a Text field, Passed? as a Checkbox, Action needed as the Text field.

Form builder

The form repeater is a very powerful and flexible field. It allows us to pre-insert the data into the form, such as checklist items. Tapping on the Set Data from the Repeater’s options menu (three dots icon) will open the Repeater Data screen where we will be able to insert all our checklist items.

Repeater data

At this stage our inspection form with the default report layout is ready. We can start new inspection based on this form and displayed in then generate the PDF report. The report would render the fields as a list and the checklist item displayed in a table with static row columns evenly spaced by default. However, we’d like to create the report layout close to the original form.

Customising layout

Let’s open the Form layout from the Form Builder menu by tapping on the Form layout. The screen displays the form fields with their corresponding width the same way as they would be laid out in the report. By default the field’s width is 100%, e.g. it is occupying the full row. The field width can be changed by simply clicking on a field and applying the width percentage in the shown dialog. Once the field’s width is changed the layout is restructured accordingly. The fields are grouped by rows and the total width of fields in a row cannot be greater than 100%. The fields, which do not fit, would be positioned on the next separate row. So if we are interested in position the Inspection's name and the Date of inspection fields equally in one row, then we should apply 50% width on both fields.
Below is the final layout we applied accordingly to the original form.

Form layout

And here is the generated PDF inspection report based on our final form design.

PDF report

As you can see the Form Builder together with Form layout are powerful and simple to use features of Inspeko app that make customisation of reports a breeze. Try that yourself by installing the app from Play Store and please share your feedback with us.