> What if I want Azure AD as my authorization server and not IdentityServer?
-This means your application will be using AzureAD user store for authentication. By registering both angular app and HttpApi to AzureAD, authentication might work but **authorization won't**. Users need to be registered to Abp identity system for auditing, permissions etc. So the flow should be 3rd party registration.
+This means your application will be using AzureAD user store for authentication. By registering both Angular app and HttpApi to AzureAD, authentication might work but **authorization won't**. Users need to be registered to ABP identity system for auditing, permissions etc. So the flow should be 3rd party registration.
## Setting up OpenId Connection
diff --git a/docs/en/Community-Articles/2020-12-04-Event-Organizer/Post.md b/docs/en/Community-Articles/2020-12-04-Event-Organizer/Post.md
new file mode 100644
index 0000000000..b36d83d0ba
--- /dev/null
+++ b/docs/en/Community-Articles/2020-12-04-Event-Organizer/Post.md
@@ -0,0 +1,936 @@
+# Creating an Event Organizer Application with the ABP Framework & Blazor UI.
+
+## Introduction
+
+In this article, we will create an example application that is a simple **meeting/event organizer**: People create events and other people registers to the event.
+
+The application has been developed with **Blazor** as the UI framework and **MongoDB** as the database provider.
+
+> This tutorial is based on my notes that I'd created to implement this application in a workshop. It shows the necessary steps to build the application rather than detailed explanations.
+
+### Source Code
+
+Source code of the completed application is [available on GitHub](https://github.com/abpframework/abp-samples/tree/master/EventOrganizer).
+
+### Screenshots
+
+Here, the pages of the final application.
+
+**Home Page - Event List**
+
+
+
+**Creating a new Event**
+
+
+
+**Event Detail Page**
+
+
+
+## Requirements
+
+The following tools are needed to be able to run the solution.
+
+* .NET 5.0 SDK
+* Visual Studio 2019 16.8.0+ or another compatible IDE
+* MongoDB Server (with MongoDB Compass)
+
+## Development
+
+### Creating a new Application
+
+* Use the following ABP CLI command:
+
+````bash
+abp new EventOrganizer -u blazor -d mongodb
+````
+
+### Open & Run the Application
+
+* Open the solution in Visual Studio (or your favorite IDE).
+* Run the `EventOrganizer.DbMigrator` application to seed the initial data.
+* Run the `EventOrganizer.HttpApi.Host` application that starts the server side.
+* Run the `EventOrganizer.Blazor` application to start the UI.
+
+### Apply the Custom Styles
+
+* Add styles to `wwwroot/main.css`:
+
+````css
+body.abp-application-layout {
+ background-color: #222 !important;
+ font-size: 18px;
+}
+nav#main-navbar.bg-dark {
+ background-color: #222 !important;
+ box-shadow: none !important;
+}
+.event-pic {
+ width: 100%;
+ border-radius: 12px;
+ box-shadow: 5px 5px 0px 0px rgba(0,0,0,.5);
+ margin-bottom: 10px;
+}
+.event-link:hover, .event-link:hover *{
+ text-decoration: none;
+}
+.event-link:hover .event-pic {
+ box-shadow: 5px 5px 0px 0px #ffd800;
+}
+.event-form {
+ background-color: #333 !important;
+ box-shadow: 5px 5px 0px 0px rgba(0,0,0,.5);
+ border-radius: 12px;
+}
+.table {
+ background: #fff;
+ border-radius: 12px;
+ box-shadow: 5px 5px 0px 0px rgba(0,0,0,.5);
+}
+.table th{
+ border: 0 !important;
+}
+.modal {
+ color: #333;
+}
+.page-item:first-child .page-link {
+ margin-left: 0;
+ border-top-left-radius: 12px;
+ border-bottom-left-radius: 12px;
+}
+.page-item:last-child .page-link {
+ border-top-right-radius: 12px;
+ border-bottom-right-radius: 12px;
+}
+.btn {
+ border-radius: 8px;
+}
+.att-list {
+ list-style: none;
+ padding: 0;
+}
+.att-list li {
+ padding: 4px 0 0 0;
+}
+````
+
+* `wwwroot/index.html`: Remove `bg-light` class from the `body` tag and add `bg-dark text-light`.
+
+### Domain Layer
+
+* Add the following `Event` aggregate (with `EventAttendee`) to the solution:
+
+**Event**
+
+````csharp
+using System;
+using System.Collections.Generic;
+using Volo.Abp.Domain.Entities.Auditing;
+
+namespace EventOrganizer.Events
+{
+ public class Event : FullAuditedAggregateRootUpcoming Events
+
+
+
+ @L["Title"]
+
+
+ @L["Description"]
+
+
+ @L["Free"]
+
+
+ @L["StartTime"]
+
+
+
+
+ Upcoming Events
+
+ @if (upcomingEvent.IsFree)
+ {
+ FREE
+ }
+
+
+ @upcomingEvent.AttendeesCount
+
+
+
+ @upcomingEvent.StartTime.ToLongDateString()
+
+
+ @upcomingEvent.Title
+@upcomingEvent.Description.TruncateWithPostfix(150)
+@Event.Title
+
+ 
+ Start time: @Event.StartTime.ToLongDateString()
+
+
+ @if (Event.IsFree)
+ {
+ FREE
+ }
+
+
+ @Event.Attendees.Count
+
+
+ @Event.Description
+
+ @if (CurrentUser.IsAuthenticated)
+ {
+
+
+ @if (!IsRegistered)
+ {
+
+ }
+ else
+ {
+
+ }
+ else
+ {
+
+ Login to attend!
+
+ }
+ You are registered in this event
+ + } +
+ Attendees (@Event.Attendees.Count)
+
+ -
+ @foreach (var attendee in Event.Attendees)
+ {
+
- @attendee.UserName + } +
+
+
+```
+
+`ListService` emits the hookToQuery stream when you call the `this.list.get()` method.
## Usage with Observables
diff --git a/docs/en/UI/AspNetCore/Data-Table-Column-Extensions.md b/docs/en/UI/AspNetCore/Data-Table-Column-Extensions.md
new file mode 100644
index 0000000000..fec0ac71fb
--- /dev/null
+++ b/docs/en/UI/AspNetCore/Data-Table-Column-Extensions.md
@@ -0,0 +1,161 @@
+# Data Table Column Extensions for ASP.NET Core UI
+
+## Introduction
+
+Data table column extension system allows you to add a **new table column** on the user interface. The example below adds a new column with the "Social security no" title:
+
+
+
+You can use the standard column options to fine control the table column.
+
+> Note that this is a low level API to find control the table column. If you want to show an extension property on the table, see the [module entity extension](../../Module-Entity-Extensions.md) document.
+
+## How to Set Up
+
+### Create a JavaScript File
+
+First, add a new JavaScript file to your solution. We added inside the `/Pages/Identity/Users` folder of the `.Web` project:
+
+
+
+Here, the content of this JavaScript file:
+
+```js
+abp.ui.extensions.tableColumns
+ .get('identity.user')
+ .addContributor(function (columnList) {
+ columnList.addTail({ //add as the last column
+ title: 'Social security no',
+ data: 'extraProperties.SocialSecurityNumber',
+ orderable: false,
+ render: function (data, type, row) {
+ if (row.extraProperties.SocialSecurityNumber) {
+ return '' +
+ row.extraProperties.SocialSecurityNumber +
+ '';
+ } else {
+ return 'undefined';
+ }
+ }
+ });
+ });
+```
+
+This example defines a custom `render` function to return a custom HTML to render in the column.
+
+### Add the File to the User Management Page
+
+Then you need to add this JavaScript file to the user management page. You can take the power of the [Bundling & Minification system](https://docs.abp.io/en/abp/latest/UI/AspNetCore/Bundling-Minification).
+
+Write the following code inside the `ConfigureServices` of your module class:
+
+```csharp
+ConfigureYou can only see this if you satisfy the "MyPermission" policy.
+Current tenant name: @CurrentTenant.Name
+} +```` + +## See Also + +* [Multi-Tenancy](../../Multi-Tenancy.md) \ No newline at end of file diff --git a/docs/en/UI/Blazor/CurrentUser.md b/docs/en/UI/Blazor/CurrentUser.md new file mode 100644 index 0000000000..d0d761420a --- /dev/null +++ b/docs/en/UI/Blazor/CurrentUser.md @@ -0,0 +1,22 @@ +# Blazor UI: Current User + +`ICurrentUser` service is used to obtain information about the currently authenticated user. Inject the `ICurrentUser` into any component/page and use its properties and methods. + +**Example: Show username & email on a page** + +````csharp +@page "/" +@using Volo.Abp.Users +@inject ICurrentUser CurrentUser +@if (CurrentUser.IsAuthenticated) +{ +Welcome @CurrentUser.UserName
+} +```` + +> If you (directly or indirectly) derived your component from the `AbpComponentBase`, you can directly use the base `CurrentUser` property. + +`ICurrentUser` provides `Id`, `Name`, `SurName`, `Email`, `Roles` and some other properties. + +> See the [Server Side Current User](../../CurrentUser) service for more information. + diff --git a/docs/en/UI/Blazor/Error-Handling.md b/docs/en/UI/Blazor/Error-Handling.md new file mode 100644 index 0000000000..f43456e3a7 --- /dev/null +++ b/docs/en/UI/Blazor/Error-Handling.md @@ -0,0 +1,62 @@ +# Blazor UI: Error Handling + +Blazor, by default, shows a yellow line at the bottom of the page if any unhandled exception occurs. However, this is not useful in a real application. + +ABP provides an automatic error handling system for the Blazor UI. + +* Handles all unhandled exceptions and shows nice and useful messages to the user. +* It distinguishes different kind of exceptions. Hides internal/technical error details from the user (shows a generic error message in these cases). +* It is well integrated to the [server side exception handling](../../Exception-Handling.md) system. + +## Basic Usage + +There are different type of `Exception` classes handled differently by the ABP Framework. + +### UserFriendlyException + +`UserFriendlyException` is a special type of exception. You can directly show a error message dialog to the user by throwing such an exception. + +**Example** + +````csharp +@page "/" +@using Volo.Abp + + + +@code +{ + private void TestException() + { + throw new UserFriendlyException("A user friendly error message!"); + } +} +```` + +ABP automatically handle the exception and show an error message to the user: + + + +> You can derive from `UserFriendlyException` or directly implement `IUserFriendlyException` interface to create your own `Exception` class if you need. + +> You can use the [localization system](Localization.md) to show localized error messages. + +### BusinessException and Other Exception Types + +See the [exception handling document](../../Exception-Handling.md) to understand different kind of Exception class and interfaces and other capabilities of the Exception Handling system. + +## Generic Errors + +If the thrown `Exception` is not a special type, it is considered as generic error and a generic error message is shown to the user: + + + +> All error details (including stack trace) are still written in the browser's console. + +## Server Side Errors + +Errors (like Validation, Authorization and User Friendly Errors) sent by the server are processed as you expect and properly shown to the user. So, error handling system works end to end without need to manually handle exceptions or manually transfer server-to-client error messages. + +## See Also + +* [Exception Handling System](../../Exception-Handling.md) \ No newline at end of file diff --git a/docs/en/UI/Blazor/Overall.md b/docs/en/UI/Blazor/Overall.md index cf8287f0de..a249dd354b 100644 --- a/docs/en/UI/Blazor/Overall.md +++ b/docs/en/UI/Blazor/Overall.md @@ -150,6 +150,12 @@ ABP makes this possible by auto registering components to and resolving the comp Resolving a component from the Dependency Injection system makes it possible to easily replace components of a depended module. +## Error Handling + +Blazor, by default, shows a yellow line at the bottom of the page if any unhandled exception occurs. However, this is not useful in a real application. + +ABP provides an [automatic error handling system](Error-Handling.md) for the Blazor UI. + ## Customization While the theme and some modules come as NuGet packages, you can still replace/override and customize them on need. See the [Customization / Overriding Components](Customization-Overriding-Components.md) document. \ No newline at end of file diff --git a/docs/en/UI/Blazor/Page-Header.md b/docs/en/UI/Blazor/Page-Header.md new file mode 100644 index 0000000000..2c7921bbd2 --- /dev/null +++ b/docs/en/UI/Blazor/Page-Header.md @@ -0,0 +1,3 @@ +# Blazor UI: Page Header + +TODO \ No newline at end of file diff --git a/docs/en/UI/Blazor/Routing.md b/docs/en/UI/Blazor/Routing.md new file mode 100644 index 0000000000..31a5637b51 --- /dev/null +++ b/docs/en/UI/Blazor/Routing.md @@ -0,0 +1,24 @@ +# Blazor UI: Routing + +Blazor has its own [routing system](https://docs.microsoft.com/en-us/aspnet/core/blazor/fundamentals/routing) and you can use it in your applications. ABP doesn't add any new feature to it, except one small improvement for the [modular development](../../Module-Development-Basics.md). + +## AbpRouterOptions + +Blazor `Router` component requires to define `AdditionalAssemblies` when you have components in assemblies/projects other than the main application's entrance assembly. So, if you want to create razor class libraries as ABP modules, you typically want to add the module's assembly to the `AdditionalAssemblies`. In this case, you need to add your module's assembly to the `AbpRouterOptions`. + +**Example** + +````csharp +Configure