Data mocking methods
βοΈCustom Code action
The simplest way to mock data is to create an action of the 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);
});
βοΈ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 variablesβοΈ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:
Install JSON-server package: \
npm install -g json-server
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" } }
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-premiseExtra 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 ngrokLast updated
Was this helpful?