microsoft / windows-appsample-customers-orders-database

This code demonstrates a working customer order database hosted on Azure, implemented in C# and XAML, and ready to form the basis of your Windows Store enterprise app.

page_type	languages	products	statusNotificationTargets
sample	csharp	windows windows-uwp windows-app-sdk	[email protected]

Customers Orders Database sample

A WinUI 3 sample app that showcases UI controls (including a data grid) and the latest design guidance for apps on Windows 11. It also demonstrates features useful to enterprise developers, like Azure Active Directory (AAD) authentication, Sqlite and SQL Azure database integration, Entity Framework, and cloud API services. The sample is based around creating and managing customer accounts, orders, and products for the fictitious company Contoso.

Note - This sample is targeted and tested for Windows 11 Insider Preview using the Insider Preview SDK Build 22000, and Visual Studio 2022 version 17.1 or later. If you are developing on Windows 10, retarget the Contoso.App project to Windows 10, version 2004 (10.0; Build 19041).

May 2022 update

This update includes:

• Updated Plaform

  • WinUI 2.6.1 to 3.

• Updated Target framework

  • .NET 6

• Added new NuGet packages and/or libraries

  • Entity Framework Core Sqlite 6.0.4

• Updated NuGet packages

  • Windows Community Toolkit 7.0.2 to 7.1.2 that supports the 1.0 version of the Windows App SDK which is required for WinUI 3.

• Data migration

  • [SQLite] migrate existing Contoso db Guid values from BINARY BLOB to TEXT BLOB

• Improvements:

  • Remove the native Universal Windows Platform (UWP) AccountsSettingsPane in favor of start using Microsoft Identity Client directly avoiding the usage of interop. More information about the current support of Web Account Manager in WinUI 3 and WebAuthenticationBroker for Reunion.
  • Implements recommended token Caching approach for Desktop apps and now you can close the app and next time you sign-in if token has not expired it is acquired silently.
  • Implements Signout flow by deleting cached tokens.

Previous updates

August 2021 update

This update includes:

• Updated NuGet packages
  • WinUI 2.4 to 2.6.1
  • Windows Community Toolkit 4.0 to 7.0.2
  • Replace Toolkit Expander control with WinUI Expander control, remove Toolkit UI Controls package
• Update UI to follow the latest Windows 11 design principles.
• Bug fixes and enhancements

To see how we updated the UI to look at home on Windows 11, see Updating the Customers Orders Database sample UI to Windows 11.

June 2020 update

This update includes:

• Update to WinUI 2.4
  • Add Microsoft.UI.Xaml NuGet package reference
  • Update <Application.Resources> in App.xaml
• Refactoring for the following WinUI 2.4 controls:
  • ProgressBar
  • NavigationView
  • RadioButtons

Older

• Use of new controls like DataGrid, NavigationView, and Expander.
• Code quality improvements.

Features

This sample highlights:

• The list/details UI pattern
• An editable DataGrid control
• Form layouts
• Authenticating and obtaining user info using Azure Active Directory (AAD)
• Using the repository pattern to connect to Sqlite or SQL Azure databases
• Connecting to an external web API built with ASP.NET Core 6.0.

This sample is designed to cover the core scenarios with minimal architectural complexity. For a more complex, full-featured sample that covers many of the same scenarios using a more sophisticated architecture, see the VanArsdel Inventory sample.

Run the sample

This sample is designed to connect to an instance of Azure Active Directory for authentication and an external service for data. To get you started right away, we've provided some demo data and a test service you can connect to. However, in order to debug and explore the full functionality of the app, you'll need to deploy your own instance to Azure.

Quick start

Prepare your environment

• Windows
  • Windows 11 Insider Preview (Build 22000).
    OR
  • Windows 10. Minimum: Windows 10, version 2004 (10.0; Build 19041).
• .NET 6.0 SDK.
• Visual Studio 2022 version 17.1 or later. You can use the free Visual Studio Community Edition to build and run WinUI 3 apps.
• Windows App SDK 1.0.

To get the latest updates to Windows and the development tools, and to help shape their development, join the Windows Insider Program.

Run

Set your startup project as Contoso.App, the architecture to x86 or x64, and press F5 to run.

Complete setup

To fully explore the sample, you'll need to connect to your own Azure Active Directory and data source. Values you need to fill are in Constants.cs.

