Configuration

App Tile and Side Panel

All apps in You.com have app tiles and some have side panels.

Example News tiles:

A reviews side panel:

The template language allows you to define layouts for both app tiles and the side panel.

So on the highest level, divide your template file into an an array of appTiles and a sidePanel object. If an apptile has a sidepanel, it will have a Open sidepanel button:

template.json

{
  "appTiles": [
    {
      // appTile config goes here
    }
  ],
  "sidePanel": {}
}

In the app editor, you have the option of providing example data to inject into the UI. When your open platform app is deployed, that data (if applicable) should come from your API or one of our services.

App Settings

To give our search engine important info about your app. You can use the appSettings object at the top-level of your config.

appSettings props

{
  appSettings: {
    appName: string, // required if you want to use an API
    appShortDescription: string,
    appLongDescription: string,
    appLogo: string, // a link to your icon,
    appHeroImages: Array<string> // links to images
    developerName: string,
    developerWebsite: string,
    displayAppWithoutData: boolean // pretty self explanatory
  }
}

UI components

An open platform app will consist of components and layouts. The template language has a predefined list of components that you can use in your app's UI.

The most fundamental component is the layout_list. This component allows you to create horizontal or vertical lists/groups of components. It's also used to map over an array of data, rendering some items for each data. For a more in depth explanation with examples, go to the layout_list documentation page.

Accessing API data from a component

To access API data from any component in the template language, simply use the {{ }} templating helper. You can treat this as the equivalent of accessing an object's properties in conventional programming languages (i.e. to access the name of a pokemon, simply use{{ pokemon.name }}).

There are also helper functions that can be used to manipulate data from the helpers.

Using the templating helper to access data

// Image header component
{
  "type": "image_header",
  "href": "{{ image.url }}",
  "title": "This is the title - {{ title.text }}", // you can format it!
  "image": "{{ image.source }}"
}

// Corresponding data object
{
  "image": {
      "url": "https://you.com",
      "source": "https://you.com"
  },
  "title": {
      "url": "https://you.com",
      "text": "Example Title"
  }
}