How to create an inspection checklist using Low-code
Tags: showdev, tutorial, lowcode
Published: 2021-08-18 14:54:07

<span style="font-weight: 400;">Your business is not intangible. It's made up of processes, plants, locations you cover, products and services you make, and people you engage (customers, employees, external partners). These elements, if left unchecked, may lead to major issues or downtime. If risks are not understood, tracked, and tackled, recovery can get pricey. Companies working with machinery, natural resources, external technology, and a large workforce are always running the risk of unforeseen downtimes, product failure, defective production, exceeding budgets, compliance issues, and more. Each of these negative outcomes is almost always dependent on inadequate monitoring and management of the resources. </span>

<span style="font-weight: 400;">To keep employees and the workplace safe and processes working at optimum capacity, using appropriate audits and inspections instruments are a necessity. These inspection checklists when used properly are an assurance that a particular piece of equipment has been inspected. As each item in the checklist gets ticked off, the individual performing the inspection is verifying whether each component of the equipment is in correct working order or not.</span>

&nbsp;
<h3><b>Building an inspection checklist </b></h3>
<span style="font-weight: 400;">DronaHQ enables users to build inspection forms and checklists for many scenarios - like site evaluations, equipment performance assessment, staff safety, vehicle inspection, home audit, and lots more.</span>

<span style="font-weight: 400;">You can take your inspection program to the next level using drag &amp; drop checklist builder to add the right form field to your checklist and standardize data collection. It is incorporated with options to implement your custom business rules and get complete control over the data getting collected from the checklist app. Add the exact UI modules you require for taking down the information, use action flows to set up actions on events such as report generation on button click, approval request, database calls,  notifications, assigning of tasks, updating the records, and even triggering events easily in other enterprise systems using API integrations. </span>

<span style="font-weight: 400;">In this blog, we will learn how to create an inspection checklist for a </span><b>Vehicle Inspection Checklist </b><span style="font-weight: 400;">on DronaHQ.</span>

<span style="font-weight: 400;">
</span><span style="font-weight: 400;">Phase 1: Create the Checklist. We will cover data collection (text and rich media), form field validation, conditional rules and visibility, and </span>

<span style="font-weight: 400;">Phase 2: Database Updates - Submit inspection data to database of choice (Google Sheets, Airtable, MongoDB, PostgreSQL, and so on) or DronaHQ Sheets</span>

<span style="font-weight: 400;">Phase 3: Email and Notifications to report escalations, update new form submissions </span>

<span style="font-weight: 400;">Phase 4: Report Generation - Generate PDF Report automatically </span><span style="font-weight: 400;">
</span>


<b>Add a Blank App:</b> 
<span style="font-weight: 400;">
</span><span style="font-weight: 400;">Login to DronaHQ and head over to App. You can browse through the ready templates to find a suitable one for your use case. In this example, we will be building an inspection checklist from scratch. So we start with a “Blank App”.</span>

<span data-preserver-spaces="true"><img class="alignnone wp-image-15602" src="https://www.dronahq.com/wp-content/uploads/2019/12/1.-Login-and-Add-blank-app-1024x487.png" alt="" width="648" height="308" /></span>

<b>Add App Description:</b> 
<span style="font-weight: 200;">At this step we need to enter 3 key details: App name [1], app description [2], and app icon [5]. You can always come back and edit the information you enter here. </span><span style="font-weight: 400;">
</span><span style="font-weight: 400;">Under Pick a Catalogue [3] you can define which catalogue this app is going to be a part of in DronaHQ. This determines which user group will be able to access the app on an end user screen.
</span><span style="font-weight: 400;">
</span> </b><img class="alignnone wp-image-15603" src="https://www.dronahq.com/wp-content/uploads/2019/12/2.-App-description-1024x577.png" alt="2. vehicle inspection App description" width="694" height="391" />

<b>Creating the Inspection Checklist:</b>



&nbsp;
<ol>
 	<li style="font-weight: 400;" aria-level="2"><span style="font-weight: 400;">You can start adding form fields to capture details.