• Deskptop app Client Id: Set the AccountClientId field to your Azure account client Id.
• API endpoint: Set the value of the BaseUrl constant to match the url the backing service is running on.
• Set a database connection string: Set the connection string to one of your own local or remote databases.
• Associate this sample with the Store: Authentication requires store association. To associate the app with the Store, right click the project in Visual Studio and select Store -> Associate App with the Store. Then follow the instructions in the wizard.

Run

You can then either start the service running locally, or deploy it to Azure.

Register the Azure Active Directory app (Web api)

First, complete the steps in Register an application with the Microsoft identity platform to register the web application.

App registration setting	Value for this sample app	Notes
Name	active-directory-contoso-customer-oders-protected-api	Suggested value for this sample. You can change the app name at any time.
Supported account types	Accounts in this organizational directory only (Any Azure AD directory - Multitenant)	Required for this sample. Support for the Single tenant.
Expose an API	Scope name: Contoso.ReadWrite Who can consent?: Admins and users Admin consent display name: Act on behalf of the user Admin consent description: Allows the API to act on behalf of the user. User consent display name: Act on your behalf User consent description: Allows the API to act on your behalf. State: Enabled	Add a new scope that reads as follows api://{clientId}/Contoso.ReadWrite. Required value for this sample.

Register the Azure Active Directory app (Client desktop app)

Then, complete the steps in Register an application with the Microsoft identity platform to register the deskptop application.

App registration setting	Value for this sample app	Notes
Name	active-directory-contoso-customer-oders-winui3	Suggested value for this sample. You can change the app name at any time.
Supported account types	Accounts in any organizational directory (Any Azure AD directory - Multitenant)	Suggested value for this sample.
Platform type	Mobile and desktop applications	Required value for this sample
Redirect URIs	https://login.microsoftonline.com/common/oauth2/nativeclient	Required value for this sample
API Permissions	active-directory-contoso-customer-oders-protected-api Contoso.ReadWrite	Add a new delegated permission for api://<application-id>/Contoso.ReadWrite. Required value for this sample.

Run locally (SQLite)

1. Navigate to Constants.cs and complete the following value using the active-directory-contoso-customer-oders-winui3 Application (client) ID from Azure Portal:

   ...
   public const string AccountClientId = "Application_Client_ID_From_Azure_Portal";
   ...

2. Right-click the Contoso.App project, choose Set as Startup Project.

3. Press F5

4. Navigate to Settings and ensure it is selected the SQLite option.

Run locally (REST)

1. Install SQL LocalDB. You could easily install SQL LocalDB using the Visual Studio Installer from Individual Components by searching for the term Local DB or you can find other ways to install this from SQL Server Express LocalDB Installation Media.

   Note: The intructions in here are using SQL Express LocalDB, but you can use any SQL Server instance at your disposal.

2. Open a Windows Terminal and create a new LocalDB instance

   SqlLocalDB.exe create "ContosoDb"
   

3. Start the new LocalDB

   SqlLocalDB.exe start "ContosoDb"
   

4. Copy your LocalDB instance pipe number from the output of executing the following command

   SqlLocalDB.exe info "ContosoDb"
   

5. Create the new Database. Please note that below we used mssql-cli, but you could opt to use any tool for querying SQL Server of your preference.

   mssql-cli -S np:\\.\pipe\LOCALDB#<instance-pipe-number>\tsql\query -E -i .\ContosoApp\Assets\ContosoDb.sql
   

6. Right-click the solution, choose Properties, and choose to start both Contoso.App and Contoso.Service at the same time.

7. Open the appsettings.json file and modify the following field using the active-directory-contoso-customer-oders-protected-api Application (client) ID from Azure Portal:

   ...
   "ClientId": "Enter_the_Application_Id_here"
   ...

8. Navigate to Constants.cs and complete the following values:

   public const string ApiUrl = @"http://localhost:65027";
   ...
   public const string AccountClientId = "Application_Client_ID_From_Azure_Portal";
   public const string WebApiClientId = "Application_Client_ID_From_Azure_Portal";
   ...
   public const string SqlAzureConnectionString = "Data Source=(LocalDB)\\ContosoDb;Initial Catalog=CONTOSODB;Integrated Security=True";
   ...

