Data mocking methods

✔️Custom Code action

The simplest way to mock data is to create an action of JavaScript Code type, that will return the needed JSON object. For instance, if your API/DB table lists cars, you can do it in the following way:

The action can be then referenced in different UI Bakery fields using standard {{actions.newAction.data}} approach.

If you would also like to emulate the latency when requesting your data source, you can use Promises and setTimeout to return your data. For instance, your JS action can have the following code:

const fakeData = { id: 1, car: 'Mitsubishi', car_model: 'Montero', car_color: 'Yellow', car_model_year: 2002, car_vin: 'SAJWJ0FF3F8321657', price: '$2814.46', availability: false };
const delay = 2000;

return new Promise((resolve, reject) => {
  setTimeout(() => resolve(fakeData), delay);
});

One of the major benefits of using JavaScript Code action step is that you can easily replace your action with real data by simply changing the action type when you connect a real data source.

✔️State variables

State variables are a great way of mocking data when you not only want to mock reading data but also writing. Find out more about state variables:

State

✔️Google spreadsheets instead of SQL databases

SQL databases are often the data sources that people are most reluctant to expose publicly. Fortunately, Google spreadsheets function in a manner very similar to SQL databases within UI Bakery. This allows you to conveniently create a spreadsheet, where each sheet can be considered a table, and the cells in the first row can act as SQL columns:

After the spreadsheet is created, you can connect it as a data source and create actions to retrieve and write data to it.

✔️Mocking HTTP API with JSON-server

JSON-Server is an npm package that you can run locally or on a remote server which provides a simple interface to create fake JSON API. You can create Mock API in three easy steps:

1. Install JSON-server package: \

   npm install -g json-server

2. Create db.json file with similar format:\

   {
     "posts": [
       { "id": 1, "title": "json-server", "author": "typicode" }
     ],
     "comments": [
       { "id": 1, "body": "some comment", "postId": 1 }
     ],
     "profile": { "name": "typicode" }
   }

3. Run JSON server:\

   json-server --watch db.json

✔️UI Bakery's Test data sources

Don't forget that you can always use UI Bakery's Test data sources which are available right in the Data Source connect dialog:

Extra 1: Using UI Bakery's self-hosted version

When your data sources are only accessible from a local network, you can also install UI Bakery's self-hosted version and access it from there. UI Bakery self-hosted is easy to install and run, check it out 👇

UI Bakery on-premise

Extra 2: Using NgRok to proxy data sources

NgRok is a product that creates a secure tunnel from your data source to the internet. Learn more 👇

Connecting local database via ngrok