Example: creating a coach for tablets and smartphones

This example shows how to create a coach that changes how it displays its contents according whether users see it in a desktop browser, on a tablet, or on a smartphone.

This example creates a coach that is called Inspection Report. In the scenario, a health and safety inspector arrives at a work site. The inspector uses a tablet or smartphone to create the initial report. The inspector then saves the report as a draft. Later, the inspector returns to the office and opens the report on a desktop or notebook computer. The inspector expands on the initial comments with additional information. The inspector then submits the final report. To support this scenario, the coach in the example changes its layout to accommodate the different screen sizes of smartphones, tablets, and computers. The coach contains two coach views: Findings CV and Inspection CV. The Findings CV contains the information that the inspector fills out for the inspection while the Inspection CV contains information that does not change. To concentrate on the user interface, this example does not contain any data.

For the computer, the inspector can see the entire Inspection Report coach:
For the tablet, the inspector can see the Findings part of the coach and the buttons. The Inspection part of the coach is no longer visible.
For a smartphone, the buttons stretch across the entire screen to make them easier to select:

Create the Findings CV coach view.
1. Create a coach view labelled Findings CV.
2. In the Layout page, add the following controls in order from top to bottom:
  - Section
  - Output Text
  - Section
  - Text Area
  By default, the layout arranges elements vertically so the controls are stacked one on top of the other.
3. Select the first section and change its Layout configuration to Horizontal. Repeat this step for the other section.
4. In the first section, add a Single Select control and a Text control. Relabel the Select control to Building and rename the Text control to Area inspected.
5. Relabel the Output Text control to Findings.
6. In the second section, add six Check Box controls. Relabel the Check Box controls to Overhead, Electrical, Furniture, Lighting, Trip, and Other.
7. Relabel the Text Area to Comments.
The layout of the coach view looks like the following screen capture:
Modify the appearance of the coach view:
1. Select the first section. In the general properties, set the Label visibility to Hide. Repeat this step for the other section.
2. In the configuration properties of the first section, enable Automatic Wrap. Repeat this step for the other section. By setting this property, if there is not enough room to display all of the controls side-by-side, the section moves some of them below the others instead of displaying scroll bars.
3. Select the horizontal section that contains the check boxes. In its configuration options, enable Style > Show Border.
4. Click Save or Finish Editing.
Create the Inspection CV coach view
1. Create a coach view labelled Inspection CV.
2. In the Variables page, add the following configuration options:
  - inspector(String)
  - inspectionDate(Date)
  When you create the configuration options, ensure that you set their type to String and Date.
3. In the Layout page, add a Text control and a Date Time Picker control. Relabel the Text control to Inspector and relabel the Date Time Picker control to Inspection date.
4. Select the Inspector control and, in its general properties, bind it to the inspector variable.
5. Click Save or Finish Editing.
Create the Inspection client-side human service:
1. Create the client-side human service labelled Inspection.
2. In the client-side human service diagram, rename the coach to Inspection Report.
Define the layout of the Inspection Report coach:
1. In the Coaches page, select the Inspection Report coach and then select to start with a two column grid.
2. Click Grid and then add a single column grid below two column grid. Click the alignment button in the middle of the cell to align its contents horizontally.
3. In the two cell grid, drag the border between the two so that left cell occupies 8 of the 12 columns. The editor displays the columns when you start dragging the border.
4. Click Content to switch to the content mode.
5. Drag a section into the first cell and then drag another section into the second cell. Rename the first section to Findings and the second section to Inspection.
6. Add two buttons to the single cell grid and then drag the OK button into the cell as well.
7. Rename the first button to Cancel, the second to Save and OK button to Submit Report.
8. In the Findings section, add the Findings CV coach view. In the Inspection section, add the Inspection CV coach view.
9. Click Save or Finish Editing.
10. Run the Inspection human service. The web browser opens and displays the coach.
Add more space between the Building and Area inspected controls. The elements in the Findings coach view must also align with each other.
1. Open the Findings CV coach view and select the Building control.
2. In the positioning properties, set the padding to 0px 20px 0px 0px. In the Padding field, the first number is for the top padding, the second number for the right padding, the third number is for the bottom padding, and the fourth number is for the padding margin.
  Alternatively, you can click the icon beside the Padding field. In the window that opens, type 20px in the Right field and 0px in the other fields. Click OK.
To remove the Inspection section for viewing the coach on a tablet:
1. Open the human service and switch to the medium screen by clicking on the palette.
2. Click Grid and select the Inspection cell. In the properties of the cell, set its Visibility to Hide. The palette displays the cell as an invisible item.
3. Drag the border of the Findings cell so that it occupies the entire grid.
4. Click Save or Finish Editing.
5. Run the human service again. If the browser is wider than 1024 pixels wide, the Inspection section is visible. If you reduce the width to 1024 pixels or less, the Inspection section disappears.
To make the buttons easier to use on a smart phone by stretching them across the screen:
1. Switch to the small screen by clicking on the palette.
2. Select the cell that contains the buttons. In the properties of the cell, set its Orientation to Vertical.
3. Click Save or Finish Editing.
4. Run the human service again. If the browser is less than 640 pixels wide, the buttons are stacked vertically.