Guides

Response Data

Getting your model to output JSON, HTML, or even CSV files.

Suggest Edits

To control the types and shape of your model's response data, we use the Response event.

🚧

Canvas view required.

If you use the simplified pipeline view of a Summit model, a JSON response will be created for you. To write an HTML or CSV response, you'll need to create a Response event using the canvas view.

Response

Summit offers an event type called Response which allows us to compose a response object made of JSON, CSV, or HTML.

HTML

You can return HTML, most likely generated by a Text event, by specifying a Response event like so:

=Response("html")

The contents of this response event will dictate what appears in the HTML page view of your model.

You can also preview the HTML response of a model you are actively building using the HTML playground view.

HTML sent to this event on the canvas will be rendered in an <iframe>.

JavaScript & CSS

Summit is a "no-build" stack, meaning we do not provide a pipeline to build JavaScript applications or custom CSS files for styling. As such, we recommend using htmx for interactivity and Tailwind for styling using Tailwind's hosted CDN script.

You can add both of these libraries to your Summit pages and embeds by adding these script tags to your document head:

<head>
  <script src="https://unpkg.com/[email protected]" integrity="sha384-Y7hw+L/jvKeWIRRkqWYfPcvVxHzVzn5REgzbawhxAuQGwX1XWe70vji+VSeHOThJ" crossorigin="anonymous"></script>
  <script src="https://cdn.tailwindcss.com"></script>
</head>

CSV

You may also compose a comma-separated values text file using a Text event, and then send that data to a response like so:

=Response("csv")

This data will then be served up through your model's CSV endpoint, which can be downloaded for use "offline", or dynamically imported into Google Sheets using their =IMPORTDATA(url) formula.

JSON

We can use a Response event type to return JSON by instantiating it with an attribute using text:

=Response("items[]")

Or

=Response("answer")

In the former case, applying the [] tells SEL that this is an array. Any data sent to this event will be appended to the items array of the data attribute of your model's API response, like so:

{ 
  "data":
  [
    { 
      "items": ["mary", "lamb", "little"] 
    }
  ]
}

Whereas the use of answer will compose like so:

{ 
  "data":
  [
    { 
      "answer": "little" 
    }
  ]
}

Notice "little" appears as the value. That's because, assuming we sent these values in order, each subsequent value overwrote what was stored in the data object at this attribute.

The text passed into the Response event is a path. This means we can specify deeper locations to place data:

=Response("books.young_adult_fiction.items[]")

Will allow us to append to an items attribute nested beneath a higher-level young_adult_fiction object which is nested inside of a books object. Any entries in the path that do not exist at the time of assignment will be created on-the-fly.

The Response event is a singleton: there is only one. This means you can compose complex JSON structures by using multiple Response events with different paths or locations of where to append data. For example, if your canvas has these two events:

=Response("foo")

and

=Response("bar[]")

Your output would look like

{ 
  "data":
  [
    { 
      "foo": "dr pepper",
      "bar": ["diet pepsi", "coca-cola", "sprite"]
    }
  ]
}

👍

Data is an array

As you can see in the above blocks, the data entry of your overall model API response is a list (array) with a single entry (your Response data). This is by design, as many platforms, especially in the no-code space, prefer to receive and process lists of data instead of unfamiliar objects (your Response) at the top level.

Updated about 2 months ago