<!-- 
/*
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": "Model Titles",
  "Menu": ["Models","Models Overview"]
}
</script>

<div class="tutorials_intro" style="padding-bottom:10px;">
  Model titles are displayed at the top of each window.  Titles can be defined with:
</div>

<h4>Default Title</h4>
If the title is not defined, the model.caption will be used as the title.  If the model.caption is not defined, the model ID will be used as the title.

<h4>Browser Window Title (document.title)</h4>
The topmost form's title will be used as the window title. (ex., "Customer Information")
<%-getScreenshot('jsHarmonyTutorials/Cust_Subform?cust_id=1&action=update','Parent / Child Grid',{ height: 300 })%>
On a tabbed form, if the parent form's title is set to blank, the window title will be set to the title of the selected tab. (ex., "Customer Information")
<%-getScreenshot('jsHarmonyTutorials/Cust_Container?cust_id=1&action=update','Parent / Child Grid',{ height: 300 })%>

<h3 data-level="2">Static Text</h3>
In the simplest scenario, a model can have a text title:
<pre>
{
  "title": "Customer Management"
}
</pre>

<h3 data-level="2">Different titles for "Insert", "Browse", and "Update" modes</h3>
Titles on forms can be customized based on whether the user is inserting, browsing, or updating a record:
<pre>
{
  "title": {
    "insert": "Add Customer",
    "browse": "View Customer",
    "update": "Edit Customer"
  }
}
</pre>

<h3 data-level="2">GET Parameters / Breadcrumb Data / Form Data / System parameters</h3>
Dynamic parameters can be inserted into the title.  When using dynamic parameters, the title will be rendered after the form data is loaded.

<h4>GET Parameters</h4>
Querystring / GET parameters can be added via the following syntax:
<pre>
{
  "title": "Customer <#=_GET.CUSTOMER_ID#>"
}
</pre>

<h4>Breadcrumb Data</h4>
SQL data returned from the breadcrumbs query can be rendered in the title:
<pre>
{
  "title": "Customer <#=bcrumbs.CUSTOMER_ID#>"
}
</pre>

<h4>Form Data</h4>
SQL data returned from the form select query can be rendered in the title:
<pre>
{
  "title": "Customer <#=data.CUSTOMER_ID#>"
}
</pre>

<h4>System Parameters</h4>
System parameters that are defined in jshSite's globalparams can be rendered in the title.  The globalparams object is stored in the client-side JavaScript window object under jshInstance.globalparams.
<pre>
{
  "title": "Welcome @user_name"
}
</pre>

<h3 data-level="2">SQL-generated Titles</h3>
Titles can be generated using custom SQL.

<h4>Basic SQL syntax:</h4>
<pre>
{
  "title": { "sql": "select 'Date '||getdate()" }
}
</pre>

<h4>SQL w/Parameters:</h4>
Keys and foreign keys that are defined in model.fields can be used as SQL parameters.
<pre>
{
  "title": { "sql": "select cust_name||' Contacts' from cust where cust_id=@cust_id" }
}
</pre>

<h4>Insert / Browse / Update Titles</h4>
Different titles can be displayed when inserting, browsing, or updating data:
<pre>
{
  "title": {
    "insert": "New Customer",
    "browse": {"sql": "select cust_name||' (Read-only)' from cust where cust_id=@cust_id" },
    "update": {"sql": "select cust_name from cust where cust_id=@cust_id" }
  }
}
</pre>
On an update action, if the "update" title is not set, the "browse" title will be used.<br/>
Similarly, on a browse action, if the "browse" title is not set, the "update" title will be used.<br/>

<h4>Ignoring datalocks:</h4>
In some instances, the developer may choose to ignore datalocks in the query:
<pre>
{
  "title": { "sql": "select cust_name||' Contacts' from cust where cust_id=@cust_id", "nodatalock": ["cust_id"] }
}
</pre>