How We Built & Deployed a Mobile-Based Canvas App for Unified Time, Expense (with Receipts) & Material Submission with Project-Based Approvals for a US Cybersecurity Firm

Table of Contents

• 1. Customer Scenario
• 2. Solution Overview
• 3. Key UX Features
• 4. Functional Implementation
• 5. Solution Walkthrough
• 6. Architecture & Integration Approach
• 7. Business Impact
• 8. FAQs
• 9. Conclusion

A Texas-based cybersecurity firm specializing in operational technology (OT) security for oil rigs manages multiple concurrent field projects using Dynamics 365 Project Operations.

Employees and resources were responsible for logging:

1. Time entries
2. Expense entries (travel, accommodation, airfare, etc.)
3. Material usage logs (equipment, parts, consumables, etc.)

However, the system was not designed for mobile-first usage, and processes were fragmented across multiple interfaces.

Key Challenges

1. Field engineers & other Resources could not efficiently submit entries from mobile devices
2. Time, expense, and material tracking existed in separate workflows
3. Approval processes had to be restricted to project-specific stakeholders
4. Project managers lacked real-time visibility into resource usage
5. • Delays in submission can cause downstream billing and reporting issues

Project tracking accuracy can get compromised, and reporting delays directly affected client communication and billing cycles.

CloudFronts designed and deployed a unified mobile application using Power Apps (Canvas Apps) integrated with Dynamics 365 Project Operations.

Objective:

One app → All submissions → Controlled approvals → Real-time visibility

What the App Enables

For Field Users:

1. Submit time entries (daily or weekly)
2. Create expense entries with receipt validation
3. Log material consumption against projects
4. Track submission status instantly

For Project Approvers:

1. View only entries related to assigned projects
2. Approve or reject submissions directly from mobile
3. Maintain audit-ready approval workflows

The application is designed with a strong focus on usability for both resources and project approvers, ensuring a seamless mobile experience across submission and approval workflows.

1. Day Mode / Week Mode Toggle

The app provides a flexible entry experience through a dual-mode interface:

1. Day Mode: Enables detailed entry for a single day, ideal for precise logging and corrections.
2. Week Mode: Allows bulk entry across multiple days, reducing effort for repetitive data entry.

This flexibility significantly improves usability across different working styles and scenarios.

2. Calendar-Based Swipe Navigation

The application introduces a Dynamics-style calendar navigation with swipe support, allowing users to:

1. Traverse across multiple days or weeks effortlessly
2. View and manage multiple submission records in sequence
3. Navigate between historical and current entries with minimal effort

This mobile-first interaction design reduces friction in high-frequency data entry scenarios.

3. Unified Submission & Approval Experience

The UI/UX is intentionally designed to mirror the complete lifecycle of a record, ensuring consistency between submission and approval stages.

Each record follows a structured lifecycle aligned with Dynamics 365 stages:

1. Submitted
2. Pending
3. Approved
4. Rejected
5. Recall Requested
6. Recall Request Approved
7. Recall Request Rejected

The interface dynamically adapts based on the current stage:

1. Action buttons (Approve, Reject, Recall, etc.) are conditionally visible
2. Status indicators are clearly displayed
3. Users experience the same structured flow from creation to closure

This ensures clarity, reduces errors, and improves user confidence in the system.

4. Dynamic Action-Based UI (Smart Button Behavior)

The app intelligently modifies UI controls based on record state:

1. Submit button appears only for draft entries
2. Approve/Reject buttons are visible only to project approvers
3. Recall option is available only after submission
4. Post-approval states restrict further edits

This enforces role-based and state-based control, preventing invalid actions and maintaining process integrity.

5. Conditional Receipt Upload for Expense Entries

Expense submission logic is enhanced with category-driven validation:

1. Mandatory: Airline tickets, OT hardware purchases
2. Optional: Meals, local travel

This balances compliance requirements with user convenience, avoiding unnecessary friction.

6. On-Demand Data Refresh

Users can manually refresh data within the app to:

1. Fetch the latest submission and approval statuses
2. Sync newly created or updated records
3. Ensure real-time visibility without relying solely on background refresh

Especially useful in environments with intermittent connectivity.

7. Mobile-First Interaction Design

1. Touch-friendly controls
2. Swipe navigation
3. Lightweight screens for faster performance
4. Minimal navigation depth

