Fields Labels Control

Basic Usage

When you're building a dashboard with Tradinos CMS, the system automatically creates your tables and forms (for creating and updating data) on the frontend. This means less manual work for you!

If you're using this automatic generation feature, you can easily control the names of your table columns and form fields. This is done directly from the backend using the FieldLabel decorator on your DTO (Data Transfer Object) class. This gives your backend full control over how labels appear in the user interface.

export class UserDTO  {
    @IsString()
    @ApiProperty({ type: String })
    @FieldLabel({ label: 'ID' })
    id!: string;

    @IsString()
    @ApiProperty({ type: String })
    @FieldLabel({ label: 'Name' })
    name?: string;
}

In the previous example, we have specified that the id label should be called ID, and the name label should be Name. Neat ain't ?

Localization

In most cases you can't use a fixed text as the label of your data, specifically when building a multilingual dashboard. Tradinos CMS got you covered here as well. you can provide your i18n configuration to the Entity package, as follows:

EntityModule.register({
  // ......
  i18n: { 
    inject: [I18nService],
    useFactory: (i18n: I18nService) => {
      return {
        translate: (token: string) => i18n.translate(token),
      };
    },
  }
})

Basically, a function that takes a token of string type and returns the translated version of this token. And you are all set! now all the labels that you provide to the FieldLabel decorator will be passed to the translation function you provided and translated to the current language requested by the client side.

Nested Forms

In cases of nested forms, you might want to set the label of the nested form to be the value of a property in the nested form.

Single Nested Form

Let us have this example, we have a user object that has inside it the billing information of the user

export class BillingInformationDTO {
    @ApiProperty({ type: String })
    @IsString()
    id!: string;

    @ApiProperty({ type: String })
    @IsString()
    addressLine1!: string;

    @ApiProperty({ type: String, required: false })
    @IsString()
    addressLine2!: string;

    @ApiProperty({ type: String })
    @IsString()
    city!: string;

    @ApiProperty({ type: String, required: false })
    @IsString()
    @IsOptional()
    state!: string;

    @ApiProperty({ type: String })
    @IsString()
    postalCode!: string;

    @ApiProperty({ type: String })
    @IsString()
    country!: string;
}

export class UserDTO {
    @ApiProperty({ type: BillingInformationDTO })
    @Type(() => BillingInformationDTO)
    @ValidateNested()
    billing: BillingInformationDTO;
}

we can specify the label statically as discussed before, even better you can set the label to be the value of a property in the nested DTO

export class UserDTO {
    @ApiProperty({ type: BillingInformationDTO })
    @Type(() => BillingInformationDTO)
    @ValidateNested()
    @FieldLabel({ property: 'country', label: 'Your Country' })
    billing: BillingInformationDTO;
}

Like this the frontend side will set the form label to the country value as provided by the user and it will fall back to show the string "Your Country" if no country was provided.

The nested label can have 2 types: forced and editable, using the default type, forced type will set the value of the nested property and won't allow the user to edit the value

export class UserDTO {
    @ApiProperty({ type: BillingInformationDTO })
    @Type(() => BillingInformationDTO)
    @ValidateNested()
    @FieldLabel({ property: 'country', label: 'Your Country', type: 'forced' })
    billing: BillingInformationDTO;
}

In the other hand using editable will give the user the freedom of changing this value at any time.

export class UserDTO {
    @ApiProperty({ type: BillingInformationDTO })
    @Type(() => BillingInformationDTO)
    @ValidateNested()
    @FieldLabel({ property: 'country', label: 'Your Country', type: 'editable' })
    billing: BillingInformationDTO;
}

Type Safety

To be consistent with TypeScript's type safety system the FieldLabel decorator allow you to optionally specify nested DTO type as well as I18n translations type (if available)

export class UserDTO {
    @ApiProperty({ type: BillingInformationDTO })
    @Type(() => BillingInformationDTO)
    @ValidateNested()
    @FieldLabel<BillingInformationDTO,I18nTranslations>({ property: 'country', label: 'labels.billing' })
    billing: BillingInformationDTO;
}