<!-- 
/*
Copyright 2017 apHarmony

This file is part of jsHarmony.

jsHarmony is free software: you can redistribute it and/or modify
it under the terms of the GNU Lesser General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.

jsHarmony is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU Lesser General Public License for more details.

You should have received a copy of the GNU Lesser General Public License
along with this package.  If not, see <http://www.gnu.org/licenses/>.
*/
-->
<script type="text/x-tutorial-info">
{
  "Title": "How Models Work Together",
  "Menu": ["Models","Models Overview"]
}
</script>

<h3>Types of Model Layouts</h3>
There are six basic model layouts: "grid", "form", "form-m", "multisel", "exec", and "report".  These six building blocks work together to create complex layouts in jsHarmony applications.

<h3 data-level="2">Grid Layout</h3>
Grids are the heart of a jsHarmony application.  Grids enable a user to view, add, or edit data, multiple records at a time.  Grids may be designed with either editable controls or read-only rows, and can link to a popup form for further editing.<br/>

<h4>Editable Grid:</h4>
<%-getScreenshot('jsHarmonyTutorials/Cust_Listing_Editable?popup=1','Editable Grid')%>

<h4>Read-only Grid:</h4>
<%-getScreenshot('jsHarmonyTutorials/Cust_Listing?popup=1','Read-only Grid')%>

Most systems will start with a grid, and then progress to forms for editing data.

<h3 data-level="2">Form Layout</h3>
A form enables the user to view, add, or edit one data record.<br/>
<br/>
Forms consists of fields and additional child forms.  Child forms can be embedded via subforms, tabs, or Popup LOVs (Popup List of Values).<br/>
<br/>
All parent and child form data will be saved in one transaction, and only the topmost writable parent form will have a "Save" button.

<h4>Simple Form:</h4>
<%-getScreenshot('jsHarmonyTutorials/Cust?action=update&cust_id=1','Simple Form')%>

<h4>Parent / Child Subforms:</h4>
<%-getScreenshot('jsHarmonyTutorials/Cust_Container?cust_id=1&action=update','Parent / Child Subforms')%>
The above example consists of 4 forms:
<ul>
  <li>The container form with tabs for "Overview" and "Contacts" (Cust_Container)</li>
  <li>The select tab (Cust_Subform), with two subforms</li>
  <li>The first subform "Address" (Cust_Address)</li>
  <li>The second subform "File" (Cust_Subform_File)</li>
</ul>

<h4>Parent / Child Grid:</h4>
<%-getScreenshot('jsHarmonyTutorials/Cust_Container?action=update&cust_id=2&tabs=%7B"jsHarmonyTutorials%2FCust_Container"%3A"jsHarmonyTutorials%2FCust_Contact_Listing"%7D','Parent / Child Grid')%>
The above example consists of 2 forms:
<ul>
  <li>The container form with tabs for "Overview" and "Contacts" (Cust_Container)</li>
  <li>The select tab (Cust_Contact_Listing) with the grid</li>
</ul>

<h3 data-level="2">Form-m Layout</h3>
Form-m enables a user to view, add, or edit multiple records.  Data is edited one record at a time, using backward / forward navigation.<br/>
<br/>
A "form-m" is typically used for navigating a small subset of data, and is implemented as a subform of a parent form (ex. editing multiple addresses of a Customer).  All new or modified data is saved in one transaction.
<%-getScreenshot('jsHarmonyTutorials/Cust_Address_Container?cust_id=1&action=update','Form-m')%>

<h3 data-level="2">Multisel Layout</h3>
A multisel displays a checkbox-based List of Values, where multiple values can be selected per "key".  Multisels are primarily used to enter data in many-to-many relationships.
<%-getScreenshot('jsHarmonyTutorials/Cust_Container?action=update&cust_id=2&tabs=%7B"jsHarmonyTutorials%2FCust_Container"%3A"jsHarmonyTutorials%2FCust_Flag"%7D','Multisel')%>

<h3 data-level="2">Exec Layout</h3>
Exec forms are unbound, except during initial load.  Exec forms can be used for:
<ul>
  <li>API Endpoints for SQL Operations / Procedures</li>
  <li>Custom User Interfaces</li>
</ul>
<%-getScreenshot('jsHarmonyTutorials/Cust_Exec?action=update&cust_id=1&popup=1','Exec Form')%>

<h3 data-level="2">Report Layout</h3>
Reports have two components - the form used to enter report parameters, and the actual report, which is a PDF rendered from generated HTML.
<%-getScreenshot('jsHarmonyFactory/Reports/SysUser_Listing?popup=1','Report')%>