Client Variables are a powerful feature in OutSystems, enabling developers to store data directly on the client side for Reactive Web and Mobile applications. In this blog, we will delve deeply into client variables, exploring their uses, best practices, and potential pitfalls, while also addressing some lesser-known nuances to help you maximise their potential.
Client Variables are ideal for scenarios where:
1. Performance Optimization: Reduce server round-trips by caching non-sensitive datalocally.
2. Application State Management: Retain UI state or user preferences, such as themeselection, language settings, or filters.
3. Data Sharing Across Apps: Maintain a consistent state across multiple apps sharingthe same User Provider.
By leveraging Client Variables, developers can create faster, more responsive applicationsthat deliver a seamless user experience.
How to Work with Client Variables in OutSystems
1. Do Not Store Sensitive Information Client Variables are stored in the browser’s localstorage, making them accessible via developer tools. Avoid storing sensitive information, such as passwords, API tokens, or personal data.
2. Use for Read-Only or Non-Critical Data Since users can view and manipulate ClientVariables, limit their use to non-critical data that does not affect core application logic.
3. Manage Data Lifespan Client Variables persist indefinitely unless cleared. Use mechanisms such as logout triggers or explicit expiry checks to prevent stale or outdated data from persisting.
Best Practices for Using Client Variables
1. Do Not Store Sensitive Information Client Variables are stored in the browser’s localstorage, making them accessible via developer tools. Avoid storing sensitive information, such as passwords, API tokens, or personal data.
2. Use for Read-Only or Non-Critical Data Since users can view and manipulate ClientVariables, limit their use to non-critical data that does not affect core application logic.
3. Manage Data Lifespan Client Variables persist indefinitely unless cleared. Use mechanisms such as logout triggers or explicit expiry checks to prevent stale or outdated data from persisting.
Advanced Use Cases
1. Retaining User Preferences
Client variables are perfect for storing UI preferences such as dark mode, grid/list views, or language settings. These values can be stored locally and loaded instantly when the app is reopened.
2. Offline Applications
For apps with offline capabilities, Client Variables can store temporary data until synchronisation with the server is possible.
3. Multi-App Workflows
In multi-app ecosystems, Client Variables can transfer data between apps seamlessly, reducing the need for repeated user inputs.
4. Cart Management in E-Commerce Applications
For e-commerce applications, Client Variables can be used to store shopping cart details locally. This allows users to retain their cart items even if they refresh the page or temporarily navigate away from the app.
5. Storing Progress in Multi-Step Forms
In applications with multi-step forms, Client Variables can store the progress and partially filled data, ensuring that users can resume where they left off if they navigate away or encounter a browser crash.
6. Temporary Caching for API Data
When fetching data from APIs that are relatively static, Client Variables can act as a temporary cache to avoid redundant API calls, improving performance.
Locating and Managing Client Variables
Client Variables are stored in the browser’s local storage. Developers can inspect andmanage them using the browser’s developer tools:
1. Open the developer tools (usually via F12).
2. Navigate to the Application tab.
3. Expand Local Storage and locate the entry corresponding to your application.
Here, you can view, edit, or delete Client Variables as needed.
Curious Questions and Answers
1. Does a client variable get cleared on refresh?
No, it will not get cleared on a browser refresh.
2. Can we share client variables across applications in OutSystems?
Yes, they can be shared across multiple applications as long as the user provider of the apps is the same and both apps are running in the same browser.
3. Does a client variable in OutSystems get cleared on closing the browser?
No, the value of a client variable is retained even if the browser is closed and reopened.
4. How do I clear client variables in OutSystems?
Clear cookies.
5. How can I store table results in a client variable in OutSystems?
Convert the table to JSON using JSON Serialise and store the values in it. However, it is recommended not tostore large amounts of data.
Note: It stores a maximum of 5MB of data, which is roughly 2.6 million characters (depending on the encoding).
6. How do I store database results in client variables?
As recommended, client variables are not designed to store database values. However, you can use IndexedDB for thispurpose. More on this: https://www.outsystems.com/forge/componentoverview/7477/indexeddb-o11
Conclusion
Client Variables in OutSystems provide a powerful mechanism for managing client-side data efficiently. When used correctly, they can significantly enhance application performance and user experience. However, they come with inherent risks that require careful handling and adherence to best practices.
By understanding their capabilities and limitations, you can leverage client variables to build robust, high-performing applications while ensuring security and maintainability.
Are you using client variables in your OutSystems applications?
What Are Client Variables?
