Mocking data
Sometimes, you might not wish to immediately connect your data source to UI Bakery. There could be various reasons for this, such as the data source not being publicly accessible, having certain security restrictions, or simply feeling a bit lazy. We completely understand these situations as we've experienced them ourselves! In this article, we will describe a couple of common methods that demonstrate how you can mock your data in UI Bakery.
Using Custom Code action type
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 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:
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.
Using state variables
State variables are a great way of mocking data when you not only want to mock reading data but also writing. We have a separate article on State Variables. You can find the link to it below:
Google Spreadsheets instead of SQL databases
SQL databases are often the data source 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 as a table, and the Cells in the First Row can act as SQL columns:
After SpreadSheet is created, you can connect it as a Data Source and Create Actions to retrieve and write data to it.
Mock 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 using 3 easy steps.
Install JSON-server package:
Create
db.json
file with similar format:Run JSON server:
UI Bakery's Test data source
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. You can read more about it using the link below:
Extra 2: Using NgRok to proxy data sources
NgRok is a product that creates a secure tunnel from your data source to the internet. You can read more about it using the link below:
Last updated