Creating a custom field type for Media with Angular

Questions
,
1

I’m creating a custom media field type in Litium 6 using Angular, I’ve followed the guide (https://docs.litium.com/documentation/architecture/field-framework/creating-a-custom-field-type#Edit%20panel%20controller) but can’t get it right.

In AngularJS, it seems that you populate the field type data in the script files? ("~/Site/Administration/fieldFramework/accelerator_filterFieldEdit.js" & “~/Site/Administration/fieldFramework/accelerator_filterFieldSettings.js” in the guide)

Where do I do this in Angular?

Litium version: 6

2

Look at Edit panel controller where the field is accessed using var field = $scope.model.fields[$scope.model.formField.id].

And in Edit template accessed via model.fields[model.formField.id][model.culture] / model.fields[model.formField.id]['*']

3

Your answer is for AngularJS from what I can see. The custom field types in the Media and Customer areas use Angular.

4

The example on Docs is listing options using <field-selector #control [areaName]="areaName" (onFieldSelect)="onFieldSelect($event.option, $event.checked)" [value]="fields" [visibleIds]="visibleIds"></field-selector>.

  • The field-selector component is only used to list fields (in this case using visibleIds to limit the fields avaliable to select).
  • [value]="fields" is used to set fields to hold the selected items, fields is declared in the base class FieldEditorFieldSelector

If you want to look at how it works or see which other components are avaliable you can find the source to the litium-ui npm-package in folder ../Web/obj/litium-ui.tgz.

Perhaps the components multi-select or single-select works for your needs?

Single-select example:

<single-select 
    [label]="'Gender'"
    [options]="options"
    [idSelector]="idSelector"
    [textSelector]="textSelector"
    (onOptionChange)="onOptionChange($event.option, $event.checked)">
</single-select>

.ts code:

options = [{ id: 0, text: 'Male' }, { id: 1, text: 'Female' }];
idSelector = option => option.id; // to get the Id prop from the option item
textSelector = option => option.text; // to get the Text prop from the option item

onOptionChange(option, checked) {
    // process when an option is checked or unchecked
}
5

Finally, my solution was to make a “simple” list in the template.