Pages represent the ways your platform data is displayed to your users. Pages have the following settings available:
Pages created in Tangram require a corresponding custom front end to function. When you connect a custom front end, two versions of the page will exist: the front end version hosted by your front end provider (we will assume Webflow going forward, as this is the most common option for Tangram users), and the authenticated version hosted by Tangram. The Webflow version of your page is generally the one you want indexed by search engines and used by unauthenticated users. The Tangram version of the page pulls its source code directly from the webflow version and must be used if you're implementing custom nav bars or any other functionality that requires server side authentication.
Each Tangram platform has a global script tag that can be copied from the pages menu. This script tag should be implemented such that it renders in the head of all of your front end pages. If you're using webflow, you should place it in the project settings level header. Adding the global script tag is like giving your Webflow site a brain--it tells your front end pages what data to load and where to put it.
Sections determine what content should appear on a page and how it should render. Each section can have field groups attached to it, which determine what data is returned when the page data is requested. A section can also have filters attached to it, which allows you to dynamically pull select field values from the tangram app and render them on your front end for dropdown based search and filtering.
Field groups added to the connected field groups menu on the section settings for a page will be sent in the payload for that page when loaded. This allows you to control what data is shown on what front ends.
Pushed fields determine which fields are sent for each of your connected field groups. When a page is rendered, pushed fields are iterated through for each connected field group. If a record from one of your connected field groups has a value matching a pushed field, that value will be sent to the page. One nuance to be aware of is that pushed fields are checked for all connected field groups. If, for example, your users and listings both have a location and location is added to your pushed fields menu, location for both listings and users will be sent to your page.
Pushed filters allow you to send payloads for your filters to the page, which can then be used to populate dynamic dropdowns on your front end for filtering that are based on what values are used in your Tangram app.
Tangram data is rendered on custom front ends via custom attribute replacement. In order for data to render on a Tangram powered page, you need the following things:
Here is an example of what the front end code for a basic page might look like:
<html>
<head>
<script src = "your global script url"></script>
</head>
<body>
<section tg-section-id="your section id">
<div tg-import-type = "user">
<p tg-user-value = "display_name"></p>
<div tg-import-type = "listing">
<p tg-listing-value = "title"></p>
</div>
</div>
</section>
</body>
</html>
Here's a breakdown element by element of the important parts:
The script manager determines what scripts are loaded in via your global script tag. Tangram manages this automatically for the most part, but you may need to make changes to it if you're a power user. Any script added to this menu will be loaded in wherever on the page your global script tag has been added, usually the head of the document.
Import types are attributes you apply to a div wrapped outside the elements pulling into field data. E.g. the attribute tg-import-type = user must be around all elements with user attributes.
<div tg-import-type = user>
<p tg-attribute = display_name>Full Name</p>
<p tg-attribute = email>Email<p>
</div>Note: you can nest import types if you want both user and listing data on a page. On a listing details page you may want to also display some info about the user who created the listing.
<div tg-import-type = listing>
<p tg-attribute = TG_title_text-field>Listing Title</p>
<img tg-attribute = photo></img>
<p tg-attribute = [field_id]>Insert any custom field tied to listings</p>
/*You can nest import types within each other*/
<div tg-import-type = user>
<p tg-attribute = display_name>Full Name</p>
<p tg-attribute = [field_id]>Insert any custom field tied to users</p>
</div>
</div>