Solestyles Boutique Digital Transformation – Part 2 – Designing Solestyles Canvas App: A Mobile-First Experience
Solestyles Boutique Digital Transformation – Part 2 – Designing Solestyles Canvas App: A Mobile-First Experience Introduction When you step onto the shop floor at Solestyles Boutique, the first thing you notice is the ease with which our team can now check stock, launch special orders and capture customer requests, all from the same tablet they once used to scan barcodes in fringe-signal car parks. This transformation stems from one pivotal component of the Power Platform solution; the Canvas App. In this second part of the Solestyles blog series, I’ll explore how I crafted a truly mobile-first experience, optimised for speed, simplicity and real-world unpredictability. In the previous post, you saw how tedious paper invoices and chaotic spreadsheets hampered everyday operations and drove our small West Yorkshire boutique to seek a unified, low-code backbone. Now it’s time to talk about the frontline interface. Why choose a Canvas App over other options? What design decisions would allow our shop assistants juggling deliveries, pop-ups and in store customers to navigate thousands of SKUs without a single spin of the wheel? Over the next few sections, I’ll trace the Canvas App’s evolution from its first rough wireframes through to a polished, delegable search screen. You’ll learn how I linked directly to Dataverse and SharePoint Online, organised data into collections for lightning-fast lookups, and engineered the navigation so that any required screen lies just one tap away. Along the way, I’ll share the formulas and patterns (anonymised); like multi-field delegable filtering and offline sync queues that turned a simple gallery into a robust, resilient tool, capable of handling everything from a rogue power cut to a deluge of weekend footfall. Whether you’re already designing your own Canvas App or simply curious about how low-code can revolutionise the customer facing edge of your business, this journey through Solestyles tablet interface should spark ideas and give you practical technical ideas to borrow. So grab your iPad, find a quiet corner of your boutique and let’s dive into the next section, where I’ll set up those crucial data connections and lay the foundations for every screen to come. Setting Up Your Solution & App Before a single control goes on canvas, it’s vital to establish a robust, solution aware foundation. By creating a proper solution and app record and by embedding environment variables and connection references; this ensures that your Canvas App is portable across environments, secure by design and easy to maintain. Creating the Solution Open Power Apps Maker Portal – Go to https://make.powerapps.com and sign in. Navigate to Solutions – In the left-hand navigation pane, click Solutions. New Solution – At the top of the Solutions list, click the New solution button. Define Solution Properties: Display Name: Solestyles Boutique Name: solestyles_boutique Publisher: {{YourPublisherPrefix}} – You can create a new one if one does not exist – don’t ever use the default publisher! Version: 1.0.0.0 Save – This creates an empty solution container for all your components, apps, flows, variables and more. By packaging everything in one solution, deployments become a matter of exporting and importing a single ZIP file, rather than reconnecting each component manually. Adding the Canvas App Record Select Your Solution – From the Solutions list, click the row for Solestyles Boutique to open its overview. Create a New Canvas App – In the command bar under the solution name, click New > App > Canvas app. Configure the App – Name: Solestyles Boutique App Format: Tablet (16:9) Create – Power Apps Studio launches in a new tab with your solution-bound Canvas App. Because the app is created inside the solution, all subsequent links to environment variables and connection references remain intact across environments. Defining Environment Variables & Connection References Rather than embed connection details in individual screens, store them centrally: Environment Variables – In your solution, click New > Environment variable three times to create: DataverseURL (Text): URL of your Dataverse instance SharePointSite (URL): URL of the SharePoint site for legacy lists PaymentGatewayKey (Secret): API key for your payment connector Connection References – Click New > Connection reference and select: Dataverse – bind to DataverseURL SharePoint – bind to SharePointSite HTTP with Entra ID – bind to PaymentGatewayKey Rename them for clarity (e.g. CR_Dataverse, CR_SP, CR_Payment). These references allow your Canvas App to add data sources without hard-coding credentials, streamlining both development and deployments. Best Practices for Solution-Aware Canvas Apps Consistent Naming – Prefix solution components (app_SolestylesCanvas, env_DataverseURL). Avoid Ad-Hoc Connections – Always use your predefined connection references in Power Apps Studio. Document in the Solution – Use the solution’s Description fields to explain each environment variable and reference. Version Control – Increment the solution version with each release and store exported solution files in your source control system. By investing time upfront to structure your solution and by embedding key settings in environment variables and connection references, you set the stage for a stable, secure and scalable Canvas App that can grow with Solestyles Boutique. Connecting to Dataverse & SharePoint The cornerstone of the Canvas App is its seamless access to Solestyles core data: product catalogues, order histories, and customer records; housed in Dataverse, alongside legacy inventory logs stored in SharePoint. Rather than hard-code connection details into each screen, I embraced solution-aware connections and environment variables to ensure consistency across development, test and production environments. At the heart of this approach lies the Data pane in Power Apps Studio. Within the Solestyles solution, I first created two environment variables: DataverseURL pointing to the boutique’s Dataverse instance SharePointSite referencing the SharePoint Online site hosting the legacy lists These variables live in the Solution but outside of the Canvas App, allowing us to migrate the entire solution package without manual reconnects. In the Canvas App’s Data pane, I then added two Connection references, each bound to its respective environment variable. Once configured, the app draws on these references for every data operation, greatly reducing drift between environments and ensuring consistent security settings. Organising