This plugin is a versatile and user-friendly tool for executing custom JavaScript, parsing XML data, and performing advanced database searches in your Bubble mobile app. It provides a seamless way to extend your app's functionality by integrating custom code execution and dynamic data manipulation, all without complex coding. Whether you're looking to implement unique features, manage data efficiently, or create powerful search capabilities, this plugin simplifies the process, enhancing the flexibility and performance of your mobile app.
Prerequisites
This plugin is designed specifically for the mobile version of the Bubble editor. To test the plugin on your mobile device, use the TestFlight app available at: https://testflight.apple.com/join/phtrt5zv
⚠️
Please note that the testing app is currently available for iOS only.
How to setup
Setting up the Zeroqode Toolbox Mobile plugin is straightforward as it doesn't require external API keys or services. Simply follow these steps:
Install the plugin from the Bubble plugin marketplace.
Add any of the plugin elements to your mobile app's pages.
For the Search Mobile element, ensure you set the App Origin field correctly with your app's URL (e.g., "https://your-app.bubbleapps.io/").
Also, for the Search Mobile element, ensure you enabled the Data API.
Open your application in the Bubble editor.
Click on Settings in the left sidebar.
Select the API tab.
Check the box labeled Enable Data API.
Check the boxes next to each data type you want to make accessible via the API.
☝
Later, you will select these type in the “Object type” field of “Get data” action.
Leave unchecked any data types that should remain private.
Implement Privacy Rules (Optional but Recommended).
Go to the Data tab in Bubble.
Select a data type you've exposed in the API.
Click on the Privacy tab.
Configure who can create, read, update, or delete records.
Plugin Element Properties
Custom JS Mobile
Element actions
Run — This action is used to start execution of custom JS.
Fields
Title
Description
Type
Return a list
Indicates that the custom JS should return a list of values. Result will be saved in the "value as list" state. Otherwise, result will be saved in the "value" state.
Checkbox
JS Code
The custom JS code to be executed. Note: Don't forget to call "zeroQodeExportDateInState" function to expose the result in to Bubble!
Text
Exposed states
Name
Description
Type
value
Returns the result of custom JS execution as a single value.
Text
value as list
Returns the result of custom JS execution as a list of values.
List of texts
Element events
Name
Description
is completed
This event is triggered when the custom JS was finished successfully.
error occurred
This event is triggered when an error occurred during execution of custom JS.
Parse XML Mobile
Element fields
Title
Description
Type
Result type
Simply select here "Toolbox Type (Toolbox Mobile)".
App Type
Element actions
Convert — This action is used to extract data from XML content based on field names.
Fields
Title
Description
Type
XML content
The XML content to extract the data.
Text
Selected fields
Comma separated names of fields that should be extracted from the XML.
Text
Exposed states
Name
Description
Type
resulted object
Returns lists of data grouped by user-defined field names.
As “Result type” field from element
Search Mobile
Element fields
Title
Description
Type
Result type
Simply select here "Toolbox Type (Toolbox Mobile)".
App Type
App origin
The app origin of your app. E.g., "https://zeroqode-native-demo-02.bubbleapps.io/".
Text
Live version
Indicates where to search data in test environment or live.
Checkbox
Element actions
Get data — This action is used to extract data from database object according to constraints.
Fields
Title
Description
Type
Object type
Select the object you want to search from database.
App Type
Selected fields
Comma separated names of fields that should be extracted from the database object.
Text (optional)
Key
This is the name of the field to which the constraint applies. You can also use the reserved key "_all" for full-text database searches.
Text
Constraint type
This is the type of constraint you want to apply. It can be: 1. "equals" or "not equal" use to test strict equality, for all field types. 2. "is_empty" or "is_not_empty" use to test whether a thing's given field is empty or not, for all field types. 3. "text contains" or "not text contains" use to test whether a text field contains a string, for text fields only. 4. "greater than" or "less than" use to compare a thing's field value relative to a string or number, for text, number, and date fields. 5. "in" or "not in" use to test whether a thing's field is in a list or not, for all field types. 6. "contains" or "not contains" use to test whether a list field contains an entry or not, for list fields only. 7. "empty" or "not empty" use to test whether a list field is empty or not, for list fields only. 8. "geographic_search" use to test if the current thing is within a radius from a central address. To use this, the value sent with the constraint must have an address and a range.
Dropdown
Value
This is the value against which the constraint should be compared. This can be a string, a number, a list, and so on, depending on the type of field defined by the key in the current constraint. If the value type is invalid, Bubble returns a 400, "INVALID_DATA" error. The value must be at least 5 characters.A particular case of a key of type address and a "constraint_type" set to "geographic_search", the value should be an object with the following keys.
Text (optional)
Origin address
The central address that defines the center of the search, should be a string address.
Text (optional)
Range
The range of the radius, is defined in miles or kilometers, depending on the "Unit".
Number (optional)
Unit
The unit to use for the search. It can be miles (default) or km. Constraints with an undefined value are ignored. Do not use '_id' as a key for a constraint. Instead, use the call that retrieves a thing by ID. You can control how the list is sorted using two parameters: "sort_field" and "descending".
Dropdown (optional)
Sort field
The name of the field to use for sorting.
Text (optional)
Descending
This parameter can either be true or false (default).
Checkbox
Child Object type
Comma separated object types that are contained by the "Object type".
Text (optional)
Child Object extract fields
Comma separated name of fields of object types that are contained by the "Object type".
Text (optional)
Exposed states
Name
Description
Type
resulted object
Returns lists of data grouped by user-defined field names.
As “Result type” field from element
Element events
Name
Description
search started
This event is triggered when the search was started.
search ended
This event is triggered when the search was ended.
API Calls (Type)
Toolbox Type
This data type is used throughout the plugin to structure data from various plugin elements. A custom data structure with 17 fields that can store lists of text values.
☝
This API Call should be used only to define the field “Result type” for elements “Parse XML Mobile” & “Search Mobile”.
Returns
Name
Description
Type
field1 to field17
Various fields that store data from plugin elements.
List of texts
Plugin Actions
Send data to API — This action allows you to send XML or JSON data to an external API endpoint.
Fields
Name
Description
Type
XML/JSON data
The XML or JSON content that will be sent to endpoint indicated on "URL endpoint".
Text
URL endpoint
The endpoint URL where to send data.
Text
Workflow example
Here are a few examples of how to use the Toolbox for Bubble Mobile plugin in your Bubble app.
Using Custom JS Mobile to perform calculations
Add the Custom JS Mobile element to your page.
Use the "Run" action with the following JavaScript code.
javascript
// Calculate the square root of a numberconst number =16;const result = Math.sqrt(number);zeroQodeExportDateInState(result);
The result (4) will be stored in the "value" state
Use the "is completed" event to update your UI with the result
Parsing XML data from an external API response
Add the Parse XML Mobile element to your page
Use the "Convert" action with:
XML content: [Your XML string]
Selected fields: title,link,description
Access the parsed data from the "resulted object" state in your workflow
Searching for users within a geographic radius
Add the Search Mobile element to your page
Set the "App origin" field to your app's URL
Use the "Get data" action with:
Object type: User
Key: address
Constraint type: geographic_search
Origin address: New York, NY
Range: 50
Unit: miles
Use the "search ended" event to display the results
