Resources

JSON Form Definition



For the purpose of this walkthrough, the form to be designed will be named "M and E Form". The form will consist of 1 output field and 8 input fields. In addition, device Meta data is also collected alongside.

The technical parameters for the screens that allow inputs for each of the fields of the form are defined below:

  1. Intro output screen: This screen displays an introductory message/guidance to the data collector when an instance of a form is about to be filled. This screen is of type "Info".

  2. Signboard input screen: This screen allows for the capture of the photo of the signboard of the building being inspected. This screen is of type "Photo".

  3. Facility Code input screen: This screen converts the device’s camera into a scanner that reads the QR code of the building being inspected. This is a Code Scan screen type.

  4. Any Defects input screen: This screen presents a “Yes” or “No” answer option to the question on whether a building has a defect or not. This is a "Single Choice" screen type.

  5. Defect Count input screen: This screen allows the data collector to enter the number of defects observed. Where the data collector enters X number of defects in this screen, he/she will be presented with a corresponding X number of screens to capture and annotate/mark images of these defects. This screen is automatically skipped if “No” is selected in the “Any Defects input screen”. This screen is of type "Repeat Screen".

  6. Survey Time input screen: This screen displays a widget which allows the data collector to select the time of the survey. As per the requirements set out in this use case, screen rejects input values that are outside 9:00 am and 5:00 pm. All time inputs collected are converted to their respective Coordinated Universal Time or UTC values. This screen is an example of the "Time" type.

  7. Survey Date input screen: This screen displays a control that allows the data collector to enter or select the current date. The date control rejects all inputs that are outside February and March 2016. All valid dates are converted to their UTC equivalent. This is a "Date" screen type.

  8. Signature Manager input screen. This screen presents a pad on which a signature can be written. It is of type "Signature" screen.

  9. Survey Ack input screen: This screen presents a box that is checked by the data collector to attest that all previous inputs are indeed correct and valid.This is an "Acknowledgment" screen type.

  10. Metadata: The form is designed to collect the following metadata, (1) Device ID, (2) Subscriber ID, (3) Time span i.e., the total time it took to complete a form, (4) SIM serial number and (5) Phone number, where available. Metadata is automatically collected.

See here for the many input screen types available.

Note that the CCA Desktop app is required for this exercise.

An excel file i.e., “Choice Options.xlsx”, is provided in the downloaded folder for this use case. This file is used during the definition of the “Any Defects input screen”.



Slide 1


image


(1) Start the CCA Desktop app.

(2) Click the New Form menu on the left hand side of the screen.

(3) Type "M and E Form" into the form name prompt as shown in the image above.

(4) Type "Monitoring and Evaluation form for facility structures." into the form description prompt as shown in the image above.

(5) Leave the Enable Partial Save box checked. Checking this box allows partially filled forms to be saved and completed at a later time during data collection.

(6) Continue on the next slide.

Slide 2


image


(1) Click the Set Metadata button.

(2) Check the metadata items as shown in the image above.

(3) Click the Save button.

(4) Continue on the next slide.

Slide 3


image


(1) Select Information in the Select Screen Type dropdown box.

(2) Enter "Intro" into the Screen ID textbox as shown in the image above.

(3) Leave the Input Required box checked.

(4) Click the Add Screen Label button.

(5) Choose English in the Select Language dropdown box shown.

(6) Enter "1. Please read carefully." into the screen label prompt

(7) Click the Save and Close button.

(8) Click the Add Information Text button.

(9) Select English in the Select Language dropdown box shown.

(10) Enter "Please ensure that all values set in this form are correct." into the information text box prompt as shown in the image above

(11) Click the Save and Close button.

(12) Click the Save Screen button at the bottom of your screen.

(13) Continue on the next slide.

Slide 4


image


(1) Select Photo in the Select Screen Type dropdown box.

(2) Enter "Signboard" into the Screen ID textbox as shown in the image above.

(3) Leave the Input Required box checked.

(4) Click the Add Screen Label button.

(5) Choose English in the Select Language dropdown box shown.

(6) Enter "2. Take a photo of the facility signboard." into the screen label prompt. Enter "Please make sure the photo is clear." into the screen hint prompt.

(7) Click the Save and Close button.

(8) Leave the Enable Image Annotation box unchecked.

(9) Click the Save Screen button at the bottom of the screen.

(10) Continue on the next slide.

Slide 5


image


(1) Select Code Scan in the Select Screen Type dropdown box.

(2) Enter "Facility Code" into the Screen ID textbox as shown in the image above.

(3) Leave the Input Required box checked.

(4) Click the Add Screen Label button.

(5) Choose English in the Select Language dropdown box shown.

(6) Enter "3. Please capture the QR Code for this structure." into the screen label prompt. Enter "Type Please make sure your surroundings is adequately lit." into the screen hint prompt.

(7) Click the Save and Close button.

(8) Click the Save Screen button at the bottom of the screen.

(9) Continue on the next slide.

Slide 6


image


(1) Select Single Choice in the Select Screen Type dropdown box.

(2) Enter "Any Defects" into the Screen ID textbox as shown in the image above.

(3) Leave the Input Required box checked.

(4) Click the Add Screen Label button.

(5) Choose English in the Select Language dropdown box shown.

(6) Enter "4. Are there defects on this structure?" into the screen label prompt. Enter "Please select one" into the screen hint prompt.

(7) Click the Save and Close button.

