Feed

KS
Last updated 4 months ago

Mason's Feed feature allows you to render a collection of data with identical UI.

Providing Data

Every Feed needs a Datasource. Your Feed will send a GET request to your configured Datasource at runtime. Prior to runtime, you must map a sample piece of data to your Feed's UI, so Mason knows how to render your data at runtime.

Attach a Datasource in the Datasources panel of the left tool sidebar. You may provide query and header parameters if you require authorization, and you will be able to provide dynamic values for them at runtime.

Data Format

The optimal method of providing data to Mason is to adhere to the JSON API Specification - which mandates that your response contain a data key at the top level, except in the event of an error. In order to work with the Mason Feed, which repeats data, the data key in your response object must contain an array.

{
"data": [
{
"comment": "This looks great!",
"user": {
"name": "John Appleseed",
"profileURL": "/users/2"
},
},
{
"comment": "I love it",
"user": {
"name": "Jane Bananapeel",
"profileURL": "/users/5"
}
}
]
}

Your data must adhere to one of two formats in order to be mapped my Mason. Alternatively, you may provide an array of JSON objects in the top-level of your response, like so

[
{
"comment": "This looks great!",
"user": {
"name": "John Appleseed",
"profileURL": "/users/2"
},
},
{
"comment": "I love it",
"user": {
"name": "Jane Bananapeel",
"profileURL": "/users/5"
}
}
]

Mapping Data

In order for your data to show up in your Feed, you must map pieces of data to UI elements. Use the Map JSON panel in the left tool sidebar to create connections between your data and your Feed UI. You can map image src properties to URLs, text and numeric input values, and any DOM element that contains text.

Pagination

Mason Feed implements infinite scrolling for as long as pagination data is provided in each response from the Feed's Datasource. Include pagination data in the top-level of your response as paging or links

{
"data": {
...
},
"paging": {
"next": "/my-feed-data?page=3",
"previous": "/my-feed-data?page=1"
}
}

Header parameters you've specified in your Datasource will be included in pagination requests, but query parameters will not. You should provide pagination URLs including query parameters.