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.:
<!-- e.g.: render a search input: -->
<script>fatsecret.writeHolder("search");</script>

<!-- e.g.: render the name of a food: -->
<script>fatsecret.writeHolder("foodtitle");</script>

<!-- e.g.: render a food nutrition panel: -->
<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.
FatSecret Sites
For Developers

For Professionals

For Everyone

FatSecret Platform API

Support
API

About FatSecret

© 2017 FatSecret. All rights reserved.