---
title: "View source for Demo DreamFactory Applications - DreamFactory Wiki"
source: "https://wiki.dreamfactory.com/index.php?action=edit&title=Demo_DreamFactory_Applications"
canonical_url: "https://wiki.dreamfactory.com/index.php?action=edit&title=Demo_DreamFactory_Applications"
converted_at: "2026-10-23T06:00:45.674Z"
format: "markdown"
converted_by: "html-to-md-ai"
---
[]()
	
	
	
	# View source for Demo DreamFactory Applications

	
		
		← [Demo DreamFactory Applications](/Demo_DreamFactory_Applications)
		
		
		
		[Jump to navigation](#mw-head)
		[Jump to search](#searchInput)
		You do not have permission to edit this page, for the following reason:

The action you have requested is limited to users in the group: [Users](/index.php?title=DreamFactory_Wiki:Users&action=edit&redlink=1).---

You can view and copy the source of this page.

{{#seo:
|title=Demo DreamFactory Applications - DreamFactory Documentation
|title_mode=replace
|canonical=https://wiki.dreamfactory.com/Demo_DreamFactory_Applications
|og:title=Demo DreamFactory Applications
|og:type=article
|og:site_name=DreamFactory Documentation
}}
= Demo DreamFactory Applications =
We regularly receive requests for examples involving connecting DreamFactory to a web interface. In this chapter we'll include several examples involving modern JavaScript technologies, and in the near future will provide a GitHub repository where these and other examples can be downloaded.

<span id="dynamic-dashboard-with-pagination-sorting-and-filtering"></span>
== Dynamic Dashboard with Pagination, Sorting, and Filtering ==

R&D departments and others interested in rapid prototype development regularly turn to DreamFactory for quickly exposing data through an API which can then be connected to a web-based interface such as a dashboard. This sort of project is particularly easy since numerous interactive table-oriented JavaScript libraries can be configured to consume an API endpoint. One such solution is [https://tabulator.info/ Tabulator].

In this example (screenshot below), viewable at https://tabulator.demo.dreamfactory.com/ and with the source code available on [https://github.com/dreamfactorysoftware/dreamfactory-tabulator GitHub], we've configured a MySQL database API containing almost 5 million records, and used Tabulator to present 300,000 records residing in one of the tables.

{{Tip|You can interact with a live version of this application at https://tabulator.demo.dreamfactory.com/.}}

[[File:tabulator.png|thumb|Example DreamFactory Application with Tabulator]]

Check out the [https://github.com/dreamfactorysoftware/dreamfactory-tabulator GitHub project README] for information regarding how DreamFactory was configured to expose this API, and how you can easily configure this project to consume your own API.

<span id="progressive-web-application"></span>
== Progressive Web Application ==

The above dashboard example certainly has its purposes, however web applications are often much more involved. For instance, you might connect to multiple data sources such as Salesforce and MySQL, and require users to authenticate via an authentication services provider such as Okta. Further, the interface must be responsive, capable of suiting different screen sizes (phone, tablet, and desktop).

We've created a demo application (screenshots below) to suit this more ambitious set of requirements. It's live at https://pwa.demo.dreamfactory.com/, and the source code is downloadable via [https://github.com/dreamfactorysoftware/dreamfactory-demo-pwa GitHub].

{{Tip|You can interact with a live version of this application at https://pwa.demo.dreamfactory.com/. Use the test credentials alex.smith@dreamfactory.com / TE%W2E%g0Lud0q8Gej to login!}}

[[File:pwa-departments-mobile.png|thumb|Progressive Web Application Powered by DreamFactory]] [[File:pwa-customers-mobile.png|thumb|DreamFactory PWA Application Customers Screen]] [[File:pwa-customer-mobile.png|thumb|DreamFactory PWA Application Customer Show Page]]

<span id="creating-a-simple-status-dashboard"></span>
== Creating a Simple Status Dashboard ==

This example demonstrates how to create a simple dashboard which will display status information (enabled or disabled) for a series of devices. Because a picture is worth a thousand words, let's start with a screenshot of the finished product:

[[File:status-dashboard.png|thumb|Status Dashboard Application Powered by DreamFactory]]

The device information is stored in a database table called <code>devices</code>. Naturally any DreamFactory-supported database could be used, however for sake of example we'll include the MySQL table creation statement here:

<syntaxhighlight lang="sql">
CREATE TABLE `devices` (
  `id` int(11) unsigned NOT NULL AUTO_INCREMENT,
  `name` varchar(100) DEFAULT NULL,
  `status` tinyint(4) DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=11 DEFAULT CHARSET=latin1;
</syntaxhighlight>
After generating the API within your DreamFactory instance (see [[Generating_Database_Backed_Api|Generating a Database-backed API]] to learn how to create a database-based API), it's time to create the web page which will interact with the API and present the data. We started by creating a new web page containing a simple HTML5 template. There are plenty such templates online, however we're fans of the version provided by [https://www.sitepoint.com/a-basic-html5-template/ SitePoint]. Here's what the starter file looks like:

<syntaxhighlight lang="text">
<html lang="en">
<head>
  <meta charset="utf-8">

  <title>Status Dashboard</title>
  <meta name="description" content="Simple status dashboard">
  <meta name="author" content="">

</head>

<body>
</body>
</html>
</syntaxhighlight>
Next, we're going to take advantage of three popular open source/free solutions for executing AJAX calls and page design. These include:

* [https://getbootstrap.com/ Bootstrap]: Bootstrap is the world's most popular front-end component data, used on hundreds of thousands if not millions of websites around the globe. We'll use Bootstrap's CSS styles for stylizing the tabular layout.
* [https://github.com/axios/axios Axios]: Axios is a JavaScript-based HTTP client. We'll use Axios to craft AJAX calls which will talk to the database API.
* [https://fontawesome.com/ Font Awesome]: FontAwesome is a very popular icon library. We'll use two of FontAwesome's icons to visually depict device status.

With these libraries added, the template looks like this:

<syntaxhighlight lang="text">
<html lang="en">
<head>
  <meta charset="utf-8">

  <title>Status Dashboard</title>
  <meta name="description" content="Simple status dashboard">
  <meta name="author" content="">

  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
  integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
  crossorigin="anonymous">

  <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" type="text/css" rel="stylesheet">

  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

</head>

<body>
</body>
</html>
</syntaxhighlight>
Next up is the JavaScript. We've purposely chosen to use standard JavaScript for this project rather than using more convenient third-party libraries such as React or VueJS. That said, we recognize there are far more eloquent JavaScript-based approaches to this problem, but didn't want to provide an example which required an additional learning curve or potentially extra configuration. With that said, add the following snippet to the <code>head</code> tag of your template, directly below the libraries we referenced in the previous snippet:

<syntaxhighlight lang="text">
<script>

  var error = '';
  var rows = '';
  var disabled = "<i class='fa fa-exclamation-triangle' style='color: red;'></i>";
  var enabled = "<i class='fa fa-thumbs-up' style='color: green;'></i>";
  window.onload = function() {
    axios.get('https://example.com/api/v2/mysql/_table/devices', { 'headers': { 'X-DreamFactory-Api-Key': 'YOUR_API_KEY_GOES_HERE' }})
    .then(function (response) {

      for (var i= 0; i < response.data.resource.length; i++) {
        if (response.data.resource[i].status == 0) {
          var status = disabled;
        } else {
          var status = enabled;
        }
        rows += "<tr><td>" + response.data.resource[i].name + "</td><td>" + status + "</td></tr>";

      }
      document.getElementById('rows').innerHTML = rows;
    })
    .catch(function (error) {
      error = error;

   });
};
</script>
</syntaxhighlight>
The only required change you'll need to make to the above snippet is replacement of the <code>YOUR_API_KEY_GOES_HERE</code> with the actual API key you've configured to communicate with the API. If you don't know how to configure an API key, please refer to [[Generating_Database_Backed_Api|Generating a Database Backed Api]].

All that remains is the HTML. In the following snippet you'll see we've defined a simple HTML table, adorned with CSS classes exposed by the Bootstrap library. The <code>tbody</code> element is assigned the <code>rows</code> ID, which is what the above JavaScript will use to insert the table rows into the appropriate page location:

<syntaxhighlight lang="text">
<div class="container">
  <div class="row">
    <div class="col">
      <h1>Status Dashboard</h1>
      <table class="table table-striped table-bordered">
        <thead class="thead-dark">
          <th>Device</th>
          <th>Status</th>
        </thead>
        <tbody id="rows">
        </tbody>
      </table>
    </div>
  </div>
</div>
</syntaxhighlight>
<span id="conclusion"></span>
== Conclusion ==

Return to this chapter often as we'll be periodically updating it with new examples!

[[Category:Legacy_Guide]]
[[Category:Demo]]
[[Category:DreamFactory]]
Template used on this page:

- [Template:Tip](/Template:Tip) ([view source](/index.php?title=Template:Tip&action=edit))

Return to [Demo DreamFactory Applications](/Demo_DreamFactory_Applications).

Retrieved from "[https://wiki.dreamfactory.com/Demo_DreamFactory_Applications](https://wiki.dreamfactory.com/Demo_DreamFactory_Applications)"