Introduction to App Studio Markup

The App Studio markup language defines a set of HTML-like elements, or tags, for defining search queries to the backend and visualizing the search results and facets, handling all the complexities of connecting to Fusion.

You can get detailed information about every App Studio tag in the Reference Guides. You can also see visual examples with reusable code snippets in the App Studio Gallery.

Connect to Fusion

The most important tags in every page template are the first three, which configure how App Studio connects to Fusion:

  • Define which provider to use (the search:platform).

  • Create a query from the URL, or any parameters you explicitly declare (the search:query).

  • Send the query to the platform and obtain a response (the search:response).

Below is an example from the default template:

<search:platform var="platform" conf="platforms.fusion.data"></search:platform>
<search:query var="query" parameters="*" results-per-page="12"></search:query>
<search:response var="response" platform="platform" query="query">
    <widget:spinner></widget:spinner>
</search:response>

The search:platform tag

The search:platform tag specifies the endpoint where App Studio obtains its data, pointing to a specific platform configuration endpoint.

See search:query for additional available parameters.

In this case we declare a data provider (platform) for a particular Fusion collection and set of parameters to search through an index.

<search:platform var="platform" conf="platforms.fusion.data"></search:platform>

See search:platform for additional available parameters.

The search:query tag

The search:query tag constructs an App Studio query object. You can choose to build a query from scratch by passing in the parameters you want or you can have it automatically created from the page URL.

Here’s how you build a query using all query string parameters, and default to 12 results per page:

<search:query var="query" parameters="*" results-per-page="12"></search:query>

If you didn’t want the user to be able to specify results per page you would simply omit that parameter when building a query from the URL:

<search:query var="query" parameters='*,-rpp' results-per-page="12"></search:query>

See search:query for additional available parameters.

The search:response tag

The search:response tag brings the platform and the query together.

In the example below we refer to the previously-defined platform and query by variable name:

<search:response var="response" platform="platform" query="query">
    <widget:spinner></widget:spinner>
</search:response>

See search:response for additional available parameters.

Control the page layout

The layout tags determine the layout and structure of the page. Using these ensures that the application will work equally well on desktops, mobiles and other devices (like high-resolution screens).

App Studio uses a grid layout to control how large sections appear on the screen, and how they behave when the visible area or resolution changes.

A simple grid:

<layout:grid>
  <layout:block small="1-2" large="1-4">
    Narrow section on large screens.
  </layout:block>
  <layout:block small="1-2" large="3-4">
    Wide on large screens.
  </layout:block>
</layout:grid>

See the following reference topics for complete information about layout tags: