Developer Documentation

Create the reference table declaration for the parts reference table that you'll bind into the Front of Vehicle popup panel. Save the declaration inside c:\RockyJupiter as parts.refem.

With the mebt, publish the folder to the Mobilengine Cloud to generate the reference table.

c:\RockyJupiter>mebt run . reftab.xlsx
mobilengine srv 22.0 (Release) v22.0.157.14908

Executing run (compile and deploy to server):

Service url: https://tutorial.mobilengine.com/services/comex/v1/
User: petar.hoyt@gmail.com
adding 'optionalParts.refem'
adding 'parts.refem'
adding 'vehicleInspection.form.xml'
No changes for reference table 'optionalParts'
Create reference table 'parts'
Reset integration settings
Import form vehicleInspection
Import reference tables
Processing table 'optionalParts'
No changes
Processing table 'parts'
Rows added: 7, deleted: 0, modified: 0, empty: 0.
Done.

Create (or download) the input data spreadsheet that will populate the reference tables with data. As you can see in the screenshot below, it has a few extra parts to make it obvious that the popup panel has been bound to the reference table.

Figure 80. The new input data for the Front of Vehicle popup panel

Now to the form. You'll make the popupFront panel show the yes/no controls dynamically based on the data in parts.

The partsFront panel on line 4-8 is a dynamic list control: it has a generator attribute.

The "SELECT part_name FROM Reference_parts" query inside the generator attribute returns all the rows from parts, and the template in the dynamic list control (lines 9-36 in the code sample above: the frontSegmentedLabel label and the frontSegmented segmented control, the validator control for the segmented control, and the submitter panel and its child elements) is generated in the partsFront dynamic list control once for every row that the query returns.

The frontSegmentedLabel label is data-bound to the first (and, in this case, only) column that its parent, the dynamic list control, returns: ref_arg="PARENT.col0". Notice that all the other, static child elements inside partsFront have been deleted.

The frontLabel label is a sort of breadcrumb that repeats the label of the popup panel inside the popup itself. Put it outside the dynamic list control - otherwise, it would be generated above each of the generated child elements.

Save the file as vehicleInspection.form.xml inside RockyJupiter, publish (referencing reftab.xlsx in the mebt), and check:

Figure 81. The data-bound Front of Vehicle popup panel

A second column? That means modifying the declaration.

Save the declaration in c:\RockyJupiter, and publish it to the Cloud to create the reference table for the popups.

Download the input data spreadsheet that has the merged data and indicates in the where_in_vehicle column which popup panel the car part in question needs to appear in.

Figure 82. The input data spreadsheet with a new column for filtering

Modify the form to link all three popup panels to the reference data.

Just like you did with the popupFront panel, you'll make Rear of Vehicle and Engine dynamic list controls that generate their template based on a query statement.

However, this time, change the query statement in their generator attribute so that it only returns the rows that have a particular value in the where_in_vehicle field.

The template for all three dynamic list controls looks the same:

The main thing is the WHERE where_in_vehicle='' expression inside the query statement of the dynamic list controls. Make sure that it is different for all three, so that each dynamic list control only pulls the relevant reference data from the reference table.

Save the file as vehicleInspection.form.xml in the solution artifacts folder, publish it referencing the new reftab.xlsx spreadsheet, and check that everything in the form looks fine.

Instead of three popup panels, this code only has one (popupContent), wrapped in the popupGenerator dynamic list control. The generator query statement in popupGenerator references parts, but has DISTINCT where_in_vehicle, which makes sure that its child elements are generated as many times as there are distinct vehicle regions defined in the reference table.

The query in popupContent references the query in popupGenerator, and filters out the returned rows whose where_in_vehicle field does not match the header of the popup. This makes sure that each popup panel only lists the relevant parts.

The vehicle region values returned by the query in popupGenerator are referenced both inside the popup panel (in popupLabel), and outside it (in popupHeader). This makes sure that users will see the header for the Yes/No controls both when they open the form, and when they enter popup panels.

Modify and save the file. To test whether the data binding works, you could add a new row to the input data spreadsheet with Undercarriage in the where_in_vehicle before you publish the new form.

Figure 83. Add a row with Undercarriage in the where_in_vehicle field

Make the test changes, and publish (referencing reftab.xlsx when you publish via the mebt). A fourth popup panel should be generated in the form.

Figure 84. Every distinct string in the where_in_vehicle column has its own popup panel in the form

Your form is now ready for any change in the parts reference table. Nice going.

Modify the parts reference table declaration:

Download the input data spreadsheet that has new some rows for each of the vehicle regions, and indicates with 1 or 0 in the required column if a given row generates a Yes/No question or a choice in the optional car parts drop-down.

Download the input data spreadsheet

Figure 85. The input data for the unified parts reference table

Modify the form to make the query statements filter the data by the required column:

miscellaneousDropdown now references parts instead of optionalParts.

The generator of popupContent and the reference of miscellaneousDropdown both have a second conditional expression that references the required column in parts.

Take note of the ref_arg attribute of the miscellaneousDropdown and the popupLabel elements: it has an 'unnecessary' ../ in the path.

This is in fact required, because these queries are inside a dynamic list control, but relatively address a control that is inside another dynamic list control. The extra ../ is needed to 'escape' the generated child element.

Save and publish the file as usual.

Take a look at your creation: on your device, synchronize, if necessary, and check the choices for the Car part drop-down in the popup panels:

Figure 86. The new drop-down choices in the Front of Vehicle popup

Figure 87. The new drop-down choices in the Rear of Vehicle popup

Figure 88. The new drop-down choices in the Engine popup

Fantastic job. You might possibly never have to touch this form again, and yet all its controls can be updated as often as necessary.

All it takes is changing the data in the parts reference table.

The bulk of the final Vehicle Inspection form is now ready. Go on and finish it up in the next sections.