Advanced Sample App

What is the Advanced Sample App?

This app was created to demonstrate how to use Domo's App Starter Kit and how commonly requested functionality is implemented in a robust custom app design.

The app demonstrates data formatting, filtering, and display. An "inventory" of products is displayed as well as summaries of transactions. The "Transactions" page demonstrates the use of widgets. Domo Widgets are reusable components that render d3 charts.

Because this app design is not attached to an instance of Domo, dataset requests are mocked in the products and transaction analytics factories. Comments are included to explain how production dataset requests are made. See the Domo Developer Guide for more information on dataset requests.

How Do I Use the Advanced Sample App?

1. Set Up Your Project

1. Clone this repo $ git clone https://github.com/DomoApps/advanced-sample-app.git
2. Install dependencies $ npm install

2. Development

$ npm start will run a development server that reloads on file changes

3. Publishing to Domo

1. Login to Domo $ domo login
2. Publish the app design $ npm run upload
3. Update the { id: ... } value in domo/manifest.json with your new app design ID

Datasets

The app is configured by default to mock any dataset requests with JSON files. In order to change this functionality to use "live" data:

1. Follow instructions on Domo University to create two Excel datasets. Both Excel files are located in the /data folder
2. Navigate to the two datasets in Domo and copy the IDs from the URL (https://{COMPANY}.domo.com/excel/{ID}/overview)
3. Replace the existing IDs in manifest.json with the new ones from step 2
4. In src/desktop/index.js change the value of MOCK_REQUESTS to false
5. Run npm run upload
6. Create a new card using the new custom app design by following the steps on the Developer Portal

For more information on available commands and usage, see the documentation for Domo's App Starter Kit.

Compatiblity

Tested and working

• Chrome (OSX)
• Safari (OSX)

Known Issues

• Windows
  • Sticky table header does not align with table body

Folder Structure

. // top level config stuff for webpack, karma, eslint, ect...
├── src
|    ├── common // common across desktop and responsive
|    |    ├── components // place for common components
|    |    |
|    |    ├── filters // place for common filters
|    |    |
|    |    ├── services // place for common services
|    |    |
|    |    ├── styles // place for common styles
|    |    |    ├── typebase.css // base type for all apps
|    |    |    └── variable.css // variables
|    |    └── index.js // JS entry for common Angular module
|    |
|    ├── responsive // a folder for each component
|    |    ├── components // place for dumb/presenter components common across routes
|    |    |
|    |    ├── containers // place for smart/container components common across routes
|    |    |
|    |    ├── routes // place for routes
|    |    |    └── my-route
|    |    |        ├── components // place for dumb/presenter components specific to this route
|    |    |        |
|    |    |        ├── containers // place for smart/container components specific to this route
|    |    |        |    └── my-container
|    |    |        |        ├── my-container.component.js
|    |    |        |        ├── my-container.component.css
|    |    |        |        └── my-container.component.html
|    |    |        |
|    |    |        └── index.js // define module and route
|    |    |
|    |    ├── responsive.config.js // responsive app top level configuration
|    |    ├── responsive.init.js // top level initialization code
|    |    ├── responsive.html // html entry (layout html goes here)
|    |    ├── responsive.css // common css for responsive
|    |    └── index.js // JS entry
|    |
|    └── desktop // same structure as responsive
|
└── dist // Generated by build
...