9. Press F5

10. Navigate to Settings and select the REST option, so the Database Customer Orders sample app starts using the service endpoints.

Deploy to Azure

1. right-click Contoso.Service, choose Publish, and then follow the steps in the wizard.

Code at a glance

If you're only interested in specific tasks and don't want to browse or run the entire sample, check out some of these files:

• Authentication, user info, and Microsoft Graph: AuthenticationControl.xaml and AuthenticationViewModel.cs
• Master/details and form layouts UI: CustomerListPage.xaml, MainViewModel.cs, CustomerDetailPage.xaml, CustomerViewModel.cs, OrderListPage.xaml, OrderListPageViewModel.cs, OrderDetailPage.xaml, OrderViewModel.cs
• Database and REST connections: The Contoso.Repository project.

Design patterns

List/details

The Orders list screen displays a list of orders. It uses visual state triggers to selectively display an additional details panel when the screen is large enough. To see the full details of an order or to edit it, the user selects "Edit" to go to the Order details screen. The Order details screen shows all the info for the order and enables editing. The user can search for additional products to add to the invoice.

Form layouts

The two details screens show how to use headings, labels, and whitespace to organize controls into a form layout. Some controls used include:

• Layout controls: NavigationView, Grid, RelativePanel, StackPanel, Expander
• Data controls: DataGrid, ListView, AutoSuggestBox
• Other controls: Button, HyperlinkButton, context menu

See also

• Web account manager for versions prior to May 2022 changes that are updating to WinUI 3.
• Microsoft Graph
• Http client
• Screen sizes and breakpoints
• Define layouts with XAML
• List/details pattern

windows-appsample-customers-orders-database's Issues

Input validation missing while creating new customer

Hello there,

It's probably the apparent issue, which results in a bug allowing the creation of an empty customer.

Screenshots representing the following 'Empty customer' bug

Regards

Visual Studio 2017

If I open the solution with VS2017.3.2, the ContosoService project gets somehow converted, but then I can't build the project because of this error:
Fody: No configured weavers. It is possible you have not installed a weaver or have installed a fody weaver nuget into a project type that does not support install.ps1. You may need to add that weaver to FodyWeavers.xml manually. eg. <Weavers><WeaverName/></Weavers>. see https://github.com/Fody/Fody/wiki/SampleUsage

AppBarButton in CommandBar Rendering Issue

Hello,

I have a one project in that AppBarButton not rendered properly so i tried in this one and had same issue here.

FYI: In Other Project, I have 1 CommandBar in Listview Item Template in that I have 4 AppBarButton. If a List has 4-5 rows and i tried to navigate one page to other and vice versa. I have noticed memory increased as well as CommandBarDefaultLabelPosition.Right in some cases where label position is by default bottom.

I don't know root cause...any help will be appreciated...

On app minimize the UI freezes if DiagnosticService IsEnabled (by default is true)

Please update to Windows 10, version 1809 or later

When trying to access the xaml files in the view folder Visual Studio gives a warning to update Windows 10 to a version that has not been released yet. This is particularly frustrating.

Errors

