Dittofi Change Logs
We have updated the form component to make it easier to do form validation.
The component now comes with a new form group element. The form group element is made up of:
- a label element
- an input box element
- a new form feedback element
The label element is used to give the input boxes labels.
Input boxes included inside of the form group element come with options to validate that inputs are required, have min & max lengths set, are valid emails & so on.
The form feedback element enables you to display a custom feedback message to your apps users based on what they input into the input box.
For the last month, the entire Dittofi team has been focused on reducing the complexity & time required to build apps. To this extent we have released the following features:
1) Binding elements directly to backend actions
Dittofi users are now able to bind elements directly to backend actions. For instance, text variables can now be bound directly to text that is returned by backend actions & (using the repeating with option) other elements can be bound to collections of data that are returned from backend actions.
The advantages of this update are:
- Faster Development: Ditto Developers no longer need to build separate frontend actions to connect with the backend. This accelerates the app-building process, allowing you to achieve more in less time.
- Reduced Code Size: We now generate less frontend code to connect to the backend. This reduction in code size results in a leaner application which is faster to build, faster to understand & easier to increment on.
- Cleaner and Performant Code: We've integrated advanced caching libraries to ensure your generated code is not only cleaner but also optimized for better performance.
2) PATCH Method added to Webservices
You can now use the PATCH method in your API development. The PATCH method enables you to make partial changes to existing resources. The addition of this method extends the no-code options available for API development.
3) Reverse Event for Arrays added on the backend
In previous versions of Dittofi, to reverse the order of elements in an array, you would have needed to add a couple of lines of Google Go code to your app. With this update, you can now achieve the same result by using our Reverse Event that allows you to reverse the order of elements within an array without writing any code.
In this release, our engineers have focused primarily on improving the way that you can work with variables on the frontend of your Dittofi app. This new method of binding eliminates potential user errors and the need for JSX knowledge. Dittofi users will experience benefit in the following ways:
- Users can now bind variables to elements in the app without ever having to enter JSX expressions.
- Functions can be attached to variables for easy transformations. For instance, adding a ToUpper function converts a variable to uppercase. See a list of functions below.
- Custom functions can be created and bound to variables for enhanced flexibility.
- Renaming variables will now propagate throughout the app, preventing any issues that occurred in the past with JSX.
- Null variables are now checked to avoid breaking the app's functionality.
Please note that existing apps will continue to use the old JSX method, while new bindings will be done using the new approach.
Functions to manipulate variables
User are now able to apply lists of functions to variables on the frontend of their app. The functions that are offered include:
- Camel Case: Convert a string to Camel Case (e.g., "hello_world" to "helloWorld").
- Capitalize: Capitalize the first character of a string (e.g., "hello" to "Hello").
- Deburr: Remove diacritical marks from characters in a string (e.g., convert "déjà vu" to "deja vu").
- Kebab Case: Convert a string to kebab-case (e.g., "helloWorld" to "hello-world").
- Lower Case: Convert a string to lower case (e.g., "Hello World" to "hello world").
- Lower First: Convert the first character of a string to lower case (e.g., "Hello" to "hello").
- Replace: Replace occurrences of a pattern in a string with another string.
- Snake Case: Convert a string to snake_case (e.g., "helloWorld" to "hello_world").
- Start Case: Convert a string to Start Case (e.g., "hello_world" to "Hello World").
- To Lower: Convert a string to lower case.
- To Upper: Convert a string to upper case.
- Trim: Remove leading and trailing whitespace from a string.
- Trim End: Remove trailing whitespace from a string.
- Trim Start: Remove leading whitespace from a string.
- Truncate: Truncate a string to a specified length and add an optional truncation ending.
- Upper Case: Convert a string to UPPER CASE (e.g., "Hello World" to "HELLO WORLD").
- Upper First: Convert the first character of a string to upper case (e.g., "hello" to "Hello").
In addition to the updates to the variables, we have also fixed the following bugs.
- HTML Parser Bug: Clicking the update button multiple times will no longer lead to the loss of selection and page clearing.
- Image Resize Bug: Automatic addition of classes to images when resized has been implemented, preserving image styling and preventing loss of formatting.
Major Update - Introducing Meta Attributes
As all Ditto Developers know, the ability to import, edit & export code from your app is an exceptionally powerful feature. We have seen that both coders & no-coders are making extensive use of generative AI tools to write custom code snippets. Ditto Developers are then copying & pasting these snippets directly into their apps, where Dittofi translates these snippets into something that can be edited from within Dittofi’s visual app builder.
This week we’ve added support for meta attributes. Meta attributes make the process of importing custom HTML & CSS code even easier.
Other updates this week:
- We’ve updated our real-time polling solution. You can now run a frontend action on repeat, polling for real-time records in your database.
When building your app using no-code, do you ever feel like even though you follow all of the tutorial guides to a tee, your app is still not giving you the correct result?
When this happens, it is easy to develop no-code superstitions. Like maybe if you hit the shift key twice & tap the backspace button once, the feature you're developing will miraculously start to work.
If your superstitious rituals don't solve your problems, this can lead to frustration, you re-watch the tutorial 20 times & then... a flicker of doubt... is this a bug in the platform or is it me, the user?
To help you keep your sanity, we have released a comprehensive set of user error messages. These messages are designed to catch small mistakes that you make in your app development, but these error messages will also to point out when it is a platform bug vs a misconfiguration.
In the case where it is a misconfiguration, we have started to add more documentation & notes to show you how to get around the errors. Where it is a platform bug, we have developed an early warning system, where our developers will get a notification that something has gone wrong. We then recommend that you temporarily disable the bit of functionality that you're building while our developers fix the platform bug.
This is a big update for us, so if you notice anything where an error message is unclear - please reach out to us either directly in app or at [email protected] & we will jump in to help out where we can.
All items in this release
- Update to the in app user error messages
- Option to disable actions causing build code errors
- Option to disable custom code causing build code errors
- Click through to highlight the line errors in custom code
- Bug fix to the split string event
- Bug fix to prevent partials being lost when HTML / CSS code is updated