Response Data
Getting your model to output JSON, HTML, or even CSV files.
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 (yourResponse
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 (yourResponse
) at the top level.
Updated 2 months ago