How do I launch the app?
I can't launch the app.
I can't start debugging.
Make an `exe'.

Payload contains two or more files with the same destination path 'e_sqlite3.dll'

hello, i got this error when trying to build the Consto.App.

Error Payload contains two or more files with the same destination path 'e_sqlite3.dll'. Source files :
C:\Users\ODaniel.nuget\packages\sqlitepclraw.lib.e_sqlite3.v140\1.1.11\runtimes\win10-x64\native\e_sqlite3.dll
C:\Users\ODaniel.nuget\packages\sqlitepclraw.lib.e_sqlite3.v140\1.1.11\runtimes\win10-x86\native\e_sqlite3.dll Contoso.App

Is that possible to set color for a cell based on cell value?

Just like CellDecorationStyleSelector in Telerik.

Group by column and remove column remain group by label on datagrid

I have add column 'first name' for group by and remove the column from the group by resulting the group by label remain.

HTTP exceptions are not handled anywhere

If any of the http repository async calls error out (timeout, can't marshal response, bad connection, etc.)... well... nothing happens.

This repo is missing important files

There are important files that Microsoft projects should all have that are not present in this repository. A pull request has been opened to add the missing file(s). When the pr is merged this issue will be closed automatically.

Microsoft teams can learn more about this effort and share feedback within the open source guidance available internally.

Merge this pull request

Customer View Details does not correctly show the detail information

Hi;

When I run the application and click detail on customer, the program always show "Kelly She" information doesn't matter the customer I clicked. Please fixed it.

Thanks

ViewCustomerPage doesn't show correct information if navigated back from OrderPage.

Hello, I see the Issue#16 with CustomerDetailPage is fixed, but now there's another issue.

Steps to reproduce:

• Create a new customer (for example, Mr. Z)
• Save the customer details
• Click Add order
• On the order page, press Cancel, or go back
• Now, the program should go back to customer Mr. Z, that was already created and we were just adding an order to that customer.
• But the program goes to a new customer page.

This bug didn't happen before this fix

Sorry for the delayed response to this issue. We've just released a bunch of updates for this sample, including a fix for this bug. The solution is just that the NavigationCacheMode for the CustomerDetail page should be set to Disabled so the customer data isn't cached. See this commit for the fix: 423b80b

Originally posted by @jwmsft in #16 (comment)

Upgrade inventory sample also to winui3 and add azure ad

https://github.com/Microsoft/InventorySample

Cannot load App Project

D:\Windows-appsample-customers-orders-database-master\Windows-appsample-customers-orders-database-master\ContosoApp\ContosoApp.csproj : error : Der Objektverweis wurde nicht auf eine Objektinstanz festgelegt.

did a compile - works for the two other projects

AppxBundleManifest.xml not in root

When following the quick launch instructions I'm getting this error. I can't find a copy of the file anywhere.

DEP0700: Registration of the app failed. [0x80073CF9] Rejecting a request to register from AppxBundleManifest.xml because the manifest is not in the package root. Contoso.App

Error getting the DbContextOptionsBuilder setup.

I am receiving the following error when I load the project in VS 2017 community edition. I don't know if there is something else I need that is not in the readme.md or what. I tried attaching the Microsoft.data.splite project to it and it had no effect.

'DbContextOptionsBuilder' does not contain a definition for 'UseSqlite' and no extension method 'UseSqlite' accepting a first argument of type 'DbContextOptionsBuilder' could be found (are you missing a using directive or an assembly reference?)

Migrations

How are we supposed to do database migrations? Can a guide be added to the README.md? When I tried to use migrations I got an error:

Startup project 'Contoso.Repository' targets framework '.NETStandard'. There is no runtime associated with this framework, and projects targeting it cannot be executed directly. To use the Entity Framework Core Package Manager Console Tools with this project, add an executable project targeting .NET Framework or .NET Core that references this project, and set it as the startup project; or, update this project to cross-target .NET Framework or .NET Core. For more information on using the EF Core Tools with .NET Standard projects, see https://go.microsoft.com/fwlink/?linkid=2034705

OrderDetailPage error when saving an order

When you try to save a new order, you get an error:
SqliteException: SQLite Error 19: 'UNIQUE constraint failed: Customers.Id'

XAML unhandled exception right after app start

Hi,

I'm getting an XAML unhandled exception on every app start: "A cycle occurred while laying out the GUI."
The main window is being shown with an empty grid for about 1.5 seconds - then the exception occurs.
Does anyone else have this issue and/or is there a way to fix this?
Here's a screenshot of the exception:

Regards
Kasimier Buchcik

Framework resource extraction failed.

Hello together, i want to debug this app, ,but there is an issue when i want to build this app.

Issue: Framework resource extraction failed. Part of the path "C:\Users\johan\Downloads\Windows-appsample-customers-orders-database-master\Windows-appsample-customers-orders-database-master\ContosoApp\obj\x64\Debug\Microsoft.EntityFrameworkCore.Abstractions\en-US\Microsoft.EntityFrameworkCore.Properties.AbstractionsStrings.resw" could not be found. Contoso.App

XAML Parsing Failed

When i run application in Mobile it gives me....

An exception of type 'Windows.UI.Xaml.Markup.XamlParseException' occurred in ******.exe but was not handled in user code

Additional information: XAML parsing failed.

Note: As per my debugging this is arised due to 'RootSplitView'.

how to proceed with order print in pdf?

I want to print order in pdf format. can you please tell me how should i proceed?