Layout of the Default View
This topic explores the elements that compose the default App Studio view.
The default view looks like this:
As we explore the components of the page, we will highlight each area in turn.
Include a partial file
The header of the default view is a partial file that is included with the layout:include
tag:
<layout:include file="views/partials/header.tpl.html" action="search"></layout:include>
The header.tpl.html
file, in turn, contains a number of layout
tags, plus the important search:box
tag.
Sidebar with facet list
The sidebar is rendered using the simple layout:sidebar
tag. Within the sidebar, the search:facet-list
and search:facet
tags contain the parameters that configure the facet fields and their display.
<layout:block md="1-3" lg="1-4" drawer="left" id="sidebar" styling="blocksidebar-light">
<layout:sidebar>
<layout:box>
<!-- List facets and give them intuitive labels -->
<search:facet-list facet-names="genres_ss" response="response" platform="platform" query="query" styling="facet-list facet-list-wrappedheader">
<search:facet when-field="genres_ss" show="10" search-enabled="true" platform="platform" query="query" max-characters="40" show="12" show-more="24" collapsible="true"></search:facet>
<search:facet show="10" max-characters="40" show="12" show-more="24" collapsible="true"></search:facet>
</search:facet-list>
</layout:box>
</layout:sidebar>
</layout:block>
Search statistics and results list
In the content area, layout
tags are used again to construct the grid layout. For brevity, we will omit those from the code samples below.
The search:response-statistics
tag displays the number of search results, and a {{ response.time }}
variable displays the number of milliseconds Fusion took to respond:
<search:response-statistics response="response"></search:response-statistics>
<p class="response-statistics">(Fusion took {{ response.time }}ms)</p>
Then, the search:result-list
tag lays out the grid of search results:
<search:result-list response="response" styling="cards-sm-1 cards-lg-2 cards-xl-2" platform="platform" query="query" instant-results="true">
...
</search:result-list>
Individual results
The search:result
and search:field
tags configure which fields are displayed with each individual search result. A field can be styled as the title or description, and any additional fields can have a variety of styles.
<search:result>
<search:field name="title_txt" styling="title" urlfield></search:field>
<search:field name="year_i" styling="description" max-characters="150"></search:field>
<search:field name="genres_ss" styling="label-left"></search:field>
</search:result>
Null search results
In the case of no search results, the search:no-results
tag displays a default message:
<search:no-results response="response"></search:no-results>