Mobile Age - Component - Record
A generic front-end component to display server data of one record. The details of the record can be displayed using the template mechanism. The template mechanism work together with front-end framewoks like bootstrap etc.
How to create a detailed view of a data record
- Use HTML code to specify a container with a unique id
<div id="unique_id"> ... some html used if JS doesn't work ... </div>
- Use a JavaScript array to initialize your data record with the required options, e.g. the data server's url etc.
<script> var options = { xhrMethod: "GET", xhrSource: 'https://mobileage.ftb-esv.de/frontend/php/data.pharmacy.php', xhrQuery: { id: "17", } }; <script>
- Create a new detail object, where as first parameter is the selector specifing the html container.
The second parameter is the array of the actually used options.
<script> new MobileAge.Component.Record("unique_id", options); <script>
Example 1: A simple data record
This example is using server data to print out the data of the record. The data is received from a server as a simple JSON-coded array.
Code
<div id="example_record_1">
... unobtrusive code ...
</div>
<script>
var options_1 = {
xhrMethod: "GET",
xhrSource: 'https://mobileage.ftb-esv.de/frontend/php/data.pharmacy.php',
xhrQuery: {
id: "17"
},
templateLang: "de",
templateSize: "medium"
};
new MobileAge.Component.Record("example_record_1", options_1);
</script>
Result
... unobtrusive code ...
Options
For a full list of available options, please refer to the Documentation for Record