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 informationsuch 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. Usemechanisms such as logout triggers or explicit expiry checks to prevent stale or outdateddata 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 informationsuch 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. Usemechanisms such as logout triggers or explicit expiry checks to prevent stale or outdateddata from persisting.
Advanced Use Cases
1. Retaining User Preferences Client Variables are perfect for storing UI preferences suchas dark mode, grid/list views, or language settings. These values can be stored locally andloaded instantly when the app is reopened.
2. Offline Applications For apps with offline capabilities, Client Variables can storetemporary data until synchronization with the server is possible.
3. Multi-App Workflows In multi-app ecosystems, Client Variables can transfer databetween apps seamlessly, reducing the need for repeated user inputs.
4. Cart Management in E-Commerce Applications For e-commerce applications, ClientVariables can be used to store shopping cart details locally. This allows users to retain theircart 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, ClientVariables can store the progress and partially filled data, ensuring that users can resumewhere 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, improvingperformance.
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 browserrefresh.
2. Can we share client variables across applications in OutSystems?
Yes, they can beshared across multiple applications as long as the User Provider of the apps is the sameand both apps are running in the same browser.
3. Does a client variable in OutSystems get cleared on closing the browser?
No, the valueof 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 toJSON using JSONSerialize 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 Variablesare 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?