</span><i></i><b><b><i><span style="font-weight: 400;">
<img class="alignnone wp-image-15604" src="https://www.dronahq.com/wp-content/uploads/2019/12/3.-Add-Controls-to-blank-screen-1024x485.png" alt="3. Add Controls to blank screen" width="671" height="318" /></span></i></b></b></li>
 	<li style="font-weight: 400;" aria-level="2"><b><i></i></b><span style="font-weight: 400;"><span style="font-weight: 400;">I will break down this inspection checklist to sections so, to start off, I add a heading control to the screen.</span></span><img class="alignnone wp-image-15605" src="https://www.dronahq.com/wp-content/uploads/2019/12/4.-Heading-for-Form-Sections-1024x495.png" alt="4. Heading for Form Sections" width="623" height="301" /></li>
 	<li style="font-weight: 400;" aria-level="2"><span style="font-weight: 400;"><span style="font-weight: 400;">Dropdown control is a handy input control for a checklist</span></span><img class="alignnone wp-image-15626" src="https://www.dronahq.com/wp-content/uploads/2019/12/image26-1024x324.png" alt="" width="668" height="211" />&nbsp;</li>
 	<li style="font-weight: 400;" aria-level="2"><span style="font-weight: 400;">Bind data to the </span><b>dropdown control </b><span style="font-weight: 400;"><span style="font-weight: 400;">(this control supports a bunch of different methods to bind data - static data, from an API or database, or from DronaHQ in-built Sheets. I chose static data as the options were pretty standard.
<img class="alignnone wp-image-15606" src="https://www.dronahq.com/wp-content/uploads/2019/12/6.-Bind-data-to-dropdown.png" alt="6. Bind data to dropdown" width="679" height="314" /></span></span></li>
 	<li style="font-weight: 400;" aria-level="2"><span style="font-weight: 400;">Next I’d like the inspector to enter the mileage on the vehicle that would require a numeric input so I go ahead and add the</span><b> numeric control</b><span style="font-weight: 400;"><span style="font-weight: 400;">.</span></span></li>
 	<li style="font-weight: 400;" aria-level="2"><span style="font-weight: 400;">You can also allow users to upload images of the vehicle so we add the </span><b>File Upload</b><span style="font-weight: 400;"><span style="font-weight: 400;"> control.</span></span><img class="alignnone wp-image-15607" src="https://www.dronahq.com/wp-content/uploads/2019/12/7.-Add-file-upload-1024x525.png" alt="7. Add file upload" width="646" height="331" />&nbsp;
<ol>
 	<li style="font-weight: 400;" aria-level="2"><span style="font-weight: 400;">Using this component you can define the file type the user can upload. I selected </span><b><b>Image</b></b></li>
 	<li style="font-weight: 400;" aria-level="2"><span style="font-weight: 400;">Choose whether the user gets to upload an image from the gallery or only use a camera to take a picture and upload it. I chose </span><b><b>Camera only</b></b></li>
 	<li style="font-weight: 400;" aria-level="2"><span style="font-weight: 400;">You can also limit the number of file/image uploads. I have set the limit to </span><b>1 photo</b><span style="font-weight: 400;"><span style="font-weight: 400;"> here</span></span><img class="alignnone wp-image-15608" src="https://www.dronahq.com/wp-content/uploads/2019/12/8.-File-Upload-properies.png" alt="8. File Upload properies" width="610" height="342" />&nbsp;

Important: At this point, it should be noted that
A. To ensure user fills in all the fields in the form, you can mark the fields as <b>required
</b>B. If you want the checklist to be offline enabled, follow these steps: <a href="https://community.dronahq.com/t/creating-offline-forms/223" target="_blank" rel="noopener noreferrer">Offline forms in DronaHQ</a><img class="alignnone wp-image-15609" src="https://www.dronahq.com/wp-content/uploads/2019/12/9.-Required-Offline.png" alt="9. Required, Offline" width="665" height="259" />

&nbsp;</li>
</ol>
</li>
 	<li style="font-weight: 400;" aria-level="2"><span style="font-weight: 400;">Since I am breaking down this checklist into sections, there are different approaches i can take here:</span>
<ol>
 	<li style="font-weight: 400;" aria-level="2"><span style="font-weight: 400;">Break page into sections - revealing each only as the user progresses through the stages</span></li>
 	<li style="font-weight: 400;" aria-level="2"><span style="font-weight: 400;">Use different screens, navigating from one to another as each section gets over
</span>I will use separate screens for each section. So, I start by labeling this screen before adding a new one.<img class="alignnone wp-image-15613" src="https://www.dronahq.com/wp-content/uploads/2019/12/10.-Heading.png" alt="10. Heading" width="631" height="421" />&nbsp;</li>
</ol>
</li>
 	<li style="font-weight: 400;" aria-level="2"><span style="font-weight: 400;"><span style="font-weight: 400;">To add a screen, on the left panel, select SCREENS, the plus icon, and Screen from the dropdown menu.</span></span><img class="alignnone wp-image-15614" src="https://www.dronahq.com/wp-content/uploads/2019/12/11.-add-new-screen.png" alt="11. add new screen" width="660" height="408" />&nbsp;</li>
 	<li style="font-weight: 400;" aria-level="2"><b>Navigate to next section </b><span style="font-weight: 400;">To allow the inspector to move from one section to next, we need to add some </span><b>event handlers</b><span style="font-weight: 400;"><span style="font-weight: 400;"> to the screen.</span></span><img class="alignnone wp-image-15610" src="https://www.dronahq.com/wp-content/uploads/2019/12/9.5.-Navigate.png" alt="9.5. Navigate" width="629" height="334" />&nbsp;

While we can choose from these pre-built controls, we can also explore more visually aesthetic UI controls in the Marketplace.<img class="alignnone wp-image-15611" src="https://www.dronahq.com/wp-content/uploads/2019/12/9.6.-Button-1024x440.png" alt="9.6. Button" width="662" height="284" />

I added the button to the footer of the screen.

<img class="alignnone wp-image-15612" src="https://www.dronahq.com/wp-content/uploads/2019/12/9.7.-Footer.png" alt="9.7. Footer" width="643" height="432" />

The flash symbol on the control shows that that control supports actions. On the right, select the next button and configure the <a href="https://community.dronahq.com/t/introducing-the-new-action-flow-interface/550">actionflow</a> to navigate from screen 1 to screen 2.

&nbsp;
<ol>
 	<li style="font-weight: 400;" aria-level="2"><span style="font-weight: 400;">Validate - We need to make sure that the user filled in all the required fields on the screen. To do that, select the validate screen action task in the builder, then select the screen name.</span></li>
 	<li style="font-weight: 400;" aria-level="2"><span style="font-weight: 400;"><span style="font-weight: 400;">Navigate - After successful validation - navigate to the next screen. If validation fails, we can choose to show a warning message</span></span>Note: These navigation button are necessary to be added to each section to allow user to proceed further or go back to previous sections.<img class="alignnone wp-image-15627" src="https://www.dronahq.com/wp-content/uploads/2019/12/image20-1024x488.png" alt="Using actionflows for form validation and navigation" width="590" height="281" /></li>
</ol>
</li>
 	<li style="font-weight: 400;" aria-level="2"><b>Layout of the Checklist </b><span style="font-weight: 400;"><span style="font-weight: 400;">Follow this step if you want to control how the different form fields show across different screens.</span></span>I added layouts to this screen because we don’t want our checklist UI to get impacted based on device (think mobile vs. tablet vs. desktop). Here is an elaborate <a href="https://community.dronahq.com/t/layout-and-columnar-layouts/506">guide on using layouts</a>. For this use case, I add one layout inside of which I add one column and then another one.

Inside these columns I will also add a <b>Panel </b>control. This will come in handy in next steps.<img class="alignnone wp-image-15615" src="https://www.dronahq.com/wp-content/uploads/2019/12/11.5.-layouts.png" alt="Layouts to make your checklist responsive" width="644" height="319" />

&nbsp;

Just be sure to configure the panel column configurations like in the image below. You can play around with these configurations to suit your needs.<img class="alignnone wp-image-15628" src="https://www.dronahq.com/wp-content/uploads/2019/12/image10.png" alt="Layout properties" width="643" height="404" /></li>
 	<li style="font-weight: 400;" aria-level="2"><span style="font-weight: 400;">Head back over to Controls and look for the Selection controls and pick the </span><b>SELECT BAR</b><span style="font-weight: 400;"><span style="font-weight: 400;">. After labeling the control, I add the options that need to be shown in the Static Data Section.</span></span><img class="alignnone wp-image-15616" src="https://www.dronahq.com/wp-content/uploads/2019/12/12.-Selection-Control-1024x392.png" alt="12. Selection Control" width="673" height="258" />&nbsp;</li>
 	<li style="font-weight: 400;" aria-level="2"><span style="font-weight: 400;"><span style="font-weight: 400;">If the user selects the “Needs Repair” option. I want to open up an option to attach an image. So, I insert another File Upload Control to upload the image.</span></span><img class="alignnone wp-image-15617" src="https://www.dronahq.com/wp-content/uploads/2019/12/13.-File-Upload-Needs-Repair-1024x365.png" alt="13. File Upload - Needs Repair" width="704" height="251" />&nbsp;</li>
 	<li style="font-weight: 400;" aria-level="2"><span style="font-weight: 400;"><span style="font-weight: 400;">This field need not be shown unless the “Needs Repair” option is selected. So, we will introduce conditional visibility at this step. To add conditional visibility, head over to “Rules” on the left panel and then “Add New Rule”</span></span><span style="font-weight: 400;">Here we can configure the conditions when we want to hide or show the file upload field. Click on save and head out of the Rules widget. </span>Here is how Rules work &gt; <a href="https://community.dronahq.com/t/applying-rules/227" target="_blank" rel="noopener noreferrer">https://community.dronahq.com/t/applying-rules/227</a><img class="alignnone wp-image-15618" src="https://www.dronahq.com/wp-content/uploads/2019/12/14.-Rules.png" alt="14. Rules" width="674" height="426" /></li>
 	<li style="font-weight: 400;" aria-level="2">The rest of the questions in this section have the same format. Question, 4 options to select from, and an image to upload in case the select option ‘needs repair’. To make the process faster, I will copy this control and paste one below the other.  I select the panel that holds the field and duplicate it.<img class="alignnone wp-image-15629" src="https://www.dronahq.com/wp-content/uploads/2019/12/image9.png" alt="duplicate form fields" width="697" height="497" /></li>
 	<li style="font-weight: 400;" aria-level="2">All I have to do on this screen now is change the label (the question) and configure the visibility rules.<img class="alignnone wp-image-15619" src="https://www.dronahq.com/wp-content/uploads/2019/12/15.-Duplicate-and-rename.png" alt="15. Duplicate and rename" width="620" height="488" /></li>
 	<li style="font-weight: 400;" aria-level="2"><b><b><span style="font-weight: 400;">Similarly, I added screens for more sections/stages of the inspection by duplicating the screens and renaming the fields within the screen.</span></b></b><img class="alignnone wp-image-15630" src="https://www.dronahq.com/wp-content/uploads/2019/12/image24-1024x429.png" alt="" width="642" height="269" />&nbsp;</li>
 	<li style="font-weight: 400;" aria-level="2"><strong>Sticky Menu </strong><span style="font-weight: 400;">To assist in easy navigation through the sections, we will add a </span><a href="https://community.dronahq.com/t/using-menus/522" target="_blank" rel="noopener noreferrer"><span style="font-weight: 400;">sticky menu</span></a><span style="font-weight: 400;"> to our checklist.
</span><span style="font-weight: 400;"><span style="font-weight: 400;">Just head over to the screens menu and select a menu screen of choice</span></span><img class="alignnone wp-image-15631" src="https://www.dronahq.com/wp-content/uploads/2019/12/image11.png" alt="creating a menu screen" width="655" height="467" />&nbsp;

Add the item lists and configure the navigation.</li>
 	<li style="font-weight: 400;" aria-level="2">To ensure menu remains visible across each section, enable sticky menu in each pages screen properties<img class="alignnone wp-image-15633" src="https://www.dronahq.com/wp-content/uploads/2019/12/image13-1024x421.png" alt="menu" width="654" height="269" /></li>
 	<li style="font-weight: 400;" aria-level="2">Here is a quick preview of the road so far :</li>
</ol>
<img class="alignnone wp-image-15634" src="https://www.dronahq.com/wp-content/uploads/2019/12/image6-1024x572.png" alt="preview of inspection checklist" width="691" height="386" />

<span style="font-weight: 400;">DronaHQ empowers the business user to design checklists and deploy them without having to go to the IT or DevOps. These checklist apps built once can run on Android, iOS, or Web devices </span>

Next up, we will cover:
<ol>
 	<li style="font-weight: 400;" aria-level="2"><span style="font-weight: 400;">Update Database</span></li>
 	<li style="font-weight: 400;" aria-level="2">Generate Reports</li>
 	<li style="font-weight: 400;" aria-level="2"><span style="font-weight: 400;">Send Alerts - Updates on new Submission, Escalation Warnings</span></li>
</ol>
&nbsp;