Translation

Translating Entities and Properties

Spiderly lets you customize how entity and property names appear across the app, not just for translation, but also for:

• Customizing labels (e.g. by default, on a text input field, Spiderly shows ProductName as the label. When you add a translation attribute with the value Product Name, it automatically regenerates the label using that value)
• Excel export filenames
• Validation messages

When you add translation attributes to a class or property, these translations are automatically integrated into Spiderly’s generated code, but you can also use them freely throughout your custom logic wherever needed.

Built-in Supported Languages:

• English
• Serbian (Latin)

[Translate{LanguageTag}] Attribute

This attribute applies to both entity classes and their properties.

When Applied to an Entity Class:

• Generates translations for the YourEntityName key on both the frontend and backend.

When Applied to a Property:

• Generates translations for the YourPropertyName key on both the frontend and backend.
• Used as the default input field label in the generated Angular form component.
• Used in both server and client-side validation messages (e.g., Field 'Email address' can not be empty).

Example:

[TranslateEn("User")]
[TranslateSrLatnRS("Korisnik")]
public class UserExtended : BusinessObject<long>
{
    [TranslateEn("Email address")]
    [TranslateSrLatnRS("Email adresa")]
    public string Email { get; set; }
}

[TranslatePlural{LanguageTag}] Attribute

This attribute is applied only to entity classes and defines the plural form of the entity's name for use throughout your app.

Usage:

• Generates translations for the YourEntityNameList key on both the frontend and backend.
• Table titles (used by default when generating pages with the 'add-new-page' Spiderly command; this can be customized).
• Excel export filenames (when [TranslateExcel{LanguageTag}] value is not specified).

Example:

[TranslatePluralEn("User points")]
[TranslatePluralSrLatnRS("Korisnički poeni")]
public class UserPoint : BusinessObject<long>
{
    // Entity properties
}

[TranslateExcel{LanguageTag}] Attribute

This attribute is applied only to entity classes and specifies the filename used for exporting that entity's data to Excel throughout your app (e.g., from a Spiderly-generated data table view).

Fallback Behavior:

• First tries to use [TranslatePlural{LanguageTag}] value.
• If [TranslatePlural{LanguageTag}] value is not available, uses 'YourEntityNameList'.

Example:

[TranslateExcelEn("Users_Excel")] // Will generate: Users_Excel.xlsx
public class User : BusinessObject<long>
{
    // Entity properties
}

Changing Default Language

By default, Spiderly uses English (en) as the primary language. If you want to change the default language, you'll need to update the language tag in both your backend and frontend configurations.

Built-in Supported Language Tags:

• en
• sr-Latn-RS

Language Tag Update:

1. Open the Backend\YourAppName.WebAPI\Startup.cs file and update the SpiderlyConfigureServices call by passing your desired language tag:

public class Startup
{
    public void ConfigureServices(IServiceCollection services)
    {
        services.SpiderlyConfigureServices<YourAppNameApplicationDbContext>("your-language-tag");
    }
}

2. Open the Frontend\src\app\app.config.ts file and update the provideSpiderlyTransloco configuration:

export const appConfig: ApplicationConfig = {
  providers: [
    provideSpiderlyTransloco({
      preloadLangs: ['your-language-tag'],
      availableLangs: [
        'your-language-tag',
        'your-language-tag.generated',
      ],
      defaultLang: 'your-language-tag',
      fallbackLang: 'your-language-tag.generated',
    }),
  ]
};

Custom Frontend Translations for Multilingual Apps

Add a Translation Key-Value Pair

Open the appropriate language file under Frontend\src\assets\i18n folder, for example: en.json.

Then, add a new key-value entry like this anywhere in the file: "KeyForTranslation": "Translated text".

You can now reference this key in your TypeScript or HTML files.

Use Translation in TypeScript (.ts)

Inject the TranslocoService and use its translate method:

// ... other imports
import { TranslocoService } from '@jsverse/transloco';

@Component({
  templateUrl: './your.component.html',
})
export class YourComponent {

  constructor(
    // ... other injections
    private translocoService: TranslocoService
  ) {}

  ngOnInit() {
    const translatedText = this.translocoService.translate('KeyForTranslation');
  }
}

Use Translation in HTML (.html)

Add TranslocoDirective into Angular component imports:

@Component({
  templateUrl: './your.component.html',
  imports: [
    // ... other imports
    TranslocoDirective,
  ],
})
export class YourComponent {
  // ...
}

Use the directive with Angular's *transloco syntax:

<ng-container *transloco="let t">
    {{t('KeyForTranslation')}}
</ng-container>

Custom Backend Translations for Multilingual Apps

Use Case Example

Let's say you want to throw a translated exception message, based on the active culture (e.g., English):

throw new Exception(Terms.YourExceptionKey);

If that's the case, open the Backend\YourAppName.Shared\Resources\Terms.resx file and add a new entry with the key YourExceptionKey and a culture-specific value, for example: Your exception message.

Spiderly will automatically pick the correct translation at runtime based on the active culture settings.