Manually Loading Content
As described in the
Quick Start and
How It Works guides,
the
sections of each
canvas in a FatSecret Platform application are automatically positioned using a predefined template. Manually loading content permits you to "break" these
predefined templates and layout the
sections of your application as you need. For instance, you can intersperse
sections of application content with your own content, change the CSS
style of one or more
sections, or choose not to show one or more
sections of a particular
canvas.
In order to manually load content you must instruct the API not to use the predefined "template" on your web page. To do this, you specify the
auto_template script URL parameter with a value of
false:
<script
src="http://platform.fatsecret.com/js?key=XXXXX&auto_template=false"></script>
Following this, you use JavaScript to load the individual sections of the canvas on the page, e.g.:
<script>fatsecret.writeHolder("search");</script>
<script>fatsecret.writeHolder("foodtitle");</script>
<script>fatsecret.writeHolder("nutritionpanel");</script>
Note that when the content of a FatSecret Platform application is manually loaded on a web page, that page can only be used for a single canvas.
Demonstration - overriding the food.get canvas:
The steps below demonstrate how to provide a customized view of the
food.get
canvas. The steps include the creation of two web pages, both part of the same application. The
food.get
canvas will have it's own dedicated page
food.html, all other
canvas content will be loaded on the second page
home.html.
1. Add a FatSecret Platform application to a web page
Create a new web page called home.html which embeds the FatSecret Platform application:
home.html
<script
src="http://platform.fatsecret.com/js?key=XXXXX&theme=blue"></script>
Figure 1: FatSecret Platform application in the blue theme
2. Add a directive to load the food.get canvas at an alternate URL
We will override the
food.get canvas to just show the search box, food
title and the nutrition panel
sections. Use the
fatsecret.setCanvasUrl
script function to set the
food.get canvas to point to
http://www.example.com/food.html
home.html
<script>
fatsecret.setCanvasUrl("food.get", "http://www.example.com/food.html");
</script>
All calls to the
food.get canvas will be redirected
to
http://www.example.com/food.html.
3. Create a dedicated web page for the customized canvas
Import the script tag in
food.html and set the value of the
auto_template
script URL parameter to
false to override the predefined template.
food.html
<script
src="http://platform.fatsecret.com/js?key=XXXXX&auto_template=false"></script>
4. Customize the canvas as you require
Set up a new template for the
food.get canvas. There are two ways to achieve this.
E.G.: using the
fatsecret.addRef method to replace HTML objects with the
sections.
food.html
<div
id="search"></div>
<div
id="food_title"></div>
<div
id="nutrition_panel"></div>
<script>
fatsecret.addRef("search", "search");
fatsecret.addRef("foodtitle", "food_title");
fatsecret.addRef("nutritionpanel", "nutrition_panel");
</script>
This replaces the inner HTML of the div with id search with the search section, the div with id food_title with the foodtitle section and the div
with id nutrition_panel with the nutritionpanel section.
E.G.: using the
fatsecret.writeHolder method to write out the
sections directly.
food.html
<script>fatsecret.writeHolder("search");</script>
<script>fatsecret.writeHolder("foodtitle");</script>
<script>fatsecret.writeHolder("nutritionpanel");</script>
Figure 2: Our own layout for the food.get canvas
5. Link back to the URL of the main application page
In order to have the
search section of the customized canvas redirect to
home.html to render search results, use the
fatsecret.setDefaultCanvasUrl script function:
food.html
<script>
fatsecret.setDefaultCanvasUrl("http://www.example.com/home.html");
</script>
Any action executed on the customized canvas that forces a new canvas to load will redirect from food.html back to http://www.example.com/home.html
See
Sample Code for manually loading the
food.get canvas.