Plans & Prices My Applications Cloud Resources Profile Support Login Sign Up

Dynamic HTML Overview    
This topic is assigned to Victor Robu

Sep 08, 2011 04:24 AM
“Dynamic HTML” is a mechanism that allows mapping the values from some JSON data onto an HTML defined in a specific file. The result will be a nicely designed HTML with some custom data from JSON.
How it works

The required components for the dynamic HTML are:
- JSON data
- template HTML file.

The JSON data provides the content that will be displayed on the page. It is usually requested from a server. The request can be specific to a user or a place. 

The HTML template will provide the structure and design for the content. This is usually a file that already exists on the device. The HTML contains specific blocks of text which act either as placeholders for some data (like “[%=first_name %]”) or introduce some processing logic for the data (like “[%for-each pics%]<img src="[%=.%]" />[%end for-each%]”)

Local HTML pages can also be updated using Sync Module. HTML pages are not static. They will be populated with server side data dynamically. It works very similar to XSLT transformations.

Example of an HTML file with our special tags:

<html>
<head>
<title>[%=profile.pagetitle%]</title>
</head>
<body>
<div>[%=profile.pagesubtitle%]</div>
<img src="[%=profile.imgsrc%]"><br>
Messages:<br>
<table>
[%for-each profile.messages%]
<tr>
   <td>[%=messagetext%]</td>
   <td>[%=messagedate%]</td>
</tr>
[%end for-each%]
</table>
</body>
</html>

In “app.xml” file for the appropriate page tag needs to be specified JSON datasource url, it’s the “jsonurl” attribute for the “page” tag and it can be any url  like for example http://seattleclouds.com/getuserprofilexample.ashx
Expected response in the body should contain the following JSON:

{"profile":{
pagetitle : "atitle",
pagesubtitle : "asubtitle",
imgsrc : "http://dine.com/images/image123.png",
messages: [
{messagedate:"1/5/2011", messagetext:"text1"},
{messagedate:"3/5/2011", messagetext:"text2"},
{messagedate:"6/5/2011", messagetext:"text3"}
]
}}

Custom tags in the html above will be replaced with data from JSON response resulting in a temporary html which will be rendered on the device’s screen.

<html>
<head>
<title>atitle</title>
</head>
<body>
<div>asubtitle</div>
<img src="http://dine.com/images/image123.png"><br>
Messages:<br>
<table>
<tr>
   <td>text1</td>
   <td>1/5/2011</td>
</tr>
<tr>
   <td>text2</td>
   <td>3/5/2011</td>
</tr>
<tr>
   <td>text3</td>
   <td>6/5/2011</td>
</tr>
</table>
</body>
</html>



NOTE: This type of data representation allow users to populate dynamically content of HTML/native pages without any design changes. This feature offers a possibility to interconnect iPhone app with database from your own server and make it more interactive.

If i dont want to display all messagedates but i want to display on my html only this {messagedate:"1/5/2011", messagetext:"text1"} ? I need to replace [%for-each profile.messages%] with what? :) Its the only i need to finish and my app will be ready!


Sep 10, 2011 02:46 PM
thx for explanations..is it possible to produce a tutorial or template for us ?

thx dear  Alice :))
I would be interested in something more concrete, for example if you wanted to define the appearance of images and text in a format that would be predictable that would be a good start.
yes, I would be interested in a simplistic step by step tutorial as well. thanks!


Sep 10, 2011 11:26 PM
Please


Sep 12, 2011 09:43 AM
We are working on template with dynamic HTML feature, it will be ready in a month or so.
When it will be ready dear Alice ?
I would also be interested in learning more about this proposed feature.
yes, I would be interested in this dynamic feature as well. thanks!


Sep 17, 2011 07:08 PM
can json files contain codes to be used? I don't really know how to make json / dynamic html links online but for example

I want to have this code made

<img src="link.jpg" width="320" height="480">
-----------------
Rather than
HTML File:
<img src="[%=profile.imgsrc%]" width="320" height="480">

Json File:
<
{"profile":{
imgsrc : "link.jpg",
}}

----------------
Can you do
HTML file
<div> [%profile.imgsrc%] </div>

JSON file
{"profile":{
imgsrc : "
<img src="link.jpg" width="320" height="480">",
}}



where the <img src> code is just pasted in the div?
Moreover can json files be hosted on any server that would produce a link?
 


Sep 18, 2011 02:50 AM
Marc,

Yes, you can have the code the way you asked, just make sure it is properly escaped. Note \ in the code snipped below.

Json files can be hosted on any server.
1<div> [%profile.imgsrc%] </div>
2 
3JSON file
4{"profile":{
5    imgsrc : "<img src=\"link.jpg\" width=\"320\" height=\"480\">",
6}}


Sep 18, 2011 01:23 PM
AWESOME! Loving this company more and more. Keep up the great work, I foresee a lot of business coming our way


Sep 26, 2011 10:58 PM
How would someone convert an xml file to json?


Oct 03, 2011 12:55 AM
Danielle,

you can search on Google and find a lot of online xml to json converters.




Nov 12, 2011 05:35 AM
Hey,

I'm just wondering if somebody could point me in the right direction with the step - In "app.xml" Alice mentioned. 

I've added a valid json URL to my page and included a few custom tags but the app just freezes on startup. If I turn the data source off it doesn't freeze. Ive looked around and can't find the 'app.xml' link which hopefully will solve my problem.

Cheers, Luc 


Nov 12, 2011 05:52 AM
Ah I've found app.XML now but the values were already there. I've even tried using the json URL above

http://dev.seattleclouds.com/getuserprofilexample.ashx

And my app just freezes on the splash page. 


Nov 16, 2011 09:40 PM
HEy Alice waw nice tutorail..i need to learn more pls can u giv simple/sample prjoect o dyamic html pages..to my email id...manzu_ppa@yahoo.co.in
thnks


Jan 20, 2012 04:53 AM
Hello, Alice

I try to make a demo following instructions in your tutorial, but have some troubles.
In preview mode there are tags [%%] as you can see on the screenshot:


What I've done:
Go to the edit page mode, add required code, paste link to the json file, click save.

Сan you tell me what's wrong?


Feb 08, 2012 11:01 PM
Can the json be pulled from a remote url source (like my own json api)?


Feb 22, 2012 05:56 AM
Hello, everyone

Ken, please open a support ticket on this matter, we will see what's the problem and try to fix it for you.

Anthony, yes, JSON can be taken from a remote URL.

Vladimir
SeattleClouds Team


Apr 27, 2012 09:20 AM

I am trying to call json from remote url and have the same issue. Could you please update us if there's any fix for this issue?


    1 2 3   next
You must login to post messages. Click here to log in.