Customizing generated application (Angular) (Angular)

This article shows how to customize the code that Radzen generates for your application.

Code generation ignore list

By default Radzen generates code for your Radzen application pages and data sources (Angular components, OData controllers and model classes).

If you want to tweak the code you can do so in one of two ways:

1. By following the Radzen extensibility rules and writing your custom code in the provided extensibility hooks listed later in this article.
2. By adding the file(s) you want to modify in Radzen’s code generation ignore list. This section shows how this is done.

Important! The Code generation ignore list is advanced feature that should be used only if none of the other extensibility methods work for you.

You can add a certain file, list of files or entire directories to Radzen’s code generation ignore list by going to the application settings. Then add a list of files or directories separated by a new line in the Code generation ignore list textbox.

The ignore list follows the gitignore conventions. Here are a few examples:

client\src\app\home

Stop generating files in the client\src\app\home directory.

client\src\app\home
client\src\app\*product

Ignore the client\src\app\home directory and all directories that look like client\src\app\*product e.g. client\src\app\add-product, client\src\app\edit-product.

server\Startup.cs

Ignore the specified file.

Here is a quick FAQ about ignored files:

What happens to ignored files

Radzen will not longer output code to files that match the ignore list. For example if you ignore the client\src\app\home directory and you make changes in any of those files e.g. home.component.html those changes will persist. If you later modify that page from Radzen’s designer you will not see any code generated for those changes. The changes will be persisted in the metadata though.

Will Radzen preview my changes in design time

Radzen uses the metadata (stored in the meta directory) to generate the design time experience. This is why any custom modifications to the generated code will not be previewed.

Remove files from ignore list

Remove the ignore rule that matches those files from the application setting and run the application. Radzen will update the files that were in the ignore list.

Adding custom CSS and JavaScript files

You can add custom CSS and JavaScript files to the client/src/index.html file of your Radzen Angular application from the settings. Use the “+” button to add the path or URL of your custom JS or CSS files.

Customizing the Angular code

The code of each page in the generated Angular application is separated in three files. [PAGE-NAME].component.ts, [PAGE-NAME].component.html and [PAGE-NAME]-generated.component.ts. You can add additional code and/or other customizations to [PAGE-NAME].component.ts file only. For example with custom code please visit Custom Component article in our documentation.

Customizing the ASP.NET Core code

When you add Microsoft SQL Server, MySQL, Oracle and/or PostgreSQL data-source, Radzen will generate ASP.NET Core server-side application. Pages are represented by MVC Controllers and you can customize every controller read, add, update and delete operation using C# partial classes and methods.

public partial class CategoriesController
{
    partial void OnCategoriesRead(ref IQueryable<Category> items)
    {
    }

    partial void OnCategoryDeleted(Category item)
    {
        // Executed before pesisting the changes to the database
    }

    partial void OnAfterCategoryDeleted(Category item)
    {
        // Executed after persisting the changes to the database.
    }

    partial void OnCategoryUpdated(Category item)
    {
        // Executed before pesisting the changes to the database
    }

    partial void OnAfterCategoryUpdated(Category item)
    {
        // Executed after persisting the changes to the database.
    }

    partial void OnCategoryCreated(Category item)
    {
        // Executed before pesisting the changes to the database
    }

    partial void OnAfterCategoryCreated(Category item)
    {
        // Executed after persisting the changes to the database.
    }
}

Public Partial Class CategoriesController
    Private Partial Sub OnCategoriesRead(ByRef items As IQueryable(Of Category))
    End Sub

    Private Partial Sub OnCategoryDeleted(ByVal item As Category)
    End Sub

    Private Partial Sub OnAfterCategoryDeleted(ByVal item As Category)
    End Sub

    Private Partial Sub OnCategoryUpdated(ByVal item As Category)
    End Sub

    Private Partial Sub OnAfterCategoryUpdated(ByVal item As Category)
    End Sub

    Private Partial Sub OnCategoryCreated(ByVal item As Category)
    End Sub

    Private Partial Sub OnAfterCategoryCreated(ByVal item As Category)
    End Sub
End Class

The execution of Microsoft SQL Server stored procedures can be extended as well. Please visit Stored procedure default parameter value article.

For example how to invoke custom server-side method please visit Invoke custom server-side method article.

For example how to extend server authenticated please visit Authentication and Authorization article.

Custom Startup

You can extend your .NET application configuration too by adding a partial Startup class e.g. Startup.Custom.cs. There are two partial methods that you can specify - OnConfigureServices and OnConfigure.

namespace <MYourAppNamespace>
{
    public partial class Startup
    {
        partial void OnConfigureServices(IServiceCollection services)
        {
        }

        partial void OnConfigure(IApplicationBuilder app, IWebHostEnvironment env)
        {
        }
    }
}

Custom server validation

You can add custom server validation using partial classes/methods for Delete, Update and Create.

public partial class CategoriesController
{
    partial void OnCategoryDeleted(Category item)
    {
    }

    partial void OnCategoryUpdated(Category item)
    {
        if (item.CategoryName == "Invalid")
        {
            throw new Exception("Custom error message");
        }
    }

    partial void OnCategoryCreated(Category item)
    {
        //
    }
}

Public Partial Class CategoriesController
    Private Partial Sub OnCategoryDeleted(ByVal item As Category)
    End Sub

    Private Partial Sub OnCategoryUpdated(ByVal item As Category)
        If item.CategoryName Is "Invalid" Then
            Throw New Exception("Custom error message")
        End If
    End Sub

    Private Partial Sub OnCategoryCreated(ByVal item As Category)
    End Sub
End Class