Types of JSS Manifest data

A minimal route definition contains a name (used to construct the route segment). Most routes also define placeholders, defining a set of front-end components and data placed inside JSS Placeholder components of the same name.

In the sample apps, routes are defined in /data/routes/[path-to-route]/[language].{yaml|yml|json}. For example, /data/routes/en.yml is the route data for the / route in English, or /data/routes/about/es-MX.yml is the data for the /about route in Spanish (Mexico).

# /data/routes/about/en.yml

# name: names the route segment. Should match parent folder name.
name: about
# The root of the layout for this route
placeholders:
  # defines the components that belong in the 'main' placeholder
  # defining the appname-main placeholder requires a <Placeholder key="appname-main"> component added to the root app component
  appname-main:
  # Adds a component called 'Heading' to the route in the 'main' placeholder
  - componentName: Heading
    # Component data can be as complex as a reference to another component (see the reference),
    # or as simple as defining field values that the component receives
    fields:
      # To use fields, they must be defined on the component definition (see below)
      # a field consists of a top-level named object and a child value which may be a simple string,
      # or something more complex for fields like images
      titleField:
        value: Page Title
      imageField:
        value:
          src: "/assets/img/logo.png"
          alt: Logo
    # A component can itself expose placeholders (for example, Heading might expose 'appname-heading-content') that contain more components
    # Child placeholders are defined hierarchically under the component that exposes them
    placeholders: 
      appname-heading-content:
      - componentName: ContentComponentSample
        fields:
          # ...

{
  "name": "about",
  "placeholders": {
    "appname-main": [
      {
        "componentName": "Heading",
        "fields": {
          "titleField": {
            "value": "Page Title"
          },
          "imageField": {
            "value": {
              "src": "/assets/img/logo.png",
              "alt": "Logo"
            }
          }
        },
        "placeholders": {
          "content": [
            {
              "componentName": "ContentComponentSample"
            }
          ]
        }
      }
    ]
  }
}

Component content is a way to share components between routes. A typical scenario for using component content might be sketching out a JSS site with only lorem ipsum text and FPO (for placement only) images and therefore not wanting to maintain many copies of the same component. Or that there are pieces of content shared across multiple routes.

Component content is organized in a similar folder structure to routes (/data/component-content), with the same folder-and-language naming convention. Conventionally, you store component content under a folder named for the component it defines. For example, /data/component-content/<ComponentName>/id/en.yml.

The content of a shared component looks exactly like a component added directly to a route, except that you must specify an id and a name attribute so it can be referred to. The ID value must be unique across the entire JSS application.

# /data/component-content/Heading/fpo-heading/en.yml

id: fpo-heading
name: FPO Fake Heading
componentName: Heading
fields:
  titleField:
    value: Page Title

Using the shared component on routes is very simple: you add a component to a placeholder. Instead of specifying a componentName and name, you specify only the id:

# /data/routes/en.yml

name: home
placeholders:
  appname-main:
  - id: fpo-heading

In the previous example, the fpo-heading reference is on the home route. All of its data is expanded into the home route layout.

Another way to reference content that takes effect when you import the site into Sitecore is copying. When you import a reference like fpo-heading, in Sitecore, all usages of that reference are placed in a single content item. It facilitates sharing content (such as copyright).

To reference content when importing the site into Sitecore through copying simply add copy: true to your ID reference:

# /data/routes/en.yml

name: home
placeholders:
  appname-main:
  - componentName: Tabs
    placeholders:
      appname-tabs:
      - id: fpo-tab
        copy: true
      - id: fpo-tab
        copy: true

With the setup defined here, the two tabs are shared while disconnected. When imported to Sitecore, they become separate items that you can change independently.

{
  name: 'my-route',  
  placeholders: {
    jss-main: [
      {
        componentName: 'my-component',
        params: {
          paramName: 'paramValue'
        }
      }
    ]
  }
}

It is possible to define content items that are neither routes nor shared component content. Examples include items that contain content for static items or items that are shared options for multi-list fields in content.

Content items work exactly like component content, with two exceptions:

JSS lets you develop multilingual applications while working disconnected. A common requirement in multilingual applications is to have a dictionary that translates non-content text elements such as form labels or global elements.

JSS sample applications define their dictionaries under /data/dictionary - a single file per language, such as en.yaml or es-MX.json, is added with a simple mapping between dictionary key and value:

# /data/dictionary/es-MX.yaml

Login: Iniciar sesión
Close: Cerca
LoginFailed: Nombre de usuario y / o contraseña inválido.