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

  1. Use HTML code to specify a container with a unique id
    <div id="unique_id"> ... some html used if JS doesn't work ... </div>
  2. 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>
  3. 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