Web Apps

Web Apps allow for the creation of simple databases that can be used to display information or drive things like photo galleries & event calendars.
(BC Gurus has a good video series which covers the basics of Web Apps.)

The way that these items are displayed is determined by the template that is being used. The template is set by the context of the viewing situation (i.e. looking at an individual web app item's page will use the Detail Layout) or can be specfied by a parameter that is included in the module that is being used to render a list of items onto a page.

Detail

Every web app item that is created is automatically given a URL. The Detail layout dictates what and how information from that particular web app item is displayed on the page. The template that a detail page will use can established at either the web app or individual web app item level.
Occasionally, this page is used as a way to pull in additional information to a page about a web app item in a background ajax load/parse. For example, the "Shows" web app on Marriott Theatre has a field which allows for a "Cast" web app item which corresponds to a show to be selected. This information is then used to load the content from that "Cast" web app item's details page, which is parsed and used to build the Artists tab found on a show's detail page.

List & List_backup

List layouts are responsible for helping create the majority of the instances where web app information is being displayed on a page. The List layout dictates how a single web app item should be displayed within a list. The standard way of using this functionality is specify markup in the list layout which is then renders each web app item in the list as an element on the page.
For example: if the List layout looks like this

<div>
    <h1>{tag_name}</h1>
    <p>{tag_description}</p>
</div>

and there are 3 web app items set up which have this info

Then the resulting markup on the page will look like this

<div>
    <h1>Blue Store</h1>
    <p>We sell food</p>
</div>
<div>
    <h1>Red Store</h1>
    <p>We sell food</p>
</div>
<div>
    <h1>Green Store</h1>
    <p>We sell books</p>
</div>

In situations were there are large numbers of web app items or if sorting and filter need to occur to the list of web app items that will be rendered, loading all the items directly onto the page as elements and then manipulating them is generally not effective or sometimes even feasible. In this case, the list is rendered into an inert container element (usually something like <script type="text/string"></script>) and then parsed to create some form of structured data which can then be manipulated or rendered to that page much more efficiently.
For example: using a List layout like this

{
    "name":"{tag_name}",
    "description":"{tag_description}"
},

and the same 3 web app items from the previous example, this markup can be created

<script type="text/string" id="stores">
{
    "name":"Blue Store",
    "description":"We sell food"
},
{    
    "name":"Red Store",
    "description":"We sell food"
},
{    
    "name":"Green Store",
    "description":"We sell books"
},
</script>

which can be parsed to create structured data that can be manipulated, rendered, or both.

// Cleaning up the provided text  
trailingCommaLocation = $('#stores').text().lastIndexOf(',');
stringWithNoTrailingComma = $('#stores').html().slice( 0, trailingCommaLocation );
parsableString = '['+ stringWithNoTrailingComma +']';  

// Creating a JSON object  
storeList = $.parseJSON(parsableString);

// Create elements on the page mimicking the prior template  
$.each(storeList, function(i,store){
  $('<div></div>')
    .append('<h1>'+store.name+'</h1>')
    .append('<p>'+store.description+'</p>')
    .appendTo('#originalTemplate');
});  

See a functional version of this code