How to Change OutSystems App Icons Per Environment
OutSystems developers often juggle multiple environments – development, testing, and production. Accidentally deploying or testing in the wrong environment can lead to confusion or even costly mistakes. One simple but effective solution is to set different app icons for each environment, giving you a clear visual cue every time you open your app.
In this guide, OutSystems Developer Kenneth Alberto walks you through the process of changing your OutSystems app icon per environment, so you always know exactly where you are working.
Why Change App Icons Per Environment?
- Visual Confirmation: Instantly recognize if you’re in Dev, Test, or Prod.
- Avoid Costly Mistakes: Prevent deploying or testing in the wrong environment.
- Professional Workflow: Makes your app management cleaner and more organized.
Step 1: Prepare Your Icons
Start by creating distinct icons for each environment. For example, use your standard icon for Production and add a “DEV” label for Development.
- Organize your icons in a resource folder with subfolders for each environment (e.g., prod, dev).
- Inside each environment folder, create subfolders for iOS and Android.
- Each platform folder should contain all required icon sizes. OutSystems provides a list of required icon sizes and a JSON template to help you prepare.
Step 2: Compress and Import Icons
- Zip your resource folder (containing all icons and subfolders).
- Open your application module in Service Studio.
- Go to the Data tab, right-click Resources, and select Import Resource. Choose your zipped icon file.
Step 3: Configure Icons in Extensibility Settings
- Click the module name and open Properties.
- Under Extensibility Configuration, use the JSON template provided by OutSystems.
- Specify the resource file you imported and define the location and density for Android icons. For iOS, specify the width and height for each icon.
- For this example, the default (Production) icon is set to the prod folder.
Step 4: Publish and Generate a Build
- Publish your changes.
- Generate a new build to apply the updated icons.
- Deploy the build to your Production environment. Both Dev and Prod may still show the same icon at this point.
Step 5: Change the Icon for the Development Environment
- Go to OutSystems Lifetime and search for your application.
- Click Settings for the application.
- Select the Development environment.
- Scroll down to Extensibility Configuration and select Custom.
- Click Copy from Default to duplicate your JSON config.
- Change the target directory from prod to dev in the JSON so it points to your Dev icon folder.
- Save your changes.
Step 6: Generate a New Build for Dev
- Return to Service Studio and generate a new build for the Development environment.
- After installing, you’ll see two apps-one for Dev, one for Prod-each with its own distinct icon.
Final Result
You now have unique icons for each environment, making it easy to see at a glance where you’re working. This small change can have a big impact on your workflow and peace of mind.
YouTube Description
Learn how to change your OutSystems mobile app icons per environment (Dev, Prod, etc.) for better clarity and safer deployments! In this step-by-step guide, Associate Developer Kenneth Alberto shows you how to prepare, import, and configure icons using OutSystems Service Studio and Lifetime. Perfect for OutSystems developers who want to avoid confusion and keep their workflows organized.
LinkedIn Post Caption
🚀 OutSystems Dev Tip: Visually distinguish your app environments by setting custom icons for Dev, Test, and Prod!
Associate Developer Kenneth Alberto shares a practical step-by-step guide to help you avoid mistakes and streamline your workflow.
Check out the full tutorial and never second-guess your environment again! 👇 #OutSystems #DevTips #LowCode #AppDevelopment