This ensures field engineers working in remote or on-site environments can operate efficiently.

This section outlines how the solution was implemented within Dynamics 365 Project Operations and the Power Platform to enable end-to-end submission and approval management.

1. Unified Data Model in Dataverse

All three entry types — Time, Expense, and Material — are structured within Dataverse and linked to:

1. Project
2. Resource (User)
3. Approval records
4. Supporting documents (for expenses)

Each submission creates a corresponding record with a defined lifecycle stage, ensuring consistency across all entry types.

2. Submission Logic from Canvas App

Each submission type follows a structured flow:

1. User selects project and entry type (Time / Expense / Material)
2. Required fields are validated based on entry type
3. Conditional logic enforces:
   1. Receipt requirement (for specific expense categories)
   2. Mandatory fields (based on business rules)
4. Record is created in Dataverse
5. Submission triggers backend approval workflow

This ensures that all records entering the system are complete, validated, and ready for approval processing.

3. Approval Record Creation & Routing

Upon submission:

1. A corresponding approval record is automatically created
2. The system identifies project-specific approvers

Key behavior:

1. Only assigned project approvers can view and act on records
2. Approval actions update the main record status

4. Record Lifecycle Management (Status-Driven System)

Lifecycle:

Draft → Submitted → Pending → Approved / Rejected → Recall Flow

1. Users submit records → moves to Submitted
2. Approvers review → Approved or Rejected
3. Users request recall → Recall Requested
4. Approvers respond → Recall Approved or Rejected

Controlled through:

1. Power Apps UI logic
2. MS Bound Actions for submission and approval handling
3. Dataverse status fields

5. Expense Receipt Handling (Integrated from Previous Solution)

1. Receipt upload enforced conditionally
2. Files stored as Notes (Annotations) in Dataverse
3. Linked to expense records

This eliminates manual document handling and ensures compliance.

The following walkthrough highlights how the mobile-based Canvas App enables end-to-end submission and approval for Time, Expense, and Material entries in a unified experience.

Application Screens

The screenshots below demonstrate the key user journeys, including entry creation, calendar navigation, submission flow, and approval actions.

End-to-End Submission & Approval Flow

The Video below demonstrates the real-time working of the application, covering:

1. Creating time, expense, and material entries
2. Switching between Day and Week modes
3. Submitting records for approval
4. Approvers reviewing and taking action
5. Status updates reflecting instantly in the UI

This walkthrough demonstrates how the application delivers a seamless, mobile-first experience while maintaining strict control over validation, submission, and approval workflows within Dynamics 365 Project Operations.

Core Components

1. Power Apps (Canvas App)
2. Dataverse
3. Bound Actions
4. Dynamics 365 Project Operations

End-to-End Flow

1. User submits entry
2. Record stored in Dataverse
3. Approval triggered
4. Approver action taken
5. Status updated in real time

Design Principle: Keep business logic centralized in Dataverse and actions while keeping UI lightweight.

1. Submission time: Delayed → Real-time mobile submission
2. Approval turnaround: Hours/days → Instant approvals
3. Data accuracy: Fragmented → Structured validation
4. User experience: Multiple tools → Single app
5. Visibility: Delayed → Real-time tracking

1. Can a single Canvas App handle multiple submission types like time, expense, and materials?
Yes. A well-designed Canvas App can unify multiple entry types using conditional logic and modular components while maintaining a consistent user experience.

2. How are approvals restricted to project-specific users?
Approval routing is handled via Bound Actions using project-resource relationships defined in Dynamics 365 Project Operations App, ensuring only assigned approvers for a specific project can act.

3. How is data consistency maintained across different entry types?
All records are stored in Dataverse with a standardized lifecycle and validation rules, ensuring uniform data structure and process flow.

4. Can this solution be extended further?
Yes. It can be extended with Power BI dashboards, billing integration, or AI-based insights for predictive project tracking.

Fragmented submission and approval processes are a major challenge in project-driven organizations.

By implementing a mobile-first Canvas App integrated with Dynamics 365 Project Operations, all critical project inputs are unified into a single workflow.

When submission, validation, and approval are unified, efficiency and data accuracy improve significantly.

Looking to build a similar solution?

Explore how CloudFronts can help you design scalable Power Platform solutions tailored to your business needs.