A colorful breakdown for developers, learners, and architects navigating Power Platform customization.
When working with Model-Driven Apps (MDA) in the Power Platform, you’ll often encounter the concept of Web Resources. These are virtual files stored in Microsoft Dataverse that help extend app functionality, improve the user interface (UI), and support localization for global users.
Think of web resources as your app’s building blocks for customization—they allow you to add scripts, styles, visuals, and configuration elements that make an app more dynamic and user-friendly.
This guide walks you through the 9 key types of web resources, their file formats, and practical use cases developers should know.
1. JavaScript (.js)
Purpose: Add client-side logic to forms.
Use Cases:
- Field validation (e.g., prevent saving a form with invalid data)
- Conditional visibility (show/hide fields dynamically)
- Custom notifications (alerts, warnings, or info messages)
- Event handling (
onLoad,onSave,onChange)
👉 Example: Automatically calculate and populate a “Total Amount” field when quantity or unit price changes.
2. HTML (.html, .htm)
Purpose: Embed custom UI components.
Use Cases:
-
Custom dashboards
-
Interactive help pages
-
Panels inside forms or the SiteMap for enhanced navigation
👉 Example: Embedding an HTML page that shows live sales data charts inside the app.
3. CSS (.css)
Purpose: Style HTML web resources.
Use Cases:
-
Apply custom branding (company colors, fonts, etc.)
-
Build responsive layouts for embedded content
-
Create themes for HTML dashboards
👉 Example: Giving an embedded help page the same look and feel as the corporate intranet.
4. RESX (.resx)
Purpose: Provide localized strings for multi-language support.
Use Cases:
-
Build global-ready apps
-
Translate dynamic labels and messages
-
Switch UI text based on user’s language settings
👉 Example: Displaying "Submit" in English, "Enviar" in Spanish, and "Soumettre" in French automatically.
5. XSL (.xsl)
Purpose: Transform XML data for display.
Use Cases:
-
Render custom views
-
Format XML data into readable reports
-
Generate dynamic presentations from raw data
👉 Example: Converting XML-based order data into a styled, printable invoice.
6. Image (.png, .jpg, .gif, .ico)
Purpose: Enhance the app’s visual experience.
Use Cases:
-
Command bar icons
-
SiteMap graphics
-
Visual cues on forms and tabs
👉 Example: Using a company logo in the app header or an icon for a custom command.
7. Data (.txt, .csv)
Purpose: Store static data or configuration files.
Use Cases:
-
Reference lists
-
Control logic for scripts
-
Sample datasets for testing
👉 Example: A CSV file containing country codes that a script can reference for form validation.
8. XML (.xml)
Purpose: Store structured configuration data.
Use Cases:
-
Ribbon (command bar) customizations
-
App settings and preferences
-
Metadata definitions
👉 Example: Defining which custom button appears in the command bar and linking it to a JavaScript function.
Why This Matters
Understanding web resources is crucial for anyone customizing Model-Driven Apps. They allow you to:
✅ Customize the user experience with tailored forms and dashboards
✅ Localize apps for multi-language organizations
✅ Build scalable, maintainable enterprise solutions that adapt to business needs
Pro Tip: Always plan and structure your web resources carefully—naming conventions, versioning, and reusability are key to long-term maintainability.
