Serenity LookupEditor Pass Parameter And Change LookupKey

This post I will show you guys how to pass parameter into lookup editor, filter lookup items or change lookup key by parameter’s value

Demo:

We will need to create a custom lookup editor by typescript, build solution and generate t4 template then use it for your lookup field.

Demo just has 2 fields, a radio button (Enum type) and dropdown (lookup editor).

When user changes radio button value, we will reset lookup items corresponding.

---

MyLookupEditor.ts

namespace [YOUR_NAMESPACE] {

    @Serenity.Decorators.registerEditor()
    export class MyLookupEditor extends
        Serenity.LookupEditorBase<Serenity.LookupEditorOptions, any> {

        public myId: number;

        constructor(container: JQuery, opt: Serenity.LookupEditorOptions) {
            super(container, opt);
        }

        protected getLookupKey() {
            return this.buildLookupKey(this.myId);
        }

        protected getItems(lookup: Q.Lookup<any>) {
            var customLookup = Q.getLookup(this.buildLookupKey(this.myId));

            let items: any = super.getItems(customLookup);

            // this is demo about filtering lookup items

            // only take item that has Id % 5 = 0 (5, 10, 15, 20...)
            items = items.filter(x => Q.toId(x.Id) % 5 == 0); // here 'Id' field is hardcode for demo

            // just take maximum first 5 items
            if (items.length >= 5) {
                return items.slice(0, 5);
            }
            else {
                return items;
            }
        }

        private buildLookupKey(id?: number): string {

            //demo switch lookup key by id

            if (id == 100) {
                return "Default.County";
            } else {
                if (id == 200) {
                    return "Default.State";
                }
                else {
                    return "Supplier.Supplier"; // default
                }
            }
        }
    }    
}

---

MyEnum

[EnumKey("Default.MyEnum")]
public enum MyEnum
{
    County = 100,
    State = 200
}

---

Row.cs

[RadioButtonEditor(EnumKey = "Default.MyEnum")]
public MyEnum? MyOption
{
    get { return (MyEnum)Fields.MyOption[this]; }
    set { Fields.MyOption[this] = (Int32)value; }
}

[MyLookupEditor]
public Int32? TestLookup
{
    get { return Fields.TestLookup[this]; }
    set { Fields.TestLookup[this] = value; }
}

---

Form.cs

[FormScript("YOUR_FORM_SCRIPT")]
[BasedOnRow(typeof(Entities.YOUR_ROW), CheckNames = true)]
public class YOUR_FORM
{
    public Int32 MyOption { get; set; }

    [DisplayName("Test Lookup")]
    public Int32 TestLookup { get; set; }
}

---

Dialog.ts

constructor() {
    super();

    this.form.MyOption.change(e => {
        let currentValue = Serenity.EditorUtils.getValue(this.form.MyOption);
        //let currentText = Serenity.EnumFormatter.format(MyEnum, Q.toId(currentValue));
        
        //Q.notifySuccess(`You selected ${currentText}, lookup items will be reloaded`);

        // clear old value
        this.form.TestLookup.value = null;

        // pass value into lookup editor and update items
        this.form.TestLookup.myId = currentValue;
        this.form.TestLookup.updateItems();

        // select first lookup item after changing
        if (this.form.TestLookup.items && this.form.TestLookup.items.length > 0) {
            Serenity.EditorUtils.setValue(this.form.TestLookup, this.form.TestLookup.items[0].id);
        }                
    });
}

Hope this small tutorial will help someone !