(8) Click the Load Options button and select the Choice Options.xlsx file contained in the downloaded zip folder for this walkthrough.

(9) Select "Options" in the Select Options Sheet dropdown box.

(10) Click the View Loaded Options to see the options loaded from the excel sheet.

(11) Click the Save Screen button at the bottom of the screen.

(12) Continue on the next slide.

Slide 7


image


(1) Select Repeat Screen in the Select Screen Type dropdown box.

(2) Enter "Defect Count" into the Screen ID textbox as shown in the image above.

(3) Leave the Input Required box checked.

(4) Click the Add Screen Label button.

(5) Choose English in the Select Language dropdown box shown.

(6) Enter "5. Enter the number of defects observed?" into the screen label prompt. Enter "Enter a value and click the button below to take photos of defects." into the screen hint prompt.

(7) Click the Save and Close button.

(8) Note that the number of times a screen is repeated can be set by entering a numeric value into the Repeat Count (Optional) textbox prompt highlighted in the image above. Let’s leave it blank for this exercise.

(9) Click the Add/View Repeat Screens.

(10) Continue on the next slide.

Slide 8


image


(1) For the repeat screen select Photo in the Select Screen Type dropdown box.

(2) Enter "Defect Photo" into the Screen ID textbox as shown in the image above.

(3) Leave the Input Required box checked.

(4) Click the Add Screen Label button.

(5) Choose English in the Select Language dropdown box shown.

(6) Enter "5.1 Please capture an image of the defect." into the screen label prompt. Enter "Click on the image and circle the area of defect." into the screen hint prompt.

(7) Click the Save and Close button.

(8) Check the Enable Image Annotation box as highlighted in the image above.

(9) Click the Save Screen button at the bottom of the screen.

(10) Click the Finish Repeat button at the bottom of the screen.

(11) Continue on the next slide.

Slide 9


image


Notice from the image above that the highlighted indicator now says 1 screen has been defined i.e., the photo screen defined in the last slide.

Recall from the form specification that this repeat screen should only be shown if the data collector selects the Yes option as input to the screen defined in slide 6, i.e, Any Defects . In order to do this, this repeat must be bound to the Any Defects screen using the steps delineated below;

(1) In the Screen Bind Parameter section select Any Defects in the Select Screen ID dropdown box.

(2) Select "=" in the Screen Bind Operator dropdown box.

(3) Enter "Yes" into the Bind Value textbox prompt.

(5) Click the Save Screen button at the bottom of the screen.

(5) Continue on the next slide.

Slide 10


image


(1) Select Time in the Select Screen Type dropdown box.

(2) Enter "Survey Time" into the Screen ID textbox as shown in the image above.

(3) Leave the Input Required box checked.

(4) Click the Add Screen Label button.

(5) Choose English in the Select Language dropdown box shown.

(6) Enter "6. Please select the current time." into the screen label prompt. Enter "The selected time must be between 9:00 am – 5:00 pm." into the screen hint prompt.

(7) Click the Save and Close button.

(8) Check the Save as UTC box as shown in the image above.

(9) In the Min Time (Optional) prompt select 9:00.

(10) In the Max Time (Optional) prompt select 17:00.

(11) Click the Save Screen button at the bottom of your screen.

(12) Continue on the next slide.

Slide 11


image


(1) Select Date in the Select Screen Type dropdown box.

(2) Enter "Survey Date" into the Screen ID textbox as shown in the image above.

(3) Leave the Input Required box checked.

(4) Click the Add Screen Label button.

(5) Choose English in the Select Language dropdown box shown.

(6) Enter "7. Please select the current date." into the screen label prompt. Enter "This date must be between 1st February and 31st of March 2016" into the screen hint prompt.

(7) Click the Save and Close button.

(8) Check the Save as UTC box as shown in the image above.

(9) In the Min Date (Optional) prompt select 02/01/2016.

(10) In the Max Date (Optional) prompt select 03/31/2016.

(11) Click the Save Screen button at the bottom of your screen.

(12) Continue on the next slide.

Slide 12


image


(1) Select Signature in the Select Screen Type dropdown box.

(2) Enter "Signature Manager" into the Screen ID textbox as shown in the image above.

(3) Leave the Input Required box checked.

(4) Click the Add Screen Label button.

(5) Choose English in the Select Language dropdown box shown.

(6) Enter "8. Please have the manager sign this form." into the screen label prompt. Enter "Ensure the signature is legible." into the screen hint prompt.

(7) Click the Save and Close button.

(8) Click the Save Screen button at the bottom of the screen.

(9) Continue on the next slide.

Slide 13


image


(1) Select Acknowledgement in the Select Screen Type dropdown box.

(2) Enter "Survey Ack" into the Screen ID textbox as shown in the image above.

(3) Leave the Input Required box checked.

(4) Click the Add Screen Label button.

(5) Choose English in the Select Language dropdown box shown.

(6) Enter "9. Do you acknowledge that the information entered into this form is correct?" into the screen label prompt. Enter "Check the button below." into the screen hint prompt.

(7) Click the Save and Close button.

(8) Click the Save Screen button at the bottom of the screen.

(9) Continue on the next slide.

Slide 14


image


(1) The new form screen should be similar to what is shown in the image above. Notice all 9 defined form screens on the right.

(2) Click the Save Form button highlighted in the image above to save this form.

(3) Note that this form can be edited by clicking the Edit Form menu.

(4) This lesson is now complete.