There are two primary differences between designing apps for Mi-Apps and designing forms for Mi-Forms as outlined below.


Column & Row Mobile Layout


Apps are displayed in a column and row basis in the Mi-Apps Client rather than in a paper-like interface. The Mi-Apps Designer allows you to design both a reporting layout (used when exporting PDFs and other images) as well as the column and row display layout.


When adding fields to the app, use the Mobile Layout tab in the field's properties to control the column and row placement. An example Mobile Layout tab is shown below:



The Mi-Apps Client uses a concept of 12 columns across the width of the screen and unlimited rows. In the example above, the field will start in the left most column (column 1) and the top most row (row 1). It will use 8 of the 12 available columns and it will be the height of a single row.

As a further example, let's look at the "Vehicle" section of the Transportation Fleet - Cleanliness Inspection example app that is provided with Mi-Apps Designer and is an example app that new users to the Mi-Apps Client have access. First, let's look at the Designer view:


This view shows what the app will look like when it exports as a PDF. We're going to take a closer look at the Vehicle section cropped out here:


When this section is displayed within the Mi-Apps Client, this is what it looks like:



The table below shows how each field was setup by column and row:

Field Name
 Column Column Width
 Row
 Row Height
Vehicle Number
 1
 6
 1
 1
Smudges / Smears / Stickers
 1
 8
 2
 1
Type of Graffiti
 1
 6
 3
 1
Graffiti Cleaned Thoroughly
 7
 6
 3
 1
Continue to Image & Comments
 1 12 4 1


Note that the "Continue to Image & Comments" hotspot was placed off the page on the design view, but still appears in the app display.


Sections vs. Pages

While Mi-Forms uses the concept of pages to delineate areas of a form, Mi-Apps uses the concept of sections. When designing an app fields in multiple sections may appear on the same page in the design report layout, but will be separated by their section designation. Using the example above, we can see that all fields in the app appear on the same page. However, as we saw in the Vehicle layout example, only 5 fields appear within that section. If we tap on the "Vehicle" label at the bottom of the screen we see that multiple sections are displayed:


These sections correspond to those specified in the Mobile Layout tab of each field as shown below:


The order of the sections displayed in the list of the Mi-Apps Client is dependent on the order in which they appear within tab order in the Mi-Apps Designer. As an example, let's take a look at the table below and then discuss the order the sections will appear within the Mi-Apps Client:

Field Name
 Page
 Section
 Tab Order (within page)
Name
 1
 Demographics
 1
Address
 1
 Demographics
 2
Comments
 1
 Additional Information
 3
City
 2
 Demographics
 1
Diagram 2
Additional Information
2


In this example, the app would have 2 sections in its drop down list ordered as follows:
  1. Demographics
  2. Additional Information

The Demographics section would contain 3 fields (Name, Address & City), while the Additional Information section would contain 2 fields (Comments & Diagram). Note that the row and column of the fields within each section is not dependent on the tab order, but instead dependent on the column and row details specified as shown above.